Giter VIP home page Giter VIP logo

trainee-roadmap's Introduction

Front-End Trainee roadmap

Inspired from

Table of Content

Prerequisites

English

  • Minimal level: B1
  • Comfortable level: B2

How does the browser render a website

https://github.com/vasanthk/how-web-works

https://www.youtube.com/watch?v=hJHvdBlSxug&ab_channel=Academind

https://www.youtube.com/watch?v=SmE4OwHztCc&ab_channel=JSConf


HTTP

https://www.youtube.com/watch?v=iYM2zFP3Zn0&t=442s&ab_channel=TraversyMedia

https://www.youtube.com/watch?v=2JYT5f2isg4&ab_channel=freeCodeCamp.org

https://www.youtube.com/watch?v=ZKEqqIO7n-k&ab_channel=WebDevSimplified

CORS

https://www.youtube.com/watch?v=PNtFSVU-YTI&ab_channel=WebDevSimplified


HTML

https://www.youtube.com/watch?v=DPnqb74Smug&ab_channel=freeCodeCamp.org

https://www.youtube.com/watch?v=N8YMl4Ezp4g&ab_channel=Codevolution

https://www.youtube.com/playlist?list=PL41lfR-6DnOq3BebucTNMSVDojCIiv_en


CSS

https://www.youtube.com/watch?v=0W6qz0-aDaM&list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit&ab_channel=DaveGray

https://www.youtube.com/watch?v=1Rs2ND1ryYc&ab_channel=freeCodeCamp.org

https://www.youtube.com/watch?v=MNPdifWAAa4&ab_channel=DaveGray

https://www.youtube.com/watch?v=YszONjKpgg4&list=PLZlA0Gpn_vH8mpXIUHjWoMAAgoCEinL0R

Responsive Web Design Tutorials

https://www.youtube.com/watch?v=srvUrASNj0s&ab_channel=freeCodeCamp.org

https://www.youtube.com/playlist?list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw

CSS Positioning Tutorials

https://www.youtube.com/playlist?list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh

SCSS

https://www.youtube.com/watch?v=_kqN4hl9bGc&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb&ab_channel=TheNetNinja

flexbox

https://www.youtube.com/watch?v=3YW65K6LcIA&ab_channel=TraversyMedia

grid

https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG

tailwind

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw

https://www.youtube.com/watch?v=lZp4salRFFc&ab_channel=DailyTuition

bulma

https://www.youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a

bootstrap

https://www.youtube.com/playlist?list=PL4cUxeGkcC9joIM91nLzd_qaH_AimmdAR


JavaScript

https://www.youtube.com/watch?v=hdI2bqOjy3c&ab_channel=TraversyMedia

https://www.youtube.com/watch?v=zBPeGR48_vE&list=PLqkLaKB2GJhWXV9rcarwvn06ISlL_9mPQ&ab_channel=CoderLipi

https://www.youtube.com/playlist?list=PLDyQo7g0_nsX8_gZAB8KD1lL4j4halQBJ

Object Oriented JavaScript

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i5yvDkJgt60vNVWffpblB7

Callbacks, Promises, Async Await

https://www.youtube.com/watch?v=PoRJizFvM7s&ab_channel=TraversyMedia

https://www.youtube.com/playlist?list=PL4cUxeGkcC9jx2TTZk3IGWKSbtugYdrlu

Modular Javascript

https://www.youtube.com/playlist?list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f

Event loop

https://towardsdev.com/event-loop-in-javascript-672c07618dc9

https://www.youtube.com/watch?v=8aGhZQkoFbQ&ab_channel=JSConf

JavaScript Best Practices and Coding Conventions

https://www.youtube.com/watch?v=RMN_bkZ1KM0&ab_channel=JavaScriptMastery

https://www.youtube.com/playlist?list=PLY5pAT_51eGyo4ixvdZgzY57N0_R1QMtb

https://www.youtube.com/playlist?list=PLZlA0Gpn_vH_CthENcPCM0Dww6a5XYC7f

https://www.youtube.com/playlist?list=PLFKDYTlP3abzwWleHq1WHcKyi8nCPY74s


TypeScript

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI

https://www.youtube.com/watch?v=d56mG7DezGs&ab_channel=ProgrammingwithMosh

https://www.youtube.com/playlist?list=PLqq-6Pq4lTTanfgsbnFzfWUhhAz3tIezU

https://www.youtube.com/playlist?list=PLYvdvJlnTOjF6aJsWWAt7kZRJvzw-en8B

https://www.youtube.com/watch?v=jBmrduvKl5w&list=PLZlA0Gpn_vH_z2fqIg50_POJrUkJgBu7g

TypeScript Design Patterns

https://www.youtube.com/playlist?list=PLzvRQMJ9HDiSk1pnrKewLklYfCdu9Qjhy


