Why I created this roadmap

Hi everyone. It's been more than a month since I started my journey as a web developer. I think it's been relatively easy. But it was not always like this. Some months ago I tried to become a web developer but the results were totally different.

Why is that?

You know, when I gave it my first try, I didn't have a clear guidance. I just looked for some tutorials on Youtube. But most of them are incomplete or not consistent with the tools they use or the methodology they use in order to teach.

This makes it difficult to learn. One day I was writing my first html document and the next day I was styling it using CSS. And the following day I was using JavaScript to create some "cool" stuff. You might think this is great, and it would be, except for the fact that I didn't know the basics.

Although I was writing some JavaScript to modify the DOM, I didn't even know what DOM is. I didn't know what "Semantic HTML" is. I didn't know lots of things. And there I was... trying my best to become a developer. It was frustrating each time I wanted to do something cooler, but my limited knowledge didn't help me to do so.

I remember when I wanted to implement a button to play and pause a video, using JavaScript. First, I started by learning how to "write" a button in HTML. Then I had to learn how to link that button to a JavaScript code. I discovered something called "querySelector". And since I wanted to understand everything, I had to learn something about media elements.

At the time, I found some of this stuff really complex. That's why I quitted.

And I think that's why many people quit as well.

They don't have a clear guidance. They just learn what they think they must learn in order to create what they want to create.

And this is not a good methodology, because you might need some advanced knowledge. And if you don't have the basics, it will not only be frustrating, but time-consuming as well.

Now, in my second try, everything is different. I received help from some of my friends. And everything seems to be easier.

I don't want people to get frustrated at coding.

I don't want people to quit.

That's why I decided to create a roadmap. A roadmap which will be a guide to make your path smoother.

If you're already a developer, this might not be useful for you. But it might be for your friend, your partner, or you little brother.

The roadmap part 1.

The following roadmap is intended to be a guide for everyone who wants to become a web developer and has no idea about where to start. This is just the beginning (wait for the second part) but it is enough to get you started.

1. Prework: Choose your OS and configure your computer (Windows, Linux or Mac)

1. What is a browser?
2. Browser and its devtools.
3. Install and customize your text editor (recommended: Visual Studio Code)
4. What is a Live Server and how to use it.
5. Installing Homebrew (or equivalent, depending on your OS) and NodeJS.
6. Basic Terminal commands
7. What is Git and Github?
8. Working with Git and Github: Commits, push and pull request, SSH and HTTPS keys, versions and conflicts. (I'll write a whole roadmap for Git and Github)

2. Web developer fundamentals

1. Frontend definition
2. Backend definition
3. Full Stack definition
4. Static vs. Dynamic pages.

3. HTML

1. Anatomy of a webpage: What is HTML?
2. Index file
3. Head tag and its content
4. Body tag and its content
5. Parts of an HTML tag
6. Semantic HTML
7. Basic HTML tags
8. Media tags: img, figure, video
9. Image formats: Lossy and lossless
10. Form tags: form, input, calendar, autocomplete, require, select.
11. Differences between "input type submit" and button tag.

4. CSS

1. What is CSS?
2. Using CSS: tag, selector, class and ID.
3. Pseudo-class and pseudo-elements.
4. Anatomy of a "CSS rule"
5. Box model
6. CSS Inheritance
7. CSS specificity
8. CSS combinators
9. Measurements: Absolute measurements, EM, REM
10. Position
11. Display
12. Display flex
13. Display grid
14. Variables
15. Webfonts

5. Responsive Design

1. Media queries
2. Mostly Fluid
3. Layout shifter
4. Column Drop
5. Best practices for responsive design
6. Media in responsive design: Page load time.

6. Mobile First Design

1. Why mobile first?
2. Growing your project from mobile to desktop.

7. Basics of web accesibility

1. Semantic HTML
2. Text
3. Labels, alt and title.

9. Basic Frontend development: HTML and CSS integration

1. Browser engine definition
2. Most used HTML tags
3. Display: block, inline and inline-block
4. Z-index
5. Most used CSS properties
6. CSS Architectures definition
7. OOCSS, BEM, SMACSS, ITCSS and Atomic Design
8. Build your first functional WebSite

10. CSS Transform and CSS transitions.

1. Why and when to use CSS animations?
2. Properties used to create animations
3. Pseudo-classes and pseudo-elements in animations
4. Timing functions, planes and axes
5. Transform translate
6. Transform rotate, scale, skew and matrix
7. Transform origin
8. Transform style and perspective
9. Backface visibility
10. Parallax effect: HTML structure
11. Parallax effect: CSS styling
12. Transition property and duration
13. Transition timing function and delay
14. Accesibility and performance

11. CSS Animations

1. CSS Counters
2. Stacking context
3. Animation name and keyframe
4. Animation duration
5. Animation timing function
6. Iteration count and delay
7. CSS Triggers: layout, paint and composite
8. Animation debugging using devTools
9. Best practices for web animation

12. Introduction to JavaScript

1. What is JavaScript and why JavaScript?
2. Variables, functions and syntax
3. Function declaration and function expression
4. Scope
5. Hoisting
6. Coercion
7. Truthy and Falsy values
8. Operators
9. Conditionals
10. Switch
11. Arrays
12. Loops: For and while
13. Objects
14. Closures

13. Basics of Object Oriented Programming (OOP)

1. Differences between OOP and structured programming
2. UML
3. Objects
4. Abstraction and class.
5. Modularity
6. Inheritance
7. Class definition
8. Methods or functions
9. Atributes
10. Constructor Method
11. Instance
12. Encapsulation
13. Polymorphism

14. POO using JavaScript

1. All in Basics of OOP, but using JavaScript, plus:
2. Object literal and prototypes
3. Getters and setters

And that's all for now. I think this is pretty good to start with. Eventually, there is a lot more to learn, but we will talk about it in another post.