Best of HTML — November 2024

1. 1
   Article

   asayer·2y

   Best 7 Practice Projects to Level Up your Skills

   Building hands-on projects is essential for web development growth. This post discusses seven practice projects - To-Do List App, Simple Calculator, Weather App, E-commerce Product Page, Tic-Tac-Toe Game, Real-time Chat Application, and Personal Portfolio Website. Each project helps enhance various skills such as JavaScript event handling, API usage, responsive design, and more. Tips for leveling up include breaking down projects, using version control, seeking help, experimenting, and continual learning.

   675

   25
2. 2
   Article

   Ahmad Shadeed·2y

   Overflow Clip

   Learn about the CSS overflow property, its usage, and how to control content clipping using the overflow: clip value, which is supported by major browsers. Understand the common issues with overflow: hidden and discover practical use cases for overflow: clip in web design, such as hero sections, single-direction clip, and scroll-driven animations.

   140

   2
3. 3
   Article

   DEV·2y

   Why Virtual DOM: Faster Rendering and Performance

   Explores the Document Object Model (DOM) and the virtual DOM, detailing how the browser creates and manipulates the DOM from HTML or XML content. The virtual DOM concept is introduced as a performance enhancement, describing how it maintains a copy in memory to optimize updates and rendering in modern web libraries.

   96

   1
4. 4
   Video

   Kevin Powell·2y

   Stop Writing Extra Code: HTML Inputs Are More Powerful Than You Think

   Developers often overlook the capabilities of HTML inputs and CSS. For example, number inputs can be limited using min and max attributes. CSS pseudo-classes like 'in-range' can enhance user feedback. The color picker input allows users to choose colors from any open window. There's an array of native input features and pseudo-classes that can enrich user interfaces.

   86

   5
5. 5
   Article

   Community Picks·2y

   22 GitHub Repositories for Learning Web Development: HTML, CSS, MERN, Python, and Django

   This post offers a curated list of 22 GitHub repositories ideal for learning various web development technologies, including HTML, CSS, MERN stack, Python, and Django. These resources provide a mix of beginner-friendly and advanced materials, featuring interactive challenges, structured curriculums, and real-world projects to help improve and diversify your web development skills.

   64

   2
6. 6
   Article

   Flavio Copes·2y

   The Path to Learn Web Development

   To become a web developer, it's crucial to understand both theory and practice, starting with the fundamentals of the web such as HTTP, HTML, and CSS. Tools like VS Code, the command line, and Git are essential. JavaScript/TypeScript is recommended for both client-side and server-side programming. Additional knowledge of forms, databases, and front-end frameworks like React or Vue, is also important to create dynamic web applications.

   42

   1
7. 7
   Article

   HeydonWorks·2y

   The br element

   The post discusses the <br> element in HTML, often conflated with tags and elements. It delves into the misuse and necessity of the <br> element, especially in the context of WYSIWYG editors that generate a lot of <br> tags due to their desktop publishing roots. A CSS solution to handle excess <br> elements is shared.

   37

   1
8. 8
   Article

   Misfits Developers·2y

   The Front-End Developer’s Journey: A Poem made using ChatGPT 😂

   The post describes the poetic journey of a front-end developer, emphasizing the core technologies and tools used in front-end development like HTML, CSS, JavaScript, React, TypeScript, and Git. It addresses the challenges and excitement involved in creating responsive and interactive web designs while highlighting the importance of testing and version control.

   35

   4
9. 9
   Article

   Community Picks·2y

   Exploring the browser rendering process

   The post explores the browser's rendering process, detailing the steps from entering a URL to rendering the website on the screen. It covers DNS lookup, TCP/TLS handshake, HTTP request/response cycle, tokenization, creation of the DOM and CSSOM trees, render tree creation, layout calculation, and the painting phase. Understanding these steps can help developers build more efficient websites.

   33

   1
10. 10
    Article

    CSS Selectors·1y

    Mastering :is() and :where() pseudo-class

    Discover the benefits of using the :is() and :where() pseudo-classes in CSS to simplify and manage longer selector groups. The :is() pseudo-class helps maintain cleaner and error-free code by grouping selectors efficiently, while :where() offers zero specificity, allowing styles to be easily overridden. Learn which one to use in different scenarios to optimize your CSS.

    32

    2
