Web Resources

Keeping Up To Date

• Accessibility Weekly - A weekly dose of web accessibility to help you bring it into your everyday work, curated by David A. Kennedy
• CSS Weekly - Curated by Zoran Jambor
• Frontend Weekly - The best articles, links and news related to Frontend Development delivered once a week to your inbox
• FrontEnd Focus - Curated by Peter Cooper
• JavaScript Weekly - Curated by Peter Cooper
• Mobile Web Weekly - Curated by Brian Rinaldi and Holly Schinsky
• Bytes - Staying informed on the JavaScript ecosystem has never been so entertaining
• Web Development Reading List - Curated by Anselm Hannemann
• Pony Foo Weekly - A newsletter about the open web by Nicolás Bevacqua
• Web Tools Weekly - Curated by Louis Lazaris
• Bruce Lawson's web reading list - Curated by Bruce Lawson
• Friday Frontend - Curated by Kevin Ball
• Codrops Collective - Weekly collections of the latest news and resources from the web design & web development community
• The Smashing Magazine Newsletter - By the Smashing editorial team
• Frontend top 100 - The top tweets from the best 100 frontend devs
• Echo JS - JavaScript news

Vue.js News

• The Official Vue News - Libraries, articles, and resources from the Vue.js community
• Vue Dose - Tips & tricks about Vue and its ecosystem
• Vue newsletter - Regularly updated articles by Michael Thiessen
• Vue School's tutorials
• Vue Mastery's blog

Podcasts

• 13 Letters - Universal design, ADA, inclusivity and digital a11y best practices from the world's most respected industry professionals
• The A11y Rules Podcast - Interviews with people about making the web accessible, hosted by Nicolas Steenhout
• Syntax - A Tasty treats podcast for web developers, hosted by Wes Bos and Scott Tolinksi
• Shop Talk Show - A web design and development podcast hosted by Dave Rupert and Chris Coyier
• Front End Happy Hour - A podcast featuring panelists of engineers from multiple companies talking over drinks about all things Front End development
• Full Stack Radio - A podcast for developers interested in building great software products, hosted by Adam Wathan
• Responsive Web Design Podcast - Hosted by Karen McGrane and Ethan Marcotte
• JavaScript Jabber - A weekly discussion by top-end JavaScript developers
• The Web Platform Podcast - Hosted by Erik Isaksen, Danny Blue and Justin Ribeiro
• Toolsday - The latest in tech tools, tips, and tricks hosted by Chris Dhanaraj and Una Kravets
• The Web Ahead - Hosted by Jen Simmons
• Code Newbie - Stories from people on their coding journey, hosted by Saron Yitbarek
• Developer Tea - A podcast for developers designed to fit inside your tea break, hosted by Jonathan Cutrell
• Soft Skills Engineering - Dealing with topics you don't normally realize you need to know about being an engineer, hosted by Dave Smith and Jamison Dance

Conference Talks

• dotConferences talks - Videos from TED-like tech conferences, organized and searchable

Vue.js Podcasts

• Enjoy the Vue - Panel discussions, guest interviews, and much more
• Views on Vue - Deeper dives on specific topics with a panel and guests

Being in the Front-End

• Why Learning to Code is So Damn Hard - What every beginner absolutely needs to know about the journey ahead
• A Front End Developer is Aware - A list of topics of awareness

Online Guides

• The Web Project Guide - A guide for managing website creation "from spark to launch and beyond"
• Resilient Web Design - Less of a guide and more about web history and other knowledge by Jeremy Keith

Curated Resource Lists

• Frontend Dogma - News and Tools for Frontend Development
• Web Field Manual - A very comprehensive list of multiple topics by Jon Yablonski
• Front-End Web Development Resources - A curated list of resources by James Steinbach
• Frontend Dev Bookmarks - A manually curated collection of resources for frontend web developers, curated by Tim Navrotskyy
• Awesome - A curated list of awesome lists, by Sindre Sorhus
• The Compact Guide to Web Maintainability: 200 Tips and Resources - By Jens Oliver Meiert

