Skip to content

FADL285/Front-End-Development-Roadmap

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

76 Commits

img

img

 
 

.gitignore

.gitignore

 
 

README.md

README.md

 
 

Repository files navigation

Front-End Development

Roadmap to becoming a Front-End Developer in 2024.

🎯 Roadmap to boost your career

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.

Link icons:

📖 → Official Docs   |   🎬 → Video  

📄 → Article   |   🎬📃🎬 → Course

Personal Recommendation → Personal Recommendation

YouTubeArabic playlist → YT Arabic Playlist;

YouTubeEnglish Playlist → English Playlist

🗺️ Content
1-Introduction 2-Before you start 3-Front-end Development Tech/Spec Overview  
4-Required for any path 5-Basic tools 6-Level One (HTML, CSS, JS) ✨
7-Level Two ✨ 8-Level Three ✨ 9-What Next?!

Important Note

Any sources included in this roadmap are personal recommendations. You can choose one or more sources if you wish, or you can search for other sources.

Introduction:

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.

Before you start:

First, you should read about The Front-end Developer Profession   📄

After this section, you should know:

  • Front-end Developer Role
  • Required Skills
  • Job Titles

Front-end Development Tech/Spec Overview

In this section, you will learn about Internet and should know:

  • 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

Here are some resources:

skip what you already familiar with 🤝

Required for any path:

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.

Basic Terminal Usage (Command line)

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:

Git - Version Control

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

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:

Basic tools

Basic tools to get start.

Text Editor ✍️ Browser 🌐 👨‍💻 Terminal
VS Code ☑️ Google Chrome ☑️ Git Bash ☑️
Atom Microsoft Edge Cmder
WebStorm Mozilla Firefox Hyper

Code Editors resources 📄

Level One:

Difference Between HTML, CSS & JS

HTML:

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:

For writing maintainable and scalable HTML documents, check this repo HTML Best Practices

CSS:

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:

💡 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:

HTML & CSS - (Resources & Practice)

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: 🎬📃🎬 💵💵 Personal Recommendation


Here are some YouTubeVideos for building templates with HTML & CSS: Personal Recommendation



Some challenges for what you have learned, Try 🦾🦾😃


After Learning HTML & CSS read this ➡️ HTML Interview Questions 📄 & CSS Interview Questions 📄

JavaScript:

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


Here are some resources to learn JavaScript:

💡 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):


Here are some YouTubeVideos for practice on JavaScript.:


Here are some Paid Courses for JavaScript: 🎬📃🎬 💵💵 Personal Recommendation


Here are some resources to learn JavaScript Algorithms, Data Structures and Design Patterns:


After Learning JavaScript read this ➡️ JavaScript Interview Questions 📄 & 37 Essential JavaScript Interview Questions 📄

Accessibility:

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:

Level Two:

Web Developer Tools:

Learning Resources:

Package Managers:

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:

CSS Architecture:

BEM methodology gives your CSS code a solid structure that remains simple, easy to understand and easy to modify

Learning Resources:

CSS Preprocessors:

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:

CSS Frameworks:

Utility Toolkits

UI + Utility Toolkits

JavaScript Libraries:

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::

Level Three:

Module Bundlers:

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:

JavaScript Frameworks:

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 🎬📃🎬. YouTubeArabic playlist and this tutorial 🎬📃🎬.

Learning Resources for Vue.js:

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.

Learning Resources for React.js:

Testing:

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:

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:

Progressive Web Apps:

Learning Resources:

What Next:

Always Keep Learning, Practice more, and don't stop.


📫 Reach me on

Github      LinkedIn      Twitter      Gmail     

About

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.

Topics

javascript css html computer-science roadmap frontend resources front-end-development vue-roadmap

Resources

Readme
Activity

Stars

105 stars

Watchers

3 watching

Forks

27 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •