Best of HTML — January 2024

1. 1
   Article

   freeCodeCamp·2y

   Less Common HTML Tags You Should Know – With Example Code

   Discover some lesser-known HTML tags that can be useful in web development. Learn about the <base>, <aside>, <q>, <var>, <samp>, <datalist>, <progress>, and <dialog> elements, and the importance of using semantic HTML.

   119

   6
2. 2
   Article

   freeCodeCamp·2y

   How to Use Template Literals in JavaScript

   Learn how to use template literals in JavaScript. Understand the syntax, benefits, and use cases. Explore tagged template literals for advanced string manipulation.

   59
3. 3
   Article

   freeCodeCamp·2y

   What is the Document Object Model? DOM for Beginners

   Explanation of how HTML, CSS, and JavaScript work together in web development. Introduction to the DOM and how it enables JavaScript to manipulate web pages.

   47

   1
4. 4
   Article

   freeCodeCamp·2y

   JavaScript Game Dev Tutorial – Build Gorillas with HTML Canvas + JavaScript

   This post is a tutorial on how to create a modern version of the game Gorillas using JavaScript and the HTML canvas element. It covers the background of the game, project setup, overview of the game logic, drawing the scene, fitting the size of the city to the browser window, aiming the bomb, and animating the bomb's flight. The tutorial also includes info panels showing the angle and velocity of the throw, and covers hit detection and celebrating the winning player.

   42
5. 5
   Article

   freeCodeCamp·2y

   How to Create Custom CSS Animations with Examples

   Learn how to create custom CSS animations using keyframes. Understand the prerequisites, create your first animation, add multiple keyframes, create repeat animations, use timing functions, and combine multiple animations.

   42

   1
6. 6
   Article

   Community Picks·2y

   JavaScript: How to Get the Value of a Select or Dropdown List

   Learn how to get the value and text of a select or dropdown list in HTML using JavaScript or jQuery.

   32

   3
7. 7
   Article

   DEV·2y

   A Guide to Styling Tables

   A guide to styling tables, including structuring tables, styling tables with collapsed borders, adding zebra stripes, and aligning text.

   31

   2
8. 8
   Article

   Hacker News·2y

   Only 90s Web Developers Remember This

   The post reminisces about the practices and innovations in web development during the 90s, including the 1x1.gif trick and the use of pixel fonts. It also mentions the use of DHTML and the obsession with buttons.

   31

   3
9. 9
   Article

   asayer·2y

   Pushing the Limits of Styling: New and Upcoming CSS Features

   This post explores new and upcoming CSS features such as advanced selectors, text and layout adjustments, color manipulation, nesting and scoping, and functional additions. It discusses the benefits and use cases of container queries, style queries, the :has() selector, text-wrap: balance, dynamic viewport units, subgrid, wide-gamut color spaces, color-mix(), nesting, and scoped styles. The post also mentions the browser compatibility of these features.

   28
10. 10
    Article

    LogRocket·2y

    Build an off-canvas menu with <dialog> and web components

    Learn how to build an off-canvas menu using the <dialog> element and web components. Ensure accessibility and enhance user experience by following the steps provided. Style the menu using CSS to achieve desired animations and positioning.

    26

    2
11. 11
    Article

    freeCodeCamp·2y

    nth-child() vs nth-of-type() Selectors in CSS – What’s the Difference?

    This post explains the difference between :nth-child() and :nth-of-type() CSS selectors and provides examples of how they work.

    23
12. 12
    Article

    Hacker News·2y

    HTML Spirograph

    A tool made in HTML and JS using the Canvas element to create beautiful drawings

    23

    1
13. 13
    Article

    freeCodeCamp·2y

    How to Use the <input> Element to Access a Mobile Device's Camera

    Learn how to use the <input> element to access a mobile device's camera. Understand the type and capture attributes, limitations and considerations for video capture, and alternative approaches. Discover practical implementation examples and enhance the functionality of your web applications.

    21