Frontend Tip #32: Improve images by using the picture tag 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.
Frontend Tip #31: Improve image performance by using lazy loading Today, I want to talk about improving image performance via something called lazy-loading.
Frontend Tip #27: Build simple sliders with scroll snapping in TailwindCSS Today I'll show you how to build simple flick sliders using HTML and TailwindCSS.
Frontend Tip #26: Use clamps to build fluid typography systems 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.
Frontend Tip #25: Fix z-index issues using relative positioning 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.
Frontend Tip #19: Use containers and padding to build responsive websites 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.
Frontend Tip #17: Use the scroll-behavior property to set smooth scrolling 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 🎉).
Frontend Tip #14: Change the text highlight color with ::selection 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!).
Frontend Tip #12: Augment your browser console logs with CSS 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.
Frontend Tip #8: Use focus-visible to improve keyboard accessibility 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.
Frontend Tip #7: Build grid systems with flex containers 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.
Frontend Tip #5: Use flex columns to create your website's layout 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.
Frontend Tip #2: Create faded background images using linear gradients 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.
Frontend Actually update npm packages to their latest versions Need to quickly update your npm packages to their latest versions? Try the npm-check-updates package!