Build Tools

npm

https://www.youtube.com/playlist?list=PLC3y8-rFHvwhgWwm5J3KqzX47n7dwWNrq

yarn

https://www.youtube.com/watch?v=ByRxp9VlzeI&ab_channel=WebStylePress

webpack

https://www.youtube.com/playlist?list=PLB67cosR0_lPUXIK35J8M7EQUbUJQMA0Q


Angular

Big framework better to start learning from official documentation

https://angular.io/

basic

https://www.youtube.com/playlist?list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ

angular material

https://www.youtube.com/playlist?list=PLC3y8-rFHvwilEuCqFGTL5Gt5U6deIrsU

ngrx

https://www.youtube.com/playlist?list=PLW2eQOsUPlWJRfWGOi9gZdc3rE4Fke0Wv

rxjs

https://www.youtube.com/playlist?list=PLX7eV3JL9sfl8lRNZyzAu8YN-uqrgbhij

https://www.youtube.com/playlist?list=PL55RiY5tL51pHpagYcrN9ubNLVXF8rGVi

angular forms

https://www.youtube.com/playlist?list=PLzAGFfNxKFubQOdaJK3evoEKFuD-nAnkL

Component Interaction

https://www.youtube.com/playlist?list=PLC3y8-rFHvwgKhaLU8GTyF-5Bb8qT-wzV

SOLID

https://www.youtube.com/watch?v=Y-MRJ9QYCvI&t=672s&ab_channel=DecodedFrontend


React

Big framework better to start learning from official documentation

https://reactjs.org/docs/getting-started.html

render

https://www.youtube.com/playlist?list=PLC3y8-rFHvwg7czgqpQIBEAHn8D6l530t

React Router v6

https://www.youtube.com/watch?v=Ul3y1LXxzdU&ab_channel=WebDevSimplified

react + typescript

https://www.youtube.com/playlist?list=PLC3y8-rFHvwi1AXijGTKM0BKtHzVC-LSK

How to Style your React App

https://www.youtube.com/watch?v=DXikBH-LCF4&ab_channel=EricMurphy

React Material UI

https://www.youtube.com/playlist?list=PLC3y8-rFHvwh-K9mDlrrcDywl7CeVL2rO

react context & hooks

https://www.youtube.com/playlist?list=PL4cUxeGkcC9hNokByJilPg5g9m2APUePI

https://www.youtube.com/watch?v=cF2lQ_gZeA8&list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A

https://www.youtube.com/watch?v=O6P86uwfdR0&list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h

https://youtu.be/-yIsQPp31L0

react-hook-form

https://www.youtube.com/playlist?list=PL03g4H_exuTppOgtY-45oWvN79rvJIKzf

react query

https://www.youtube.com/playlist?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2

react testing library

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gm4_-5UsNmLqMosM-dzuvQ

React SOLID Principles

https://www.youtube.com/watch?v=MSq_DCRxOxw&ab_channel=CoderOne

React Design Patterns

https://www.youtube.com/playlist?list=PLgeETUaEEds5HE2uGWezJxYeZwpBonHr-

React Storybook Tutorial

https://www.youtube.com/watch?v=BySFuXgG-ow&list=PLC3y8-rFHvwhC-j3x3t9la8-GQJGViDQk

Next.js

https://www.youtube.com/playlist?list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH


Git

https://www.youtube.com/watch?v=USjZcfj8yxE&ab_channel=ColtSteele

https://www.youtube.com/watch?v=8JJ101D3knE&ab_channel=ProgrammingwithMosh

https://www.youtube.com/watch?v=Uszj_k0DGsg&ab_channel=freeCodeCamp.org

https://www.youtube.com/watch?v=wIY824wWpu4&ab_channel=Ihatetomatoes

https://www.youtube.com/watch?v=CRlGDDprdOQ&ab_channel=Academind


Soft skills

https://www.youtube.com/watch?v=ll7JyRxWMQY&ab_channel=KnowledgeHutupGrad

https://www.youtube.com/@skillopedia/featured


Reverse interview

https://github.com/viraptor/reverse-interview


Newsletters

https://bytes.dev/

https://react.libhunt.com/

https://react.statuscode.com/

https://javascriptweekly.com/

https://tailwindweekly.com/

https://medium.com/

Youtube channels to subscribe

https://www.youtube.com/@WebDevSimplified

https://www.youtube.com/@DecodedFrontend

https://www.youtube.com/@CodeShotsWithProfanis

https://www.youtube.com/@joshtriedcoding

https://www.youtube.com/@JoshuaMorony

https://www.youtube.com/@DreyLikyDev

https://www.youtube.com/@Codevolution

https://www.youtube.com/@CoderOne

trainee-roadmap's People

Contributors

lubkokuzenko avatar vovan1112 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.