JamStack

A website build with Jamstack methods uses any combination of JavaScript, APIs, and prebuilt Markup. There is no dependency on a web server beyond the serving of files.

• jamstack.org and jamstack.wtf - Learn the why and what about Jamstack
• HeadlessCMS - A List of Content Management Systems for Jamstack Sites
• StaticGen - A List of Static Site Generators for Jamstack Sites

Checklists

• Web Developer Checklist - Things to consider before launching your latest site
• Web Performance Checklist
• The Front-End Checklist - Elements you need to test before launching your website to production
• The Front-End Checklist - An 80+ item checklist that provides a grade and good printability

Collections of Tools and Snippets

• tiny-helpers.dev - A collection of free single-purpose online tools for web developers.
• css-tricks.com/snippets/ - A collection of code snippets

Magazines and Blogs

• Smashing Magazine - For professional web designers and developers
• A List Apart - For People who Make Websites
• CSS Tricks - Tips, Tricks, and Techniques on using CSS and other web things
• Codrops - Tutorials, articles, inspiration and resources
• Modern CSS - Modern CSS solutions for old CSS problems

Learning & Tutorial Sites

• egghead.io
• Frontend Masters
• Pluralsight
• SitePoint
• Treehouse

Other Learning

• DEV Community - A list of web articles and community for sharing ideas
• styleguides.io - Website Style Guide Resources
• patternlab.io - Brad Frost's Pattern Resources
• developers.google.com/web - Google Web Experience Guide
• web.dev - A resource for developers of all backgrounds to learn, create, and solve on the web

General

• alistapart.com/article/responsive-web-design - Ethan Marcotte's 2010 Blog Post

Images

• responsiveimages.org - picture element and srcset/size attributes
• ricg.io - a group of independent designers and developers working toward new web standards that will build fast, accessible, responsive websites

Examples

Patterns

• Responsive Patterns - By Brad Frost

Style Guides

• Website Style Guide Resources - Documenting resources related to front-end style guides and pattern libraries. A collection from many folks, initiated by Anna Debenham and Brad Frost

Tools

• responsv.com/flexible-math - A tool to quickly determine target / context = rtesult values for flexible elements

Latest Browser Versions

• Browse Happy

Browser Market Share Stats

• Browser Market Share Worldwide
• Mobile Browser Market Share Worldwide
• netmarketshare.com Market Share Reports

Detect Your Browser

Find out the details of your browser or device

• whatismybrowser.com
• whatsmybrowser.org

Browsers & Version Histories

• Comparison of web browsers
• Wikipedia history of Google Chrome
• Wikipedia history of Microsoft Internet Explorer
• Wikipedia history of Microsoft Edge
• Wikipedia history of Safari

Cross Browser Testing Services

• LambdaTest
• BrowserStack
• Browserling

HTML and CSS Validation

• HTML Validator
• CSS Validator

HTML and CSS Browser Tests

• html5test.com - How well does your browser support html5?
• css3test.com - Checks which CSS3 features the browser recognizes

Misc Tools

• caniuse.com - Up-to-date browser support tables for front-end web technologies on desktop and mobile web browsers
• HTML5 Please - Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are
• overapi.com - Cheat sheets for various web things (CSS, JavaScript, jQuery, Git, etc.)

General Reference

• htmlreference.io - A guide to all HTML elements and attributes
• HTML5 on Mozilla Developer Network

HTML5 Technolgogies and JavaScript APIs

• html5index.org - JavaScript API ndex
• https://www.w3.org/TR/?tag=webapi - W3C All standards and drafts
• platform.html5.org - Index of the browser web technologies
• devdocs.io - Combines multiple API documentations in a fast, organized, and searchable interface
• HTML5 API Demos - A repository where you can find information about many JavaScript and HTML5 APIs

General Reference

