Best of HTML — May 2024

1. 1
   Video

   Awesome·2y

   7 Modern HTML Features You Should Know

   Stay up to date with modern HTML features that you might not be familiar with. Learn about dialogues, the data list element, color picker, HTML capture attribute, and more.

   1.9K

   80
2. 2
   Article

   Community Picks·2y

   New alternatives to innerHTML

   New alternatives to innerHTML have been implemented in browsers. The setHTML function is a safe method that does not execute script, while setHTMLUnsafe is an unsafe method that poses a risk of XSS attacks. The Sanitizer API helps put the naming of setHTMLUnsafe in context. The setHTMLUnsafe function is useful for declarative shadow DOM. The getHTML function allows users to retrieve HTML content, with the ability to serialize shadow DOM.

   176

   3
3. 3
   Article

   asayer·2y

   Understanding the Holy Grail Layout Pattern in CSS

   Learn about the Holy Grail layout pattern in CSS, its advantages in web design, and common use cases. See how it differs from other layout patterns and how to implement it using CSS Grid.

   172

   7
4. 4
   Article

   Lobsters·2y

   7.css

   7.css is a CSS framework for building interface components that look like Windows 7. It is built on top of the GUI backbone of XP.css, which is an extension of 98.css. This framework relies on the usage of semantic HTML and does not contain any JavaScript.

   130

   5
5. 5
   Article

   Community Picks·2y

   Learn Accessibility

   An evergreen accessibility course and reference to level up your web development. Learn about digital accessibility, measurement, ARIA and HTML, content structure, keyboard focus, JavaScript, images, color and contrast, animation and motion, typography, video and audio, forms, patterns, components, design systems, design and user experience, automated and manual accessibility testing, and assistive technology testing.

   94

   1
6. 6
   Article

   web.dev·2y

   What's new in the web

   The post discusses the recent updates and additions to Baseline, including the Web Platform Dashboard, RUM Archive integration, container queries, :has() selector, subgrid in CSS grid layout, CSS Nesting, <search> element in HTML, responsive video, inert attribute, color-mix() function, :user-valid and :user-invalid pseudo-classes, Compression Streams API, Declarative Shadow DOM, and Popover API.

   86
7. 7
   Article

   Community Picks·2y

   Join us for the next Frontend Challenge: June Edition

   The Frontend Challenge: June Edition has two June-themed prompts: CSS Art and Glam Up My Markup. Participants can submit their projects using the provided submission templates. The challenge ends on June 9 and winners will be announced on June 11.

   84
8. 8
   Article

   DEV·2y

   How to Create the Perfect Transparent Login Form

   Learn how to create a stylish and see-through login form using HTML, CSS, and JavaScript. Follow step-by-step instructions to design the form structure, style the background image, style the login box, make the title look good, style the email and password sections, style the labels and text boxes, and finally make the login button look good. The result is a simple and attractive login form that can be customized further.

   78

   2
9. 9
   Article

   Lobsters·2y

   State of HTML 2023

   The State of HTML survey covers a wide range of topics including accessibility, web components, and more. The report includes improved chart customization features.

   56

   1
10. 10
    Article

    Community Picks·2y

    How To Create React Elements with JSX

    Learn how to create React elements with JSX, including capturing click events on buttons and conditionally showing elements.

    50

    3
11. 11
    Article

    DEV·2y

    Animating Numbers

    This tutorial teaches how to create a web component for animating numbers using CSS and JavaScript. It covers the HTML attributes and cross-browser fixes for the component.

    38

    2