Developer working in the office
Studio Republic

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:

Learn HTML

Hosted on Codeacademy

  • Beginner
  • Free

You will learn all the common HTML tags used to structure HTML pages, the skeleton of all websites. You will also be able to create HTML tables to present tabular data efficiently.

Enroll now Go to course page

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

Hosted on Codecademy

  • Beginner
  • Free

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

Hosted on YouTube

  • Beginner
  • Free

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:

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:

Author

Bojan Vidanovic

Bojan Vidanovic is a front-end web developer and tech geek. Love making internet products, blogging, learning, reading, calisthenics and fitness enthusiast.
More on www.bojanvidanovic.com.

Comments