• Lean CSS - An evergreen CSS course and reference to level up your web styling expertise
• cssreference.io - A visual guide to the most popular CSS properties
• CSS Almanac - CSS Trick's list of CSS properties
• OverAPI CSS - Full reference cheat sheet
• CSS3 Click Chart - Browser support and info
• CSS Values - CSS Reference, Properties and Values, Browser Support
• CSS Reference - An CSS reference with all the important properties and info to learn CSS from the basics
• Centering things in CSS: A W3C reference, and a clever How to Center app based on a question format
• Cubic Bezier - A tool for creating/adjusting cubic bezier easing used in animations

Methodologies

• BEM - Block, Element, Modifier. Helpful intro articles: BEM intro and MindBEMding
• CUBE CSS - A CSS methodology oriented towards simplicity and consistency
• SMACSS - Scalable and Modular Architecture for CSS
• OOCSS - Object Oriented CSS
• ITCSS - Inverted Triangle CSS
• MaintainableCSS - An approach to writing modular, scalable and of course, maintainable CSS

Guidelines

• codeguide.co - A set of standards for developing consistent, flexible, and sustainable HTML and CSS
• cssguidelin.es - Maintained by Harry Roberts

CSS Spec

• CSS current work and how to participate
• Why there is no CSS4 - explaining CSS Levels

Sass

• Sassmeister - A Sass playground

CSS Frameworks - Traditional

• Bootstrap
• Foundation
• Materialize
• Bulma
• Semantic UI
• UIKit
• Skeleton
• Milligram

CSS Frameworks - Utility

• Tailwind CSS - Highly composable, low-level utility classes that make it easy to build complex user interfaces
• Tachyons - Functional css for humans. Quickly build and design new UI without writing css

Grid Layout

For layouts in two dimensions (in rows and columns)

• CSS Grid Layout - MDN reference
• A Complete Guide to Grid - A guide from CSS-Tricks
• cssgrid.io - Learn CSS grid video series by Wes Bos
• Learn CSS Grid - A guide to learning CSS grid by Jonathan Suh
• Grid by Example by Rachel Andrew

Flexbox

For layouts in one dimension (along one axis)

• CSS Flexible Box Layout - MDN reference
• A Complete Guide to Flexbox - A guide from CSS-Tricks
• flexbox.io - Learn CSS flexbox video series by Wes Bos
• The Ultimate Flexbox Cheat Sheet

CSS Learning Games

• Flexbox Froggy
• Flexbox Zombies
• Flexbox Defense
• Grid Garden
• Grid Critters - $ cost

General

• OpenJS Foundation - The JS Foundation supports some of the most important projects in the JavaScript ecosystem
• JavaScript on Mozilla Developer Network
• ES5 and ES6 compatibility tables - By kangax
• You Don't Know JavaScript - An online book series on JavaScript by Kyle Simpson
• Exploring ES6 and Exploring ES2018 and ES2019 - Online books by Dr. Axel Rauschmayer
• www.2ality.com - The JavaScript-oriented website of Dr. Axel Rauschmayer
• Simplified JavaScript Jargon - A glossary of JavaScript ecosystem buzzwords explained in a few simple words

Guides

• The Modern JavaScript Tutorial - From the basics to advanced topics with simple but detailed explanations

Algorithms

• JavaScript Algorithms and Data Structures

Libraries

• Bundlephobia - Find the cost of adding a frontend dependency to your project
• bestofjs.org - Provides insights and resources about JavaScript libraries
• javascripting.com - A searchable list of JS libraries
• microjs.com - Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit
• Historical trends in the usage of JavaScript libraries for websites
• BuiltWith.com's JavaScript Library Usage

Vue.js

• Awesome Vue.js - A curated list of awesome things related to Vue.js
• https://awesomejs.dev/for/vue/ - Awesome Vue packages

No JavaScript?

• Everyone has JavaScript, right? - A walk-through of the potential hurdles that might precent JavaScript not getting to your users
• JavaScript isn’t always available (and it’s not the user’s fault) - Reasons users experience sites as if they don’t have JavaScript

Accessibility Defined

Digital accessibility is the process of making digital documents, websites and apps accessible to everyone.

