A curated list of (mostly) free resources for HTML, CSS and JavaScript.

Learning

Online Courses

• General

  freeCodeCamp

  Offering some amazing tracks, freeCodeCamp is one of the top resources for learning HTML, CSS and JavaScript online. Plus...it's free! Can't really argue with that.

  Visit
• General

  Khan Adademy

  Khan Academy offers some amazing introductory courses to HTML, CSS and JavaScript. There is a good mixture of video lessons and coding challenges to keep you interested.

  Visit
• General

  Codecademy

  Codecademy offers a number of free lessons for a variety of languages. To get the full courses, you typically need to sign up to the pro membership. But you can get a lot of learning done for free.

  Visit
• General

  Udacity

  Udacity offers an incredible array of free courses. Have a look around and see what takes your fancy.

  Visit
• JS

  Code School: Try jQuery

  This free jQuery course from Code School is the course I typically recommend to students when they start to learn jQuery.

  Visit
• General

  Code School: Try Git

  If you are going to build websites of any scale, you will need to learn version control. This free introduction to Git course from Code School is a great first step.

  Visit
• CSS

  Wes Bos: CSS Grid

  CSS Grid will change how you create website layouts. Learn how for free from Wes Bos in this brilliant CSS Grid course.

  Visit
• JS

  Wes Bos: JavaScript 30

  Wes Bos offers another great (and free) course to help you develop your JavaScript skills.

  Visit
• CSS

  Wes Bos: Flexbox

  Flexbox makes CSS just work, which is no easy feat. Get a perfect introduction to it here.

  Visit

Interactive Tutorials

• General

  General Assembly Dash

  Dash is an amazing, free resource offered by General Assembly with engaging challenges that get harder as you progress.

  Visit
• CSS

  Flexbox Froggy

  Once you've learned Flexbox, you can test your CSS skills with this fun, interactive Flexbox tutorial/challenge.

  Visit
• CSS

  Flexbox Defense

  Another great interactive Flexbox challenge is Flexbox Defense. Once you've completed this and Flexbox Froggy you'll be a Flexbox ninja!

  Visit
• CSS

  Grid Garden

  Test your CSS Grid chops with this interactive tutorial/challenge. It gets pretty tricky towards the end!

  Visit

Reading

• General

  Shay Howe: Learn to Code HTML & CSS

  Shay Howe has put together a seriously impressive guide to HTML & CSS. I would consider it required reading for anybody learning front-end web development.

  Visit
• CSS

  BEM Principles

  Without a defined structure, CSS can get pretty messy pretty quickly. BEM Principles are only one possible solution, but I found itthe most sane approach to structuring CSS.

  Visit
• JS

  You don't know JS

  Take a deep dive into JavaScript with this free series, which was originally funded on Kickstarter.

  Visit
• JS

  Eloquent JavaScript

  Eloquent JavaScript be should high up on any beginner JavaScript developer's reading list. It is a great introduction to the language and touches on some more advanced features of the language.

  Visit
• JS

  JavaScript Design Patterns

  This free book is an amazing resource for learning the varying ways problems can be solved with design patterns and reusable solutions. Perfect for any new JavaScript developer wanting to boost their skills.

  Visit
• General

  Code Analogies

  If you're someone who learns coding principles best through analogies then this is the site for you. You'll find tons of programming concepts broken down using everyday examples.

  Visit

Videos

• General

  Awesome Talks

  An awesome curated list of awesome talks! There's something for all developers on this site.

  Visit
• CSS

  Layout Land

  A great YouTube channel with extremely helpful videos on CSS by Jen Simmons. The videos are mostly based around CSS Grid, but do cover other CSS topics.

  Visit

Blogs & Communities

• CSS

  CSS Tricks

  CSS Tricks focuses mostly on...you guessed it: CSS. However, many articles go beyond CSS and it is a truly incredible resource. If you find yourself Googling your way out of a styling issue, it is more than likely CSS tricks will be there to help you out.

  Visit
• General

  Stackoverflow

  Stackoverflow is the mecca for coding Q&A. It is the world's largest developer community and is an amazing resource for any developer, regardless of the languages they write.

  Visit
• General

  Codrops

  Codrops is a brilliant resource for any front-end developers wanting to experiment with the newest and push the boundaries of what's possible with CSS especially. It offers plenty of demos and tutorials of very specific features to play around with.

  Visit
• General

  SitePoint

  SitePoint offers some great articles for improving your web development knowledge. The topics are often really varied and can go into good depth, so definitely worth a follow.

  Visit
