How to Learn Frontend Web Development from Scratch
Tags: javascript, beginners, css, html
Published: 2023-03-19 08:22:26


![How to learn front end web development from scratch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9mcxi2m0rw0kyu3019r.png)Hello friends, Welcome to my new blog. In this blog, I will share my experience of what should every beginner learn to become a front-end developer because so many contents are available on the internet. When I started my journey back in 2021 then at that time it was very confusing for me that what should I learn. So I have decided to collect all information in one blog and that will help every beginner.

Basically in front-end development, a lot of technologies are there but in this blog, I will focus on HTML, CSS and JavaScript because these are the backbone of a front-end developer.

But before that, I want to ask you something why should you choose to become a front-end developer?

Actually, this will be a very interesting question because as per the Bureau of Labour Statistics, web developers' jobs (including front-end developers) will grow by 15% from 2016 to 2026.
You don’t need a specific degree to become a front-end developer. 
Many companies hire front-end developers and they will give a good salary.
You can work from anywhere in the world.

Now I think you understand why you choose this and now without wasting any more time let’s get started.

### HTML (Hyper Text Markup Language)

- Heading Tag like h1, h2 … h6.
- Semantic tags like header, nav, section, article, aside, footer and div etc.
- Form elements like input, textarea, button, select, option, and label etc.
- Multimedia tags like input, audio, video, iframe, and img.
- HTML table.
- You should know how to make a responsive design.
- Ordered and unordered list.
- You should know how to embed favicons in your HTML file.

### CSS (Cascading Style Sheets)

- Inline, Internal and External CSS.
- CSS selectors like class, id, element, universal, grouping, pseudo-class, and pseudo-element etc.
- CSS Box models like padding, margin, border etc.
- CSS image sprites.
- Flexbox and Grid layout to make a responsive design.
- Animations and transitions.
- CSS preprocessors like Sass and Less allow you to write more efficient and maintainable CSS.

### JavaScript

- JavaScript variables (var, let and const), data types and operators.
- If-else and switch condition. Loops like for, while, do-while, for-of and for-in.
- Function, Array, Objects and Strings.
- DOM (Document object manipulation) and BOM(Browser object model).
- Events Handlers.
- Constructor, Prototypes.
- AJAX and API.
- Map, reduce and filter, arrow functions, Promises, Template literals etc.

### Conclusion

Everyone wants to become a pro developer but It will take time, learning is the best way to achieve your dream so don’t think a lot and start learning from today.

#### Hard work and Patience is the key to every successful person.

I hope this guide will help you in your learning journey and hopefully save you time. In the next blog, I will write about free platforms from where you should start your front-end developer learning journey. 

Till then Bye-bye and Best of luck.