Learning

  • Online Courses

    • Screenshot for the freeCodeCamp website

      freeCodeCamp

      • HTML
      • CSS
      • JS
      Free

      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.

    • Screenshot for the Beginner JavaScript website

      Beginner JavaScript

      • JS
      affiliate$89+

      A fun, exercise heavy approach to learning modern JavaScript from scratch taught by Wes Bos.

    • Screenshot for the Egghead website

      Egghead

      • HTML
      • CSS
      • JS
      • GENERAL
      Free - $40/mo

      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.

    • Screenshot for the Codecademy website

      Codecademy

      • HTML
      • CSS
      • JS
      Free - $19.99/mo

      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.

    • Screenshot for the Treehouse website

      Treehouse

      • HTML
      • CSS
      • JS
      • GENERAL
      $25/mo+

      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!

    • Screenshot for the Udacity website

      Udacity

      • HTML
      • CSS
      • JS
      Free

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

    • Screenshot for the Frontend Masters Bootcamp website

      Frontend Masters Bootcamp

      • HTML
      • CSS
      • JS
      Free

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

    • Screenshot for the React for Beginners website

      React for Beginners

      • JS
      affiliate$89+

      Upgrade your JavaScript skills. Learn React JS in just a couple of afternoons, taught by Wes Bos.

    • Screenshot for the Advanced React & GraphQL website

      Advanced React & GraphQL

      • JS
      affiliate$89+

      Wes Bos teaches you how to build full-stack JavaScript applications using React & GraphQL.

    • Screenshot for the Wes Bos: CSS Grid website

      Wes Bos: CSS Grid

      • CSS
      affiliateFree

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

    • Screenshot for the Wes Bos: JavaScript 30 website

      Wes Bos: JavaScript 30

      • JS
      affiliateFree

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

    • Screenshot for the Wes Bos: Flexbox website

      Wes Bos: Flexbox

      • CSS
      affiliateFree

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

    • Screenshot for the ES6 for Everyone website

      ES6 for Everyone

      • JS
      affiliate$89+

      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.

    • Screenshot for the The Complete Web Developer in 2021: Zero to Mastery website

      The Complete Web Developer in 2021: Zero to Mastery

      • HTML
      • CSS
      • JS
      • GENERAL
      affiliate$29/mo

      This course taught by Andrei Neagoie provides 37 hours of high-quality material. This course is packed full of useful topics including HTML, CSS, Javascript, React, Node.js, Machine Learning & more!

    • Screenshot for the Skillshare website

      Skillshare

      • HTML
      • CSS
      • JS
      • GENERAL
      affiliate$10/mo+

      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.

    • Screenshot for the Khan Academy website

      Khan Academy

      • HTML
      • CSS
      • JS
      Free

      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.

    • Screenshot for the CS50 website

      CS50

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      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.

    • Screenshot for the JavaScript: The Advanced Concepts website

      JavaScript: The Advanced Concepts

      • JS
      affiliate$29/mo

      Andrei Neagoie teaches you modern, advanced JavaScript practices to help you become a highly-skilled JavaScript developer.

    • Screenshot for the Upcase by thoughtbot website

      Upcase by thoughtbot

      • GENERAL
      Free

      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.

    • Screenshot for the The Complete Junior to Senior Web Developer Roadmap website

      The Complete Junior to Senior Web Developer Roadmap

      • HTML
      • CSS
      • JS
      • GENERAL
      affiliate$29/mo

      This course taught by Andrei Neagoie will help you navigate the path from junior to senior developer. Andrei dives into a number of topics to give you the technical skills you need to succeed.

    • Screenshot for the Future Learn website

      Future Learn

      • HTML
      • CSS
      • JS
      • GENERAL
      affiliateFree - $250/yr

      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!

    • Screenshot for the Complete React Developer in 2021 (w/ Redux, Hooks, GraphQL) website

      Complete React Developer in 2021 (w/ Redux, Hooks, GraphQL)

      • JS
      affiliate$29/mo+

      Andrei Neagoie & Yihua Zhang teach you how to build enterprise-level React applications and deploy to production. Learn topics like Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.

    • Screenshot for the Vue Mastery website

      Vue Mastery

      • JS
      Free - $19/mo

      Vue Mastery is the ultimate resource for Vue.js developers. They produce weekly lessons and their instructors include Evan You, the creator of Vue, and lots of Vue.js Core Members.

    • Screenshot for the Conquering Responsive Layouts website

      Conquering Responsive Layouts

      • CSS
      Free

      Kevin Powell takes you through everything you need to know to create responsive layouts in his brilliant 21-day course.

    • Screenshot for the Coding Bootcamp by Ania Kubów website

      Coding Bootcamp by Ania Kubów

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      Ania Kubów has created this brilliant 12+ hour bootcamp and released it on YouTube for free! If you're getting started and want some valuable guidance then this will be an amazing resource for you.

    • Screenshot for the React 2025 website

      React 2025

      • JS
      Free

      In this course, Lee Robinson takes you through how to build applications with React. Lee also goes beyond React and walks through using other services like Firebase, Stripe, and Vercel.

    • Screenshot for the Mastering Next.js website

      Mastering Next.js

      • JS
      Free

      Next.js is an incredible server-side rendering framework for React. We even use it on Frontend Mentor! In this free course, Lee Robinson teaches you everything you need to know to get started with it.

  • Interactive Tutorials

    • Screenshot for the General Assembly Dash website

      General Assembly Dash

      • HTML
      • CSS
      • JS
      Free

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

    • Screenshot for the Flexbox Froggy website

      Flexbox Froggy

      • CSS
      Free

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

    • Screenshot for the Flexbox Defense website

      Flexbox Defense

      • CSS
      Free

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

    • Screenshot for the Grid Garden website

      Grid Garden

      • CSS
      Free

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

    • Screenshot for the CSS Diner website

      CSS Diner

      • CSS
      Free

      A valuable (and fun!) interactive challenge to help learn CSS selectors.

    • Screenshot for the Flexbox Zombies website

      Flexbox Zombies

      • CSS
      Free

      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.

    • Screenshot for the GitHub Learning Lab website

      GitHub Learning Lab

      • GENERAL
      Free

      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.

    • Screenshot for the Grasshopper website

      Grasshopper

      • JS
      Free

      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.

    • Screenshot for the SoloLearn website

      SoloLearn

      • HTML
      • CSS
      • JS
      Free

      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.

    • Screenshot for the Mimo website

      Mimo

      • HTML
      • CSS
      • JS
      Free - $9.99/MO

      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.

    • Screenshot for the Scrimba website

      Scrimba

      • HTML
      • CSS
      • JS
      Free

      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.

    • Screenshot for the Learn JavaScript website

      Learn JavaScript

      • JS
      Free - $69

      Learn JavaScript is a well-structured step-by-step tutorial with interactive stages to help you reinforce what you've learned. The first lessons are free, but you need to pay for the complete course.

    • Screenshot for the Grid Critters website

      Grid Critters

      • CSS
      $179

      If you're looking to learn CSS Grid inside out, this interactive tutorial by Dave Geddes is a great (and fun!) option. Conquer progressively difficult challenges to gain a deep understanding of Grid.

  • Problem Solving

    • Screenshot for the Codewars website

      Codewars

      • JS
      Free

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

    • Screenshot for the Edabit website

      Edabit

      • JS
      affiliateFree

      If you like solving problems then Edabit is a great way to improve your JavaScript skills. They have loads of great challenges of varying difficulties to get your brain working.

    • Screenshot for the 30 Seconds of Interviews website

      30 Seconds of Interviews

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      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!

    • Screenshot for the RegexOne website

      RegexOne

      • GENERAL
      Free

      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.

    • Screenshot for the ES6 Katas website

      ES6 Katas

      • JS
      Free

      Practice your ES6 by fixing failing tests.

    • Screenshot for the Regex Crossword website

      Regex Crossword

      • GENERAL
      Free

      A fun spin practicing regex. Build your skills by playing Regex Crossword.

    • Screenshot for the Exercism website

      Exercism

      • JS
      Free

      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!

    • Screenshot for the CSSBattle website

      CSSBattle

      • CSS
      Free

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

    • Screenshot for the JavaScript Questions website

      JavaScript Questions

      • JS
      Free

      Want to put your JavaSript knowledge to the test? This awesome collection of JavaScript questions created by Lydia Hallie will definitely do that!

  • Reading

    • Screenshot for the Shay Howe: Learn HTML & CSS website

      Shay Howe: Learn HTML & CSS

      • HTML
      • CSS
      Free

      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.

    • Screenshot for the BEM website

      BEM

      • CSS
      Free

      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.

    • Screenshot for the You don't know JS website

      You don't know JS

      • JS
      Free

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

    • Screenshot for the Eloquent JavaScript website

      Eloquent JavaScript

      • JS
      Free

      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.

    • Screenshot for the JavaScript Design Patterns website

      JavaScript Design Patterns

      • JS
      Free

      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.

    • Screenshot for the Code Analogies website

      Code Analogies

      • CSS
      • JS
      • GENERAL
      Free

      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.

    • Screenshot for the Try Git website

      Try Git

      • GENERAL
      Free

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

    • Screenshot for the Illustrated.dev website

      Illustrated.dev

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      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.

    • Screenshot for the 33 Concepts Every JavaScript Developer Should Know website

      33 Concepts Every JavaScript Developer Should Know

      • JS
      Free

      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.

    • Screenshot for the web.dev website

      web.dev

      • GENERAL
      Free

      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.

    • Screenshot for the CSS Animation website

      CSS Animation

      • CSS
      Free

      Level up your CSS animation skills with these articles, tips, and tutorials

    • Screenshot for the Interneting is Hard website

      Interneting is Hard

      • HTML
      • CSS
      Free

      An extremely comprehensive resource to help people learn HTML & CSS. The tutorials offer beautiful diagrams and hands-on examples.

    • Screenshot for the Coder Coder website

      Coder Coder

      • HTML
      • CSS
      • JS
      Free

      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.

    • Screenshot for the A11y Style Guide website

      A11y Style Guide

      • HTML
      Free

      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.

    • Screenshot for the JavaScript.info website

      JavaScript.info

      • JS
      Free

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

    • Screenshot for the HTML Reference website

      HTML Reference

      • HTML
      Free

      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.

    • Screenshot for the CSS Reference website

      CSS Reference

      • CSS
      Free

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

    • Screenshot for the Grid by Example website

      Grid by Example

      • CSS
      Free

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

    • Screenshot for the Refactoring UI Book website

      Refactoring UI Book

      • GENERAL
      $79+

      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.

    • Screenshot for the 30 Seconds of Code website

      30 Seconds of Code

      • CSS
      • JS
      • GENERAL
      Free

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

    • Screenshot for the MarkSheet website

      MarkSheet

      • HTML
      • CSS
      Free

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

    • Screenshot for the Every Layout website

      Every Layout

      • CSS
      Free - $100

      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!

    • Screenshot for the Front-end Developer Roadmap website

      Front-end Developer Roadmap

      • GENERAL
      Free

      This brilliant roadmap by Kamran Ahmed gives an amazing overview of the front-end ecosystem and the potential routes you can take as a front-end developer.

    • Screenshot for the Inclusive Components website

      Inclusive Components

      • HTML
      • CSS
      Free

      This blog by Heydon Pickering will help you build better interfaces. Each post explores a common interface component and comes up with a better, more robust, and accessible version of it.

    • Screenshot for the daily.dev website

      daily.dev

      • HTML
      • CSS
      • JS
      • GENERAL
      Free - $4/mo

      daily.dev is the easiest way to stay up-to-date with the latest programming news. Simply install the plugin and get a curated feed of articles every time you open a new browser tab.

    • Screenshot for the Humane by Design website

      Humane by Design

      • GENERAL
      Free

      Humane by Design is an amazing resource to help you design and build ethically humane digital products. As a front-end developer, these patterns will be great to learn and internalize.

    • Screenshot for the Modern CSS Solutions for Old CSS Problems website

      Modern CSS Solutions for Old CSS Problems

      • CSS
      Free

      This blog series by Stephanie Eckles will help you upgrade your CSS skills. Every post presents modern CSS techniques in an engaging, easy to understand manner that will help you grow as a developer.

    • Screenshot for the Josh Comeau website

      Josh Comeau

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      Josh Comeau has an incredible knack for explaining topics in an engaging way. Each article is beautifully presented and will have you reading all the way to the end.

  • Videos

    • Screenshot for the Layout Land website

      Layout Land

      • CSS
      Free

      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.

    • Screenshot for the Level Up Tutorials website

      Level Up Tutorials

      • JS
      • GENERAL
      Free

      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!

    • Screenshot for the Florin Pop website

      Florin Pop

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      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!

    • Screenshot for the Traversy Media website

      Traversy Media

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      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.

    • Screenshot for the Fun Fun Function website

      Fun Fun Function

      • JS
      • GENERAL
      Free

      Mattias Petter Johansson dives into a wide variety of development topics while keeping the videos fun and entertaining.

    • Screenshot for the The Net Ninja website

      The Net Ninja

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

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

    • Screenshot for the Learn With Jason website

      Learn With Jason

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      Learn With Jason is a live show, where Jason Lengstorf pair programs with brilliant folks from the community to learn something new in 90 minutes. The episodes are always fun and a great way to learn.

    • Screenshot for the Webbed Briefs website

      Webbed Briefs

      • GENERAL
      Free

      This hilarious and brilliantly presented video series by Heydon Pickering will definitely keep you engaged and teach you some valuable lessons about the web...and goats.

  • Podcasts

    • Screenshot for the Syntax website

      Syntax

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      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.

    • Screenshot for the JavaScript Jabber website

      JavaScript Jabber

      • JS
      Free

      Devchat.tv offers some great podcasts. If you're serious about JavaScript, JavaScript Jabber is a great way to stay up-to-date with the hot topics.

    • Screenshot for the React Podcast website

      React Podcast

      • JS
      Free

      If you're using React, we'd recommend listening to the React Podcast. It's a great way to stay up-to-date with the latest news in the React ecosystem.

    • Screenshot for the Shop Talk website

      Shop Talk

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

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

    • Screenshot for the The Stack Overflow Podcast website

      The Stack Overflow Podcast

      • GENERAL
      Free

      Covering all corners of how code is reshaping our world, The Stack Overflow Podcast is a great listen for any developer looking to stay up-to-date with the latest trends.

    • Screenshot for the The CSS Podcast website

      The CSS Podcast

      • CSS
      Free

      Una Kravets and Adam Argyle, Developer Advocates from Google, break down CSS concepts into short podcast episodes.

    • Screenshot for the freeCodeCamp Podcast website

      freeCodeCamp Podcast

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      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!

    • Screenshot for the Ladybug Podcast website

      Ladybug Podcast

      • GENERAL
      Free

      The Ladybug Podcast is an awesome show featuring Kelly Vaughn, Ali Spittel, and Emma Bostian. They created the podcast to add female voices to the male-dominated tech podcast space.

    • Screenshot for the Career Chats with Swyx and Randall website

      Career Chats with Swyx and Randall

      • GENERAL
      Free

      Every week, Swyx and Randall focus on 1 key idea to help you grow as a developer and move your career forward. Each episode is less than 10 minutes, so it's a great podcast for quick tips.

  • Blogs & Communities

    • Screenshot for the Dev.to website

      Dev.to

      • HTML
      Free

      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.

