Best of HTML — June 2024

1. 1
   Article

   DEV·2y

   New CSS media queries syntax 💥

   The new CSS media query syntax simplifies defining responsive breakpoints, making code cleaner and more intuitive. It offers enhanced clarity, efficiency, and compatibility across modern browsers, streamlining the development process.

   2.3K

   98
2. 2
   Article

   Community Picks·2y

   What is this weird CSS Syntax?

   Learn about an interesting CSS syntax involving the adjacent sibling combinator (+) and the asterisk (*) to select non-immediate adjacent elements of the same class. This allows styles to be applied to specific siblings a few elements away when hovering over a targeted element.

   448

   35
3. 3
   Article

   Ahmad Shadeed·2y

   CSS Cap Unit

   The author explores the problem of aligning a box between two words and keeping its height equal to uppercase letters. They propose three solutions and ultimately find the 'cap' unit to be the perfect solution.

   180

   6
4. 4
   Article

   DEV·2y

   🚀 Emmet in VSCode ✨

   Emmet in Visual Studio Code (VSCode) is a powerful tool that speeds up HTML and CSS coding by expanding abbreviations into complete code structures. Key features include abbreviation expansion, code snippets, and fast navigation and editing. Examples showcase creating divs, lists, links, and basic HTML structures, demonstrating how Emmet can streamline the coding workflow.

   167

   9
5. 5
   Article

   freeCodeCamp·2y

   Media Queries vs Container Queries – Which Should You Use and When?

   As the web evolves, new tools like media queries and container queries emerge, offering web developers various ways to make responsive designs. Media queries adapt styles based on the overall viewport size, suitable for different devices. Container queries, however, base their styles on the size of individual containers, promoting modularity and flexibility. While media queries are less effective for complex layouts, container queries support more adaptive component-based designs. Understanding each tool's strengths and considering project requirements will guide their best use in web design.

   109

   2
6. 6
   Article

   Community Picks·2y

   Anchor Links and How to Make Them Awesome

   This post discusses anchor links and how to enhance them using CSS. It covers the basics of creating anchor links, enabling smooth scrolling, adding scroll margin, targeted page anchor styles, and more. It also explores nested scrolling and the difference between scroll margin and scroll padding. Overall, it provides a comprehensive guide to making anchor links awesome.

   75

   6
7. 7
   Article

   LogRocket·2y

   Exploring the CSS :display property: A deep dive

   This guide delves into the CSS display property, exploring its various values, such as block, inline, flex, and grid. It illustrates how these values dictate the layout and behavior of HTML elements. The post also addresses the updated Level 3 specification that allows for both outer and inner display values, offering greater clarity in defining element roles and layouts.

   45

   1
8. 8
   Article

   Smashing Magazine·2y

   Useful CSS Tips And Techniques — Smashing Magazine

   CSS has become more powerful with new features and techniques. Learn about CSS tips and techniques, testing HTML with CSS, self-modifying CSS variables, hanging punctuation, fixing aspect-ratio issues, and the ongoing debate on masonry layout in CSS.

   45
9. 9
   Video

   Awesome·2y

   Svelte 5 Crash Course

   Svelte is a framework that offers simplicity and feels like building apps in plain HTML and JavaScript. It uses components to track state and update the DOM. Reactive state can be declared using runes. Svelte offers native TypeScript support.

   37

   2
10. 10
    Article

    Frontend Masters·2y

    Pure CSS Circular Text (without Requiring a Monospace Font) – Frontend Masters Boost

    Creating circular text with pure CSS allows for more flexibility compared to traditional methods that use monospace fonts. This guide provides steps to split text into segments, position them in a circle, and use perspective to achieve a seamless look. The technique lets you use various fonts including cursive and even emojis, and allows for further customization with colors and animations.

    34