Best of HTMLJuly 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    100 FREE Frontend Challenges

    The post offers a set of 100 free frontend challenges aimed at improving web development skills, focusing on HTML & CSS, with opportunities to incorporate JavaScript and other frameworks. Each challenge involves recreating a design to build a working website or web app. The goal is to foster a project-based learning approach, encouraging developers to complete all challenges and enhance their chances of landing a web development job.

  2. 2
    Article
    Avatar of devtoDEV·2y

    50 Best Websites for Web Design Inspiration and Ideas

    Discover a curated list of 50 best websites offering web design inspiration and ideas. These resources cater to various needs, from business and ecommerce to portfolios and landing pages. Sources are categorized into multipurpose, focused, and niched inspirations, including both free and paid options. Special mentions include award galleries and website builder showcases.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    How to center a div?

    Learn various methods to center a div in CSS, including techniques using Flexbox, Grid, absolute positioning, margin auto, and inline-block display. Each method provides examples to help achieve vertical and horizontal centering effectively.

  4. 4
    Article
    Avatar of asayerasayer·2y

    HTML5 Input Types You May Not Be Using

    HTML5 introduces new input types that enhance user experience and provide built-in validation for various data formats, reducing the need for external scripting. These include types like color, date, datetime-local, month, week, time, range, search, tel, and url, each with specific implementations and use cases. Ensuring browser compatibility and providing fallback options are crucial for consistent user experience across different platforms.

  5. 5
    Article
    Avatar of piccalilliPiccalilli·2y

    Styling Tables the Modern CSS Way

    Modern CSS simplifies creating aesthetically pleasing and functional HTML tables. The post explains the fundamental HTML components for tables and modern CSS techniques to enhance their appearance and accessibility. It covers the use of elements such as <table>, <thead>, <tbody>, <tfoot>, styling strategies like text alignment, border handling, sticky positioning, and responsive design considerations. The guide is aimed at making readable, accessible, and visually appealing data tables.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    CSS Can Get You in Jail

    Rendering legal documents using CSS counters can cause legal issues due to potential changes in the hierarchical numbering, which serve as unique identifiers. This can lead to documents being legally incorrect if referential integrity is broken. Using browser rendering engines introduces unpredictability, and human errors in numbering can invalidate the text. The recommended solution is to hardcode numbers in such documents for stability and correctness.

  7. 7
    Article
    Avatar of logrocketLogRocket·2y

    Using qr-code: a customizable, animate-able HTML element

    The `qr-code` library offers developers a way to create customizable, animated, and SVG-based QR codes that can be integrated into any modern web application. It provides various customization options, including color changes, custom shapes, and logo insertion. The library works across all major frontend frameworks such as React, Angular, and Svelte, and comes with a simple API for building animations. It also supports download and print features for generated QR codes, making it versatile for different use cases.

  8. 8
    Video
    Avatar of kevinpowellKevin Powell·2y

    A background-image trick most people don't know about

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    Javascript Colored Tags Generator

    Learn how to generate colored tags using JavaScript for various widgets to improve UI. Methods include using template literals and dynamic color assignment for better visual data scanning. The guide covers basic tag HTML structure, dynamically generating tags from arrays, and assigning colors either through a config object or automatically for large tag lists.

  10. 10
    Article
    Avatar of michaelnthiessenMichael Thiessen·2y

    Create Beautiful PDFs with HTML, CSS, and Markdown

    A tool has been developed to create beautiful ebooks and PDFs using HTML, CSS, and Markdown, bypassing the complexities of traditional tools like Adobe InDesign. This tool uses the Prince engine for conversion, allowing hot-reloading for immediate previews, and integrates easily with existing branding and styles.

  11. 11
    Article
    Avatar of webtoolsweeklyWeb Tools Weekly·2y

    CSS Tools, JSON, Databases, Vue

    This post highlights various tools spanning CSS, HTML, JSON, databases, and Vue. It includes advanced CSS and HTML browser extensions, useful JavaScript libraries, and tools to simplify database and JSON management. Additionally, it features a collection of Vue tools for creating maps, handling props dynamically, and scaffolding new projects with ease.

  12. 12
    Article
    Avatar of logrocketLogRocket·2y

    Exploring essential DOM methods for frontend development

    Dynamic interaction with web pages is key to providing a smooth user experience. The Document Object Model (DOM) acts as a bridge between HTML and JavaScript, allowing developers to manipulate webpage content dynamically. Essential DOM methods such as querySelector(), querySelectorAll(), getElementById(), and getElementsByClassName() are used to find and access elements for interaction. Methods like innerHTML, textContent, and style.setProperty enable content and style modifications. Event handling with addEventListener() and removeEventListener() allows for responsive user interfaces. Mastering these methods is crucial for effective frontend development.

  13. 13
    Video
    Avatar of kevinpowellKevin Powell·2y

    3 underused CSS Grid features

  14. 14
    Article
    Avatar of communityCommunity Picks·2y

    szimek/signature_pad: HTML5 canvas based smooth signature drawing

    Signature Pad is a JavaScript library for drawing smooth signatures using HTML5 canvas and Bézier curve interpolation. It supports all modern browsers and offers features like erase and undo, along with various customization options for elements such as pen color, min/max width, and background color. Installation can be done via npm, Yarn, or directly with a script tag. The library also handles high DPI screens and provides various methods for converting and manipulating the signature data in different formats.