Useful links to Learn Front-End Web Development For Beginners
Tags: webdev, frontend, tutorial
Published: 2020-09-30 21:57:22

This is a list of useful links / websites to become a **Front-End Web Developer**

I hope you find this useful. Please share it with your friends and family and anyone who can benefit

0. Introduction to Frontend Web Development:
    * Intro to FrontEnd Dev: https://www.youtube.com/watch?v=Xd7huBu39qk
    * Frontend Roadmap: https://roadmap.sh/roadmaps/frontend.png
1. HTML:
    * HTML Crash Course: https://www.youtube.com/watch?v=UB1O30fR-EE
    * HTML Full Course: https://www.youtube.com/watch?v=pQN-pnXPaVg
    * SOLOLEARN HTML: https://www.sololearn.com/play/html
2. CSS:
    * CSS Crash Course: https://www.youtube.com/watch?v=yfoY53QXEnI
    * SOLOLEARN CSS: https://www.sololearn.com/play/css
3. Javascript
    * JS Crash Course: https://www.youtube.com/watch?v=hdI2bqOjy3c
    * JS in 1 Hour: https://www.youtube.com/watch?v=W6NZfCO5SIk
    * SOLOLEARN JS: https://www.sololearn.com/Play/JavaScript
4. Chrome Dev Tools __(!Important)__
    *  https://www.youtube.com/watch?v=x4q86IjJFag
5. Tools / Text Editor
    - VSCODE Download: https://code.visualstudio.com/download
    - VSCODE Tutorial : https://www.youtube.com/watch?v=VqCgcpAypFQ
    - VSCODE Extensions: https://www.youtube.com/watch?v=Nw968TSSTAo
    - VSCODE Tips: https://www.youtube.com/watch?v=u21W_tfPVrY&t=37s
6. Git / GitHub:
    * Git in 100 seconds: https://www.youtube.com/watch?v=hwP7WQkmECE
    * What is Github: https://www.youtube.com/watch?v=w3jLJU7DT5E
    * Git and GitHub: https://www.youtube.com/watch?v=SWYqp7iY_Tc
    * How to use Github: https://www.youtube.com/watch?v=HkdAHXoRtos
    * Playlist: https://www.youtube.com/watch?v=3RjQznt-8kE&list=PL4cUxeGkcC9goXbgTDQ0n_4TBzOO0ocPR
7. Website Examples - Real world examples:
    * https://www.youtube.com/watch?v=jaVNP3nIAv0
    * https://www.youtube.com/watch?v=wlTMtUBxxsM
    * https://www.youtube.com/watch?v=5bMdjkfvONE
8. Bootstrap
    * Crash Course: https://www.youtube.com/watch?v=5GcQtLDGXy8
    * Playlist: https://www.youtube.com/watch?v=5GcQtLDGXy8&list=PLillGF-RfqbZ7b9ytQhLqLvWO2Q_3Ph7S
    * Bootstrap 5: https://www.youtube.com/watch?v=I7CfaDYzTVM
9. __(Must Watch!!!)__ Traversy Media Playlist - HTML/CSS/JS 
    * https://www.youtube.com/watch?v=UB1O30fR-EE&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU
10. Useful websites for HTML/CSS/JS:
    * https://codepen.io/
    * https://www.w3schools.com/
    * https://www.sitepoint.com/
11. Responsive Web Design:
    * https://www.youtube.com/watch?v=3tLb3i7GB38&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw
12. JQuery: 
    * Playlist: https://www.youtube.com/watch?v=jVe1GBCqFIE&list=PL4cUxeGkcC9hNUJ0j6ccnOAcJIPoTRpO4
    * Why you don't need Jquery in 2020: https://www.youtube.com/watch?v=RdRMNT-98Oo
13. HTTP Requests / Restful API / Ajax / Fetch:
    * Ajax: https://www.youtube.com/watch?v=RDo3hBL1rfA
    * Fetch: https://www.youtube.com/watch?v=B2Jt9bNMxyw
    * HTTP Crash Course: https://www.youtube.com/watch?v=iYM2zFP3Zn0
    * What Is A RESTful API: https://www.youtube.com/watch?v=Q-BpqyOT3a8
14. JSON:
    * https://www.youtube.com/watch?v=iiADhChRriM
    * https://www.youtube.com/watch?v=uxf0--uiX0I
15. Javascript ES6:
    * Playlist: https://www.youtube.com/watch?v=0Mp2kwE8xY0&list=PL4cUxeGkcC9gKfw25slm4CUDUcM_sXdml
16. Async Javascript:
    * https://www.youtube.com/watch?v=YxWMxJONp7E&list=PL4cUxeGkcC9jAhrjtZ9U93UMIhnCc44MH
17. SASS:
    * Playlist: https://www.youtube.com/watch?v=St5B7hnMLjg&list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA
18. TypeScript:
    * Intro: https://www.youtube.com/watch?v=BwuLxPH8IDs    
    * Playlist: https://www.youtube.com/watch?v=2pZmKW9-I_k&list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI
19. Single Web apps (intro):
    * Intro: https://www.youtube.com/watch?v=Kg0Q_YaQ3Gk
20. Angular: 
    * Crash Course: https://www.youtube.com/watch?v=Fdf5aTYRW0E
    * Playlist: https://www.youtube.com/watch?v=DwTNR3EBSJQ&list=PL4cUxeGkcC9jqhk5RvBiEwHMKSUXPyng0
    * Crash Course: https://www.youtube.com/watch?v=_TLhUCjY9iA

------------------

#### Useful Youtube Channels
- https://www.youtube.com/user/TechGuyWeb
- https://www.youtube.com/user/shiffman
- https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w
- https://www.youtube.com/c/CodingTech/playlists
- https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw
- https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q
- https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ/playlists
- https://www.youtube.com/c/TheNetNinja/playlists
- https://www.youtube.com/channel/UCvzlnZbePin9kH-1JCKBt8Q
- https://www.youtube.com/c/codedamn/
- https://www.youtube.com/channel/UCLNgu_OupwoeESgtab33CCw
- https://www.youtube.com/channel/UCDCHcqyeQgJ-jVSd6VJkbCw