Table of Contents:
——————————-
00:00 How to become a Frontend Web Developer? Complete Roadmap 🛣
01:00 Who is a Frontend Developer?
02:00 Step 1: Basics of Frontend Development
04:30 Step 2: JavaScript Libraries/Frameworks
06:47 Step 3: CSS Preprocessors
07:36 Step 4: Additional Tools/Skills
09:09 how much time is required to become a complete web developer?
======================
Get started with bootstrap – https://getbootstrap.com/
🔥🔥🔥. How to start freelancing as a Web Developer and get your first project? https://youtu.be/H45X02ohuDU 🔥🔥🔥.
Every beginner in the web development industry is confused with many tools, technologies and terms used.
Some cannot even start on anything. Some are switching from one technology to another, and in the end, are too exhausted and stop learning.
In this video, I will tell you how to become a front end web developer without getting exhausted.
I will give you a complete roadmap to becoming a front end developer based on my self-experience.
As a bonus, I will estimate how much time it is required to become a complete front end developer.
Assalam o Alaikum & hi guys. Welcome to my channel. My name is Adnan Ahmed, a freelance web developer with over a decade of experience in making websites.
If this is the first time you visit my channel, please subscribe to my channel to get more web development videos in the future.
First thing, who is a Frontend Developer?
A frontend developer is a person who codes the overall website design, including UI & UX using the languages understandable by the web browsers, e.g. HTML, CSS & JavaScript.
So their job is to implement the way the website appears on your computer, laptop or mobile screens.
As I told you earlier, every new developer’s major mistake is to start learning too many technologies at once.
My biggest tip for every new developer is to make vertical progress than horizontal progress.
Let me explain what vertical progress is?
See, you need to learn the basic building blocks of front end development first, so you can quickly make a good looking website.
They are multiple technologies on each step that are almost similar with minor differences.
The first and the base of the website is HTML. e.g. you see some paragraph of text, a heading or button etc
And the second thing is CSS which provide the look and feel to your website. e.g. how the paragraph text will look, regular or bold. colour of the text and the colour of the button etc
And the third part is Javascript as it provides the functionality in the website, e.g. what happened when you click some button, either it will submit a form or open a popup etc.
You think of these three components of web development as the human body.
You can say HTML is the skeleton of the body. The CSS is the skin of your body. And the JS as the functions done by your body.
So you have to learn HTML, CSS & JS first to start doing the frontend web development.
With this, the one more skill which is necessary for a frontend developer is Responsive Web Design.
Responsive web design is a process to create web pages that looks equally good on Computer, laptop, tablet and mobile screens.
For this, with the use of HTML and CSS, we can automatically resize, hide, enlarge or shrink elements of a website to make them look good on all devices.
To do this, you need to write your CSS and HTML from scratch, but there are few libraries available to make life easier for you. The most famous is Bootstrap by Twitter. The link to the bootstrap is in the description.
You can learn bootstrap quickly if you already have a good grip on HTML and CSS. And you can build a responsive website in no time.
At this step, if someone spent a good time practising everything explained already, he/she will be able to make a good looking and functional website.
Now going a step further, you can learn some Javascript libraries and frameworks. These frameworks help you built the frontend without doing repetitive tasks, and you don’t write everything from scratch.
Speaking of Javascript libraries, although jQuery is not the top one on the list now, you can still learn it with Javascript to implement frontend functionalities in your website without writing too much code.
The latest list of Javascript libraries and frameworks include: React, Angular and Vue Js.
The only difference between libraries and framework is, the framework provides a predefined structure of doing things, but in the library, you are open to implementing everything you own way.
Choosing a Javascript library or framework speed up the development process and provide you to create a dynamic website or web app quickly.
To understand the dynamic feature in a web app, if you notice on the Facebook app, for example, when you scroll the feeds, it loads the old posts without reloading the whole web page.
Sometimes it only shows a loading icon for a while, and the old stories load instantaneously.
It makes your website or app user friendly and people not distracted while using the application as they don’t need to refresh the page manually.
Also, I will recommend React over others as it is a bit easier to learn it than others.
Same as JavaScript libraries or frameworks, you can upgrade your CSS skill to something better.
See, when CSS grows, it gets complicated and making one change impact too many places, and unseen bugs occur.
Secondly, CSS is old now, although there is a new version which is CSS3. But for any new feature added to it, each browser needs to adopt it. And it is a time taking process.
So here come the CSS preprocessors like Sass, Less or Stylus. These will allow you to add variables, mixins, functions and nesting to make CSS shorter, cleaner and feature-rich.
And using their compilers, you can convert the code to CSS.
CSS preprocessors syntax is not very different from CSS, so it will not take much time to learn.
Here my recommendation is to learn Sass, but you can learn Less or Stylus also.
At this point, you are ready to look for jobs in front end development.
The couple of things which you can learn and give you an edge over others are:
1) A version control system that can help you maintain the history of what you have done in your code. The most popular is Git, which not only allows to you maintain the versions of code but easy to collaborate with other team members
2) Code Testing: Although there is not much importance given to testing, it is also necessary to deliver a bug-free website or app.
There are different methods of testing.
Functional testing is the method in which the complete application is tested to give the required result. On the other hand, in unit testing, small units or bits of code are tested to make them bug-free.
3) Browser Developer Tools: The browser developer tools like web inspector in the chrome browser help you inspect HTML, CSS and javascript. This way, you can see how the elements appear on the website, check which CSS is applying on some element, and see javascript functionality in JavaScript Console.
Timeline
- HTML, CSS & Javascript: 3 – 4 months
- React: 2 – 3 months
- Git, Code Testing, Browser Developer Tools: 1 – 2 months
- SASS: 1 month
It is an estimated timeframe to master the skills, but it all depends on how much time anyone can allocate daily to learn these skills. Some could learn quickly, and someone takes longer. But the key is to be consistent. And understand one level of skills and then go further. As I already said, don’t try to learn too many tools simultaneously but focus on one tool first and master it.
When working on different jobs or projects, you can learn other tools quickly as you have a good understanding of core tools involved in front end development.
I hope you guys find this helpful video to decide what technologies you need to learn to become a frontend developer, apply for jobs in your local area, or apply for freelancing projects.
Please write to me in the comments if you have any questions. Until the following video, I am signing off. Assalam-o-Alaikum
============================================
✅ WordPress Themes & Plugins.
► Astra WordPress Theme (20% OFF 🔥): https://iadnanahmed.com/recommend…
► Astra WordPress Theme: https://iadnanahmed.com/recommend…
► Elementor Pro Theme Builder: https://iadnanahmed.com/recommend…
✅ Equipment used to record my videos.
► Canon EOS 700D + EF-S 18-55mm 3.5-5.6 is STM – International Version – https://amzn.to/38kgCxb
► BOYA BY-M1 3.5mm Electret Condenser Microphone with 1/4″ adapter for Smartphones iPhone DSLR Cameras PC – https://amzn.to/2U1QHSu
► SOMITA St-3520 Lightweight 56″ Tripod – https://amzn.to/3l3Fflk
► Selfie Ring Light with Tripod Stand and Phone Holder – https://amzn.to/359HEWh
Disclaimer: This video and description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. It helps support the channel and allows me to continue to make videos like this. Thank you for your support!
=============
#adnanahmed, #webdeveloper, #webdevelopmenttutorials, #wordpresstutorials, #wordpress, #webdevelopment
how to become a frontend web developer, web developer career, web development career, web development, front end developer, front-end development, front end development, front end web developer roadmap, web development roadmap, how to become a web developer, web developer, freelance web developer, frontend development roadmap, web development roadmap 2021, web dev roadmap, web developer roadmap, web dev roadmap 2021, Web Development Tutorials, HTML, CSS, javascript, bootstrap