• The W3C on accessibility
• What is digital accessibility? - An introductory video on what it is and who benefits (3 minute video)
• The social model of disability - This model proposes that what makes someone disabled is not their medical condition, but the attitudes and structures of society (3 minute video)
• Inclusive design - Microsoft's approach to this design methodology, aiming to mak your product available to as many users as possible

Accessibility Standards

• WAI - Web Accessibility Initiative, an organization of working groups within the W3C that develops web accessibility standards
• WAI-ARIA - Accessible Rich Internet Applications, a specification for adding HTML attributes to elements which provide additional semantics for browsers and assistive technologies to let users know what is going on.
• WCAG - Web Content Accessibility Guidelines, organized under 4 principles: perceivable, operable, understandable, and robust. Each has a set of guidelines with testable success criteria, and three levels of compliance (A, AA and AAA).

WCAG Extras

• How to Meet WCAG (Quick Reference)
• WCAG requirements for conformance
• WebAIM's WCAG 2 Checklist - A simplified and condensed WCAG 2.1 list (not the actual guidelines)
• Constructing a POUR Website
• Info about WCAG 2.1 - A list of the new requirements per each compliance level
• Info about WCAG 2.2 - What changes for websites and how it impacts users
• Silver - The temporary project name for what will become the significantly restructured WCAG 3.0 in 2022. Silver's major milestones.

Learning

• Accessibility Fundamentals - Intro to web accessibility, essential components, principles, disabled perspectives & stories, and more
• Google Fundamentals of Accessibility Accessibility - A brief intro to web accessibility
• Web Accessibility - A free course by Google on Udacity
• Getting Comfortable with WCAG - And article about the WCAG standard and how to use it to put people first
• A11ycasts - A YoutTube channel with Rob Dodson, who teaches fundamentals of accessibility

Blogs

• 24 Accessibility - A yearly advent calendar (2017+) of articles on digital accessibility
• webaxe.org - Blog and podcast on web accessibility
• digitala11y.com - Digital accessibility blog

Testing

• Easy Checks – An easy first test of web accessibility
• OATMEAL - An accessibility testing method used by eBay
• 30 Days of Accessibility Testing - A list of 30 challenges around accessibility testing

Browser Extensions

Using a combination of browser extensions and automated testing tools is a good start, but that process can only detect about 30% of accessibility issues. Incorporating knowledgable manual testing will reveal and help with much more.

• WAVE - Evaluate web content for accessibility issues directly in Chrome and Firefox
• axe - An open source rules library for accessibility testing in Chrome and Firefox (DevTools)
• Accessibility Insights - Run accessibility testing on webpages in Chrome and Microsoft Edge
• ARC Toolkit - Accessibility Resource Center, accessibility testing tools from The Paciello Group for Chrome (DevTools)

Color Contrast

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (large = 14pt/18.66px & bold, or 18pt/24px).

Level AAA increases this to 7:1 for normal text and 4.5:1 for large text.

• WebAIM's Color Contrast Checker - Check the contrast of foreground on background colors against the WCAG requirements
• Colour Contrast Analyser - A desktop app (Win/Mac) for sampling colors and checking the contrast of foreground and background elements
• Color Contrast Accessibility Validator - Test a web page or color pairs
• Colorable - An interactive contrast checker with hex inputs and HSL sliders
• Accessible Color Generator - Shows you variations on your base color that have a suitable contrast ratio with white
• Color blind Web Page Filter - Choose a web page, and a color blind filter to view it with. Blindness is a spectrum, with a variety of presenting challenges.

Resources

• Web Accessibility Laws & Policies - Governmental policies related to web accessibility
• The Business Case for Digital Accessibility - The rationale for organizations to address accessibility
• WebAIM - Web Accessibility in Mind: empowering organizations to make web content accessible to people with disabilities
• The WebAIM Million - An annual analysis of the top million home pages, revealing the most common WCAG failures
• The A11Y Project - A community-driven effort to make web accessibility easier
• tota11y - An accessibility visualization toolkit
• Accessibility Developer Guide - A guide to designing and implementing fully accessible websites
• A11Y Style Guide - A living style guide/pattern library with accessibility as a top priority
• Accessibility Cheat Sheets - A collection of several sheets and lists
• Accessibility Wins - Showcasing accessible user interfaces and tools
• Yale University Web Accessibility Articles - Articles on best practices and testing

