In the previous tip I talked about optimizing your images using the loading attribute. Continuing with the theme, I want to talk about using a newer HTML tag called picture to build better-optimized images from an SEO standpoint.

Today, I want to talk about improving image performance via something called lazy-loading.

Today I'll show you how to build simple flick sliders using HTML and TailwindCSS.

Fluid typography is one of those concepts in web design that I feel like is still in its infancy. Not many people know about or use it but it's actually among the most powerful tools for building better responsive websites.

One of the most annoying things in HTML/CSS is bug-fixing a z-index issue. Lucky for you, I'll show you an effective trick to fix z-indexing 99% of the time and it's actually really simple.

aking websites responsive is a skill learned through repetition and experience. Over the years, I've learned that a key aspect of making a website responsive is to use max-width containers along with padding. This isn't to make websites mobile response, but rather, desktop responsive instead.

Back in the old days, I used to use a jQuery script for adding smooth-scrolling to anchors on my websites. Nowadays, we have a native CSS property that can do that for us (hooray for less JS 🎉).

Notice how, by default, the browser applies a sort of blue-ish tint as the background color? You can actually customize what this background color is to any color you want (yes, even your brand color!).

Did you know you can use CSS when using console.log on the browser? That's right, you can change the font color, font size, padding, margin, and more to give your logs a lot more flare.

Accessibility (aka a11y) is a core web vital used by the Lighthouse audit to rank websites accordingly, so its important that the websites we build adhere to the standards expected thereof.

It may come as a surprise that I recommend you use flex containers for building the basic 12-column grid system rather than CSS grid. While CSS grid is great for building literal grids... it's not the best for building a responsive, 12-column grid that most websites today use for layouts.

When you're just starting out on a new page, the first thing you want to tackle is the page's layout. This is where everything on your page will live: its navbar, the main content, and the footer.

Stop using Photoshop to add a gradient on top of your images so you can fade them into background! Instead, let me know show you how you can do it with just HTML and CSS.