Workflow

  • Development Tools

    • Screenshot for the Visual Studio Code website

      Visual Studio Code

      • GENERAL
      Free

      VS Code is the text editor I use on a day-to-day basis. It offers a great development environment, which you can extend and customize as much as you like.

    • Screenshot for the Git website

      Git

      • GENERAL
      Free

      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.

    • Screenshot for the GitHub website

      GitHub

      • GENERAL
      Free

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

    • Screenshot for the Sizzy website

      Sizzy

      • GENERAL
      affiliate$5/mo+

      Sizzy is a browser built specifically for designers and developers. It allows you to fire up multiple device emulators at once and keep them all in sync. Perfect for helping build responsive websites!

    • Screenshot for the Dracula PRO website

      Dracula PRO

      • GENERAL
      affiliate$49

      A beautiful dark theme for tailored for programming to help keep you focused and productive. You can install the theme on multiple applications including your text editor, terminal, and even Slack.

    • Screenshot for the Atom website

      Atom

      • GENERAL
      Free

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

    • Screenshot for the GitLab website

      GitLab

      • GENERAL
      Free

      GitLab is another great development platform to help manage your projects. It has a lot of lot of feature including task trackers, built-in Continuous Delivery, plus a lot more.

    • Screenshot for the Emmet website

      Emmet

      • HTML
      Free

      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.

    • Screenshot for the Sass website

      Sass

      • CSS
      Free

      Sass is a CSS preprocessor that will supercharge your styling. It adds powerful features to help speed up your development workflow and make your code easier to maintain.

    • Screenshot for the Stylus website

      Stylus

      • CSS
      Free

      Stylus is a CSS preprocessor that aims to clean up the CSS syntax. If you're not a fan of all the curly braces and semi-colons in CSS, then you might want to check it out.

    • Screenshot for the PixelSnap website

      PixelSnap

      • GENERAL
      $39

      The fastest tool for measuring anything on your screen. PixelSnap's tool is very useful for helping to create pixel-perfect websites.

    • Screenshot for the Insomnia website

      Insomnia

      • GENERAL
      Free - $5/mo+

      Insomnia is a great application to help you work with APIs as a developer. It's really easy to customize to suit your own workflows and preferences.

    • Screenshot for the CodeSandbox website

      CodeSandbox

      • HTML
      • CSS
      • JS
      Free - $9/mo+

      CodeSandbox is an amazing tool to help you prototype ideas with code. Quickly spin up new sandboxes with pre-configured templates and easily share your code with others.

    • Screenshot for the Responsively website

      Responsively

      • GENERAL
      Free

      Being able to build responsive websites is table-stakes for front-end developers these days. Responsively is the perfect application to help you test your projects on all kinds of screen sizes.

    • Screenshot for the Polypane website

      Polypane

      • GENERAL
      affiliate$9/mo+

      Polypane has dozens of tools that help you build responsive, accessible, and fast websites. It's full of features that will speed up your workflow as a front-end developer.

    • Screenshot for the Figma website

      Figma

      • GENERAL
      Free - $15/mo+

      Figma is an extremely popular design tool that helps teams create, test, and ship better designs from start to finish.

    • Screenshot for the themer website

      themer

      • GENERAL
      Free - $1+

      themer gives you complete control to generate themes for your development environment (editors, terminals, wallpapers, and more). Choose your set of colors and generate your themes in a single click.

    • Screenshot for the Hyper website

      Hyper

      • GENERAL
      Free

      Hyper is a beautiful and fast Electron-based terminal created by the team at Vercel. It's fully extensible and easy to customize to help speed up your workflow.

    • Screenshot for the Coding Fonts website

      Coding Fonts

      • GENERAL
      Free

      We spend so much time in our text editors that we might as well like the font we're looking at! This site by the CSS Tricks team is an excellent resource to help you choose the right font.

  • Frameworks & Libraries

    • Screenshot for the React website

      React

      • JS
      Free

      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.

    • Screenshot for the Tailwind CSS website

      Tailwind CSS

      • CSS
      Free

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

    • Screenshot for the Vue.js website

      Vue.js

      • JS
      Free

      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.

    • Screenshot for the Next.js website

      Next.js

      • JS
      Free

      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.

    • Screenshot for the GatsbyJS website

      GatsbyJS

      • JS
      Free

      Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.

    • Screenshot for the Bootstrap website

      Bootstrap

      • HTML
      • CSS
      • JS
      Free

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

    • Screenshot for the Foundation website

      Foundation

      • HTML
      • CSS
      • JS
      Free

      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.

    • Screenshot for the Materialize website

      Materialize

      • HTML
      • CSS
      • JS
      Free

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

    • Screenshot for the Bulma website

      Bulma

      • HTML
      • CSS
      • JS
      Free

      Bulma is a nice CSS framework based on Flexbox. It makes building mobile-first, responsive layouts is a breeze.

    • Screenshot for the jQuery website

      jQuery

      • JS
      Free

      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.

    • Screenshot for the React Native website

      React Native

      • JS
      Free

      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.

    • Screenshot for the Animate.css website

      Animate.css

      • CSS
      Free

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

    • Screenshot for the Parsley website

      Parsley

      • JS
      Free

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

  • Resources

    • Screenshot for the Stack Overflow website

      Stack Overflow

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      Stack Overflow will most likely be your most-visited resource as a web developer. If you ever run into an issue with your code, someone has likely had that same issue resolved on Stack.

    • Screenshot for the HTML Cheat Sheet website

      HTML Cheat Sheet

      • HTML
      • CSS
      • JS
      Free

      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.

    • Screenshot for the Emmet Cheat Sheet website

      Emmet Cheat Sheet

      • CSS
      Free

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

    • Screenshot for the Codrops CSS Reference website

      Codrops CSS Reference

      • CSS
      Free

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

    • Screenshot for the MDN website

      MDN

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

      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.

    • Screenshot for the Accessibility Matters website

      Accessibility Matters

      • HTML
      • CSS
      • GENERAL
      Free

      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.

    • Screenshot for the Can I Use website

      Can I Use

      • HTML
      • CSS
      • JS
      • GENERAL
      Free

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

    • Screenshot for the Airbnb CSS Styleguide website

      Airbnb CSS Styleguide

      • CSS
      Free

      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.

    • Screenshot for the Airbnb JavaScript Styleguide website

      Airbnb JavaScript Styleguide

      • JS
      Free

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

    • Screenshot for the Superhero.js website

      Superhero.js

      • JS
      Free

      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!

    • Screenshot for the Accessible Form Controls website

      Accessible Form Controls

      • HTML
      • CSS
      Free

      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.

    • Screenshot for the Website Setup JS Cheat Sheet website

      Website Setup JS Cheat Sheet

      • JS
      Free

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

    • Screenshot for the SVG Compendium website

      SVG Compendium

      • HTML
      • CSS
      • JS
      Free

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

    • Screenshot for the Grid Cheat Sheet website

      Grid Cheat Sheet

      • CSS
      Free

      This CSS Grid cheat sheet will prove a valuable resource in the early days of building Grid layouts.

    • Screenshot for the The Accessibility Project website

      The Accessibility Project

      • HTML
      • CSS
      • GENERAL
      Free

      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.

    • Screenshot for the ITCSS website

      ITCSS

      • CSS
      Free

      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.

    • Screenshot for the Flexbox Cheat Sheet website

      Flexbox Cheat Sheet

      • CSS
      Free

      This is a great visual cheat sheet to help you get to grips with Flexbox. Well-worth a bookmark!

  • Typography

    • Screenshot for the Google Fonts website

      Google Fonts

      • CSS
      Free

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

    • Screenshot for the Font Squirrel website

      Font Squirrel

      • CSS
      Free

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

    • Screenshot for the Wordmark.it website

      Wordmark.it

      • CSS
      Free

      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.

  • Colors

    • Screenshot for the Coolors website

      Coolors

      • CSS
      Free

      Struggling for inspiration when creating a color palette? No worries, Coolors offers a helping hand with their auto-generator.

    • Screenshot for the ColorSpace Palette website

      ColorSpace Palette

      • CSS
      Free

      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.

    • Screenshot for the ColorSpace Gradient website

      ColorSpace Gradient

      • CSS
      Free

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

    • Screenshot for the CSS Gradient website

      CSS Gradient

      • CSS
      Free

      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.

    • Screenshot for the Sip website

      Sip

      • CSS
      $9.99

      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.

    • Screenshot for the Colormind website

      Colormind

      • CSS
      Free

      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.

    • Screenshot for the ColorBox website

      ColorBox

      • CSS
      Free

      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!

  • Media

    • Screenshot for the Unsplash website

      Unsplash

      • GENERAL
      Free

      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.

    • Screenshot for the Pixabay website

      Pixabay

      • GENERAL
      Free

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

    • Screenshot for the Pexels website

      Pexels

      • GENERAL
      Free

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

    • Screenshot for the Pexels Videos website

      Pexels Videos

      • GENERAL
      Free

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

    • Screenshot for the Coverr website

      Coverr

      • GENERAL
      Free

      7 new high-quality, beautiful videos every Monday. Amazing library of videos to choose from.

    • Screenshot for the Optimizilla website

      Optimizilla

      • GENERAL
      Free

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

    • Screenshot for the SVGOMG website

      SVGOMG

      • GENERAL
      Free

      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.

    • Screenshot for the AI Image Enlarger website

      AI Image Enlarger

      • GENERAL
      Free - $14.99/mo+

      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.

    • Screenshot for the ImageOptim website

      ImageOptim

      • GENERAL
      Free

      ImageOptim is an incredibly fast and easy to use image optimizer for Mac users. It optimizes images in place, so there's no need to re-download them. Very useful!

    • Screenshot for the Ojoy website

      Ojoy

      • GENERAL
      Free

      Ojoy is a great project created by Addy Osmani to help you scale up low-res images and improve their quality. Very handy if you're stuck with low-quality images!

  • Graphics

    • Screenshot for the Font Awesome website

      Font Awesome

      • GENERAL
      Free

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

    • Screenshot for the IcoMoon website

      IcoMoon

      • GENERAL
      Free - $19/mo

      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.

    • Screenshot for the Devicon website

      Devicon

      • GENERAL
      Free

      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.

    • Screenshot for the Material Icons website

      Material Icons

      • GENERAL
      Free

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

    • Screenshot for the Ionicons website

      Ionicons

      • GENERAL
      Free

      Ionicons is an amazing and 100% free font icon library with some beautiful icons.

    • Screenshot for the Flaticon website

      Flaticon

      • GENERAL
      Free

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

    • Screenshot for the Iconmonstr website

      Iconmonstr

      • GENERAL
      Free

      A smaller, but seriously cool library of icons.

    • Screenshot for the Vivid.js website

      Vivid.js

      • GENERAL
      Free

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

    • Screenshot for the Hero Patterns website

      Hero Patterns

      • GENERAL
      Free

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

    • Screenshot for the Zondicons website

      Zondicons

      • GENERAL
      Free

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

    • Screenshot for the Roundicons website

      Roundicons

      • GENERAL
      Free

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

    • Screenshot for the unDraw website

      unDraw

      • GENERAL
      Free

      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.

    • Screenshot for the DrawKit website

      DrawKit

      • GENERAL
      Free

      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.

    • Screenshot for the humaaans website

      humaaans

      • GENERAL
      Free

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

    • Screenshot for the Ouch! website

      Ouch!

      • GENERAL
      Free

      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.

    • Screenshot for the Cool Backgrounds website

      Cool Backgrounds

      • GENERAL
      Free

      Cool Backgrounds offers a selection of beautiful, enticing image backgrounds to add to your blog post, website, or wallpaper.

    • Screenshot for the Get Waves website

      Get Waves

      • GENERAL
      Free

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

    • Screenshot for the Blobmaker website

      Blobmaker

      • GENERAL
      Free

      Easily create random, unique, and organic-looking SVG shapes to use in your websites.

    • Screenshot for the Gradientify SVG Icons website

      Gradientify SVG Icons

      • GENERAL
      Free

      A useful resource from Iconshock providing an interactive free SVG icon pack made especially for gradient lovers.

    • Screenshot for the pattern.css website

      pattern.css

      • CSS
      Free

      If you're struggling to find beautiful patterns to fill your empty backgrounds check out pattern.css. It's an awesome CSS-only library that will make your web pages stand out!

    • Screenshot for the Blobs website

      Blobs

      • GENERAL
      Free

      Blobs helps you generate beautiful blob shapes for web and flutter apps.

  • Inspiration

    • Screenshot for the CodePen website

      CodePen

      • HTML
      • CSS
      • JS
      Free - $8/mo+

      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.

    • Screenshot for the Creative Tim website

      Creative Tim

      • HTML
      • CSS
      • JS
      • GENERAL
      affiliateFree - $19+

      Creative Tim offers beautiful UI Kits, templates, and dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js, and Laravel.

    • Screenshot for the Awwwards website

      Awwwards

      • GENERAL
      Free

      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.

    • Screenshot for the Dribbble website

      Dribbble

      • GENERAL
      Free

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

    • Screenshot for the Glitch website

      Glitch

      • HTML
      • CSS
      • JS
      Free

      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.

  • Utilities

    • Screenshot for the Normalize.css website

      Normalize.css

      • CSS
      Free

      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.

    • Screenshot for the Reset.css website

      Reset.css

      • CSS
      Free

      Reset.css removes all browser default styles, allowing you to start styling from scratch.

    • Screenshot for the Cubic Bezier website

      Cubic Bezier

      • CSS
      Free

      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.

    • Screenshot for the Easing Functions website

      Easing Functions

      • CSS
      Free

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

    • Screenshot for the CSS Triangle Generator website

      CSS Triangle Generator

      • CSS
      Free

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

    • Screenshot for the Clippy website

      Clippy

      • CSS
      Free

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

