Giters

menaaziz27 / Front-End-Development-Roadmap

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.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Front-End Development

Roadmap to becoming a Front-End Developer in 2022.

๐ŸŽฏ 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   |   Youtube Arabic playlist => YT Arabic Playlist   |   Youtube English 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 2021.

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

  • The World Wide Web (aka WWW)
  • The Internet
    • 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:

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 youtube videos 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 Youtube Videos 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 Youtube Videos 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 ๐Ÿ“„

Extra Resources: Front-End Tools

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

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

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:

Testing:

Learn the difference between Unit, Integratation, and Functional tests and learn how to write them.

Learning Resources For unit testing with Jest:

JavaScript Frameworks:

In this section, you will learn about JavaScript Frameworks, JavaScript State Managment 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 Managment:

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 ๐ŸŽฌ ๐Ÿ”  ๐ŸŽฌ. Youtube Arabic playlist and this tutorial ๐ŸŽฌ ๐Ÿ”  ๐ŸŽฌ.

Learning Resources For VUE:

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.

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.