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:
- Elements and structuring elements
- Tables
- Forms and validation
- Semantic HTML
- Accessibility
Recommended course:
Learn HTML
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.
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:
- Selectors and rules
- Box models
- Positioning
- Display
- 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!
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:
- Data types and variables
- Functions
- Conditionals
- Arrays and objects
- Loops
- DOM manipulation
- Promises
- Async-Await
- 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.
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:
- How it works
- DOM
- BOM
- Window and document objects
- 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
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:
- Content security
- Connection security
- 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.
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!
Share this article
Did you enjoy this article? Share it with your friends
Comments