Scribd
Upload
462 views4 pages

Frontend Developer Roadmap

The document outlines a roadmap for front-end developer skills, beginning with computer and network fundamentals, HTML, CSS, Git/GitHub, JavaScript, bundlers like Vite and Webpack, popular front-end frameworks like React and Vue, and additional skills like SEO and teamwork. It recommends learning the fundamentals of HTML, CSS, and JavaScript syntax before picking a framework like React, which has higher demand but is more difficult to learn, or Vue, which is easier to learn. Bundlers like Vite and Webpack are suggested to bundle code, and soft skills like UI/UX and SEO are included as additional skills.

Uploaded by

Kingsley Onovo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
462 views4 pages

Frontend Developer Roadmap

The document outlines a roadmap for front-end developer skills, beginning with computer and network fundamentals, HTML, CSS, Git/GitHub, JavaScript, bundlers like Vite and Webpack, popular front-end frameworks like React and Vue, and additional skills like SEO and teamwork. It recommends learning the fundamentals of HTML, CSS, and JavaScript syntax before picking a framework like React, which has higher demand but is more difficult to learn, or Vue, which is easier to learn. Bundlers like Vite and Webpack are suggested to bundle code, and soft skills like UI/UX and SEO are included as additional skills.

Uploaded by

Kingsley Onovo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Front-end developer roadmap

1. Computer/Network fundamentals

What is a computer, and how it works


Components of the PC
Operating system basics (Windows vs. Linux)
What is a network, what are its components, and how it works
HTTP protocol how does it work (IP address, Domain name system)
Chrome dev tools (how to analyze code and change it)
Console usage basics

2. HTML

What is a Hyper Text Markup Language (theory)


Structure of the HTML document
Understand elements (the structure tags, attributes, content )
Basic block and inline elements (div, span, img, anchor)
Form elements with basic input tags (text, text area, checkbox, radio)
Basic layout techniques
Conventions and Best Practices

What is a11y, and how to implement it

3. CSS

History of CSS
CSS structure and basics (inline CSS vs. External CSS)
Box Model
Selectors

Inheritance
Colors
Sizing Units
Text and Typography
Borders, paddings, margins
Layouts (how to build them)

Flexbox
Grid
Responsive design and Media Queries
Pseudo-elements and pseudo-classes
CSS frameworks (Tailwind CSS/ Bootstrap)

4. Git/GitHub

What is Git, and how it works


Basic git commands

Understand Git merge


Understand Git rebase

What is GitHub, and how to use it.


GitHub actions

5. Javascript

What is Javascript, and how it works


Console log usage

Variables (var, let, const)


Data types and declarations (String, Number, Boolean, Undefined, Object)

Data structures (Array, Date ...)


Functions (definitions and how they work, arguments, how to call them)

Arrow functions
Asynchronous functions

Loops (for, while..., for..in,...)


Operators (arithmetic, logical, string,...)

What is "this" keyword, and how to use it


Expressions

Classes
Modules (definition and exports)

6. Bundlers

The following bundlers are the most popular ones. Choose the one that best suits your needs.

Vite (preferred one because of speed)


Webpack

Browserify
FuseBox

Rollup
Parcel

7. Front-end frameworks

The following list contains the list of the most popular front-end frameworks. Pick one that suits you
best. I'll help you with the decision.

React (most popular, high demand, harder to learn, great community)

VueJs (quite popular in the freelancer space, easy to learn, great community, small)

Angular (popular, high demand, best for enterprise apps, large)


Svelte (compiles to pure Javascript, smaller community, minimal demand)

8. Additional skills (& softs kills)

SEO basics (On-page SEO)

UI/UX basics

Teamwork (not necessary if freelancer or indie maker)

You might also like