Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/amir78729/front-end-roadmap

Last synced: 25 days ago
JSON representation
Host: GitHub
URL: https://github.com/amir78729/front-end-roadmap
Owner: amir78729
Created: 2023-03-17T18:17:49.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-07-25T19:13:54.000Z (3 months ago)
Last Synced: 2024-07-25T22:13:53.242Z (3 months ago)
Language: CSS
Homepage:
Size: 22.7 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project

README

        


 



# Front-end roadmap

In this article, a number of useful links for learning front-end development have been collected. Hope you enjoy it! 

 



**Table of Contents**

- [Fundumentals](#fundumentals)

  * [Internet](#internet)

    + [Basics](#basics)

    + [HTTP](#http)

    + [Browsers](#browsers)

    + [Domain Name](#domain-name)

    + [DNS](#dns)

    + [Hosting](#hosting)

  * [HTML](#html)

    + [Syntax](#syntax)

      - [Basic Tags](#basic-tags)

    + [Forms](#forms)

    + [More Advance Topics](#more-advance-topics)

      - [SVG](#svg)

      - [SEO](#seo)

      - [Best Practices](#best-practices)

  * [CSS](#css)

    + [Syntax](#syntax-1)

    + [Box Model](#box-model)

      - [Margin Collapsing](#margin-collapsing)

    + [Selectors](#selectors)

      - [Specificity](#specificity)

      - [Pseudo Selectors](#pseudo-selectors)

    + [Colors](#colors)

    + [Calc](#calc)

    + [Layout](#layout)

      - [Flex](#flex)

      - [Grid](#grid)

    + [Responsive Design](#responsive-design)

      - [Media Queries](#media-queries)

      - [Relative Units](#relative-units)

      - [Images](#images)

    + [More Advance Topics](#more-advance-topics-1)

      - [Transforms](#transforms)

      - [Animations](#animations)

      - [CSS Variables](#css-variables)

      - [Best Practices](#best-practices-1)

    + [Reference](#reference)

  * [JS](#js)

- [Package Managers](#package-managers)

  * [npm](#npm)

  * [yarn](#yarn)

- [Frameworks](#frameworks)

  * [React](#react)

- [Introduction of Some Cool Packages](#introduction-of-some-cool-packages)

## Fundumentals

### Internet

> The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.

#### Basics

- [Stanford - How does the Internet Work?](http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)

- [YouTube - How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)

#### HTTP

> HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. HTTP follows a classical "Client-Server model" with a client opening a connection request, then waiting until it receives a response. HTTP is a stateless protocol, that means that the server does not keep any data (state) between two requests. ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP))

- [MDN - An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)

- [HTTPS in Comics!](https://howhttps.works/)

#### Browsers

> A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.

- [MDN - Populating the page: how browsers work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work)

- [YouTube - How Do Web Browsers Work?](https://www.youtube.com/watch?v=WjDrMKZWCt0)

#### Domain Name

> A domain name is a unique, easy-to-remember address used to access websites, such as `google.com`, and `facebook.com`. Users can connect to websites using domain names thanks to the Domain Name System (DNS).

- [MDN - What is a Domain Name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)

- [YouTube - A Beginners Guide to How Domain Names Work](https://www.youtube.com/watch?v=Y4cRx19nhJk)

#### DNS

> The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.

- [cloudflare - What is DNS?](https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/)

- [Mess with DNS - DNS Playground](https://messwithdns.net/)

- [DNS in Comics!](https://howdns.works/)

#### Hosting 

> Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.

- [YouTube - What Is Web Hosting? Explained](https://www.youtube.com/watch?v=htbY9-yggB0)

---

### HTML

> HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML))

#### Syntax

- [MDN - HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)

- [MDN - Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML)

##### Basic Tags

- [MDN - HTML element references](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

- [Tutorialspoinnt - Basic HTML tags](https://www.tutorialspoint.com/html/html_basic_tags.htm)

- [Elated - Your First 10 HTML Tags](https://www.elated.com/first-10-html-tags/)

- [W3Schools - HTML element references](https://www.w3schools.com/tags/ref_byfunc.asp)

#### Forms

- [MDN - HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/Forms)

- [Google Web - Forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms/)

- [W3Schools - Forms](https://www.w3schools.com/html/html_forms.asp)

#### More Advance Topics

##### SVG

- [MDN - Addin Vector Graphics to the Web](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)

- [SVG on the web](https://svgontheweb.com/)

##### SEO

- [web.dev - Discoverable](https://web.dev/discoverable/)

- [Google Web - SEO Basics](https://developers.google.com/search/docs/guides/javascript-seo-basics)

- [web.div - SEO audits](https://developer.chrome.com/docs/lighthouse/seo/)

- [Google Web - Social discovery](https://developers.google.com/web/fundamentals/discovery/social-discovery)

- [Google Web - Search Features](https://developers.google.com/search/docs/guides/search-features)

- [Google Web - Sctructured Data](https://developers.google.com/search/docs/guides/intro-structured-data)

- [web.dev - Easily Discoverable](https://web.dev/discoverable/)

##### Best Practices

- [MDN - HTML guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML)

- [W3Schools - HTML Coding Conventions](https://www.w3schools.com/html/html5_syntax.asp)

> 💁 **Suggestion!**

> 1. Take [w3shools HTML quiz](https://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML)

> 2. Answer [HTML tests](/tests/html/test.md) in this repository

> 3. Try to earn HTML badge on LinkedIn quiz 

---

### CSS

> Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS))

#### Syntax

- [W3Schools - CSS Tutorial](https://www.w3schools.com/css/default.asp)

- [MDN - CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)

- [Supercharged - CSS Selectors](https://www.youtube.com/watch?v=IKho_xDKaLw)

- [MDN - CSS first steps](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)

- [MDN - CSS building blocks](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks)

- [MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)

- [MDN - CSS Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax)

#### Box Model

- [MDN - Introduction to the CSS basic box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)

- [MDN - The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

- [CSS Tricks - Inheriting box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)

##### Margin Collapsing

- [MDN - Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)

- [Margin Collapse in CSS: What, Why, and How](https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0)

- [CSS Tricks - What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)

- [What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/)

- [What's the Deal with Margin Collapse?](https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/)

#### Selectors

- [MDN - CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)

- [MDN - All selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

- [CSS Tricks - Child and Sibling Selectors](https://css-tricks.com/child-and-sibling-selectors/)

- [CSS Tricks - All Selectors](https://css-tricks.com/almanac/selectors/)

- [W3Schools - CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)

##### Specificity

- [MDN - Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

- [MDN - Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)

- [dev.to - CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca)

- [Specificity Calculator](https://specificity.keegan.st/)

- [W3Schools - CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)

##### Pseudo Selectors

- [MDN - Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)

- [CSS Tricks - Meet the Pseudo Class Selectors](https://css-tricks.com/pseudo-class-selectors/)

- [When do the :hover, :focus, and :active pseudo-classes apply?](https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/)

- [W3Schools - CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)

- [W3Schools - CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)

#### Colors

- [MDN - Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)

- [MDN - ](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

- [W3Schools - CSS Colors](https://www.w3schools.com/css/css_colors.asp)

#### Calc

- [MDN - Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)

- [CSS Tricks - A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)

#### Layout

- [Chrome Dev - Basic Layout](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/basic-layout)

- [W3Schools - CSS Website Layout](https://www.w3schools.com/css/css_website_layout.asp)

- [MDN - Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)

- [MDN - CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)

##### Flex

- [MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

- [CSS Tricks - A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

- [MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)

- [Flexbox Froggy](https://flexboxfroggy.com/)

- [Flexbox Defense](http://flexboxdefense.com)

##### Grid

- [MDN - Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)

- [CSS Tricks - A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

- [MDN - CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

- [CSS Grid Garden](https://cssgridgarden.com/)

- [Supercharged - CSS Grids](https://www.youtube.com/watch?v=AqwPrR7hklE)

#### Responsive Design

- [MDN - Responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)

- [Responsive Web Design Fundamentals by Google](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)

- [Google Dev - Responsive Design](https://developers.google.com/web/fundamentals/design-and-ux/responsive)

- [Google Dev - UX Patterns](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns)

- [Google Dev - Responsive Content](https://developers.google.com/web/fundamentals/design-and-ux/responsive/content)

- [Codelabs - Responsive Design](https://codelabs.developers.google.com/codelabs/pwa-responsive-design/index.html?index=..%2F..dev-pwa-training#0)

##### Media Queries

- [CSS Tricks - CSS Media Queries & Using Available Space](https://css-tricks.com/css-media-queries/)

- [MDN - Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

- [MDN - Using Media Queries for Accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)

##### Relative Units

- [MDN - Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)

- [MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)

- [The CSS Workshop - Relative Units](https://thecssworkshop.com/lessons/relative-units)

- [CSS Tricks - Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/)

- [dev.to - 15 CSS Relative units](https://dev.to/bytegasm/15-css-relative-units-how-many-do-you-know-em-rem-ex-cap-ch-ic-6m)

##### Images

- [Google Devs - Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)

- [MDN - Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

- [Virgool - My Article about Images on Web Pages](https://virgool.io/@a.alibakhshi/%D9%86%DA%A9%D8%A7%D8%AA-%D9%85%D9%81%DB%8C%D8%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%B9%DA%A9%D8%B3-%D9%87%D8%A7-%D8%AF%D8%B1-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%88%D8%A8-yhyaswozumhj)

#### More Advance Topics

##### Transforms

- [MDN - transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)

- [CSS Tricks - Transform](https://css-tricks.com/almanac/properties/t/transform/)

- [My Knowledge Sharing with @malikarami - Advanced HTML and CSS](https://github.com/amir78729/automation-knowledge-sharing-1#-transition)

##### Animations

- [MDN - Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

- [CSS Tricks - Animation](https://css-tricks.com/almanac/properties/a/animation/)

- [My Knowledge Sharing with @malikarami - Advanced HTML and CSS](https://github.com/amir78729/automation-knowledge-sharing-1#-animation)

##### CSS Variables

- [MDN - Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

- [Google Devs - CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)

- [dev.to - CSS Quickies: CSS Variables](https://dev.to/lampewebdev/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily-1i0i)

- [CSS Variables explained with 5 examples](https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd)

##### Best Practices

- [MDN - Organizing your CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)

- [MDN - CSS guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS)

- [Speckyboy - Good and bad CSS practices](https://speckyboy.com/good-bad-css-practices/)

#### Reference





  



##### CSS in depth

(File is available [Here](/assets/books/css-in-depth.pdf)!)



---

### JS

> JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript))

#### Syntax

- [MDN - Javascript First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps)

- [MDN - Javascript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

- [MDN - Javascript Building Blocks](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks)

##### Spread

- [MDN - Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

- [Freecodecamp - An introduction to Spread syntax](https://www.freecodecamp.org/news/an-introduction-to-spread-syntax-in-javascript-fba39595922c/)

- [Object rest and spread properties](https://v8.dev/features/object-rest-spread)

##### Destructing

- [MDN - Destructing assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

- [MDN - ES6 in Depth: Destructing](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)

#### DOM

- [MDN - DOM Introduction](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

- [Freecodecamp - What's the DOM](https://www.freecodecamp.org/news/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d/)

- [htmldom.dev](https://htmldom.dev/)

- [MDN - Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

#### Events

- []()

#### Objects

- []()

##### Prototypes

- []()

###### Classes

- []()

#### Regex

- []()

#### Promises

- []()

##### Callbacks

- []()

##### `Async`/`await`

- []()

##### Fetch

- []()

---

## Package Managers

### npm

> npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.

- [...]()

### yarn

> Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager).

- [...]()

---

## Frameworks

### React

> React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

- [...]()

---

## Introduction of Some Cool Packages

| PackageName                                                    | Description                                                                                                         |

|----------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------|

| [`@mui/material`](https://www.npmjs.com/package/@mui/material) | MUI Core contains foundational React UI component libraries for shipping new features faster.                       |

| [`react-query`](https://www.npmjs.com/package/react-query)     | Hooks for fetching, caching and updating asynchronous data in React                                                 |

| [`framer-motion`](https://www.npmjs.com/package/framer-motion) | Motion powers Framer, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed. |

| [`classnames`](https://www.npmjs.com/package/classnames)       | A simple JavaScript utility for conditionally joining classNames together.                                          |

| [`react-lottie`](https://www.npmjs.com/package/react-lottie)   | Lightweight, scalable animations for websites                                                                       |

| ...                                                            | ...                                                                                                                                                    |