Learning

• Online Courses

  • • HTML,
    • CSS,
    • JS

    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 website

    Free
  • • HTML,
    • CSS,
    • JS

    Khan Academy

    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 website

    Free
  • • HTML,
    • CSS,
    • JS

    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 website

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

    Udacity

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

    Visit website

    Free
  • • CSS

    Wes Bos: CSS Grid

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

    Visit website

    Free
  • • JS

    Wes Bos: JavaScript 30

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

    Visit website

    Free
  • • CSS

    Wes Bos: Flexbox

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    CS50

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Egghead

    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.

    Visit website

    Free - $40/mo
  • • general

    Upcase by thoughtbot

    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.

    Visit website

    Free

• Interactive Tutorials

  • • HTML,
    • CSS,
    • JS

    General Assembly Dash

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

    Visit website

    Free
  • • CSS

    Flexbox Froggy

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

    Visit website

    Free
  • • CSS

    Flexbox Defense

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

    Visit website

    Free
  • • CSS

    Grid Garden

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

    Visit website

    Free
  • • CSS

    CSS Diner

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

    Visit website

    Free
  • • CSS

    Flexbox Zombies

    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.

    Visit website

    Free
  • • general

    GitHub Learning Lab

    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.

    Visit website

    Free

• Problem Solving

  • • JS

    Codewars

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    30 Seconds of Interviews

    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!

    Visit website

    Free
  • • general

    RegexOne

    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.

    Visit website

    Free
  • • JS

    ES6 Katas

    Practice your ES6 by fixing failing tests.

    Visit website

    Free
  • • general

    Regex Crossword

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

    Visit website

    Free
  • • JS

    Exercism

    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!

    Visit website

    Free

• Reading

  • • HTML,
    • CSS

    Shay Howe: Learn 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 website

    Free
  • • CSS

    BEM

    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.

    Visit website

    Free
  • • JS

    You don't know JS

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

    Visit website

    Free
  • • JS

    Eloquent JavaScript

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

    Visit website

    Free
  • • JS

    JavaScript Design Patterns

    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.

    Visit website

    Free
  • • CSS,
    • JS,
    • general

    Code Analogies

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

    Visit website

    Free
  • • general

    Try Git

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

    Visit website

    Free
  • • JS

    33 Concepts Every JavaScript Developer Should Know

    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.

    Visit website

    Free
  • • general

    web.dev

    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.

    Visit website

    Free

• Videos

  • • HTML,
    • CSS,
    • JS,
    • general

    Awesome Talks

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

    Visit website

    Free
  • • CSS

    Layout Land

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

    Visit website

    Free
  • • JS,
    • general

    Level Up Tutorials

    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!

    Visit website

    Free

• Blogs & Communities

  • • HTML,
    • CSS,
    • JS,
    • general

    Dev.to

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    CSS Tricks

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Stack Overflow

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    freeCodeCamp Medium

    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 website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    CodeNewbie

    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 website

    Free
  • • HTML,
    • CSS,
    • JS

    Codrops

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    SitePoint

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    FEDs on Slack

    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!

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Smashing Magazine

    Smashing Magazine pumps out great articles on a wide range of web development subjects. Common topics include accessibility, design and new CSS features.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Front-End Front

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    DevChat Slack

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Hacker Noon

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Frontend Developers Slack

    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!

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Scotch

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Reddit

    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!

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Spectrum

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    The Changelog

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

    Visit website

    Free

• Podcasts

  • • JS

    JavaScript Jabber

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

    Visit website

    Free
  • • general

    Indie Hackers

    The Indie Hackers podcast doesn't actually talk about the specifics of coding. But, it is an amazing resource for anyone looking to build their own digital products. The community in the forum is also very supportive.

    Visit website

    Free
  • • JS,
    • general

    Syntax

    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.

    Visit website

    Free
  • • JS

    The React Podcast

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Shop Talk

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    freeCodeCamp Podcast

    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!

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    CodeNewbie Podcast

    The CodeNewbie podcast is a great resource to hear stories from other developers. Each episode takes an interview format where you hear about someone's coding journey.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Front End Happy Hour

    A great (alcoholic) twist on the usual podcast format. Developers get together to chat about specific front-end topics over a drink...or two.

    Visit website

    Free
  • • JS

    JS Party

    JS Party is a great podcast to listen to for all things JavaScript. The podcast always tackles interesting topics and provides plenty of opportunities for learning.

    Visit website

    Free
  • • general

    The Changelog Podcast

    The Changelog podcast always has amazing interviews with developers, leaders, and innovators within software development.

    Visit website

    Free

Workflow

• Development Tools

  • • general

    Visual Studio Code

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

    Visit website

    Free
  • • general

    Atom

    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.

    Visit website

    Free
  • • general

    Git

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

    Visit website

    Free
  • • general

    GitHub

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

    Visit website

    Free
  • • general

    GitLab

    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.

    Visit website

    Free
  • • HTML

    Emmet

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

    Visit website

    Free
  • • CSS

    Sass

    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.

    Visit website

    Free
  • • CSS

    Stylus

    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.

    Visit website

    Free

• Frameworks & Libraries

  • • HTML,
    • CSS,
    • JS

    Bootstrap

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS

    Foundation

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS

    Materialize

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS

    Bulma

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

    Visit website

    Free
  • • JS

    jQuery

    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.

    Visit website

    Free
  • • JS

    React

    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.

    Visit website

    Free
  • • JS

    React Native

    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.

    Visit website

    Free
  • • JS

    Vue.js

    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.

    Visit website

    Free
  • • CSS

    Animate.css

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

    Visit website

    Free
  • • JS

    Parsley

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

    Visit website

    Free

