Best of HTML — October 2024

1. 1
   Article

   DEV·2y

   Top 7 Web development projects for beginners

   Gaining practical experience and building a portfolio is crucial for beginners in web development. Seven suggested projects include a personal portfolio website, a to-do list app with advanced features, a product landing page, a simple calculator, a weather app using an API, a responsive blog page with dynamic content, and a mini e-commerce product page. These projects cover essential skills like HTML, CSS, JavaScript, responsive design, API handling, and more.

   510

   6
2. 2
   Article

   Web Tools Weekly·2y

   CSS & HTML, Build Tools, JS Utilities

   A collection of useful web development tools and frameworks including skellyCSS for skeleton screens, tailwind-to-inline for converting Tailwind classes to inline styles, and various other CSS libraries. It also highlights build tools and JavaScript utilities such as Hot Hook, nrr, and UAParser.js. Additionally, it features commercial apps for analytics, interactive FAQs, and drag-and-drop code editors.

   198

   7
3. 3
   Article

   Hacker News·2y

   Video & audio player themes for every web player & framework

   Discover a variety of customizable audio and video player themes for every web player and framework. These themes can be tailored using just HTML and CSS, featuring designs inspired by popular platforms like YouTube, Vimeo, and social media apps. Themes include retro and modern options, each optimized for different types of content and viewer preferences.

   190

   6
4. 4
   Article

   Hacker News·2y

   HTML Form Validation is heavily underused

   HTML form validation is often underutilized despite offering several powerful methods. The `required` attribute prevents empty submissions, while `setCustomValidity` allows for complex validation logic. However, using purely imperative APIs like `setCustomValidity` in a declarative framework can create boilerplate issues. Implementing custom validations, such as async server checks or dependent input fields, showcases the power and flexibility of these APIs. Better native support in HTML standards could improve adoption.

   171

   6
5. 5
   Article

   freeCodeCamp·2y

   How to Build a CSS Component Library and Improve Your Web Development Skills

   Building a CSS component library can dramatically improve UI development efficiency and consistency. Key steps include designing component layouts, structuring them with HTML, styling with CSS, and hosting the CSS file for easy reuse. This process not only speeds up development but also ensures maintainable and scalable code. Benefits include faster development, uniform styling, better maintainability, community support, and customization options. The post details steps for creating, styling, and hosting components, emphasizing the importance of a structured, modular approach to web design.

   76

   1
6. 6
   Video

   Kevin Powell·2y

   My top 5 most popular front-end tips

   The post outlines the top five front-end tips based on the author's short-form video views. It covers various tips like debugging CSS overflows, adjusting favicons for different color schemes, handling HTML input types and modes, modern CSS practices, and strategies for better learning and retaining web development skills outside of tutorials. Key highlights include using an outline to locate hidden elements, using media queries for favicons, enhancing user experience with input fields, and the importance of building projects independently to overcome 'tutorial hell'.

   67
7. 7
   Article

   CSS-Tricks·2y

   Tooltip Best Practices

   Tooltips provide simple text hints for UI controls and must contain only descriptive text. They should use the `aria-labelledby` or `aria-describedby` attributes for accessibility, depending on their purpose. Tooltips should not include interactive content and must be accessible through hover or focus actions. For touch devices, alternatives like Toggletips or integrating the descriptive text in the design are recommended.

   62

   1
8. 8
   Video

   DesignCourse·2y

   Creating Scroll Activated RIVE Animations

   Learn how to create scroll-activated animations using RVE and JavaScript. The post guides you through setting up animations with different timelines and how to control them based on the scroll position using JavaScript. It includes detailed steps on creating the animations in RVE, integrating them with HTML and CSS, and implementing smooth scrolling effects for better user experience.

   55
9. 9
   Article

   asayer·2y

   Leveraging CSS :invalid for Real-Time Data Validation

   The :invalid pseudo-class in CSS allows real-time data validation for form fields without relying on JavaScript or server-side validation. Attributes like 'required' and 'pattern' help create rules to guide users, offering a better user experience. The pseudo-class works across popular browsers, though slight styling differences may occur. Combining :invalid with HTML5 attributes can provide useful visual feedback and error messages. For more complex validations, incorporating JavaScript may be necessary. Following best practices ensures effective and accessible error handling in forms.

   55

   1
10. 10
    Article

    Html·2y

    Essential HTML Projects Every Beginner Should Build

    Building essential HTML projects like a personal portfolio, simple blog layout, product landing page, online resume, and restaurant menu page can vastly improve your web development skills. These projects help you practice structuring content, improving SEO, creating user-friendly layouts, and designing appealing visual elements, providing a solid foundation in HTML.

    51

    4
11. 11
    Video

    Kevin Powell·2y

    At Last! Simple details/summary animation with pure CSS

    Learn how to animate details and summary elements using pure CSS. The guide covers basic styling, the use of interpolate size, managing content visibility, and ensuring animations work seamlessly across different browsers. It also highlights the importance of user agent shadow DOM and how to apply CSS properties efficiently to create smooth animations.

    46

    2
