The freeCodeCamp podcast is a great way to learn on the go. Podcast episodes are a mix of interviews and specific topics. They always provide great opportunities for learning!

Shop Talk is a great podcast hosted by Dave Rupert and Chris Coyier. They always have great guests and interesting conversations.

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

The Syntax podcast is hosted by Wes Bos and Scott Tolinski. Wes and Scott are very knowledgeable and so it's great to hear them chat about all kinds of interesting dev topics.

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 hot topics.

CSS In Real Life is a blog by Michelle Barker covering CSS topics and useful snippets. Michelle's articles are always very practical and written in an engaging way.

Flavio is a prolific writer with new blog articles published regularly. He also has a number of free eBooks that are great resources for a range of topics.

Coding Coach is a free, open-source platform that aims to connect software developers and mentors all over the world. If you're looking for a 1-to-1 mentor then it's well worth checking out.

The Changelog is an amazing resource for news and podcasts for developers. They also have a Slack community that you can get involved in.

Spectrum is a community platform that has some great forums for developers. Frontend Cafe is a great place to start, but there are plenty more forums to get involved in.

Reddit has some great channels (called subreddits) for developers to hang out. To get you started, I'd recommend /r/frontend and /r/webdev. There are always good discussions happening!

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

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

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

A strong community of developers helping each other out, sharing resources and chatting about code.

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

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.

Codrops is a brilliant resource for any front-end developer. It offers plenty of demos and tutorials that push the boundaries of what's possible on the front-end.

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.

freeCodeCamp News is a great place to read articles for developers of all levels and stacks.

Stack Overflow is the mecca for coding Q&A. It is the world's largest developer community and is an amazing resource for any developer.

CSS Tricks focuses mostly on...you guessed it: CSS. However, many articles go beyond CSS and it is a truly incredible resource.

Dev.to is a vibrant community of developers writing articles and helping each other out. The codebase itself is open source, so anyone in the community can get involved and contribute.

The Net Ninja has some awesome tutorials on everything from HTML & CSS to JavaScript, React, Node, Firebase, and beyond.

Brad Traversy is a great instructor and his YouTube channel is full of very helpful tutorials and explanations on a wide range of development topics.

Florin's YouTube channel is full of amazing tutorials and code alongs. He's even got a playlist of himself live streaming while building Frontend Mentor challenges!

Scott Tolinski does an incredible job with Level Up Tutorials. The videos are of the highest quality and the content is always up-to-date. Over a quarter of a million subscribers can't be wrong!

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.

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

Every Layout is a great resource by Heydon Pickering and Andy Bell. They teach you how to better harness the built-in algorithms that power browsers and CSS. Say goodbye to magic numbers in your CSS!

MarkSheet is a nicely presented written HTML & CSS tutorial. It's written in an engaging way with lots of code snippets and simple explanations.

Short code snippets for all your development needs. This website is a great resource to look through and learn some new tricks.

Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view. This book is a great resource to learn the fundamentals of good design.

An awesome collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew.

A free visual guide to CSS. It features the most popular properties and explains them with illustrated and animated examples.

A free HTML reference featuring all elements and attributes. It's a great website to refer back to if you need to check up on something HTML-related.

An extremely comprehensive resource that goes from basic to advanced concepts offering detailed explanations for every topic.

The A11y Style Guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.

Coder Coder is a great learning resource aimed at self-taught web developers. It's run by Jessica Chan, who has also done a number of live coding sessions with Frontend Mentor challenges.

web.dev is a site created by Google to help developers learn how to create high quality websites. On top of being a learning resource it also provides site auditing and reporting tools.

This goes in the reading section, but there are also plenty of videos linked in this resource. If you're a JavaScript developer (current or aspiring) this GitHub repo is a goldmine of information.

Illustrated.dev is a brilliant website full of illustrated explanations on a range of topics by Maggie Appleton. The illustrations are beautiful and it's a great way to learn new concepts.

A series of valuable resources to help you get up-to-speed with version control and Git.

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.

This 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.

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.

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

Without a defined structure, CSS can get pretty messy pretty quickly. BEM principles are only one possible solution, but I've found it to be the sanest approach to structuring 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.

CSS code-golfing is here! Use your CSS skills to replicate targets with the least code possible.