11. 11
    Article

    Kirupa·2y

    Ensuring our Canvas Looks Good on Retina/High-DPI Screens

    Learn how to ensure that your canvas drawings look sharp and crisp on both old-school low-DPI screens and modern high-DPI displays. This post explains the concept of downsampling, by generating canvas visuals at a larger size and scaling them down with CSS to maintain their intended size without blurriness. Practical code examples are provided to demonstrate the technique, along with a reusable function to make any canvas high-DPI aware.

    18
12. 12
    Article

    This is Learning·2y

    Write in Astro: the syntax ✍️

    Astro syntax is a superset of HTML, designed to be familiar to developers with experience in HTML or JSX. It supports the inclusion of components and JavaScript expressions, uses JSX-like expressions for variables and dynamic attributes, and allows for dynamic HTML generation using JavaScript functions. Dynamic tags can also be assigned to variables, and Astro supports JSX logical operators, ternary expressions, and fragments. Key differences with JSX include attribute formatting, multiple elements rendering, and support for both HTML and JavaScript comments.

    16
13. 13
    Article

    Techunter·1y

    15 HTML and CSS projects to strong your frontend skill

    A guide featuring 15 practical HTML and CSS projects to help frontend developers enhance their skills. Each project progressively challenges developers by utilizing modern CSS techniques like Grid, Flexbox, and Custom Properties. Detailed guides focus on responsive design and clean code structuring.

    15

    3
14. 14
    Article

    Prettier·1y

    Prettier 3.4: A lot of bug fixes · Prettier

    Prettier 3.4 introduces numerous bug fixes and improvements across various languages and formats. Key changes include better handling of template literals in JavaScript, improved comment formatting in TypeScript, refined string literal escapes, and enhanced formatting for CSS, SCSS, HTML, and Markdown. Notably, experimental syntax support was removed, and several bug fixes aimed at maintaining formatting consistency were implemented.

    15
15. 15
    Article

    CSS-Tricks·1y

    Alt Text: Not Always Needed

    Alt text is essential for providing context to images, especially for screen reader users. While many images need descriptive alt text, there are instances where null alt text is appropriate to avoid redundancy. Key considerations include ensuring alt text helps with task completion, is not repetitive, and is efficient. Proper use of alt text enhances accessibility and user experience.

    15

    2
16. 16
    Article

    CSS-Tricks·2y

    Solved by CSS: Donuts Scopes

    Donut scoping refers to a method of preventing parent component styles from affecting the styles of its contained child components. This challenging CSS issue, introduced by Nicole Sullivan in 2011, has resurfaced with the introduction of the @scope at-rule, which allows for more precise scoping of styles. This rule can define the scope for styles and exclude specific regions, addressing the long-standing problem of CSS's global scope. While traditional methods involve specificity handling and using selectors like :not(), @scope offers a more flexible and comprehensive solution.

    15
17. 17
    Article

    Web Developer·2y

    Good Dev Practices 💡, JS Symbols 🔑, HTML & CSS Cheatsheet 📜, SSH3 🔒

    Learn quick tips for improving product development speed while maintaining quality, explore the Web Authentication API that uses public-key encryption, understand various JavaScript inheritance patterns, and delve into the JavaScript Symbols feature. Additionally, find a handy HTML and CSS cheat sheet, discover open-source icons and illustrations, and secure your communications with SSH3 using QUIC + TLS 1.3.

    15
18. 18
    Article

    Community Picks·2y

    Your CSS reset should be layered

    Cascade layers have become widely available across modern browsers and should be integrated into your CSS reset. This practice ensures that reset styles have lower priority, preventing conflicts with other styles on the page. By wrapping reset styles in an @layer rule, you future-proof your design for potential layered styles and third-party influences.

    14
19. 19
    Article

    Hacker News·2y

    The easiest way to make Tailwind HTML websites.

    Tips.io offers an intuitive way to build simple, free websites with Tailwind CSS. Featuring a VS Code-based editor with Tailwind class autocomplete, it includes multiple AI models that can change parts of your site individually. The platform provides zero-setup integration, Tailwind animation libraries, a zoomable page tree for instant wireframes, and a collection of reusable themes and components for rapid project development.

    13