• General

  Smashing Magazine

  Smashing Magazine pumps out great articles on a wide-range of web development subjects, including both design and coding.

  Visit
• General

  Front-End Front

  A curated feed of front-end articles, questions and links.

  Visit
• General

  Scotch

  A brilliant resource for quality articles and also some great tutorials on very specific subjects that are mostly available for free!

  Visit
• General

  freeCodeCamp

  freeCodeCamp isn't just a great online course, it also has a great publication to follow on Medium. Topics are for developers of all levels and all stacks.

  Visit
• General

  Hacker Noon

  Another excellent publication to follow on Medium, offering more general tech-related articles, not just coding.

  Visit
• General

  Code Newbie

  An amazingly supportive community of programmers at all levels. If you're experienced, dive in and help the newbies. If you're a newbie join up, start asking questions and someone will help you out.

  Visit
• General

  FEDs on Slack

  The FEDs on Slack community is a great community of mostly more experience front-end developers, but that does not mean juniors are not welcome. It's a great place to chat all things front-end!

  Visit
• General

  Frontend Developers Slack

  The Frontend Developers Slack community is another large Slack community with channels dedicated to topics such as HTML, CSS, JavaScript, React, Vue and Accessibility. A perfect place for all FEDs to hang out!

  Visit

Podcasts

• JS

  JavaScript Jabber

  Devchat.tv offers some great podcasts, my favourite of which is JavaScript Jabber. If you're serious about JavaScript this is a great way to stay up-to-date with the latest developments in the language.

  Visit
• General

  Indie Hackers

  While not specifically about coding, Indie Hackers in an amazing podcast (and also website) for any developers looking to build and launch their own digital products. The community is extremely supportive and transparent about the behind-the-scenes of trying to launch online products.

  Visit
• General

  Syntax

  Wes Bos and Scott Tolinski, two brilliant full-stack developers and online instructors talk about all things web development. These two are extremely knowledgeable and so it's great to hear them chat about all kinds of interesting topics.

  Visit
• JS

  The React Podcast

  If you're using React, I would highly recommend The React Podcast as a great way to stay up-to-date with the lastest news in the React ecosystem.

  Visit

Workflow

Development Tools

• General

  Visual Studio Code

  VS Code is the text editor I use on a day-to-day basis. It offers a great development environment, especially for front-end coding.

  Visit
• General

  Atom

  Atom is another great open source text editor, built by the guys behind Github. It has a great ecosystem of packages to build out your unique development environment.

  Visit
• General

  Git

  Git is a version control system that is essential to a lot of developers' workflows. It allows you to create snapshots of your code as your project grows, among many other things.

  Visit
• General

  Github

  Github is a development platform to help individuals and teams manage their projects. It has an especially large open source community.

  Visit
• General

  Gitlab

  Gitlab is a great development platform that I've started using lately. It has a lot more features beyond managing your projects, including task trackers, built-in Continuous Delivery and a lot more.

  Visit
• HTML

  Emmet

  Supercharge your HTML writing workflow with Emmet. It allows you to use CSS-like abbreviations, which you can then expand out to create your HTML markup.

  Visit

Frameworks & Libraries

• General

  Bootstrap

  Bootstrap is the most well-known front-end framework out there. When I have used it, it's typically for prototyping purposes, but it's a very well-written tool for rapid web development.

  Visit
• General

  Foundation

  Foundation is another well-written front-end framework. Similar to Bootstrap, I've only really used it for prototyping, but it's extremely simple to use and you can build complex interfaces very quickly.

  Visit
• CSS

  Materialize

  If you like Google's Material Design, then you'll love Materialize. It's a great library for quick development of a website that uses Material Design principles.

  Visit
• CSS

  Bulma

  I really like Bulma, as it is a nice CSS framework based on Flexbox, meaning that building mobile-first, responsive layouts is a breeze.

  Visit
• JS

  jQuery

  With the massive adoption of JavaScript frameworks, the need for jQuery in new projects is dwindling. However, for new front-end developers and for building smaller sites, it is still very much worthwhile to learn.

  Visit
• JS

  React

  React is a JavaScript library from Facebook, which re-defined how the interactive user interfaces are built. It is typically my go-to for building larger projects.

  Visit
• JS

  React Native

  As a web developer, who often uses React, I find it amazing that I can now build out native mobile apps, without too much trouble using JavaScript in the same design as React. This is what React Native allows you to do.

  Visit
• JS

  Vue.js

  As much as I love React, I must admit that Vue.js is actually my favourite JavaScript framework to build sites with. The ecosystem around it isn't quite as mature as React's, but it's an absolute pleasure to work with.

  Visit
