Things to keep in mind before learning frontend web development

If you are a beginner in this field you come across various skills and terminologies that you have to learn to become a front-end developer like HTML , CSS , Javascript , React , BootStrap , Tailwindcss , React , Vue js , Angular , Http , event-loop , APIs , Responsive design , Web components , etc .

Keep these things in mind before learning any technology or skill :

• Compared to android development you have to learn multiple technologies, which means if you learn android development you have to learn (Java/kotlin or flutter) but in web development, you have to learn (HTML , CSS , JS , several Frameworks).

  • So first of all build a mindset of learning many things one by one to get the most out of the thing.

• Build projects as many as possible.

  Wait what !!!

  Here you are thinking that it is better to do 3 to 4 projects as compared to doing 10 to 30 projects.

  Yaa... that's completely right but not applicable to everyone, if you don't have enough confidence then it's better to do some more projects.

  • Do weekly as well as monthly projects. Weekly projects are small projects that you can do after learning some concepts and Monthly projects are big projects that you can do by yourself by applying all the knowledge you have.

• Don't stop google.

  • If you are stuck somewhere or you encounter some new key concept or terminology don't stop just google it and read as many articles or watch videos.

Ok now let's move to the step-by-step roadmap.

Basic concepts

Your journey starts with the basic concepts of the web before moving or learning any technology or framework it is better to have some basic understanding of how the web works and some terminologies.

Here are some concepts to learn first

[ ] - Website vs Web application
[ ] - How the internet work (HTTP, HTTPs, TCP, IP, DNS)
[ ] - What is browser, what is rendering, how browser rendering website content
[ ] - Search engines, Web servers etc..

Here are some resources to learn these concepts

Reading :

1. https://www.tutorialspoint.com/internet_technologies/index.htm

   Read the Web development and World Wide Web section.

2. https://www.tutorialspoint.com/http/http_overview.htm

   Read about HTTP.

Videos :

How the internet works.

1. https://youtu.be/e4S8zfLdLgQ

2. https://youtu.be/hJHvdBlSxug

Now comes the part of learning and doing by hand.

Here you have 2 paths and the choice is which one is more suitable for you.

1. Watching some tutorials and doing things.

2. Watching tutorials and doing your personal project along with the tutorial.

   Here you watch some parts of the tutorial. At some point, if you feel that you can apply this knowledge to your project, you simply apply it and come back to the tutorial. (also don't forget to do tutorial projects. If your instructor teaches something by doing it, then you also have to do that)

Don't forget to read the things you didn't get from the tutorial.

HTML5

HTML (Hyper Text Markup Language) is the skeleton of your webpage. This is a very important language that you have to write very well if your skeleton doesn't write well then your website content and styling get affected.

[ ] - Learn the basis - different tags (div, main, nav, footer etc.) and attributes
[ ] - Forms and Form validation using attributes (!important)
[ ] - Give clean and concise class names

Reading :

1. https://web.dev/learn/html/

2. https://web.dev/learn/forms/

   HTML forms

Videos :

1. https://www.youtube.com/watch?v=mJgBOIoGihA

CSS3

Let's come into some styling parts. If your site doesn't look pretty cool no one wants to stay. So, here to style your webpage CSS comes into hand.

[ ] - What is CSS and also difference between CSS vs CSS3
[ ] - Learn basics
    [ ] - selectors, different properties like color, font-size etc.
    [ ] - Specificity, Pseudo-elements, Pseudo-classes, Box model
[ ] - Layouts
    [ ] - Position - absolute, relative, fixed, sticky
    [ ] - Flexbox (!important)
    [ ] - Grid
[ ] - Responsive design
    [ ] - CSS Units (relative and absolute unit)
    [ ] - media queries

Reading :

1. https://web.dev/learn/css/

Videos :

1. https://youtu.be/OXGznpKZ_sA

Now you can build some projects to enhance you knowledge what ever you learned.

Here is some site to find projects:

1. https://www.frontendmentor.io/home

2. https://www.frontendpractice.com/

Note: While building any project try to complete it before moving to the next project. Most the beginners do is that just build the project and move to the next project but they don't focus on spacing, responsive

At this point focus on writing CSS don't jump directly into CSS frameworks after having 1 to 2 months of strong hands-over CSS you can pick any CSS framework to fast your development process.

Thank you, part 2 will be published soon...