/frontend-development

A curated list of resources for Frontend development

MIT LicenseMIT

Banner

Introduction

Follow me

This is a collection of resources for Frontend development.

It will include a table of contents in order for you to navigate to the sections that matter the most to you.

We have made an effort to include as many free resources as possible. However we also understand that there are quality resources out there that might cost you a penny but totally worth it. We will be sure to indicate the resources that are paid.

If you're starting out with web development, you DON'T need to use every resource on this list. It is practically impossible to use all the resources listed in here. This is just a reference with most of the resources that can help you with frontend development. Use this as a reference. It is not a guide.

Simply check out the resources and use the one that works best for you.

Key

  • Resources with πŸ’΅ indicate that the resource is a paid resource.

Contibuting

We Invite as many contributions as possible.

If you know of a resource that would be a great addition to this list, feel free to make a contribution.

Be sure to read How To Contribute

Table of Contents

How the Internet Works

πŸ‘† Back To Top

HTML

πŸ‘† Back To Top

CSS

πŸ‘† Back To Top

JavaScript

πŸ‘† Back To Top

Git

πŸ‘† Back To Top

React

πŸ‘† Back To Top

Vue

πŸ‘† Back To Top

Browser extensions

πŸ‘† Back To Top

Icons

πŸ‘† Back To Top

Fonts and Typography

πŸ‘† Back To Top

Illustrations

πŸ‘† Back To Top

Optimization

  • CSS Validator - Check if your CSS code is valid and contains no errors.
  • Google Analytics - Free insights about traffic, visitors and conversions.
  • Nibbler - Website testing tool for 10 key areas including accessibility, SEO, social media and technology.
  • Namecheap - Premium and cost-effective domain names and web hosting.
  • Optimizilla - Compress up to 20 JPEG and PNG images while keeping a good level of quality.
  • PageSpeed Insights - Quick tool to test your webpage for performance on all devices.
  • Sizzy - A tool for developing responsive websites crazy-fast. See your page on multiple devices at once.
  • Usability Checklist - Catch common usability problems of your website before deployment.
  • Who Is - Quick tool to check the availability of a domain name.
  • Woorank - Get a review of your website to address issues and identify opportunities to get ahead of competition.

πŸ‘† Back To Top

Color Inspiration

πŸ‘† Back To Top

Images and Videos

πŸ‘† Back To Top

Hosting Sites

πŸ‘† Back To Top

Design Inspiration

πŸ‘† Back To Top

Portfolio Inspiration

πŸ‘† Back To Top

Youtube Channels

πŸ‘† Back To Top

Podcasts

πŸ‘† Back To Top

Blogs

πŸ‘† Back To Top

Interview Prep

Newsletters

πŸ‘† Back To Top

Contributing

You're very welcome to contribute to this list.

Be sure to read How to Contribute before making your contribution.