• CSS

  Animate.css

  If you want to add some quick and easy animations to your site, then Animate.css is the perfect library.

  Visit
• JS

  Parsley

  Parsley allows you to add extremely simple client-side validations to your forms that are easily customisable.

  Visit

Resources

• General

  HTML Cheatsheet

  Although called HTML Cheatsheet, this site also offers brilliant cheatsheets for both CSS and JavaScript. Perfect for when you're getting started as a front-end developer.

  Visit
• HTML

  Emmet Cheatsheet

  This cheatsheet will be a valuable resource in your early days of using Emmet.

  Visit
• HTML

  Codrops CSS Reference

  A really good reference for CSS from Codrops. Be sure to have a look if you need a hand.

  Visit
• General

  MDN

  MDN is an incredible resource from Mozilla for HTML, CSS and JavaScript. Useful for beginners and seniors alike, you'll often find yourself coming back throughout your development journey.

  Visit
• General

  Can I Use

  If you're using the latest and greatest advances in front-end technologies, Can I Use will tell you what the browser support is like.

  Visit
• CSS

  Airbnb CSS Styleguide

  For a little insight into how a large company, such as Airbnb, structures their CSS, have a read through their CSS styleguide. It will give you plenty of tips and tricks.

  Visit
• JS

  Airbnb JavaScript Styleguide

  Just like the CSS styleguide, Airbnb's JavaScript styleguide is just, if not even more insightful. They also include their styleguide for React inside it.

  Visit
• JS

  Superhero.js

  Some resource-ception here with Superhero.js. The site has an amazing collection of articles, videos and presentations on all things JavaScript. Definitely worth checking out!

  Visit
• CSS

  Accessibility of Styled Form Controls

  Custom styled form controls usually come at the expense of accessibility. Use this invaluable resource to make sure you never forget about your non-mouse/trackpad users ever again.

  Visit
• JS

  Website Setup JavaScript Cheat Sheet

  A great, in-depth JavaScript cheatsheet that is a one-stop-shop reference guide for the language.

  Visit

Typography

• CSS

  Google Fonts

  Hands down the best resource for free web fonts. Huge library for you to choose from.

  Visit
• CSS

  Font Squirrel

  Font Squirrel is another brilliant resource for free web fonts. The site also offers other tools, such as a font generator.

  Visit
• CSS

  Wordmark.it

  Not sure what font to use for your next project? Type in a word or phrase on Wordmark.it and simply scroll through a huge library of fonts to compare.

  Visit

Colours

• CSS

  Coolors

  If you're struggling for inspiration when creating a colour palette, Coolors offers a helping hand with their auto-generator.

  Visit
• CSS

  ColorSpace Palette

  This colour palette generator from ColorSpace is a great way of creating beautiful palettes based around a primary colour.

  Visit
• CSS

  ColorSpace Gradient

  Another great tool from ColorSpace, but this time to help create CSS gradients.

  Visit
• CSS

  CSS Gradient

  Another brilliant gradient generator for you to play around with. CSS Gradient is also a excellent resource if you want to learn more about the different types of gradient available to you.

  Visit
• CSS

  Sip

  If you own a Mac and you're in need of a colour picker, don't look any further than Sip. It's not free, but it's worth the money as it is an extremely useful tool for any front-end developer.

  Visit

Media

• General

  Unsplash

  My go-to site if I need to find images. Unsplash has an unbelievable gallery of royalty-free, high-resolution images for you to use.

  Visit
• General

  Pixabay

  Pixabay is another amazing resource for royalty-free images, videos, illustrations and vector graphics.

  Visit
• General

  Pexels

  A huge gallery of high-resolution, royalty-free images for you to choose from.

  Visit
• General

  Pexels Videos

  If it's royalty-free videos you're after, then Pexels Videos is an amazing resource with a huge library.

  Visit
• General

  Coverr

  7 new high-quality, beautfiul videos every Modnay. Amazing library of videos to choose from.

  Visit
• General

  Placeit

  Quick and simple mockup generators for all kinds of device. Just add your screenshot.

  Visit
• General

  Optimizilla

  A great tool for optimising your PNG and JPEG images online.

  Visit

Icons

• General

  Font Awesome

  A very popular font icon library with vector icons and social logos. Plenty for you to choose from.

  Visit
• General

  Icomoon

  Icomoon offers both free and premium font icon sets. The site also allows for icon uploads so that you can mix your own icons in with Icomoon's to create your own custom set.

  Visit