Tools

• Webpack - a static module bundler for modern JavaScript applications
• Parcel - blazing fast, zero configuration web application bundler
• Git - the free and open-source distributed version control system
• Browsersync - synchronised browser testing with a dev server and live reload
• Live Server - VSCode extension to launch a local dev server with live reload

Code Editors

• Visual Studio Code - Microsoft's editor
• Sublime Text - A classic and robust editor
• WebStorm - A paid-for IDE by Jet Brains

Online Code Editors

• codepen.io - A social development environment for front-end designers and developers
• codesandbox.io - An online editor that's built for web application development
• stackblitz.com - The online IDE for web applications
• glitch.com - Create and remix apps, bots and websites with a full dev environment
• jsbin - A tool for experimenting with web languages
• jsfiddle - Online playground for your JavaScript, HTML, CSS

Learning Demo Apps

• TodoMVC - Helping you select (and learn about) an MV* framework
• RealWorld - "The mother of all demo apps", a fullstack Medium.com clone powered by React, Angular, Node, Django, and many more frameworks

Node & npm

• nodejs.org - Node, a JavaScript runtime built on Chrome's V8 JavaScript engine
• npmjs.com - npm, the package manager for node
• awesome npm - Awesome npm resources and tips

Git

• Free Online Book: Pro Git
• Reference: overapi.com/git, github-cheat-sheet
• Comparing Git Workflows
• Guides: Git Guide, Getting Git Right, Git Immersion, Git for beginners: The definitive practical guide
• Oh shit, git! - Examples of corrective actions while using git
• Git GUI clients: git-scm.com/downloads/guis

Versioning

• Semantic Versioning - Versioning using MAJOR.MINOR.PATCH regarding software that provides a public API

Libraries

• GSAP - GreenSock Animation Platform, a JavaScript library
• Three.js - JavaScript 3D library

Easing

• cubic-bezier.com - See common and make your own bezier curves
• easings.net - Easing functions cheat sheet
• robertpenner.com/easing/ - The reason we all have so much control of our animations: Robert Penner's easing functions

Other

• Animate.css - A CSS ibrary for adding in pre-coded "Just-add-water" animations
• Animatable - A CSS transitions gallery that shows what’s possible with even the most basic of transitions: one property two values
• Dan Wilsons' Web Animations API Articles
• Web Developer Reading List: CSS Transforms and Animation

Video Hosting Providers

• youtube.com
• vimeo.com
• wistia.com
• sproutvideo.com
• brightcove.com
• viddler.com
• JW Player

Media Player Libraries

• audio.js - A cross-browser javascript wrapper for the html5 audio tag
• jPlayer - The jQuery HTML5 Audio / Video Library
• MediaElement.js - HTML5 audio and video players in pure HTML and CSS
• howler.js - Javascript audio library for the modern web

More Resources

• Web audio resources - A list of curated resources related to the Web audio API

Placeholders

• lipsum.com and baconipsum.com - Dummy text for when you have nothing real to say
• placehold.it - A quick and simple image placeholder service
• Unsplash Source - Random photos from Unsplash
• Lorem Picsum - Lorem Ipsum... but for photos

Data Sources

• Mockaroo - Generate mock data in multiple formats
• Faker - Generate massive amounts of fake (but realistic) data for testing and development
• Mr. Data Convert - Convert CSV data to web-friendly formats (HTML, JSON and XML)
• Kaggle Datasets - Discover and analyze open data
• data.gov - Data, tools, and resources to conduct research, develop web and mobile applications, design data visualizations, and more

Public APIs

• Two basic APIs to play with: Dog API and Star Wars API
• github.com/public-apis/public-apis - A collective list of free APIs for use in software and web development
• github.com/n0shake/Public-APIs - A public list of APIs from round the web
• any-api.com - Documentation and test consoles for thousands of public APIs

