This is a curated roadmap to becoming a professional Front-end Developer that anyone could use to learn about the practice of front-end development.
๐ โ Official Docs | ๐ฌ โ Video
๐ โ Article | ๐ฌ๐๐ฌ โ Course
Front-end development involves using HTML, CSS, and JavaScript to build a client-side application. The client-side of an online application is the visual part of a web application and also what a user interacts with when an application is opened: colours, fonts, buttons, navigations, animations, etc.
Introduction To Front End ๐ฌ
Front-end development includes the user interface of an application. Everything a user interacts with when a user visits a website such as a login or sign-up page, homepage, contact page falls under the front-end development term.
A front-end developer is responsible for building and implementing the interface of a website or web application. They build client-side applications using web technologies such as HTML, CSS, and JavaScript.
In 2021 however, front-end development has gone beyond HTML, CSS, and JavaScript. There are a lot of web technologies you need to learn to be able to excel as a front-end developer this year.
I will endeavor to cover all you need to get started with front-end development in 2023.
First, you should read about The Front-end Developer Profession ๐
- Front-end Developer Role
- Required Skills
- Job Titles
- The World Wide Web (aka WWW)
- Internet Fundamentals & How it Works
- Hypertext Transfer Protocol (aka HTTP)
- Uniform Resource Locators (aka URL)
- Browsers and How The Web Works
- DNS, Domain Name and Hosting
skip what you already familiar with ๐ค
- The Front-end Development Tech/Spec Overview ๐
- World Wide Web (WWW) Basic Mechanics ๐
- How does the Internet work?
- What is HTTP?
- How Browsers Work?
- DNS and how it works?
- Domain Name
There are some tools required for any path such as Basic Terminal Usage (Command line), Git - Version Control & Github.
Note:
Learn these tools in parallel with the rest of the courses.
The terminal is an interface used to execute text commands, and it gives you access to the underlying operating system. Basic terminal usage is a skill all developers need regardless of their specialization. Command line is very important so I strongly recommend you study more on how to use it.
If you are on windows like me, I recommend using git bash.
Here are some resources to learn command line:
- Learn Command Line ๐ฌ๐๐ฌ
- Command Line Crash Course - Freecodecamp ๐ฌ
- Command line crash course ๐
Git is a version control system that enables developers to track changes in their project. Git also helps developers collaborate as a team. Git is needed among developers, to ensure that there are no code conflicts between developers.
GitHub is a code hosting platform for software development. GitHub lets teams work together on projects and it is also used for version control. It can be used among teams to collaborate on a project. For example, a team of developers wants to build a web application and everyone is given a task that has to be updated daily while working on the project, in this case, Github helps them build a centralized repository where each team member can make updates or manage the code file or repository.
Here are some resources to learn Git & GitHub:
- Git Handbook - Github guides ๐
- Git Videos ๐ฌ๐๐ฌ
- Git Cheat Sheet repo ๐
- Git book - Git ๐
- Github Guides ๐
- Version Control with Git - Udacity ๐ฌ๐๐ฌ
- Introduction to Git and GitHub from Google ๐ฌ๐๐ฌ
- An introduction to Git - Freecodecamp ๐
- Git & GitHub Arabic Tutorial ๐ฌ๐๐ฌ
- Learn Git and GitHub ๐ฌ๐๐ฌ
- learn Git in Arabic ๐ฌ๐๐ฌ
- Git Tutorial for Beginners: Learn Git in 1 Hour - Code with Mosh ๐ฌ
- Git and GitHub for Beginners - Crash Course - Freecodecamp ๐ฌ
Basic tools to get start.
Text Editor โ๏ธ | Browser ๐ | ๐จโ๐ป Terminal |
VS Code โ๏ธ | Google Chrome โ๏ธ | Git Bash โ๏ธ |
Atom | Microsoft Edge | Cmder |
WebStorm | Mozilla Firefox | Hyper |
๐บ๏ธ Content | ||
1- HTML | 2- CSS | 3- HTML & CSS - (resources & practice) |
4- JavaScript | 5- Accessibility |
HTML stands for Hypertext Markup Language. It is the markup language for building web pages, it is also the building block of the web. HTML is easy to learn and comprehend. With just HTML, you can build a basic website.
Here are some resources to learn HTML:
- Learning resources and tools for HTML - Front-End Masters ๐ โจ๐ซ
- Learn HTML - Elzero Web School ๐ โจ๐ซ
- MDN - HTML ๐
- Learn HTML - web.dev ๐
recommended
- Learn Forms - web.dev ๐
recommended
- HTML Full Course - Freecodecamp ๐ฌ
- HTML Crash Course For Absolute Beginners - Traversy Media ๐ฌ
For writing maintainable and scalable HTML documents, check this repo HTML Best Practices
CSS stands for Cascading Style Sheets. It is the technology to learn after HTML. It is used for styling our HTML. For example, we can use CSS to space our content, colours, fonts, etc.
Here are some resources to learn CSS:
- Learn CSS - Elzero Web School ๐ โจ๐ซ
- MDN - CSS ๐
- Web.dev - Learn CSS ๐
recommended
- Web.dev - Learn Responsive Design ๐
recommended
๐ก Take a look at this repository - Awesome-CSS-Learning - A tiny list limited to the best CSS Learning Resources.
The basics of CSS you need to learn are:
- Basics, Box Model, Colors & Gridents, Units โก๏ธ CSS Fundamentals ๐
- Flow, Positioning, Floats, Flex box, Grids โก๏ธ CSS Layout ๐
- Responsive Design & Media Queries โก๏ธ CSS Media Queries ๐
- Animations โก๏ธ CSS Transitions, Transforms & Animation ๐
- Web Fonts, CSS Icons, Google Fonts โก๏ธ CSS Fonts & Icons ๐
- CSS Variables & CSS Practices โก๏ธ CSS Practices ๐
In this section, I will recommend some paid courses and YouTubevideos that explain and build websites using HTML and CSS. Plus some websites to practice what you've learned.
Here are some Paid Courses for HTML & CSS: ๐ฌ๐๐ฌ ๐ต๐ต
- Build Responsive Real-World Websites with HTML and CSS
- Modern HTML & CSS From The Beginning (Including Sass) โก๏ธ
exclude sass from it now
- CSS - The Complete Guide 2021 (incl. Flexbox, Grid & Sass) โก๏ธ
exclude sass from it now
Here are some YouTubeVideos for building templates with HTML & CSS:
- Practical HTML & CSS - Elzero Web School ๐
- Design Template Using ( HTML 5 - CSS 3 ) - Unique Coderz Academy ๐ฌ๐๐ฌ
- Design Responsive Template Using ( HTML - CSS - Media Query ) - Unique Coderz Academy ๐ฌ๐๐ฌ
- Traversy Media
- How To Make Website Using HTML & CSS | Full Responsive - Easy Tutorials ๐ฌ๐๐ฌ
- Frontend Masters Web Development Bootcamp ->
included JS
Some challenges for what you have learned, Try ๐ฆพ๐ฆพ๐
After Learning HTML & CSS read this โก๏ธ HTML Interview Questions ๐ & CSS Interview Questions ๐
JavaScript is one of the most popular programming languages in the world. It is the language of the web. As a front-end developer, it is required you learn JavaScript. JavaScript enables us to create dynamic content. When you create your HTML structure and your style with your CSS, JavaScript makes the website dynamic and alive.
๐ก๐ก Learning Javascript and practicing on it continues with you to the end of the path and will not end.
On this level, we will learn the basics of JavaScript
- JavaScript Fundamentals
- DOM Manipulation & BOM
- AJAX, Fetch API and JSON
- ES6+ & Modular JS
- Web APIs
- Object-oriented Programming (OOP)
- Regular Expressions (Regex)
general skill
- JavaScript Algorithms and Data Structures | Design Patterns
Here are some resources to learn JavaScript:
- MDN - JavaScript ๐
- Learn JavaScript - Elzero Web School ๐ โจ๐ซ
- JavaScript Samurai ููุฑุณ ุฌุงูุงุณูุฑุจุช ู
ู ุงูุตูุฑ ุญุชู ุงูุงุญุชุฑุงู ๐ฌ๐๐ฌ
- JavaScript.INFO ๐
- Eloquent JavaScript ๐
- Learn JavaScript - Freecodecamp ๐ฌ
- Traversy Media
- JavaScript Tutorial for Beginners - Clever programmers ๐ฌ
- JavaScript Tutorial for Beginners - Programming with Mosh ๐ฌ
- 30 Days of JavaScript repo ๐
๐ก Take a look at this repository - Awesome-JavaScript-Learning - A tiny list limited to the best JavaScript Learning Resources.
Here are some resources to learn Regular Expressions (Regex):
- Regular Expressions Demystified ๐ฌ๐๐ฌ
- Regular Expression tutorial - Arabic ๐ฌ๐๐ฌ
The implementation is not in JavaScript but explains the concept of Regex in a nice way
- Regular Expressions (RegEx) Tutorial ๐ฌ๐๐ฌ
- Regular expressions - MDN ๐
Here are some YouTubeVideos for practice on JavaScript.:
- JavaScript Practice - Elzero Web School ๐
- HTML | CSS | JavaScript | Projects - Shadow Coding ๐ฌ๐๐ฌ
- Build 15 JavaScript Projects - Vanilla JavaScript Course - FreeCodeCamp ๐ฌ
- Traversy Media
- Learn JavaScript by Building 7 Games - Full Course - FreeCodeCamp ๐ฌ
- Build A Weather App in HTML CSS & JavaScript | Weather App in JavaScript ๐ฌ
- Build A Music App With Javascript Tutorial ๐ฌ
Here are some Paid Courses for JavaScript: ๐ฌ๐๐ฌ ๐ต๐ต
- JavaScript - The Complete Guide 2021 (Beginner + Advanced) ๐ฌ๐๐ฌ โจ๐ซ
- Modern JavaScript (Complete guide, from Novice to Ninja) ๐ฌ๐๐ฌ
- Modern JavaScript From The Beginning ๐ฌ๐๐ฌ
- 50 Projects In 50 Days - HTML, CSS & JavaScript ๐ฌ๐๐ฌ
Here are some resources to learn JavaScript Algorithms, Data Structures and Design Patterns:
- JavaScript Algorithms and Data Structures - freeCodeCamp ๐
- JavaScript Algorithms and Data Structures Masterclass ๐ฌ๐๐ฌ ๐ต๐ต
- Master the Coding Interview: Data Structures + Algorithms ๐ฌ๐๐ฌ ๐ต๐ต
- Data Structure : JavaScript (leetcode problem-solving) - Shadow Coding ๐ฌ๐๐ฌ
- JavaScript Algorithms and Data Structures ๐ฌ๐๐ฌ
- Learning JavaScript Design Patterns ๐
- JavaScript Design Patterns โ Explained with Examples ๐
- Design Patterns | javascript ๐ฌ๐๐ฌ
After Learning JavaScript read this โก๏ธ JavaScript Interview Questions ๐ & 37 Essential JavaScript Interview Questions ๐
Digital accessibility, commonly abbreviated a11y, is about designing and building websites and web apps that disabled people can interact with in a meaningful and equivalent way.
Here are some resources to learn HTML:
- Learn Accessibility - Web.dev ๐ โจ๐ซ
- Learn Accessibility - MDN ๐
- Web Accessibility - Udacity ๐ฌ๐๐ฌ
- Web Accessibility: Getting Started - pluralsight ๐ฌ๐๐ฌ
๐บ๏ธ Content | |||
1- Web Developer Tools | 2- Package Managers | 3-CSS Architecture | |
4-CSS Preprocessors | 5- CSS Frameworks (CSS UI Toolkits) | 6-JavaScript Libraries |
Learning Resources:
- Mastering Chrome Developer Tools v2 ๐ฌ๐๐ฌ ๐ต๐ต
- Chrome DevTools Docs ๐
- Google Chrome Developer Tools Crash Course ๐ฌ
- 21+ Browser Dev Tools & Tips You Need To Know ๐ฌ
a package manager is a piece of software that lets you manage the dependencies (external code written by you or someone else) that your project needs to work correctly.
Learning Resources:
BEM methodology gives your CSS code a solid structure that remains simple, easy to understand and easy to modify
Learning Resources:
- BEM ๐
- BEM Cheat Sheet ๐
- Organize your CSS code using BEM ๐ฌ
- You Probably Need BEM CSS in Your Life (Tutorial) ๐ฌ
CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. CSS preprocessors make it easy to automate repetitive tasks, reduce the number of errors and code bloat, create reusable code snippets, and ensure backward compatibility.
Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SassScript is the scripting language itself. Sass consists of two syntaxes (sass/scss).
Learning Resources:
- Sass Docs ๐
- Sass Fundamentals ๐ฌ๐๐ฌ ๐ต๐ต
- Learn Sass - Elzero Web School ๐ โจ๐ซ
- Sass Tutorial for Beginners - CSS With Superpowers ๐ฌ
- Sass and BEM for beginners ๐ฌ
- Create Web Design With Sass ๐ฌ๐๐ฌ
- SASS Tutorial (Build Your Own CSS Library) ๐ฌ๐๐ฌ
Utility Toolkits
UI + Utility Toolkits
A JavaScript library is a library of pre-written JavaScript code that allows for easier development.
๐ก Search about what you want, and you will find a library to do it.
Articles about recommended js libraries::
- 10 Awesome JavaScript Libraries You Should Try Out in 2021 ๐
- 39 of the best JavaScript libraries and frameworks to try in 2021 ๐
๐บ๏ธ Content | ||
1-Module Bundlers | 2-JavaScript Frameworks | |
3-Testing | 4-TypeScript | 5-Progressive Web Apps (PWA) |
A JavaScript module bundler compiles small pieces of code (aka modules) into something larger and more complex, such as a library or application.
Learning Resources:
In this section, you will learn about JavaScript Frameworks, JavaScript State Management and Server side rendering.
JavaScript frameworks:
JavaScript frameworks are tools designed to speed up development and organize code used to build modern web apps. They exist to solve problems more directly rather than providing an open set of tools like most libraries do. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs require framework experience.
JavaScript State Management:
State Management helps in updating the UI in related places when there is a change in the application data due to action performed in the application like click, hover, etc. It also helps in making sure that state changes have been incorporated at corresponding places.
Server side rendering:
Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser. Server-side sends a fully rendered page to the client; the client's JavaScript bundle takes over which then allows the Vue.js app to hydrate.
Top 3 Javascript Frameworks:
๐ก Before you start learning a framework I recommend watching this tutorial ๐ฌ๐๐ฌ.
and this tutorial ๐ฌ๐๐ฌ.
Learning Resources for Vue.js:
- Vue Docs ๐
- Vue School
- Vue Mastery
- Vue Router ๐ ->
Ecosystem: The official Router for Vue.js
- Pinia Docs ๐ ->
Ecosystem: The intuitive store for Vue.js
- Vue - The Complete Guide (w/ Router, Vuex, Composition API) ๐ฌ๐๐ฌ ๐ต๐ต
- Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest) ๐ฌ๐๐ฌ ๐ต๐ต
- Vue 3 Crash Course | Project From Scratch ๐ฌ
- The Ultimate Vue 3 Tutorial (100% Composition API) ๐ฌ
- Build with Ben: Vue 3 and TypeScript Working Session ๐ฌ
- Vue JS 3 Tutorial for Beginners ๐ฌ๐๐ฌ
- Vue.js 3 Tutorial - The Net Ninja ๐ฌ๐๐ฌ
- Vue.js Tutorial: Beginner to Front-End Developer ๐ฌ
Learning Resources For NuxtJS:
NuxtJS is a Server-Side Vue Framework, with some architectural opinions that can be useful to creating maintainable applications, even if you donโt use any of the Server Side Rendering features it provides.
- NuxtJS ๐
- Nuxt.js 3 Fundamentals ๐ฌ๐๐ฌ ๐ต
- Mastering Nuxt 3 ๐ฌ๐๐ฌ ๐ต
- Nuxt 3 Tutorial - The Net Ninja ๐ฌ๐๐ฌ
- The Nuxt 3 Crash Course ๐ฌ
- Nuxt 3 - Building a Complete Project ๐ฌ
- Nuxt 3 full course build and deploy ๐ฌ
- Learn Nuxt 3 โ Full course for beginners 2023 ๐ฌ
Learning Resources for React.js:
- React Docs ๐
- React for beginners ๐ฌ๐๐ฌ
- React for beginners ๐ฌ๐๐ฌ
- React for beginners ๐ฌ๐๐ฌ
- React Hooks ๐
- React Hooks ๐ฌ๐๐ฌ
- React Hooks ๐ฌ๐๐ฌ
- React Hooks ๐ฌ๐๐ฌ
- React Router ๐
- React Router 6 ๐ฌ๐๐ฌ
- React Router 6 ๐ฌ๐๐ฌ
- React Router 6 ๐ฌ๐๐ฌ
- What is state Management ๐ ->
Read about state management to know what you should learn ๐
- Redux Toolkit ๐
- Recoil ๐
- MobX ๐
- Redux ๐ฌ๐๐ฌ
- Redux Toolkit ๐ฌ๐๐ฌ
- Redux Toolkit ๐
- Style in React ๐
- Style Components ๐
- Css Modules ๐
- Style Components crach course ๐ฌ๐๐ฌ
- Material UI ๐
- Material UI crach course ๐ฌ๐๐ฌ
- API Calls ๐
-
Rest
- Axios ๐
- SWR ๐
- React Query ๐ฌ๐๐ฌ
- Axios ๐
-
GraphQL
- Apollo ๐
- GraphQL whit React - Apollo client ๐ฌ๐๐ฌ
- Relay ๐
- URQL ๐
- Apollo ๐
-
Learn the difference between Unit, Integration, and Functional tests and learn how to write them.
Learning Resources For unit testing with Vitest:
Learning Resources For unit testing with Jest:
JavaScript Unit Testing - The Practical Guide ๐ฌ๐๐ฌ๐ต๐ต - Learn how to write automated tests (unit & integration tests) with Vitest & Jest.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
Visit the following resources to learn more:
- What Is TypeScript? ๐
- Official Website ๐
- Learn TypeScript - Elzero Web School ๐ โจ๐ซ
- TypeScript Course for Beginners - Learn TypeScript from Scratch! ๐ฌ
- Learn TypeScript โ Full Tutorial ๐ฌ
- Understanding TypeScript ๐ฌ๐๐ฌ ๐ต๐ต
- What is PWA? Web.dev ๐
Learning Resources:
- Progressive Web Apps ๐
- Learn PWA - web.dev ๐
- PWA Tutorial for Beginners ๐ฌ๐๐ฌ
- Progressive Web Apps (PWA) - The Complete Guide ๐ฌ๐๐ฌ ๐ต๐ต
Always Keep Learning, Practice more, and don't stop.