Launching

  • Testing & Analytics

    • Screenshot for the LambdaTest website

      LambdaTest

      • GENERAL
      affiliateFree - $15/mo+

      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.

    • Screenshot for the Fathom Analytics website

      Fathom Analytics

      • GENERAL
      affiliate$14/mo+

      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!

    • Screenshot for the BrowserStack website

      BrowserStack

      • GENERAL
      $12.50/mo+

      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!

    • Screenshot for the W3C HTML Validator website

      W3C HTML Validator

      • HTML
      Free

      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.

    • Screenshot for the W3C CSS Validator website

      W3C CSS Validator

      • CSS
      Free

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

  • Deployment

    • Screenshot for the Vercel website

      Vercel

      • GENERAL
      Free - $20/mo+

      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.

    • Screenshot for the Namecheap website

      Namecheap

      • GENERAL
      affiliatePaid

      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.

    • Screenshot for the Heroku website

      Heroku

      • GENERAL
      Free - $7/mo+

      Heroku makes it easy to deploy apps with very little configuration required.

    • Screenshot for the Digital Ocean website

      Digital Ocean

      • GENERAL
      referral$5/mo+

      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!

    • Screenshot for the Netlify website

      Netlify

      • GENERAL
      Free - $45/mo+

      Build, test, and deploy globally with Netlify’s all-in-one platform for modern web projects.

  • Reporting

    • Screenshot for the Lighthouse website

      Lighthouse

      • GENERAL
      Free

      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.

    • Screenshot for the SEOptimer website

      SEOptimer

      • GENERAL
      Free

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

    • Screenshot for the Front-End Checklist website

      Front-End Checklist

      • GENERAL
      Free

      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.

    • Screenshot for the Nibbler website

      Nibbler

      • GENERAL
      Free

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

    • Screenshot for the Google Pagespeed website

      Google Pagespeed

      • GENERAL
      Free

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

    • Screenshot for the Google Mobile Speed Test website

      Google Mobile Speed Test

      • GENERAL
      Free

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

    • Screenshot for the Varvy website

      Varvy

      • GENERAL
      Free

      Varvy is a very helpful reporting tool that offers SEO, speed and mobile reports.

    • Screenshot for the Real Favicon Generator website

      Real Favicon Generator

      • GENERAL
      Free

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

    • Screenshot for the Pingdom website

      Pingdom

      • GENERAL
      Free

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

    • Screenshot for the HTML & CSS Security Checklist website

      HTML & CSS Security Checklist

      • HTML
      • CSS
      Free

      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.

    • Screenshot for the Front-End Performance Checklist website

      Front-End Performance Checklist

      • GENERAL
      Free

      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.

    • Screenshot for the Yellow Lab Tools website

      Yellow Lab Tools

      • GENERAL
      Free

      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.

    • Screenshot for the Uptime Robot website

      Uptime Robot

      • GENERAL
      Free - $5.50/mo

      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.

    • Screenshot for the Wave website

      Wave

      • GENERAL
      Free

      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.