SCORM

Sharable Content Object Reference Model for LMS communication in eLearning projects.

• SCORM Run-Time Reference - SCORM 1.1, 1.2, 2004 2nd, 3rd, 4th ed., Tin Can API
• SCORM Cloud - A service to upload and test your eLearning courses/SCORM packages $ freemium

• SCORM Wrapper - A JavaScript SCORM 1.2/2004 wrapper for custom SCORM courses

Other Standards

• xAPI - Experience API, the successor to SCORM
• cmi5 - Runs on top of xAPI, providing more focus, rules and structure

Page Optimization & Performance

• webpagetest.org - A website performance and optimization test
• webbloatscore.com - Compare the size of a page to a compressed image of the same page
• The 15 Commandments of Front-End Performance

Google Performance

• Google Performance Fundamentals - Measure Performance with the RAIL Model
• DevTools Network and Runtime Performance
• Google Pagespeed Insights
• Lighthouse Automated Testing Tool

Asset Optimization

• smallpdf.com - Compress PDFs
• ImageOptim-CLI - Image optimization as part of your build process
• tinypng.com - Compress JPGs and PNGs
• giftofspeed.com/tools - Page speed tools, including batch PNG and JPG compressors (up to 50 images at once)
• Essential Image Optimization
• SVGO and SVGO UI - Optimize SVGs

Performance Measurement

• What Does My Site Cost? - Find out the cost for someone to use your site on mobile networks around the world
• Website Carbon Calculator - How is your website impacting the planet?

• StackShare - Software and technology stacks used by top companies
• W3techs - Technology data from W3Tech Surveys
• BuiltWith's Tech Lookup - Find out what websites are built with
• BuiltWith's Tech Usage Trends - Web and Internet Technology Usage Statistics
• CSS Stats - Analyzes a web page to provide analytics and visualizations of your stylesheets

Detection and Information

• dpi.lv - Easily find the DPI/PPI of any screen
• The Ultimate Guide To iPhone Resolutions
• Device Size Detection - See dimension info of your device as well as browser info

JavaScript Books (ES5 & ES2015+)

• These books are free to read online
• Understanding ECMAScript 6 - A book by Nicholas Zakas
• You Don't Know JavaScript - A book series on JavaScript by Kyle Simpson
• Modular JavaScript - A book series on JavaScript by Nicolás Bevacqua
• Exploring ES6 and Exploring ES2016 and ES2017 - Books by Axel Rauschmayer
• JavaScript Allongé, the "Six" Edition - A book by Reg “raganwald” Braithwaite
• Eloquent JavaScript, 3rd edition - A book by Marijn Haverbeke
• Human JavaScript - A book by Henrik Joreteg

Publishers

• The Smashing Library
• A Book Apart
• O'Reilly (Web development filter)
• The Pragmatic Bookshelf
• goalkicker.com - Programming Notes for Professionals: a list of ~50 free books (front-end and otherwise) compiled from Stack Overflow Documentation, written by the beautiful people at Stack Overflow

Style Guide Lists

• Website Style Guide Resources - Books written about style guides

Project Management Apps

• Freedcamp - A full PM app $ freemium
• Teamwork Projects - A full PM app $ freemium
• Trello - A kanban (board) based PM app $ freemium
• Todoist - Task management and to do lists $ freemium
• TeamGantt - Gantt chart scheduling software $ freemium

Communication

• Slack - A team messaging app $ freemium

Visual

• Figma - A collaborative interace design tool (mockups, design and prototyping) $ freemium
• Coggle - A tool for creating and sharing mindmaps $ freemium
• draw.io - A diagram editor to create flowcharts, mockups and more $ free

Documents and Organization

• Google Drive - Google's place for your files and for creating documents, spreadsheets, presentations, etc. $ freemium
• Notion - To organize notes, docs, knowledge base, tasks, projects, spreadsheets $ freemium
• Cacher - A code snippet organizer for your code snippets (web app and desktop app) $ freemium