Best of HTML — December 2024

  1. 1
    Article
    Avatar of devtoDEV·1y

    100+ Frontend Projects to level up your Skills

    Finding interesting frontend projects to work on can be challenging for both beginners and experienced developers. This post shares a GitHub repository with over 100 frontend projects, complete with source code. The projects range from beginner to advanced levels, covering a variety of applications like calculators, e-commerce websites, and more. Tips on how to select, analyze, and customize these projects are also provided to help developers improve their skills and build an impressive portfolio.

  2. 2
    Article
    Avatar of communityCommunity Picks·1y

    High Performance Images: 2024 Guide

    Learn how to optimize images for faster website performance in 2024 by choosing the right format, adjusting resolution, using lossy compression, embedding images, and implementing lazy-loading. These techniques improve Core Web Vitals, reduce load times, and enhance user experience.

  3. 3
    Video
    Avatar of wdsWeb Dev Simplified·1y

    The CSS Display Property is Changing Forever

    The CSS display property now accepts two values, enhancing flexibility in layout design. Initially, the display property could only define the element's own layout, but advancements allow specifying how child elements behave with values like flex, grid, and more. New properties like 'contents' and 'flow-root' offer additional control, such as preventing margin collapsing. This new approach provides greater flexibility and precision in web design layouts.

  4. 4
    Article
    Avatar of bramBram.us·1y

    More options for styling <details>

    Chrome 131 introduces new styling options for <details> and <summary> elements, allowing properties other than 'block' and the use of the ::details-content pseudo-element. While currently only supported in Chrome, these features are expected in Safari soon.

  5. 5
    Article
    Avatar of kirupaKirupa·1y

    Preserving the Pixel Art Look in Web Content

    Learn how to preserve the classic 8-bit pixel art look in modern web content by using specific HTML and CSS properties. The post covers making images pixelated using the image-rendering property, loading and embedding custom pixel fonts, and disabling anti-aliasing to retain the sharp, jagged appearance characteristic of pixel art. It also emphasizes testing designs across different browsers and devices for consistency.

  6. 6
    Article
    Avatar of csstipCSS Tip·1y

    Overflow/scrollbar detection using modern CSS

    Detecting overflow or scrollable elements using modern CSS techniques is possible through scroll-driven animation. This information can be stored in a variable at the root level for various uses like styling elements on the page. The method works well with Chrome and doesn't necessarily require style queries, offering simpler alternatives for targeting elements.

  7. 7
    Article
    Avatar of logrocketLogRocket·1y

    Styling HTML <details> and <summary> with modern CSS

    The <details> and <summary> HTML elements, known as a disclosure widget, have become easier to style with modern CSS. This guide covers customizing these elements, addressing issues with interactivity and browser support. It demonstrates animating the opening and closing states using the new interpolate-size property, styling the marker for aesthetic improvements, and creating exclusive accordion components. The guide emphasizes accessibility and offers alternatives for consistent cross-browser styling.

  8. 8
    Article
    Avatar of hnHacker News·1y

    Lightweight HTML templating library for any-side rendering

    Mizu is a versatile HTML templating library that supports any-side rendering, allowing developers to create dynamic content easily. The post demonstrates how to use Mizu with Deno, Node.js, and other environments to render HTML and generate static files. Examples show the usage of Mizu's render method to inject context into templates and generate different file types.

  9. 9
    Article
    Avatar of trevorlasnTrevor Lasn·1y

    CSS ::target-text for Text Highlighting

    The ::target-text pseudo-element in CSS allows native text highlighting when users visit a URL containing a text fragment, simplifying text sharing and navigating to specific text on a webpage without modifying HTML or using JavaScript. It's useful for documentation, educational platforms, support pages, and blog posts. Most browsers also support right-clicking selected text to 'Copy link to highlight' for the same functionality.

  10. 10
    Video
    Avatar of designcourseDesignCourse·1y

    Using Cursor to write JavaScript

    Learn to create and animate a radial progress bar that ties to the scroll location on a webpage, utilizing HTML, CSS, and JavaScript. The guide walks through setting up the project, linking necessary scripts, and using Cursor to streamline code generation for smooth scrolling and progress calculation.

  11. 11
    Article
    Avatar of uxuiUX/UI·1y

    Beer Product Card with hover effect (HTML+CSS)

    Detailed demonstration of an Itaipava Litrão Beer product card structured with HTML and styled with CSS, along with screenshots and links to the GitHub repository and live demo.

  12. 12
    Article
    Avatar of tailwind_templatesTailwind Templates·1y

    Grocery store ecommerce tailwindCss html template

    Discover a new Tailwind eCommerce HTML template designed for optimal online shopping experiences. It features responsive design, customizable components, and is optimized for speed, ensuring your store stands out.

  13. 13
    Article
    Avatar of frontendmastersFrontend Masters·1y

    Multi-State Buttons – Frontend Masters Boost

    Discover an innovative method for creating multi-state user interface controls using stacked HTML radio buttons and CSS. This technique leverages the CSS pointer-events property to cycle through different states on each click, providing a dynamic and practical UI for tasks such as tagging search results. The guide includes coding examples and key considerations for usability and accessibility.

  14. 14
    Article
    Avatar of talhaHtml·1y

    What are the best tools/resources to learn in depth HTML and CSS?

  15. 15
    Article
    Avatar of communityCommunity Picks·1y

    HTMX Saved Template Engines

    HTMX extends the capabilities of template engines like Django's by allowing developers to build dynamic web apps with less Javascript. It simplifies the process of creating interactive UIs by using custom attributes within HTML to perform AJAX requests and update content dynamically. This approach can enhance page speed and user experience, offering flexibility similar to client-side frameworks while staying within a template engine environment.

  16. 16
    Article
    Avatar of codigeeCodigee·1y

    Honeypot field is nice way to catch bots in your website

    A honeypot field is an effective way to catch bots by adding a visually hidden field that real users won't see but bots will fill out. Using a purposefully misspelled field name enhances this trick.

See all HTML archives