With the growing numbers of jobs in the web development industry, more and more people are turning their ship in that direction, for a more secure and possibly more paid future. With some patience and effort, you can completely change your career, but you might ask where to start? Well, this is a blueprint for a complete beginner to becoming a front-end developer.

I created a list of the most fundamental technologies any front-end developer should have in the palm of their hand. Learning and becoming an expert in basics will build a solid base for learning and using modern frameworks and tools, like React, Webpack, D3.js.. etc.

You should follow and learn in this exact order because jumping between sections could make it harder to understand some things. After you get efficient with HTML, CSS, JavaScript, you will be able to build more complex and interactive websites.

1. HTML

HTML (HyperText Markup Language) is the backbone for any web page. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.

Learn:

1. Elements and structuring elements
2. Tables
3. Forms and validation
4. Semantic HTML
5. Accessibility

Recommended course:

2. CSS

CSS (Cascading Style Sheet) is a style sheet language used for visually formatting a web page. It is a cornerstone technology along with HTML and JavaScript for creating engaging websites and web applications.

Learn:

1. Selectors and rules
2. Box models
3. Positioning
4. Display
5. Typography

Recommended course:

3. JavaScript

JavaScript is a high level, dynamic, untyped, and interpreted programming language. It is one of the 3 most important web technologies for creating web pages. JavaScript enables you to make dynamic and interactive websites.

Learn:

1. Data types and variables
2. Functions
3. Conditionals
4. Arrays and objects
5. Loops
6. DOM manipulation
7. Promises
8. Async-Await
9. Requests

Recommended course:

4. Browsers

A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. In order to create more complex websites and web applications, it is vitally important to understand the inner workings of the browser.

Learn:

1. How it works
2. DOM
3. BOM
4. Window and document objects
5. HTML and CSS parsers

Recommended course:

5. Web Security

The last section would be to understand the basics of web security and learn how to make secure websites and applications.

Learn:

1. Content security
2. Connection security
3. Data security

Recommened reading: MDN Web security

Recommended book:

BONUS: Git

Git is a widely popular distribuited version-control system, used for tracking changes in code.

Recommended course: