Front-End Web Development

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.

Fetch API Explained

JavaScript Fetch API Explained by Examples

How to use the JavaScript Fetch API to get Data

Using the Fetch API optional

Advanced JavaScript concepts - Scope, Hoisting, Inheritance, Event Bubbling

Mark as done

Done

Advanced JavaScript concepts - Scope, Hoisting, Inheritance, Event Bubbling

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

Got feedback?