Front-end (HTML, CSS, JavaScript, React)

Front-end Developer Handbook 2024

“This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it.”

Frontend Masters Books

On this webpage you will find online books about “Learning Roadmap for Frontend Developers”, JavaScript and React.

Front-end Mentor

“Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 82,875 developers building projects, reviewing code, and helping each other get better.”

HTML

Intro to HTML & CSS

“Throughout this course, you’ll learn about the underlying structure of the web - HTML. You’ll learn how to use this tree-like structure to create websites. You’ll also learn how to apply styling to a website through CSS. You’ll learn about CSS syntax, selectors, and units. Along the way, you’ll also learn about code editors and a browser’s Developer Tools.”

CSS

Flexbox Froggy

“A game for learning CSS flexbox”

Flexbox Defense

“Use the justify-content -property to move two towers into position and stop incoming enemies from getting past your defenses.”

CSS Diner

“It’s a fun game to learn and practice CSS selectors.”

Batificity

CSS rules are explained using Batman and other characters from Gotham City.

CSS-Tricks

“CSS-Tricks is really about building websites and all that entails, mostly from a front-end perspective. We have staff writers (see below) and loads of guest authors, so the content you find here will be as diverse as they are.”

Animista

“Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.”

Learn CSS Layout

“This site teaches the CSS fundamentals that are used in any website’s layout.”

CSS Reference

“cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.”

JavaScript

Learn JavaScript

“The easiest way to learn & practice modern JavaScript. Learn in an interactive environment. Read short lessons, take notes, and complete challenges directly in your browser. Try the first 77 lessons, challenges, projects (first 7 chapters) & flashcards for free. You can upgrade to a Pro account with a one-time payment that gives you access for 5 years.”

You Don’t Know JS Yet (book series)

“This is a series of books diving deep into the core mechanisms of the JavaScript language.”

30 Day Vanilla JS Coding Challenge

“Beginner to Intermediate developers and designers who want to become comfortable with both JavaScript fundamentals and working in the DOM without a library.”

Object-Oriented JavaScript

“This course is designed to teach web developers how to utilize the various object-oriented programming features within JavaScript. Object-oriented programming allows developers to build applications with reusable and maintainable blocks of code, which leads to efficiency and simplified software design.”

Javascript Essentials

“Learn how Javascript works, some basic API’s and finally create a mini project. “

React

React Tutorial

“Learn in an interactive environment. Understand how React works not just how to build with React. Try the first 67 lessons, challenges & flashcards for free. You can upgrade to a Pro account with a one-time payment that gives you access for 5 years.”