web-dev-resources.com has been redesigned completely! Check it out!

You should definitely use Linux.

Today's newsletter is going out in 3 hours. You're gonna love this one. Subscribre here: markodenic.tech. It's free!

Marko Denic – Web Developer, Mentor & Creator of Developer Tools

Explore practical web development tips, free tools, and real-world tutorials on markodenic.tech. Join thousands of developers enhancing their skills with weekly insights on coding, productivity, and content monetization.

markodenic.tech

HTML tip: Use the name attribute on multiple `<details>` tags so only one can be open at a time. It works like an accordion. Demo: markodenic.com/snippets/ht...

You can now ask AI about my articles. markodenic.com/latest

I made this little bot tracker yeasterday to see which AI bots hit my site. Here's how it looks so far:

my new favorite sentence: "look it up!"

you can now rate articles on markodenic.tech

CSS tip: Use the `scroll-margin-top` property to prevent a sticky header from covering up content after clicking on an anchor.

Turns out that goose farming isn’t so great after all.

Inspired by @csaba.bsky.social, I also redesigned my personal website. Let me know what you think! markodenic.com

Did you know PHP has an in-built linter: `php -l index.php` Very handy for large scripts.

Name a more iconic trio: AI, Git and Coffee.

Git is still the best thing that happened to developers.

Are you reading the code AI writes? I check the diff (almost) every time.

CSS tip: Use `overscroll-behavior: contain` to stop a modal from scrolling the page behind it.

Useful websites for developers: ~ Hosting netlify.com ~ HTML templates htmlrev.com ~ Code Snippets snippeteditor.com ~ Icons lineicons.com ~ UI inspiration websitevice.com

HTML tip: You can use the `<meter>` element to display quantities. No JavaScript/CSS is needed.

Who did this?

Share your websites.

Stop adding external link icons manually. CSS does it automatically. `\2197` is the ↗ unicode arrow, consistent across all browsers and fonts. `:not(:has(img))` skips links that wrap images, so the arrow only appears on text links. Zero JavaScript. Zero extra markup. Three lines of CSS.

CSS tip: Use `svh` to stop the mobile address bar from hiding your UI. It guarantees a perfect fit within the visible screen.

This is my website. Guess the stack!

Learn programming by playing games: JavaScript → javascriptquiz.​com Blockchain → cryptozombies.​io SQL → mystery.knightlab.​com Python → codedex.​io CSS → cssbattle.​dev Go → codingame.​com Java → tynker.​com Git → ohmygit.​org

You're still installing libraries for things the browser does natively. Modals. Tooltips. Accordions. Dark mode. Fluid type. All built in. No npm. No JavaScript. 56 features. Free PDF. markodenic.tech/modern-html...

Modern HTML & CSS | Marko Denic

markodenic.tech

CSS tip: Use `text-wrap: pretty;` to make text line breaks look natural and avoid awkward single words on the last line.

CSS tip: Create a responsive grid that adapts to any screen size with just one line of CSS.

Still writing JavaScript for things the browser already does? I turned 56 of those things into a practical guide. No frameworks, no dependencies. Comment "CSS" and I'll send it to you.

I made a new tool for you. markodenic.com/tools/neumo...

Neumorphism CSS Generator

markodenic.com

Learn Git, folks! You're gonna need it. It's getting even more important.