* If you visit one of our affiliate resources and make a purchase, Frontend Mentor may receive a commission. This comes at no extra cost to you and helps support the site.

** If you visit a resource using a referral link and make a purchase, Frontend Mentor may receive credits for the selected service. It doesn't cost you any extra. We use these services too, so it helps reduce our costs.

Latest Challenges

    NewPremium

    Art gallery website

    • HTML
    • CSS
    2junior

    This two-page art gallery project will be perfect if you're ready to branch out beyond single landing pages. There are some particularly interesting layout challenges!

    Free

    NFT preview card component

    • HTML
    • CSS
    1newbie

    This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.

    Premium

    Equalizer landing page

    • HTML
    • CSS
    1newbie

    This challenge will be a perfect test of your HTML & CSS skills. If you're starting to get comfortable building smaller projects, this will be a great step up.

    Free+

    Space tourism multi-page website

    • HTML
    • CSS
    • JS
    3intermediate

    This project is a fun collaboration with Scrimba and Kevin Powell! If you like, you can follow along and watch Kevin complete the project on Scrimba. Lots to learn!

    Free

    E-commerce product page

    • HTML
    • CSS
    • JS
    3intermediate

    In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!

    Premium

    Memory game

    • HTML
    • CSS
    • JS
    4advanced

    This project will be an excellent test for your HTML, CSS, and JS skills! You'll be building a fun memory game where players try to match pairs.

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!