Roadmap — Front-End Developer (HTML, CSS & JS)
When anyone in the world solving any problem with the help of the technology so they need some platform where they can integrate their idea with it. Like searching is an issue, we have google search on the website as well as mobile, hunting for a job, we have Linkedin again on the website as well as mobile. Like that everyone needs some kind of platform to integrate their idea with them and every platform have some common things which every software developer or computer engineer should know about it.
- Front End
- Back End
- Database
- Security
- Testing
- Deployment
Above six categories are common in all platform (website, mobile app, desktop app, IoT devices application, etc.). Different engineers have different mindsets and skills like designing, logical thinking, security, testing, analysis, etc. like that only we choose their field of interests.
So, those you are thinking that they are good at designing or can clone the photoshop design or wireframes of any website into code then this roadmap is made for you.
Lets’ start, we divided the whole roadmap into weeks which help you to track your process.
1. How to use Google efficiently — ️ 2 Days
- Before jumping directly into front end development first we have to learn how to use the world’s best search engine Google because nowadays google is placing or involving in all our daily tasks. The more efficiently you learn to use google the best results to get from it.
- I personally recommend every developer or engineer they should learn how to use Google efficiently to improve your learning style
- Learn how to use Facebook effectively and build your LinkedIn account. Reference account here.
2. 5w1h on Front End Development — 2 Days
There is no use of learning anything without knowing it’s basic, reasons, applications, etc, like here also we should know what is data science, why data science, how it works, its application. I use this rule whenever I start learning and exploring a new topic, it gives me proper information and simple notes. I am running a campaign on it on LinkedIn.
3. Basic Programming Languages like C, C++, Python, or Java, and Data structures — 15 days
Programming is the basic foundation of the technology world and without coding experience, we can not start our career in any field, so we should learn to program.
- A basic programming language, DSA and OOP concepts, here you can choose any programming language for DSA and OOPS and I personally recommend C/C++.
Resources link:
Task:
4. Version Control System (VCS) — 7 days
When we are working on any project. We need a system that can manage our code, where VCS comes in the role. With the help of VCS, you can track your daily coding activities if you commit and push your daily code. You can use any VCS but most trending and open source and ease of use VCS are Github and I personally use Github. If you maintain your GitHub account with proper coding style and repositories, then it helps you in applying for a job also.
Resources link: Github Tutorials
5. Linux commands and shell scripting — 7 days
When we entered the developed world then it recommended we should work on Linux based OS and say to bye-bye to Windows. Here, I personally recommended Ubuntu for developers. So before directly start doing your development you should know about the OS its file systems, basic commands. Now you are thinking about why we need this step. Wait I will explain to you see when you are working in any company they mostly preferred to work on open source technologies, libraries, OS. and most of the time we encountered the basic commands of Linux or we have to write some automated scripts in every designation of the programming world. In this week you have to learn the Linux file system, its scripting and commands.
Resources link:
Task: 100 programs for practice
6. Basic Networking concepts & commands — 7 days
After completing these four steps, we will proceed to step 5 where you can learn the basic networking concepts and its basic commands, now I think again you are confusing where is the need for networking in the Data Science career path. Hold on all points will be cleared, when we are working on machine learning, we have to deploy models on the cloud, have to do parallel processing training of the model, configuration different things in the cluster, have to work on master and slave architecture, which needed networking knowledge.
Resources link:
7. Development Environment Setup and Basic web terminologies — 3 Days
After successfully completed six steps, we start learning the Web terminologies concerts like what is HTTP, what is https, what is DNS, what is a client-server architecture, what is a website, etc. In this week we also have to command on the development environment, below are the list famous Integrated development environment (IDE).
Most popular web browser
- Chrome (personally recommended)
- Mozilla Firefox
- Chromium
and most useful chrome extension
When we are learning any new language or framework, then we can’t be perfect in it until we can develop something great. Here you have to do the same and have to choose any website to which you are going to create its clone because of my learning experience, a developed clone of any website gives one of the best learning ever. Below is the list of websites or web app which you can choose any one of them.
8. Front-end development languages — 7 days
From now we start learning basic languages for front end development which are as follows
- HTML basic
- HTML Schematic
- Basic SEO
- Accessibility
Resources link:
9. Styling website or web using CSS — 7 days
In this week we learn how to give styling to the website and its pages.
- CSS basic
- Making Layouts
- Media Queries
- Advanced CSS like SCSS
- Material design framework like bootstrap materializes, etc.
Resources link:
10. Let’s fun with Javascript — 7 days
In this week we learn how to give functionality to any web with the help of Javascript.
- Basics Syntex
- DOM Manipulation
- API Handling and AJAX work
- ES6 Feature and understanding
- JQuery
- Hosting, events, strict, HTTP, DNS.
Resources link:
11. Deployment project — 1 day
In this week we deploy our project on some cloud service. Now here you are thinking that there are so many cloud services available in the market with free and paid, which one we have to use and how much it will take. So, my friends, you don’t have to think a lot about it. we are going to use GitHub pages for hosting or deployment our website. Below are the advantages of using Github pages.
- Free
- Easy to use
- Time-saving
- No prior learning requirement of the cloud services.
Resources link:
Thanks for reading this article so far.
Hope it will help you all and one humble request follow all steps without any ignorance. If you cheat or left any point then you will cheat with yourself. If you want other tech stack roadmap like becoming a Back-End Developer, MEAN, MERN developer, NLP, Computer Vision, Devops, MLOps, then give me your request on Linkedin, Twitter or Website. or comment in the section below.
I hope that benefits you, and if you have any questions, feel free to contact us. If you like this article then please consider following me on medium (deepakchawla). if you’d like to be notified for every new post and don’t forget to follow me on Linkedin Twitter
Other articles on Medium you may like:
