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

Learning

Online Courses

  • Screenshot of the Free Code Camp homepageGeneral

    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
  • Screenshot of Khan Academy Computer Programming pageGeneral

    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
  • Screenshot of Codecademy homepageGeneral

    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
  • Screenshot of Udacity homepageGeneral

    Udacity

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

    Visit
  • Screenshot of Code School's Try jQuery course pageJS

    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
  • Screenshot of Code School's Try Git course pageGeneral

    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
  • Screenshot of the cssgrid.io course pageCSS

    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
  • Screenshot of the JavaScript 30 course pageJS

    Wes Bos: JavaScript 30

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

    Visit
  • Screenshot of the flexbox.io course pageCSS

    Wes Bos: Flexbox

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

    Visit

Interactive Tutorials

  • Screenshot of General Assembly's Dash pageGeneral

    General Assembly Dash

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

    Visit
  • Screenshot of the Flexbox Froggy tutorial pageCSS

    Flexbox Froggy

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

    Visit
  • Screenshot of the Flexbox Defense tutorial pageCSS

    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
  • Screenshot of the Grid Garden tutorial pageCSS

    Grid Garden

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

    Visit

Reading

  • Screenshot of the Shay Howe's HTML and CSS guideGeneral

    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
  • Screenshot of the BEM principle homepageCSS

    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
  • Screenshot of the You Don't Know JS Github pageJS

    You don't know JS

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

    Visit
  • Screenshot of the Eloquent JavaScript landing pageJS

    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
  • Screenshot of the JavaScript Design Patterns landing pageJS

    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
  • Screenshot of the Code Analogies homepageGeneral

    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

  • Screenshot of the Awesome Talks homepageGeneral

    Awesome Talks

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

    Visit
  • Screenshot of the Layout Land YouTube channelCSS

    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

  • Screenshot of the CSS Tricks homepageCSS

    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
  • Screenshot of the Stackoverflow homepageGeneral

    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
  • Screenshot of the Codrops homepageGeneral

    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
  • Screenshot of the SitePoint homepageGeneral

    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
  • Screenshot of the Smashing Magazine homepageGeneral

    Smashing Magazine

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

    Visit
  • Screenshot of the Front-End Front homepageGeneral

    Front-End Front

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

    Visit
  • Screenshot of the Scotch homepageGeneral

    Scotch

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

    Visit
  • Screenshot of the freeCodeCamp homepageGeneral

    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
  • Screenshot of the Hacker Noon homepageGeneral

    Hacker Noon

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

    Visit
  • Screenshot of the Code Newbie homepageGeneral

    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
  • Screenshot of the FEDs on Slack landing pageGeneral

    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
  • Screenshot of the Frontend Developers Slack landing pageGeneral

    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

  • Screenshot of the JavaScript Jabber podcast pageJS

    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
  • Screenshot of the Indie Hackers podcats pageGeneral

    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
  • Screenshot of the Syntax podcast pageGeneral

    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
  • Screenshot of the The React Podcast pageJS

    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

  • Screenshot of the Visual Studio Code homepageGeneral

    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
  • Screenshot of the Atom homepageGeneral

    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
  • Screenshot of the Git homepageGeneral

    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
  • Screenshot of the Github homepageGeneral

    Github

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

    Visit
  • Screenshot of the Gitlab homepageGeneral

    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
  • Screenshot of the Emmet homepageHTML

    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

  • Screenshot of the Bootstrap homepageGeneral

    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
  • Screenshot of the Foundation homepageGeneral

    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
  • Screenshot of the Materialize homepageCSS

    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
  • Screenshot of the Bulma homepageCSS

    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
  • Screenshot of the jQuery homepageJS

    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
  • Screenshot of the React homepageJS

    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
  • Screenshot of the React Native homepageJS

    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
  • Screenshot of the Vue.js homepageJS

    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
  • Screenshot of the Animate.css homepageCSS

    Animate.css

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

    Visit
  • Screenshot of the Parsley homepageJS

    Parsley

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

    Visit

Resources

  • Screenshot of the HTML Cheatsheet homepageGeneral

    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
  • Screenshot of the Emmet Cheatsheet homepageHTML

    Emmet Cheatsheet

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

    Visit
  • Screenshot of the Codrops CSS Reference pageHTML

    Codrops CSS Reference

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

    Visit
  • Screenshot of the MDN homepageGeneral

    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
  • Screenshot of the Can I Use homepageGeneral

    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
  • Screenshot of the Airbnb CSS Styleguide pageCSS

    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
  • Screenshot of the Airbnb JavaScript Styleguide pageJS

    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
  • Screenshot of the Superhero.js homepageJS

    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
  • Screenshot of The Accessibility of Styled Form Controls & Friends landing pageCSS

    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
  • Screenshot of Website Setup JavaScript Cheat Sheet articleJS

    Website Setup JavaScript Cheat Sheet

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

    Visit

