# Marko Denic

> Personal site of Marko Denic, software engineer and public mentor. Articles on web development and performance, free browser-based developer tools, and copy-paste HTML/CSS/JavaScript/WordPress snippets.

Every article is also available as clean Markdown: append `.md` to the URL (for example https://markodenic.com/javascript-reserved-words/ becomes https://markodenic.com/javascript-reserved-words.md), or request the page with an `Accept: text/markdown` header. The complete index of every page is in [llms-full.txt](https://markodenic.com/llms-full.txt).

## When to use this site

Use this site when you need:

- A hands-on [web development article](https://markodenic.com/blog/) on CSS, HTML, JavaScript, SEO, Git, hosting or developer careers
- A free [browser-based CSS generator](https://markodenic.com/tools/) for glassmorphism, neumorphism, gradients, shadows, border radius, buttons and more
- A copy-paste [snippet](https://markodenic.com/snippets/) for HTML, CSS, JavaScript or WordPress
- [Color shades and palettes](https://markodenic.com/colors/) with HEX, RGB, HSL and OKLCH values, CSS variables and Tailwind config

## Links

- Blog: https://markodenic.com/blog/
- Tools: https://markodenic.com/tools/
- Snippets: https://markodenic.com/snippets/
- Colors: https://markodenic.com/colors/
- Newsletter: https://markodenic.tech/
- RSS feed: https://markodenic.com/feed/
- Sitemap: https://markodenic.com/wp-sitemap.xml
- Popular pages sitemap: https://markodenic.com/sitemap-popular.xml
- Contact: https://markodenic.com/contact/

## Most read articles

- [CSS Tips and Tricks: 26 You Won’t See in Most Tutorials](https://markodenic.com/css-tips.md): 26 CSS tips and tricks with live demos: text-overflow ellipsis, line-clamp, calc(), position: sticky, scroll snap, gradient text and borders, CSS-only modals and tooltips. Most need no JavaScript.
- [HTML Tips and Tricks: 20 You Won’t See in Most Tutorials](https://markodenic.com/html-tips.md): 20 HTML tips and tricks with examples: mailto and tel links, open links in a new tab, lazy loading, a native accordion, range sliders, fieldset, download links and more. No JavaScript needed.
- [Use Google like a pro](https://markodenic.com/use-google-like-a-pro.md): Googling is one of the most important skills for every developer. Let me show you how to get better at Googling.
- [console.log() in JavaScript: How to Use It + Tips](https://markodenic.com/use-console-log-like-a-pro.md): What console.log() does, where to find console logs in the browser and Node.js, with examples, plus console methods like table(), group() and time().
- [Free certifications for developers](https://markodenic.com/free-certifications-for-developers.md): Certifications can be costly, so I prepared a list of free ones you can take and enhance your credibility.
- [CSS Generators](https://markodenic.com/css-generators.md): You can use CSS generators to avoid some time-consuming tasks.
- [Free Courses](https://markodenic.com/free-courses.md): Education does not have to cost a fortune. I made a list of free courses for you.
- [Make your first open source contribution](https://markodenic.com/make-your-first-open-source-contribution.md): A step-by-step guide to making your first open-source contribution.
- [Free Web Development Resources](https://markodenic.com/free-web-development-resources.md): So, you need some web development resources. Search no more.
- [JavaScript Tips](https://markodenic.com/javascript-tips.md): Let me share with you some really handy JavaScript tips.
- [50 free tools and resources (Part 2)](https://markodenic.com/50-free-tools-and-resources-part-2.md): Free stuff is always exciting. But, what if it is free and awesome?
- [CSS Pulse Animation](https://markodenic.com/css-pulse-animation.md): Enhance user engagement with a smooth pulse animation! This eye-catching effect is perfect for quickly grabbing attention and improving UI interaction. Learn how to implement it now!
- [GitHub repositories to improve skills](https://markodenic.com/github-repositories.md): Free programming books, algorithms, public APIs, and much more.
- [50 Free Tools and Resources for Web Developers](https://markodenic.com/50-free-tools-and-resources.md): A hand-picked list of 50 free tools for web developers: CSS generators, code formatters, UI component libraries, icons and more. Every link manually checked.
- [17 Profitable Business Ideas for Web Developers](https://markodenic.com/17-profitable-business-ideas-for-web-developers-to-start-in-2022.md): The best businesses do not strive on mere “ideas”. They succeed when you solve a problem with a mission and vision.
- [Introduction to CSS if Statements and Conditional Logic](https://markodenic.com/introduction-to-css-if-statements-and-conditional-logic.md): Conditional logic is a familiar concept to anyone who has written a programming language. Languages like JavaScript or Python use if/else statements to evaluate expressions and execute different blocks of code depending on whether the condition is true or false.
- [10 array methods to simplify your code](https://markodenic.com/10-javascript-array-methods-to-simplify-your-code.md): Explanations and examples included. Check it out.
- [Interactive learning tools](https://markodenic.com/interactive-learning-tools.md): Learning how to code in an interactive way is much more fun.
- [Best Websites To Get HTML/CSS Templates](https://markodenic.com/best-websites-to-get-html-css-templates.md): This roundup will save you hours of wasted search time and license headaches.
- [CSS Tutorial](https://markodenic.com/css-tutorial.md): CSS tutorial to kick-start your CSS journey, creating visually appealing web pages by exploring core elements, properties, and techniques.

## Latest articles

- [JavaScript Reserved Words: The Complete List of Keywords](https://markodenic.com/javascript-reserved-words.md): The full list of JavaScript reserved words and keywords, the extra ones reserved in strict mode and modules, words that are only special in context, and the errors you get when you use them as names.
- [Will AI Replace Programmers? What’s Actually Changing](https://markodenic.com/will-ai-replace-programmers.md): Will AI replace programmers? Not the job, but parts of the work. What the data shows, which tasks AI handles, who is most exposed, and what developers can do now.
- [Hide Scrollbar in CSS (and Style a Custom Scrollbar)](https://markodenic.com/hide-scrollbar-css.md): Hide the scrollbar with CSS while keeping scrolling, hide it completely, hide only the horizontal one, prevent layout shift with scrollbar-gutter, and style a custom scrollbar in every browser.
- [BEM in CSS: Block, Element, Modifier Naming Explained](https://markodenic.com/bem-css.md): BEM (Block, Element, Modifier) explained with a real example: the naming rules, how to handle nested elements and modifiers, BEM with Sass, common mistakes, and BEM vs Tailwind and CSS Modules.
- [URLSearchParams: Read and Update URL Query Parameters in JavaScript](https://markodenic.com/urlsearchparams.md): How to use URLSearchParams in JavaScript: get, set, append and delete query parameters, read the current URL, update it without reloading, build fetch URLs, and avoid the common gotchas.
- [CSS !important: What It Does and When to Use It](https://markodenic.com/css-important.md): What !important does in CSS, how it beats specificity, how to override an !important rule, how it works with cascade layers and JavaScript, and better alternatives for most cases.
- [Is HTML a Programming Language? (And What About CSS?)](https://markodenic.com/is-html-a-programming-language.md): Is HTML a programming language? No, it's a markup language. Here's what that means, how HTML, CSS and JavaScript differ, why CSS is a closer call, and why the label doesn't matter for your career.
- [How to Send Code Blocks in Discord (With Syntax Highlighting)](https://markodenic.com/discord-code-block.md): Send code in Discord the right way: inline code, multi-line code blocks, syntax highlighting for JavaScript, Python, CSS and more, colored text with diff, and what to do with code that's too long.
- [CSS ::before and ::after Pseudo-Elements (With Examples)](https://markodenic.com/css-before-after.md): How CSS ::before and ::after work: the content property, the difference between them, and practical examples like icons, custom bullets, overlays, tooltips and decorative shapes.
- [requestAnimationFrame Explained (With Examples)](https://markodenic.com/requestanimationframe.md): How requestAnimationFrame works in JavaScript: the animation loop, delta time for smooth motion on any screen, cancelAnimationFrame, throttling scroll handlers, and when to use CSS instead.

## Tools

- [CSS Text Shadow Generator](https://markodenic.com/tools/text-shadow-generator/): Free CSS text-shadow generator with live preview. Stack up to 8 shadow layers, start from 10 presets (glow, neon, 3D, retro, outline, fire) and copy the CSS or Tailwind class.
- [CSS Box Shadow Generator](https://markodenic.com/tools/box-shadow-generator/): Free CSS box-shadow generator with live preview. Stack up to 8 shadow layers, add inset shadows, start from 12 presets (soft, layered, neumorphic, glow) and copy the CSS or Tailwind class.
- [CSS Gradient Generator: Linear, Radial & Conic](https://markodenic.com/tools/css-gradient-generator/): Free CSS gradient generator. Create linear, radial and conic gradients, pick from presets, then copy the CSS or Tailwind class or download a PNG wallpaper.
- [CSS Pulse Animation Generator](https://markodenic.com/tools/pulse-animation-generator/): Free CSS pulse animation generator. Pick ring, glow, scale or fade, set color, size and speed, and copy the keyframes. Reduced-motion safe.
- [Border Radius Generator: CSS Rounded Corners](https://markodenic.com/tools/border-radius-generator/): Free CSS border-radius generator. Set each corner in px or %, try presets like pill, circle and leaf, and copy the CSS in one click.
- [Neumorphism CSS Generator](https://markodenic.com/tools/neumorphism-css-generator/): Easily generate soft UI and Neumorphism CSS styles. Customize colors, shadows, and copy the code.
- [CSS Button Generator: 127 CSS Buttons to Customize & Copy](https://markodenic.com/tools/buttons-generator/): Design CSS buttons visually: start from 127 ready-made buttons, adjust colors, size, radius and text with a live preview, then copy the HTML and CSS or download a PNG.
- [Tech Acronyms (Initialisms) Explorer](https://markodenic.com/tools/tech-acronyms-explorer/): Look up hundreds of tech acronyms and abbreviations instantly. The Tech Acronyms Explorer is a free tool for developers and IT professionals who want quick, clear definitions of technology initialisms.
- [Glassmorphism CSS Generator](https://markodenic.com/tools/glassmorphism-css-generator/): Free glassmorphism generator: adjust blur, transparency and color, preview the frosted glass effect live, and copy the CSS in one click.
- [QR code generator](https://markodenic.com/tools/qr-code-generator/): Use this free QR code generator to easily create custom QR codes for links, text, and more in just a few clicks.

## Snippets

- [HTML snippets](https://markodenic.com/snippets/html/)
- [CSS snippets](https://markodenic.com/snippets/css/)
- [JavaScript snippets](https://markodenic.com/snippets/javascript/)
- [WordPress snippets](https://markodenic.com/snippets/wordpress/)