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.
DEV·1y100+ 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.
DEV·2y21 HTML Tips You Must Know About
Boost your coding skills with 21 HTML Tips including creating contact links, collapsible content, utilizing semantic elements, grouping form elements, enhancing dropdown menus, improving video presentation, supporting multiple selections, displaying text as subscript and superscript, creating download links, defining base URL for relative links, controlling image loading, managing translation features, setting maximum and minimum input length, enabling content editing, controlling spell checking, ensuring accessibility, defining target behavior for links, providing additional information, accepting specific file types, and optimizing video loading.
Community Picks·2yLearn CSS, HTML and JavaScript by Playing Coding Games
Learn CSS, HTML, and JavaScript by playing coding games in an engaging and interactive environment. Traditional learning methods lack practice, engagement, and can be boring. By combining practice and an interactive learning environment, you can make learning to code more efficient, interesting, and fun.
asayer·2yBest 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.
Hacker News·2yCSS finally adds vertical centering in 2024
In 2024, CSS introduces the `align-content` property for vertical centering in flow layout, eliminating the need for flexbox or grid. Previously, achieving vertical alignment required complex workarounds. This update simplifies the process, allowing vertical alignment with a single CSS property in the default layout.
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.
DEV·2yTop 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.
Community Picks·2yWhat is this weird CSS Syntax?
Learn about an interesting CSS syntax involving the adjacent sibling combinator (+) and the asterisk (*) to select non-immediate adjacent elements of the same class. This allows styles to be applied to specific siblings a few elements away when hovering over a targeted element.
Community Picks·2y15 Useful CSS Properties You Should Know About 🎨
Discover 15 often overlooked but incredibly useful CSS properties that can enhance the design, performance, and user experience of websites. These properties include caret-color for changing text cursor color, accent-color for form controls, pointer-events to manage mouse activity, backdrop-filter for background effects, and scroll-snap-type for smooth scrolling transitions, among others.
DEV·2yBest Practices for Frontend Web Development: A Comprehensive Guide
A comprehensive guide to frontend web development, covering best practices, including semantic HTML markup, CSS methodologies, responsive design, progressive enhancement, performance optimization, cross-browser compatibility, accessibility standards, optimized images and multimedia, version control, and continuous learning.
Piccalilli·2yHow I build a button component
Learn how to build a versatile button component in HTML and CSS with multiple variants including a ghost button and one with hard edges. The guide emphasizes using semantic elements instead of <div> and JavaScript handlers, outlines the use of custom properties for maintainable styles, and incorporates best practices for accessibility using ARIA attributes.
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·1yHigh 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.
DEV·2y7 Old-School Practices in HTML Should Be Avoided
Avoid using outdated HTML practices like specifying type attributes for <script> and <style>, using frameborder on <iframe>, and including support for IE 8. Utilize semantic elements like <header> and <footer> properly within sections, and choose heading tags based on page structure rather than design. Lastly, simplify boolean attributes by omitting unnecessary values.
Community Picks·2y3D Book Flip Cover
The post explains how to use HTML, CSS, and JavaScript preprocessors in CodePen to enhance your coding experience. It also covers linking to external resources using both secure (https) and non-secure (http) protocols, as well as how to properly apply vendor prefixes for cross-browser support. Additional tips include autosaving and live preview configurations in CodePen.