Typography

  • Screenshot of the Google Fonts homepageCSS

    Google Fonts

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

    Visit
  • Screenshot of the Font Squirrel homepageCSS

    Font Squirrel

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

    Visit
  • Screenshot of the Wordmark.it homepageCSS

    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

  • Screenshot of Coolors homepageCSS

    Coolors

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

    Visit
  • Screenshot of ColorSpace homepageCSS

    ColorSpace Palette

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

    Visit
  • Screenshot of ColorSpace gradient tool onlineCSS

    ColorSpace Gradient

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

    Visit
  • Screenshot of CSS Gradient homepageCSS

    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
  • Screenshot of Sip colour picker homepageCSS

    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

  • Screenshot of Unsplash homepageGeneral

    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
  • Screenshot of Pixabay homepageGeneral

    Pixabay

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

    Visit
  • Screenshot of Pexels homepageGeneral

    Pexels

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

    Visit
  • Screenshot of Pexels Videos homepageGeneral

    Pexels Videos

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

    Visit
  • Screenshot of Coverr homepageGeneral

    Coverr

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

    Visit
  • Screenshot of Placeit homepageGeneral

    Placeit

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

    Visit
  • Screenshot of Optimizilla homepageGeneral

    Optimizilla

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

    Visit

Icons

  • Screenshot of Font Awesome homepageGeneral

    Font Awesome

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

    Visit
  • Screenshot of Icomoon homepageGeneral

    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
  • Screenshot of Devicon homepageGeneral

    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
  • Screenshot of Material Icons homepageGeneral

    Material Icons

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

    Visit
  • Screenshot of Ionicons homepageGeneral

    Ionicons

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

    Visit
  • Screenshot of Flaticon homepageGeneral

    Flaticon

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

    Visit
  • Screenshot of Iconmonstr homepageGeneral

    Iconmonstr

    A smaller, but seriously cool library of icons

    Visit
  • Screenshot of Vivid.js homepageGeneral

    Vivid.js

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

    Visit

Inspiration

  • Screenshot of Codepen homepageGeneral

    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
  • Screenshot of Awwwards homepageGeneral

    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
  • Screenshot of Dribbble homepageGeneral

    Dribbble

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

    Visit

Utilities

  • Screenshot of Normalize.css homepageCSS

    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
  • Screenshot of Reset.css homepageCSS

    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
  • Screenshot of Cubic Bezier homepageCSS

    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
  • Screenshot of Easing Functions homepageCSS

    Easing Functions

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

    Visit
  • Screenshot of CSS Triangle Generator homepageCSS

    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
  • Screenshot of Clippy homepageCSS

    Clippy

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

    Visit
  • Screenshot of Keyframes homepageCSS

    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
  • Screenshot of 30 Seconds of CSS homepageCSS

    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

  • Screenshot of W3C HTML Validator homepageHTML

    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
  • Screenshot of W3C CSS Validator homepageCSS

    W3C HTML Validator

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

    Visit
  • Screenshot of Google Analytics homepageGeneral

    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
  • Screenshot of BrowserStack homepageGeneral

    BrowserStack

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

    Visit

Deployment

  • Screenshot of Namecheap homepageGeneral

    Namecheap

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

    Visit
  • Screenshot of Heroku homepageGeneral

    Heroku

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

    Visit
  • Screenshot of Digital Ocean homepageGeneral

    Digital Ocean

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

    Visit

Reporting

  • Screenshot of SEOptimer homepageGeneral

    SEOptimer

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

    Visit
  • Screenshot of Front-end Checklist homepageGeneral

    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
  • Screenshot of Nibbler homepageGeneral

    Nibbler

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

    Visit
  • Screenshot of Google Pagespeed homepageGeneral

    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
  • Screenshot of Google Mobile homepageGeneral

    Google Mobile Speed Test

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

    Visit
  • Screenshot of Real Favicon Generator homepageGeneral

    Real Favicon Generator

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

    Visit
  • Screenshot of Pingdom homepageGeneral

    Pingdom

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

    Visit
  • Screenshot of Sqreen security checklist pageGeneral

    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

If you know anyone who you think might benefit from this list, please share: