Front-end web development, aka client-side development is the practice of producing graphic user interface of a website using HTML, CSS and JavaScript so that users can view and interact with that website. This roadmap would help you as a developer to get started on your front-end web development journey.
To make your journey easier, pick a path
What is DNS
Mark as done
Done
What is DNS
DNS (Domain Name System) is basically the phonebook of the Internet. DNS turns domain names into IP addresses, which browsers use to load internet pages. Learn more about DNS with the resources below.
What is DNS?
Understanding Public DNS
DNS Explained
Internet Basics
Mark as done
Done
Internet Basics
Learn the basics of what the internet is using the resources below.
Internet Basics: What is the Internet
Free Internet Basics Tutorial
Internet Tips
How does the Internet work
Mark as done
Done
How does the Internet work
Learn about the internet and how it works using the resources below.
How Does the Internet Work?
A Full Course on How the Internet Works
Basics of HTML
Mark as done
Done
Basics of HTML
Kick off your Front-end programming journey by learning the basics of HTML (Hypertext Markup Language) and how to use it with the resources below.
HTML Basics
Learn HTML for Beginners
What is HTML?
HTML Tutorial for Absolute Beginners
HTML Tutorial optional
Basics of CSS
Mark as done
Done
Basics of CSS
What is CSS? Learn more about Cascading Style Sheets as you begin your Front-end programming journey with the resources below.
CSS Crash Course for Absolute Beginners
CSS Basics
Introduction to CSS
Free Basics CSS Tutorial optional
Responsive Design and media queries
Mark as done
Done
Responsive Design and media queries
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Media queries are a feature of CSS 3 that allows content rendering to adapt to different conditions such as screen resolution. Learn more about these concepts with the resources below.
Learn Responsive Design
Responsive Web Design Certification
CSS Responsive Design Tutorial
Introduction to Responsive Web Design
CSS PreProcessors
Mark as done
Done
CSS PreProcessors
A CSS preprocessor is a scripting language that extends CSS and is compiled into regular CSS syntax. Learn more about CSS PreProcessors using the resources below.
CSS PreProcessors Explained
What is a CSS PreProcessor?
CSS PreProcessors: Sass vs Less
Less CSS PreProcessor optional
Basics of JavaScript
Mark as done
Done
Basics of JavaScript
As a front-end developer, it is vital that you are familiar with a lot of the basics of the JavaScript programming language. You can get started on some of these with the resources below.
JavaScript Fundamentals
JavaScript Tutorial for Beginners
JavaScript Syntax
JavaScript Fundamentals for Beginners
JavaScript Crash Course for Absolute Beginners optional
JavaScript Framework
Mark as done
Done
JavaScript Framework
Learn about a couple of JavaScript frameworks that would be vital to your journey as a front-end developer. See the resources below.
Understanding Client-side JavaScript Framework
What are JavaScript Frameworks?
What to Learn Before a JavaScript Framework optional
PREACT
Getting Started with Preact.js
Vue
Introduction to Vue.js
Vue School
Ember
Getting Started with Ember
A Guide to Building Your First Ember.js App
React
React.js
Intro to React.js
React Roadmap
Svelte
Svelte Crash Course
Learn the Svelte Framework
Introduction and Basics of Svelte
Angular
Angular Crash Course
Getting Started with Angular
Angular Roadmap
Fetch API
Mark as done
Done
Fetch API
The Fetch API is JavaScript API that allows you to make HTTP requests to servers from web browsers. Learn more about the Fetch API using the resources below.
Learn more about Advanced JavaScript concepts like Scope, Hoisting, Inheritance, Event Bubbling, etc using the resources below.
What is Scope?
What is Hoisting?
Inheritance and the prototype chain
Strict Mode JavaScript
Event Bubbling and Event Caching in JavaScript
AJAX and DOM Manipulation
Mark as done
Done
AJAX and DOM Manipulation
AJAX stands for Asynchronous JavaScript and XML. It describes a set of development techniques used for building websites and web applications.The Document Object Model (DOM) is a tree-like structure showing a hierarchical relationship between different HTML elements. In JavaScript, DOM can be manipulated to bring web pages to life. Learn more about AJAX and DOM manipulation using the resources below.
Understanding AJAX and DOM Manipulation in JavaScript
JavaScript DOM Tutorial
JavaScript DOM Crash Course
Modern JavaScript Tutorial - Document Object Model optional
GitHub Fundamentals and Git Basics
Mark as done
Done
GitHub Fundamentals and Git Basics
GitHub is the largest online software development platform used for storing, tracking, and collaborating on software projects. Git on the other hand, is a free and open-source version control system and DevOps tool used for source code management. Learn how to use Git and GitHub efficiently to manage your personal and professional software development projects.
Version Control with Git
Git Beginner Tutorial
Introduction to Git and GitHub
The Ultimate GitHub Course
Basic Terminal Usage
Mark as done
Done
Basic Terminal Usage
Learn how to use command line basics and more using the resources below.
Command Line Tutorial
Learn the Command Line
Command Line Crash Course
NPM
Mark as done
Done
NPM
NPM (Node Package Manager) and is one of the multiple package managers for the JavaScript programming language. Learn more about NPM using the resources below.
What is NPM?
NPM Tutorial for Beginners
NPM Crash Course
An Absolute Beginners Guide to Using NPM
YARN
Mark as done
Done
YARN
Yarn is a software packaging system developed by Facebook for Node.js JavaScript runtime environment. It is considered an alternative to NPM. Learn more about this using the resources below.
Getting Started with Yarn
Yarn Package Manager Crash Course
Yarn Tutorial
Web Accessibility
Mark as done
Done
Web Accessibility
Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions. Learn more about web accessibility from the resources below.
What is Web Accessibility?
Web Accessibility: Getting Started
Learn Website Accessibility
Module Bundler
Mark as done
Done
Module Bundler
Module bundlers are tools frontend developers used to bundle JavaScript modules into a single JavaScript file that can be executed in the browser. Learn more about Module Bundler using these resources
Learn how module bundlers work
Module Bundlers Introduction
In Depth Guide to JavaScript Bundlers
Module Bundlers Explained
Linters and Formatters
Mark as done
Done
Linters and Formatters
Linters and formatters are tools that allow a developer to check, detect errors, and modify their source code. With these tools, you can achieve a source code that is legible, readable, less polluted, and easier to maintain. Learn more about these tools from the resources below.
Understanding Linting
ESLint Tutorial
ESLint Formatters optional
Prettier Code Formatter
React
Mark as done
Done
React
React.js framework is a tool to build UIs. Typically it is a JavaScript library for building user interfaces. Learn more about this using the resources below.
React.js Framework
The Beginners Guide to React
React Course
Pure React Course
React Roadmap
Vue
Mark as done
Done
Vue
Vue.js is an open-source front end JavaScript framework for building user interfaces and single-page applications. Learn more about this framework using the resources below.
Vue.js Framework
The Beginners Guide to Vue 3
Vuejs for Absolute Beginners
Learn Vue.js optional
Angular.js
Mark as done
Done
Angular.js
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language. Learn more about this framework with the resources below.
Angular Basics
The Complete Angular Course
Angular Resources List optional
Angular Roadmap
Understanding Modern CSS
Mark as done
Done
Understanding Modern CSS
Learn more about Modern CSS using the resources below.
Modern CSS Explained for Dinosaurs
Modern CSS in a Nutshell
Modern CSS Tricks and Tips
Modern Layouts: CSS Tutorial optional
Bootstrap
Mark as done
Done
Bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. Learn more about the Bootstrap framework for CSS using the resources below.
CSS Bootstrap
The Ultimate Guide to CSS Bootstrap
Bootstrap CSS Course for Beginners
Bulma
Mark as done
Done
Bulma
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. No CSS knowledge required. Learn more about this framework from the resources below.
Bulma Framework
Bulma CSS Tutorial
Why You Should Use Bulma Framework
Tailwind CSS
Mark as done
Done
Tailwind CSS
Tailwind CSS is a highly customizable, low-level CSS framework. It gives you all of the building blocks you need to build customizable designs. Learn more about this framework from the resources below.
Tailwind CSS Framework
Tailwind CSS Tutorial
Crash Course on Tailwind CSS
Tailwind CSS Component Tutorial
Tailwind CSS for Absolute Beginners with Examples optional
Material UI
Mark as done
Done
Material UI
Material UI is an open-source, front-end, lightweight CSS framework that follows Google's Material Design guidelines. Learn more about this framework from the resources below.
Material UI React Tutorial
Material UI Tutorial
React and Material UI Course
Learn Material UI in 1 Hour optional
Chakra UI
Mark as done
Done
Chakra UI
Chakra UI is a CSS framework for React based applications which allows you to create accessible React apps with speed. Learn more about this framework from the resources below.
Chakra UI Framework
Why You Should Start Using Chakra UI
Build a Modern User Interface with Chakra UI
Building an accessible web app with Chakra UI optional
Radix UI
Mark as done
Done
Radix UI
Radix UI is a minimal UI component library. It provides unstyled, accessible, and customisable UI components. Learn more about this from the resources below.
Getting Started with Radix UI
Radix UI
Jest testing
Mark as done
Done
Jest testing
Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It is well-documented, requires little configuration and can be extended to match your requirements. Learn more about this from the resources below.
Jest
Jest Testing Tutorial
Introduction to Testing in JavaScript with Jest
Jest Testing Tutorial optional
Puppeteer testing
Mark as done
Done
Puppeteer testing
Puppeteer framework allows testers to perform the actions on the Chrome browser using commands in JavaScript. Learn more about this from the resources below.
Functional Browsing Testing with Puppeteer
Modern Web Testing and Automation with Puppeteer
End to End Testing with Google Puppeteer
Making Testing End to End Easy with Puppeteer optional
Enzyme testing
Mark as done
Done
Enzyme testing
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. Learn more about this from the resources below.
Unit Testing with Enzyme
Enzyme Tutorial - How to write test code for React
Difference between Jest and Enzyme
Mocha testing
Mark as done
Done
Mocha testing
Mocha is a feature-rich JavaScript test framework running on Node.js. It features browser support, asynchronous testing, test coverage reports and use of any assertion library. Learn more about this from the resources below.
Mocha.js
JavaScript Testing with Mocha
Unit Testing with Mocha
Cypress testing
Mark as done
Done
Cypress testing
Cypress is a front-end testing tool constructed for modern web applications. Learn more about this from the resources below.
End to End Testing Framework - Cypress
Cypress Testing: How to Get Started
Cypress Framework - A Detailed Guide
Cypress Tutorial for Beginners optional
React testing library
Mark as done
Done
React testing library
React Testing Library is a testing utility tool that helps you write tests that resemble how a user would use your application. Learn more about this from the resources below.
React Testing Library Tutorial
The React Testing Library Bootcamp
React Testing Library
Progressive Web App
Mark as done
Done
Progressive Web App
A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. Learn more about this from the resources below.
Progressive Web Apps
PWA for Beginners
A Simple Progressive Web App Tutorial
Web APIs:
Mark as done
Done
Web APIs:
A web API is an application programming interface for either a web server or a web browser. Learn more about this from the resources below.
A Crash Course in Web API
Introduction to Web API
ASP.NET Web API for Beginners
Service Worker
Mark as done
Done
Service Worker
A service worker is a type of web worker. They are specialized JavaScript assets that act as proxies between web browsers and web servers. Learn more about this from the resources below.
Service Worker Overview
Introduction to Service Worker
PWA Service Worker for Dummies
Web App Manifest
Mark as done
Done
Web App Manifest
The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. Learn more about this from the resources below.
Web App Manifest Generator
Web App Manifest
Creating Web App Manifest Made Easy
How to use Web App Manifest
Typescript
Mark as done
Done
Typescript
TypeScript is an Open Source Project and a superset of the JavaScript language that has a single open-source compiler. Learn more about this from the resources below.
Typescript
Typescript course for beginners
Learn Typescript in 50 Minutes
Step-by-Step Guide to Learn Typescript
Complete Typescript Tutorial optional
Flow
Mark as done
Done
Flow
Flow is a static type checker that allows a developer to check for type errors while developing code. Learn more about this from the resources below.
Flow
Static Type Checker for JavaScript
Flow - Static Type Checker
Static Type Checking with Flow optional
React JS
Mark as done
Done
React JS
React.js framework is a tool to build UIs. Typically it is a JavaScript library for building user interfaces. Learn more about this using the resources below.
Intro to React
React JS Crash Course
Next Js
Next.js
Get Started with Next.js
Next.js Crash Course for Beginners
Angular.js
Mark as done
Done
Angular.js
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language. Learn more about this framework with the resources below.
Angular JS
A Comprehensive Tutorial on Angular JS
Learn Angular JS Step-by-Step
Vue.js
Mark as done
Done
Vue.js
Vue.js is an open-source front end JavaScript framework for building user interfaces and single-page applications. Learn more about this framework using the resources below.
Vue.js
Vue.js Course for Beginners
Vue JS Crash Course
Apollo
Mark as done
Done
Apollo
The Apollo platform is an implementation of GraphQL that can transfer data between the cloud (server) to the UI of your app. Learn more.
Apollo GraphQL
Apollo GraphQL Tutorial
Relay (Modern)
Mark as done
Done
Relay (Modern)
Relay is a JavaScript framework for declaratively fetching and managing GraphQL data. It can also be extended for use with other frameworks. Learn more.
Relay
Relay Modern
Deep Dive into Relay GraphQL
Next.js
Mark as done
Done
Next.js
Next.js is an open-source web development framework that enables React based web applications functionalities such as generating static websites and server-side rendering. Learn more below.
The Next.js Handbook
Next.js for Beginners
Next.js Crash Course optional
Hugo
Mark as done
Done
Hugo
Hugo is an open-source, static site generator with speed and flexibility. It is written in Golang. Learn more.
Introduction to Hugo
A Complete Guide to Using Hugo
Hugo Tutorial
Building a Documentation Site from Scratch with Hugo optional
Gridsome
Mark as done
Done
Gridsome
Gridsome is a Vue-powered static site generator for building blazing fast static websites. Learn more.
What is Gridsome Static Site Generator
Gridsome Static Site Generator for Vue
Building a Blog with Gridsome
Gridsome Tutorial optional
Gatsby.js
Mark as done
Done
Gatsby.js
Gatsby.js is a static PWA (Progressive Web App) generator that embraces the use of dynamic web frameworks, using React on the frontend and Node.js on the backend. Learn more
Gatsby Tutorial
Gatsby JS Crash Course
How to build a static site with Gatsby.js
In Depth Gatsby JS Tutorial
Nuxt.js
Mark as done
Done
Nuxt.js
Nuxt is a tool that allows developers to generate static sites using Vue. Learn more.
Nuxt JS Tutorial for Beginners
Crash Course on Nuxt.js
Nuxt.js Fundamentals
Jekyll
Mark as done
Done
Jekyll
Jekyll is a free and open source static site generator. It can be used to build websites with rich and easy-to-use navigation. Learn more.
Jekyll - Static Site Generator
Jekyll Tutorial
Getting Started with Jekyll
Eleventy
Mark as done
Done
Eleventy
Eleventy (11ty) is a static site generator which was created as the JavaScript alternative to Jekyll. Learn more.
Eleventy - A Simple Static Site Generator
A Deep Dive into Eleventy
In Depth 11ty Tutorial
VuePress
Mark as done
Done
VuePress
VuePress was first developed as a document generation system before it became another static site generator powered by Vue.js. Learn more.
VuePress Tutorial
Learn VuePress Easily
VuePress Tutorial for Beginners
Tutorial on VuePress optional
React Native
Mark as done
Done
React Native
React Native is an open-source, JavaScript-based mobile app framework that allows you to build natively-rendered mobile apps for iOS and Android. Learn more.
React Native Tutorial for Beginners
Learn React Native
React Native Course
Learn the Basics of React Native
Ionic
Mark as done
Done
Ionic
Ionic is a free, open-source, front-end Software Development Kit framework that enables you to create mobile-based applications for iOS, Windows, and Android phones using the same codebase. Learn more.
Ionic Framework Tutorial
Ionic Tutorial
Flutter
Mark as done
Done
Flutter
Flutter is a free and open-source mobile UI framework created by Google. It can be used for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Learn more.
Introduction to Flutter Course
Flutter Crash Course for Beginners
Flutter Tutorial
Learn All You Need To Know about Flutter optional
NativeScript
Mark as done
Done
NativeScript
NativeScript is an open-source framework to develop mobile apps on the Apple iOS and Android platforms. Learn more.
NativeScript Framework
NativeScript Tutorial
Things to Know When Learning NativeScript
Test Your Knowledge
Mark as done
Done
Test Your Knowledge
There is no better way to consolidate your knowledge besides testing yourself. So, if you have made it this far, well done! Here's a chance to see how much you have learned. Take a test below.