• General

  Devicon

  If you need coding-related vector icons then Devicon is what you need. It offers a large number of programming languages, design and development tool icons.

  Visit
• General

  Material Icons

  If you're building a site using Material Design then Material Icons is a great font icon library for you.

  Visit
• General

  Ionicons

  Ionicons is an amazing and 100% free font icon library with some seriously nice looking icons.

  Visit
• General

  Flaticon

  Flaticon is an absolutely enormous database of free and premium font icon collections.

  Visit
• General

  Iconmonstr

  A smaller, but seriously cool library of icons

  Visit
• General

  Vivid.js

  A beautiful and fully customisable library of SVG icons. Just pick your colours and away you go.

  Visit

Inspiration

• General

  Codepen

  Codepen is a brilliant place to experiment with some front-end code or even quickly test out ideas. It also has a great library of 'Pens' to look at and gain inspiration from.

  Visit
• General

  Awwwards

  Awwwards has an incredible gallery of websites to look around. The sites on here are really pushing the boundaries as to what's possible on the web. So it's a great place to get ideas.

  Visit
• General

  Dribbble

  Dribbble is a showcase for both web and mobile designers, so it's not short of amazing UIs to gawk at.

  Visit

Utilities

• CSS

  Normalize.css

  When you start a new project you'll need to account for the slightly differing browser default styles. Normalize.css allows you to do this while keeping some base styles.

  Visit
• CSS

  Reset.css

  If you want to completely remove all browser default styles then use Reset.css to make everything all elements look the same at the beginning.

  Visit
• CSS

  Cubic Bezier

  You might want to use custom easing functions, instead of the pre-defined easings. Cubic Bezier provides a simple interface to create these easing functions for trnasitions and animations.

  Visit
• CSS

  Easing Functions

  Some great pre-defined easing functions that you can start using right away.

  Visit
• CSS

  CSS Triangle Generator

  At some point you'll work with a designer who loves triangles. When that time comes, this site will be your best friend.

  Visit
• CSS

  Clippy

  Clippy is a great tool that makes it really simple to work with the new clip-path property.

  Visit
• CSS

  Keyframes

  If you find yourself getting stuck with animations in CSS, give this Keyframes web app a go. It offers a really simple interface to help choreograph your animations.

  Visit
• CSS

  30 Seconds of CSS

  An amazing resource of little CSS snippets to help speed up development time for a number of common styling cases.

  Visit

Launching

Testing & Analytics

• HTML

  W3C HTML Validator

  It's always good to know if you have errors in your HTML. Use this official W3C tool to make sure your markup is valid.

  Visit
• CSS

  W3C HTML Validator

  Be sure your CSS code contains no errors with this official W3C code validator.

  Visit
• General

  Google Analytics

  Gain valuable insights into your users with Google Analytics. See where they come from, what pages they visit and if they bother to stick around. You shouldn't launch a site without it.

  Visit
• General

  BrowserStack

  Although not free, BrowserStack is an extremely valuable tool for as pain-free cross-browser testing as possible.

  Visit

Deployment

• General

  Namecheap

  Namecheap offers domain registration, shared hosting and many other services. They're my first choice when registering a new domain.

  Visit
• General

  Heroku

  Heroku makes it extremely easy to deploy apps with minimum configuration required.

  Visit
• General

  Digital Ocean

  Digital Ocean is another cloud computing platform that makes it a lot easier to deploy and maintain cloud-based applications.

  Visit

Reporting

• General

  SEOptimer

  Get detailed (and free!) insights on how your website stacks up for SEO.

  Visit
• General

  Front-End Checklist

  Don't launch a site without running through this front-end checklist. It's a crucial resource to make sure you've checked all the necessary boxes before deployment.

  Visit
• General

  Nibbler

  Receive a free report on a number of important areas of your site, including SEO, accesibility and social media.

  Visit
• General

  Google Pagespeed

  Test key speed metrics for your site and receive a detailed breakdown of what needs to be fixed and how you can fix it.

  Visit
• General

  Google Mobile Speed Test

  See how your site performs on mobile devices and how it stacks up against other sites.

  Visit
• General

  Real Favicon Generator

  Generate all the favicon assets and HTML code you need to include favicons for all platforms.

  Visit
• General

  Pingdom

  Receive a detailed report of your website's performance, with useful, prioritised tasks for how you can improve it.

  Visit
• General

  Sqreen HTML & CSS Security Checklist

  If you thought HTML & CSS weren't vulnerable to malicious attacks you'd be wrong! This is a very useful checklist to help you avoid potential vulnerabilities.

  Visit