Community Picks·2y100 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.
DEV·2y50 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.
asayer·2yHTML5 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.
Piccalilli·2yStyling 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.
Community Picks·2yCSS 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.
LogRocket·2yUsing 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.
Community Picks·2yJavascript 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.
Michael Thiessen·2yCreate 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.
Web Tools Weekly·2yCSS 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.
LogRocket·2yExploring 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.
Community Picks·2yszimek/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.