If you learn better by problem-solving, Exercism is an incredible resource. Out of the front-end languages, you can only do challenges for JavaScript, but the track will help you become a JS master!

It is always useful to keep your regular expression game sharp. You never know when you might need it! RegexOne is a great practice ground for boosting your skills.

30 Seconds of Interviews is a great place to come if you want to test yourself with dev-related questions. Perfect for some last minute interview prep!

Build your understanding of JavaScript through logic-based challenges. Codewars is a great place to improve your problem-solving skills.

Scrimba is an awesome learning platform that allows you to interact with the code directly in the screencast player. Subjects include HTML, CSS, JS, React, Vue, and more.

The Mimo app is a fun way to learn to code on the go. The app is beautifully made and builds up your knowledge gradually using fun, interactive lessons.

A great platform for learning HTML, CSS, JS, and more. Small, interactive tutorials help you progress at a steady pace. There is also a large community where you can ask questions if you get stuck.

Grasshopper is a fun app for helping beginners learn to code. Learn JavaScript through short, interactive lessons and move through the levels as you progress.

Struggling to get your head around using Git and GitHub? This series of practical projects will help you learn all the ins and outs of the platform.

A really fun way to learn Flexbox. Make your way through a zombie-infested world with nothing more than a crossbow and your trusty Flexbox skills.

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

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

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

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

Future Learn offers a variety of courses from leading universities and cultural institutions from around the world. There are a lot of great options to choose from!

thoughtbot have very kindly open sourced Upcase, their online learning platform. It's full of extremely useful "trails" to help you upskill with topics like Mastering Git and Design for Developers.

A brilliant resource for anyone who wants to learn some Computer Science. David J. Malan does an amazing job delivering the course in an engaging way.

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.

Skillshare is an amazing learning platform where you can learn anything from coding to design to marketing and business. It's perfect if you want to branch out a little from pure code tutorials.

Wes Bos teaches you the most up-to-date syntax of the JavaScript language. This course has been updated to include ES6+ features such as Async/Await.

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

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

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

The free Frontend Masters Bootcamp is a great way to get up and running with HTML, CSS, and JavaScript.

Udacity offers an incredible array of free individual courses. They also offer paid nanodegree programmes if you're looking for something with more structure.

Treehouse offers a wide range of high-quality learning tracks. You can learn anything from front-end development to UX design to back-end development and lots more in between!

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.

Egghead offers a lot of free community resource courses for you to learn from. They also have some great paid courses that will help boost your knowledge.

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.

This very useful box-shadow generator by Phillip Brumm helps you create smooth, multi-layered shadows with ease.

Border radius isn't just for turning squares into circles. This awesome tool shows the true power of the border-radius property and the amazing organic shapes that can be created with it.

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

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

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

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

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

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

Glitch is a friendly community that offers free tools to create and use apps. Their code editor allows for seamless collaboration on projects and can connect to the dev tools you already use.

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

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

Codepen is a brilliant place to experiment with front-end code. It also has a great library of 'Pens' to look at and gain inspiration from. You can do a ton of stuff for free but can switch to premium for more features.

Get Waves is a simple web app to generate SVG waves, which you can then use in your projects.

Ouch! offers a library of beautiful vector illustrations in a range of styles. Perfect for when you're looking to add some extra style to your website.

This library of mix-and-match illustrations of people is a great resource to add some stylish imagery to your website.

DrawKit is a collection of free, beautiful, and customizable SVG illustrations. All the free illustrations are available under the MIT License, so you're able to use them any way you like.

unDraw is an incredible collection of beautiful illustrations. All illustrations are available under the MIT License, so you're free to use them any way you like.

Roundicons offers both paid and free icon packs. Their free icon packs have a wide range of styles and look great.

A beautiful set of free icons to use in your projects from Steve Schoger.

A great collection of repeatable SVG background patterns for you to use on your web projects.

A beautiful and customizable library of SVG icons. Pick your colors and away you go.

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

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

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.

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

A useful tool if you only have a small version of an image. Their AI technology will let you enlarge your image without losing quality.

SVGOMG is the missing GUI for SVGO. If you have SVGs on your site and you need to optimize them, then this is the tool for you.

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

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.

ColorBox is an amazing tool, open sourced by Lyft, that helps create accessible color systems. The GUI allows you to tweak your requirements as much as you like. It's a seriously powerful tool!

