Best of HTMLJanuary 2025

  1. 1
    Article
    Avatar of christianheilmannChristian Heilmann·1y

    Learning HTML is the best investment I ever did

    HTML remains a fundamental technology for structuring web content, offering ease of use, accessibility, and essential interface elements. Despite its simplicity, many developers overlook its importance, leading to improper usage. HTML's robustness has been demonstrated over decades, and it continues to be critical, even with the introduction of new web technologies. Proper usage, such as correctly linking labels to form inputs and adhering to standards, can greatly enhance the usability and maintainability of web pages.

  2. 2
    Article
    Avatar of csstipCSS Tip·1y

    Inverted radius shape with hover effect

    Learn how to combine the inverted radius shape with modern CSS techniques to create a stylish hover animation. The guide uses minimal HTML, is powered by @property and CSS Mask, and is optimized with CSS variables.

  3. 3
    Article
    Avatar of cassidooCassidy's blog·1y

    A couple CSS tricks for HTML <dialog>

    Learn a couple of useful CSS tricks for styling the HTML <dialog> element, including how to blur the dialog backdrop and disable page scrolling when a dialog is open. These techniques enhance the appearance and usability of native dialogs on websites.

  4. 4
    Article
    Avatar of cloudfourCloud Four·1y

    The Difference Between HTML Attributes and Properties

    This post explains the differences between HTML attributes and properties, covering how they behave, when they stay in sync, and their handling peculiarities especially in form elements. Understanding these distinctions is crucial for preventing bugs and ensuring expected behavior in web development.

  5. 5
    Article
    Avatar of hnHacker News·1y

    Every HTML Element

    Explore the diverse world of HTML elements, including their uses and characteristics. This comprehensive guide covers everything from visible to hidden elements, providing examples and insights into their functions. Understand the vast range of HTML elements and their roles in web development.

  6. 6
    Video
    Avatar of phoebeyutbtPhoebe Yu·1y

    Chinese web design: cluttered, but it works. Here's why

  7. 7
    Article
    Avatar of communityCommunity Picks·1y

    A standards first web framework

    Nue is pivoting to become a standards first web framework, prioritizing the use of modern HTML, CSS, and JavaScript without unnecessary abstractions. The framework aims to resolve the complexities introduced by popular JavaScript frameworks like React and focuses on creating efficient, clean, and accessible web designs. Nue promises faster tooling, cleaner code, and faster page loads by leveraging web standards and systematic CSS design systems.

  8. 8
    Video
    Avatar of t3dotggTheo - t3․gg·1y

    The Future of HTMX

    HTMX is an exciting project aimed at simplifying web development by enhancing the usability of HTML without adding unnecessary complexity. Inspired by jQuery, it allows developers to create dynamic web applications without relying heavily on JavaScript. HTMX is designed to let developers easily swap out parts of a web page without reloading the whole page, enhancing user experience while keeping the development process streamlined. This approach is also highly stable and aims to be backward-compatible, ensuring long-term reliability and ease of use.

  9. 9
    Article
    Avatar of frontendmastersFrontend Masters·1y

    Sharing a Variable Across HTML, CSS, and JavaScript – Frontend Masters Boost

    A fun project created a word search puzzle maker using HTML, CSS, and JavaScript. The grid size is set using a variable shared across all three languages. This approach involves defining the variable in Pug (which compiles to HTML), passing it to JavaScript to manipulate the DOM, and to CSS for styling. The use of this shared variable streamlines the development process and makes the code easier to maintain.

  10. 10
    Article
    Avatar of bradfrostBrad Frost·1y

    Balancing Text In CSS

    Balancing text in CSS is essential for better readability and design. Implementing the 'text-wrap: balance' property can help manage how text wraps in headers and other elements.

  11. 11
    Article
    Avatar of smashingSmashing Magazine·1y

    New Front-End Features For Designers In 2025 — Smashing Magazine

    New front-end technologies are simplifying web design by enabling previously complex tasks through easy-to-use HTML and CSS features. These include component-specific styling, relative colors, seamless visual transitions, and container queries. These innovations promise to enhance user interfaces and reduce dependence on JavaScript, making modern web development more streamlined and efficient.

  12. 12
    Video
    Avatar of kevinpowellKevin Powell·1y

    Scroll state queries are on the way! (and a bunch more)

  13. 13
    Article
    Avatar of rubylaRUBYLAND·1y

    How to order attributes on HTML elements

    Ordering attributes on HTML elements consistently can improve code readability and maintainability. Suggested order groups include identifiers, functional attributes, and styles. The identifier group typically only contains the id attribute, functional attributes are broken into variable (e.g., value, checked) and static (e.g., type, for). Styles should consist of class and style attributes. Using a specific order ensures a clean and organized codebase.

  14. 14
    Article
    Avatar of ffocusFrontend Focus·1y

    Frontend Focus Issue 674: January 8, 2025

    Learn how to balance text in CSS, discover new frontend features for designers in 2025, and build a seamless React login page template with session-based authentication. Explore the future potential of htmx as the new jQuery and understand the Triptych Proposals aimed at enhancing HTML capabilities. Check out an open-source color scheme for code, and enjoy a playful DOOM-themed gallery experience in your browser.

  15. 15
    Article
    Avatar of webdevWebDev·1y

    I Created VanillaHTML (a CSS File)

    VanillaHTML is a CSS file designed to make default HTML look modern and pleasant, while also enforcing Semantic HTML practices to improve accessibility. It's not meant to replace CSS but to provide a better starting point for HTML learners and web developers. VanillaHTML encourages good habits and highlights the power of using semantic elements.

  16. 16
    Article
    Avatar of lobstersLobsters·1y

    The Cursed Art of Streaming HTML

    Streaming HTML can be used to create live updates similar to WebSockets or SSEs without needing JavaScript. It ensures important parts of a page are loaded first while the rest follows. This method can be applied to real-time applications like a chat interface. Using iframes and techniques like 'HttpResponse::streaming()', HTML can be streamed effectively. However, challenges like preventing pages from endlessly loading persist, potentially requiring some JavaScript for a complete solution.