• Resources

  • • HTML,
    • CSS,
    • JS

    HTML Cheat Sheet

    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.

    Visit website

    Free
  • • CSS

    Emmet Cheat Sheet

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

    Visit website

    Free
  • • CSS

    Codrops CSS Reference

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    MDN

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • general

    Accessibility Matters

    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.

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS,
    • general

    Can I Use

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

    Visit website

    Free
  • • CSS

    Airbnb CSS Styleguide

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

    Visit website

    Free
  • • JS

    Airbnb JavaScript Styleguide

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

    Visit website

    Free
  • • JS

    Superhero.js

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

    Visit website

    Free
  • • HTML,
    • CSS

    Accessible Form Controls

    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.

    Visit website

    Free
  • • JS

    Website Setup JS Cheat Sheet

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • JS

    SVG Compendium

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

    Visit website

    Free
  • • CSS

    Grid Cheat Sheet

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

    Visit website

    Free
  • • HTML,
    • CSS,
    • general

    The Accessibility Project

    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.

    Visit website

    Free
  • • CSS

    ITCSS

    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.

    Visit website

    Free

• Typography

  • • CSS

    Google Fonts

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

    Visit website

    Free
  • • CSS

    Font Squirrel

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

    Visit website

    Free
  • • CSS

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

    Visit website

    Free

• Colors

  • • CSS

    Coolors

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

    Visit website

    Free
  • • CSS

    ColorSpace Palette

    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.

    Visit website

    Free
  • • CSS

    ColorSpace Gradient

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

    Visit website

    Free
  • • CSS

    CSS Gradient

    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.

    Visit website

    Free
  • • CSS

    Sip

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

    Visit website

    $9.99
  • • CSS

    Colormind

    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.

    Visit website

    Free
  • • CSS

    ColorBox

    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!

    Visit website

    Free

• Media

  • • general

    Unsplash

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

    Visit website

    Free
  • • general

    Pixabay

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

    Visit website

    Free
  • • general

    Pexels

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

    Visit website

    Free
  • • general

    Pexels Videos

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

    Visit website

    Free
  • • general

    Coverr

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

    Visit website

    Free
  • • general

    Optimizilla

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

    Visit website

    Free
  • • general

    SVGOMG

    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.

    Visit website

    Free

• Graphics

  • • general

    Font Awesome

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

    Visit website

    Free
  • • general

    IcoMoon

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

    Visit website

    Free - $19/mo
  • • general

    Devicon

    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.

    Visit website

    Free
  • • general

    Material Icons

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

    Visit website

    Free
  • • general

    Ionicons

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

    Visit website

    Free
  • • general

    Flaticon

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

    Visit website

    Free
  • • general

    Iconmonstr

    A smaller, but seriously cool library of icons.

    Visit website

    Free
  • • general

    Vivid.js

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

    Visit website

    Free
  • • general

    Hero Patterns

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

    Visit website

    Free
  • • general

    Zondicons

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

    Visit website

    Free
  • • general

    Roundicons

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

    Visit website

    Free
  • • general

    unDraw

    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.

    Visit website

    Free

• Inspiration

  • • HTML,
    • CSS,
    • JS

    CodePen

    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.

    Visit website

    Free - $8/mo+
  • • general

    Awwwards

    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.

    Visit website

    Free
  • • general

    Dribbble

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

    Visit website

    Free

• Utilities

  • • CSS

    Normalize.css

    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.

    Visit website

    Free
  • • CSS

    Reset.css

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

    Visit website

    Free
  • • CSS

    Cubic Bezier

    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.

    Visit website

    Free
  • • CSS

    Easing Functions

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

    Visit website

    Free
  • • CSS

    CSS Triangle Generator

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

    Visit website

    Free
  • • CSS

    Clippy

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

    Visit website

    Free
  • • CSS

    Keyframes

    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.

    Visit website

    Free
  • • CSS

    30 Seconds of CSS

    A great resource of CSS snippets to help speed up development time for some common styling cases.

    Visit website

    Free
  • • CSS

    Fancy Border Radius

    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.

    Visit website

    Free

Launching

• Testing & Analytics

  • • HTML

    W3C HTML Validator

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

    Visit website

    Free
  • • CSS

    W3C HTML Validator

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

    Visit website

    Free
  • • general

    Google Analytics

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

    Visit website

    Free
  • • general

    BrowserStack

    Although not free, BrowserStack is a valuable tool for pain-free cross-browser testing. Boot up 1200+ real mobile devices and browsers from your machine with ease.

    Visit website

    $29/mo+

• Deployment

  • • general

    Namecheap

    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.

    Visit website

    Paid
  • • general

    Heroku

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

    Visit website

    Free - $7/mo+
  • • general

    Digital Ocean

    Digital Ocean is another cloud computing platform. It aims to simplify the deployment and maintenance of cloud-based applications.

    Visit website

    $5/mo+

• Reporting

  • • general

    Lighthouse

    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.

    Visit website

    Free
  • • general

    SEOptimer

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

    Visit website

    Free
  • • general

    Front-End Checklist

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

    Visit website

    Free
  • • general

    Nibbler

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

    Visit website

    Free
  • • general

    Google Pagespeed

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

    Visit website

    Free
  • • general

    Google Mobile Speed Test

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

    Visit website

    Free
  • • general

    Varvy

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

    Visit website

    Free
  • • general

    Real Favicon Generator

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

    Visit website

    Free
  • • general

    Pingdom

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

    Visit website

    Free
  • • HTML,
    • CSS

    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 website

    Free
  • • general

    Front-End Performance Checklist

    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.

    Visit website

    Free
  • • general

    Yellow Lab Tools

    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.

    Visit website

    Free
  • • general

    Uptime Robot

    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.

    Visit website

    Free - $5.50/mo
  • • general

    Wave

    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.

    Visit website

    Free