Useful links to Learn Front-End Web Development For Beginners

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

1. Introduction to Frontend Web Development:
   • Intro to FrontEnd Dev: https://www.youtube.com/watch?v=Xd7huBu39qk
   • Frontend Roadmap: https://roadmap.sh/roadmaps/frontend.png
2. 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
3. CSS:
   • CSS Crash Course: https://www.youtube.com/watch?v=yfoY53QXEnI
   • SOLOLEARN CSS: https://www.sololearn.com/play/css
4. 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
5. Chrome Dev Tools (!Important)
   • https://www.youtube.com/watch?v=x4q86IjJFag
6. 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
7. 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
8. 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
9. 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
10. (Must Watch!!!) Traversy Media Playlist - HTML/CSS/JS
    • https://www.youtube.com/watch?v=UB1O30fR-EE&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU
11. Useful websites for HTML/CSS/JS:
    • https://codepen.io/
    • https://www.w3schools.com/
    • https://www.sitepoint.com/
12. Responsive Web Design:
    • https://www.youtube.com/watch?v=3tLb3i7GB38&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw
13. 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
14. 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
15. JSON:
    • https://www.youtube.com/watch?v=iiADhChRriM
    • https://www.youtube.com/watch?v=uxf0--uiX0I
16. Javascript ES6:
    • Playlist: https://www.youtube.com/watch?v=0Mp2kwE8xY0&list=PL4cUxeGkcC9gKfw25slm4CUDUcM_sXdml
17. Async Javascript:
    • https://www.youtube.com/watch?v=YxWMxJONp7E&list=PL4cUxeGkcC9jAhrjtZ9U93UMIhnCc44MH
18. SASS:
    • Playlist: https://www.youtube.com/watch?v=St5B7hnMLjg&list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA
19. TypeScript:
    • Intro: https://www.youtube.com/watch?v=BwuLxPH8IDs
    • Playlist: https://www.youtube.com/watch?v=2pZmKW9-I_k&list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI
20. Single Web apps (intro):
    • Intro: https://www.youtube.com/watch?v=Kg0Q_YaQ3Gk
21. 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