DEV Community

Cover image for How to Learn Frontend Web Development from Scratch
Faisal Jawed Khan
Faisal Jawed Khan

Posted on

How to Learn Frontend Web Development from Scratch

How to learn front end web development from scratchHello 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.

Top comments (0)