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:

Learn CSS

You will learn many aspects of styling web pages! You’ll be able to set up the correct file structure, edit text and colors, and create attractive layouts. With these skills, you’ll be able to customize the appearance of your web pages to suit your every need!

Enroll now Go to course page

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:

JavaScript for Beginners

In this video series Dev Ed will cover the Javascript programming language from scratch. This playlist is recommended for people starting out with a programming language with 0 previous knowledge. We will also cover topics related to ES6, like arrow functions, the new const and let and more.

Enroll now Go to course page

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:

The Inner workings of the Browser for JavaScript & Web devs

Learn about 4 parsers, JS compiler, modeling, DOM, BOM, document, window objects, async and sync functions

Enroll now Go to course page

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:

Security for Web Developers

Using JavaScript, HTML, and CSS

As a web developer, you may not want to spend time making your web app secure, but it definitely comes with the territory.

• Buy on Amazon

Go to book page

BONUS: Git

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

Recommended course:

Practical Git for Everyday Professional Use

In this course, you will learn the basics of using git, as well as some more advanced commands that you should find useful!

Enroll now Go to course page