FrontEnd Development Roadmap
To learn about Frontend Development first need to understand, How the Internet works?
Internet
The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
Visit the following resources to learn more:
- How does the Internet Work?
- The Internet Explained
- How Does the Internet Work?
- Introduction to Internet
- Learn How the Web Works
- How does the Internet work?
- How the Internet Works in 5 Minutes
Let’s start here to learn about Frontend Development
Step 1 : HTML
HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
Visit the following resources to learn more:
- W3Schools: Learn HTML
- htmlreference.io: All HTML elements at a glance
- HTML For Beginners The Easy Way
- Web Development Basics
- Codecademy — Learn HTML
- Interactive HTML Course
- HTML Full Course for Beginners | Complete All-in-One Tutorial
- HTML Full Course — Build a Website Tutorial
- HTML Tutorial for Beginners: HTML Crash Course
What concepts need to be learned about HTML?
- Learn the basics
- Writing Semantic HTML
- Forms and Validations
- Accessibility
- SEO Basics
Step 2: CSS
CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Visit the following resources to learn more:
- The Odin Project
- What The Flexbox!
- Learn CSS | Codecademy
- Learn Intermediate CSS | Codecademy
- CSS Complete Course
- CSS Crash Course For Absolute Beginners
- HTML and CSS Tutorial
- CSS Masterclass — Tutorial & Course for Beginners
- W3Schools — Learn CSS
- cssreference.io: All CSS properties at a glance
- Web.dev by Google — Learn CSS
- freeCodeCamp — Responsive Web Design
- Learn to Code HTML & CSS
- Joshw Comeaus CSS Hack Blog Posts
- 100 Days CSS Challenge
- CSS Tutorial | Scaler
What concepts need to be learned about CSS?
- Learn the basics
- Making Layouts
- Responsive Design
Step 3 : JavaScript
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
Visit the following resources to learn more:
- Visit Dedicated JavaScript Roadmap
- W3Schools — JavaScript Tutorial
- The Modern JavaScript Tutorial
- Learn JavaScript: Covered many topics
- Eloquent JavaScript textbook
- You Dont Know JS Yet (book series)
- JavaScript Crash Course for Beginners
- Build a Netflix Landing Page Clone with HTML, CSS & JS
- Build 30 Javascript projects in 30 days
- Learn the basics of JavaScript
- JavaScript for Beginners
What concepts need to be learned about Javascript?
- Learn the basics
- Learn DOM Manipulation
- Fetch API/Ajax(XHR)
Step 4 : Version Control Systems
Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code — if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
Visit the following resources to learn more:
- Version Control System Introduction
- Git & GitHub Crash Course For Beginners
- Learn Git in 20 Minutes
- Git Documentation
- Learn Git by Atlassian
What concepts need to be learned about Version Control Systems?
- Git
Step 5: Repo Hosting Services
There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.
Visit the following resources to learn more:
- GitHub: Where the world builds software
- GitLab: Iterate faster, innovate together
- BitBucket: The Git solution for professional teams
What concepts need to be learned about Repo Hosting Services?
- Github
- Gitlab
- Bitbucket
Step 6: Package Managers
Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.
Visit the following resources to learn more:
- Modern JavaScript for Dinosaurs
- An Absolute Beginners Guide to Using npm
- Yarn — Getting Started
- NPM tutorial for Beginners
- NPM Crash Course
- Yarn Crash Course
What concepts need to be learned about Package Managers?
- npm
- pnpm
- yarn
Step 7 : Pick a Framework
Web frameworks are designed to write web applications. Frameworks are collections of libraries that aid in the development of a software product or website. Frameworks for web application development are collections of various tools. Frameworks vary in their capabilities and functions, depending on the tasks set. They define the structure, establish the rules, and provide the development tools required.
Visit the following resources to learn more:
What concepts need to be learned about Pick a Framework?
- React
- Vue.js
- Angular
Step 8 : Modern CSS
The way we write CSS in our modern front-end applications is completely different from how we used to write CSS before. There are methods such as Styled Components, CSS Modules, Styled JSX, Emotion, etc
What concepts need to be learned about Pick a Framework?
- Tailwind
- Redix UI
- Shadcn UI
This above thing you need to learn to become a frontend developer, this was referred by roadmap.sh platform you can visit the full roadmap to become a pro.
Please add your comment if this content is helpful to you, and share it with your friends who are front-end developers.
Do follow on medium Sidramaraddy
Do Follow on LinkedIn Sidramaraddy