Colormind is an amazing resource for generating color palettes. You can even feed it a picture and it will create a color palette from that.

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 very useful tool for any front-end developer.

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

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

ColorSpace offers a great way of creating beautiful palettes based around a single color. Add your primary color and ColorSpace will generate some palettes to compliment it.

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

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

Hands down the best resource for free web fonts. It offers a huge font library for you to choose from.

Inverted Triangle CSS (ITCSS) is a great method for architecting your CSS code. If you're building medium to large projects, you might find it useful.

The Accessibility Project is a community-driven effort to make web accessibility easier. It offers how-tos and tips to help you build more accessible sites.

The definitive resource for all things SVG. Be sure to bookmark this article and come back to it whenever you need.

Custom styled form controls usually come at the expense of accessibility. This resource will make sure you never create a form with poor accessibility again.

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!

Like the CSS style guide, Airbnb's JavaScript style guide is very insightful. They also include their style guide for React inside it.

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.

Can I Use will tell you what the browser support is like for the latest and greatest advances in front-end technologies.

Your site needs to be usable by everyone. Accessibility Matters is a great resource, offering HTML patterns to help teach you the ins and outs of accessible markup.

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

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

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

Although called HTML Cheat Sheet, this site is also a great resource for CSS and JavaScript. Perfect for when you're getting started as a front-end developer.

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

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

React Native allows developers to build out native mobile apps in JavaScript. You can then build native iOS and Android using simple command-line prompts. It is a very powerful tool, especially for small teams building out their first apps.

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

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

Foundation is another well-written front-end framework. It's very simple to use and you can build complex interfaces in no time at all.

Bootstrap is the most well-known front-end component library. It's a very well-written tool, perfect for rapid prototyping or web development.

Next.js is a React framework that helps you build server-side rendered applications with zero configuration. There are lots of benefits to building Next applications, so it's well worth checking out.

Vue.js is a very popular JavaScript framework. It offers a beautiful syntax and is a pleasure to work with. It has a strong ecosystem around it and so is a great choice on the front-end.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs.

React is a JavaScript library from Facebook. It re-defined how front-end developers build the interactive user interfaces. Now a very mature library, it has a strong ecosystem of developers and packages.

Wave is an extremely valuable accessibility evaluation tool. Run your site through it to get a detailed report on what changes you need to make to improve how accessible it is.

Uptime Robot is an invaluable tool for monitoring your site. Setup monitors to ping your website every 5 minutes for the free plan or every minute for the paid plan. Get sent an email straight away if your site is down when it gets pinged.

Yellow Lab Tools run an audit on your HTML, CSS and JS. It also runs performance tests to make sure you're sticking to the best practices.

Another crucial checklist to go through is your performance checklist. If your site takes ages to load you'll have a hard time getting users to stick around.

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.

Receive a detailed report of your website's performance. The report includes prioritized tasks for how you can improve.

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

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

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

Receive a free report on some important areas of your site. See how your site scores for SEO, accessibility and social media.

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.

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

Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, and more.

Digital Ocean is another cloud computing platform. It aims to simplify the deployment and maintenance of cloud-based applications. It's an amazing service. Frontend Mentor uses it for hosting!

Namecheap offers domain registration, shared hosting and many other services. They're my first choice when registering a new domain. Their customer support is also amazing.

Vercel is an amazing hosting service for static & JAMstack sites. It's super simple to set up. Connect your GitHub, GitLab or Bitbucket, point to a repo and your site will be deployed.

Be sure your CSS code contains no errors with this official W3C code 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.

BrowserStack offers a really amazing cross-browser testing experience. Making sure your websites look good on different devices is key to building modern websites. So this is an extremely useful tool!

Fathom Analytics is an awesome privacy-first analytics tool. There's no need to track unnecessary user data. I use them for the analytics on Frontend Mentor and I love it!

LambdaTest is an awesome cross-browser testing tool. They have a free tier, which is a great way to get started with the service. Cross-browser testing is a crucial part of a professional workflow.

* If you click through the affiliate links and make a purchase, I will receive a commission at no extra cost to you. This revenue helps me focus more time on the site and continue to improve it.

** If you click the referral links and make a purchase, I will receive credit towards the selected service. I use them too, so it really helps and won't cost you any extra!