Web Frontend Learning Materials

This is a collection of materials that can help you learn frontend development. We're focused on beginner resources, but anything beyond that is also welcome. These should all be free, if not please mark them as not free.

Content

• HTML & CSS
• Javascript
• General Computer Science

Html & CSS

Basic tutorials

• CSSclasses A day of learning the very basics of how CSS and HTML work. If you have no idea where to start, start here for a quick foundation
• freeCodeCamp You can go through the 300 hour Responsive Web Design Certification to get a very solid HTML&CSS foundation
• The Odin Project: Front End Only A complete course to learn frontend development including Web dev 101, HTML&CSS, JavaScript and how to get hired after that
• MDN: Learn web development Mozilla Developer Networks "Learn web development" gives you aa structured introduction into a ton of web development topics

Selectors

• CSS Diner Learn about how CSS selectors work by putting food on plates

CSS Grid

• CSS Grid Garden A fun little game to learn how to define grids with CSS grid and how to place elements in that grid
• Learn CSS Grid A guide to help you better understand and learn Grid
• CSS Grid video course 25 short Video tutorials to learn CSS Grid by Wes Bos

Flexbox

• Flexbox Froggy A fun little game to learn how to define use Flexbox
• Flexbox Defense Another fun little game that teaches you Flexbox in the form of a Tower Defense Game
• What the Flexbox?! A simple 20 video course that will help you master Flexbox by Wes Bos

JavaScript

Basic tutorials

• JavaScript for absolute Beginners Learn the basics in a day or two - what are variables, objects, arrays, loops, functions and how to use all that
• freeCodeCamp Go through the 300 hours JavaScript Algorithms and Data Structures Certification to get a solid JavaScript foundation

Books (available online)

• Eloquent JavaScript A book about JavaScript programming, covering all the basic and a lot of advanced topics.

Exercices references

• CodeWars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential.
• Hacker Rank is the market-leading technical assessment and remote interview solution for hiring developers. Learn how to hire technical talent from anywhere!
• Edabit simulates what programming is like in the real world while removing any tedious, non-educational aspects. We add simple game mechanics to make the learning process fun and addictive. Gain XP, unlock achievements and level up. You’ll spend hours completing challenges and it won't even feel like work.

General Computer Science

• CS50's Introduction to Computer Science An introduction to the intellectual enterprises of computer science and the art of programming.