12. 12
    Article

    Full-stack·2y

    The Missing First Step: Frontend Foundations You Can’t Ignore! 🚀

    Frontend development is crucial for creating interactive and engaging web applications. Start with mastering HTML and CSS fundamentals, embrace responsive design principles like media queries and mobile-first design, and hone your JavaScript skills with modern ES6+ features. Utilize CSS frameworks such as Bootstrap or Tailwind to expedite development, dive into component-based frameworks like React, and learn build tools like Webpack or Vite to optimize your code.

    41

    2
13. 13
    Video

    Community Picks·2y

    How To Become A Full Stack Web Developer | A Step By Step Guide

    This guide provides a structured approach to becoming a full stack web developer, divided into three phases: programming, front-end, and back-end. It emphasizes the importance of learning fundamental programming concepts, HTML, CSS, and JavaScript, as well as back-end languages and frameworks. The guide also offers resources for practical learning, including YouTube channels and platforms like Scrimba and CodeWars, and stresses the importance of consistency, project building, and engaging with developer communities.

    42

    1
14. 14
    Video

    Lun Dev Code·2y

    The King Of CSS Timing Functions | CSS Steps

    Timing functions are crucial in creating smooth and natural animations in CSS. While cubic bezier can simulate many timing functions, the steps timing function stands out by creating discrete jumps rather than smooth transitions. This method is particularly useful for animations like game character actions, where each state like jumping, running, or standing is defined by distinct steps.

    36

    2
15. 15
    Article

    CSS-Tricks·2y

    Come to the light-dark() Side

    Implementing dark and light mode in modern CSS has become simpler. Using the 'color-scheme' property on the root element enables automatic switching based on the visitor’s OS preference. Native HTML supports both black-on-white (light mode) and white-on-black (dark mode) themes. The 'light-dark()' function provides fine-grained control over color schemes, and you can use JavaScript to toggle modes and remember user preferences using localStorage or sessionStorage. This approach benefits accessibility and user experience, making websites comfortable for a wider audience.

    35

    3
16. 16
    Article

    asayer·2y

    CSS Image Reflections: A Comprehensive Guide

    Learn how to enhance your website's visual appeal by adding CSS image reflections. This guide provides a step-by-step approach to implementing reflections using various CSS techniques like box-reflect, transform with scaleY, and pseudo-elements. Understand the importance of image reflections for improving user engagement and aesthetics, with examples from real-world applications, and best practices for optimization and accessibility.

    34
17. 17
    Article

    Hacker News·2y

    gosub-io/gosub-engine: A web browser in the making. More info at https://gosub.io

    The Gosub browser engine project aims to create a standalone library for parsing and rendering HTML5 and CSS3 documents. Although still in its early stages, the project supports parsing HTML5 and CSS3 into document trees and offers initial rendering capabilities. The project uses Rust and can be built into WebAssembly. Contributors are welcome to join the development effort, primarily focused on research and proof-of-concepts at this stage.

    31
18. 18
    Article

    CSS-Tricks·2y

    Clarifying the Relationship Between Popovers and Dialogs

    Popovers and dialogs are often confused, but understanding their distinct roles and implementations can clarify their uses. A popover is an on-demand popup triggered by user interaction, while a dialog is a special kind of popover that creates a new window or card. Dialogs can be modal, non-modal, or alert dialogs, and popovers need an accessible role to be recognized. This relationship is important for accessibility and correct implementation on the web.

    30
19. 19
    Article

    DockYard·2y

    Animate Intrinsic Size With CSS

    Animating the size of UI elements with CSS has historically been challenging, especially for properties like height. Modern CSS introduces tools such as CSS Grid and the new `calc-size()` function to make these animations more seamless. CSS Grid allows replicating intrinsic-size animations, while `calc-size()` enables developers to calculate intrinsic sizes natively. While `calc-size()` has limited browser support currently, it shows great promise for future use.

    28
20. 20
    Article

    Brad Frost·2y

    Hire HTML and CSS people

    Many problems in companies, such as poor UX, outdated UI, accessibility issues, performance problems, and delayed product designs, can be solved by hiring competent HTML and CSS specialists.

    25

    3
21. 21
    Article

    Lobsters·2y

    Less htmx is More

    After two years of experience with htmx, the author concludes that using plain HTML wherever possible creates a better user experience and easier maintenance. Instead of adopting a SPA approach with `hx-boost`, which introduces several issues, the recommendation is to use regular links and forms that leverage the built-in capabilities of browsers. Examples are given to demonstrate how to create dynamic content updates without sacrificing the core benefits of traditional page navigation. Advances in browser technology further support this approach, ensuring faster and more reliable web applications.

    24

    1
22. 22
    Article

    HeydonWorks·2y

    The bdo element

    This post explores the <bdo> HTML element, which overrides text directionality to render text in a different direction. The discussion interweaves personal anecdotes and humor while explaining the technical functionality and historical context of the element.

    24

    5