FRONTEND DEVELOPMENT ROADMAP

INTERNET AND HOW IT WORKS

HOW DOES THE INTERNET WORK?

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work

https://computer.howstuffworks.com/internet/basics/internet.htm

https://www.explainthatstuff.com/internet.html

HTTP

https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

https://whatis.techtarget.com/definition/HTTP-Hypertext-Transfer-Protocol

HOW DO BROWSERS WORK

https://www.freecodecamp.org/news/web-application-security-understanding-the-browser-5305ed2f1dac/

https://www.mozilla.org/en-US/firefox/browsers/what-is-a-browser/#:~:text=A%20web%20browser%20takes%20you%20anywhere%20on%20the%20internet.,your%20desktop%20or%20mobile%20device.&text=When%20the%20web%20browser%20fetches,data%20into%20text%20and%20images.

DNS

https://www.cloudflare.com/learning/dns/what-is-dns/

https://www.wpbeginner.com/glossary/dns/

HOSTING

https://www.namecheap.com/hosting/what-is-web-hosting-definition/

DOMAIN NAME

https://www.wpbeginner.com/beginners-guide/beginners-guide-what-is-a-domain-name-and-how-do-domains-work/

HTML

https://flaviocopes.com/page/html-handbook/ (Overview)

https://www.freecodecamp.org/news/html-basics-for-beginners/ (HTML Basics)

https://html.com/semantic-markup/ (Semantic Markup)

https://marksheet.io/html-semantics.html (Semantic Markup)

https://www.freecodecamp.org/news/semantic-html5-elements/ (Semantic Markup)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form (HTML Form)

https://html.com/forms/ (HTML Form)

https://marksheet.io/html-forms.html (HTML Form)

https://www.webfx.com/blog/web-design/20-html-best-practices-you-should-follow/ (Best Practices)

https://www.w3schools.com/html/html5_syntax.asp (Best Practices)

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML (Accessibility)

http://web-accessibility.carnegiemuseums.org/foundations/semantic/ (Accessibility)

https://www.wordstream.com/blog/ws/2015/04/30/seo-basics (SEO Basics)

CSS

https://flaviocopes.com/page/css-handbook/ (Overview)

https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-e0804813fc3e/ (Getting Started)

https://www.emailonacid.com/blog/article/tutorial-getting-started/css-basics/ (Getting Started)

https://scrimba.com/learn/cssgrid (CSS Grid)

https://www.youtube.com/watch?v=gXkqy0b4M5g (Responsive Design)

https://mastery.games/flexboxzombies/ (Flexbox)

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout (CSS Layout)

https://learnlayout.com/ (CSS Layout)

https://www.youtube.com/watch?v=ZYV6dYtz4HA (responsiveness)

VERSION CONTROL SYSTEM AND GIT

https://www.freecodecamp.org/news/the-beginners-guide-to-git-github/#:~:text=Git%20makes%20it%20easy%20to,get%20feedback%20about%20your%20project.

https://www.atlassian.com/git/tutorials/atlassian-git-cheatsheet

HOSTING YOUR REPOSITORY

https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site

PRACTICE EXERCISES !!!

https://devchallenges.io/paths/responsive-web-developer

create an account and login to be able to access the Figma design

complete all 6 challenges tagged with beginner and submit your repository link (github repo link) and the live project link (hosted link)

JAVASCRIPT

https://www.easeout.co/blog/2020-10-19-javascript-syntax-structure/ (structure and syntax)

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics (basics)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators (Operators and Expressions)

https://javascript.info/operators (Javascript Operators)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling (Control Flow)

https://javascript.plainenglish.io/introduction-to-javascript-control-flow-6272f92b75fa (Control Flow)

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents (DOM Manipulation)

https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/dom-manipulation (DOM Manipulation)

https://www.freecodecamp.org/news/how-to-manipulate-the-dom-beginners-guide/ (DOM Manipulation)

https://dev.to/arikaturika/javascript-local-storage-beginner-s-guide-1gk1 (Local Storage)

https://www.javascripttutorial.net/javascript-fetch-api/#:~:text=The%20Fetch%20API%20allows%20you,resolve%20into%20the%20actual%20data. (Fetch API)

https://drive.google.com/file/d/1VzyvHxpBfINaI0dZhISUHRZ_CfsU1Jqt/view?usp=drivesdk (Fetch API)

https://www.freecodecamp.org/news/write-less-do-more-with-javascript-es6-5fd4a8e50ee2/ (ES6)

https://www.javascripttutorial.net/es6/ (ES6)

https://javascript.info/ (Overview)

PRACTICE EXERCISES !!!

https://devchallenges.io/paths/responsive-web-developer

complete the last 2 challenges and submit your repository link (github repo link) and the live project link (hosted link)

https://www.frontendmentor.io/challenges

visit the web address above and sign up the pick 3 challenges tagged with JUNIOR(2) and complete them then submit your repository link (github repo link) and the live project link (hosted link)

WEB SECURITY

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS (CORS)

https://www.synopsys.com/glossary/what-is-owasp-top-10.html (OWASP)

https://www.cloudflare.com/learning/security/threats/owasp-top-10/ (OWASP)

https://www.freecodecamp.org/news/web-security-an-introduction-to-http-5fa07140f9b3/ (HTTP)

https://developer.mozilla.org/en-US/docs/Web/Security (Web Security)

https://blog.sqreen.com/what-is-a-csp/ (Content Security Policy)

PACKAGE MANAGERS

https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/ (NPM)

https://classic.yarnpkg.com/en/docs/getting-started/ (YARN)

CSS PREPROCESSORS

https://www.youtube.com/watch?v=nu5mdN2JIwM (SASS)

https://lesscss.org/ (LESS)

PRACTICE EXERCISES !!!

Pick from any of your previous projects and use any of the css preprocessors you've learnt above on the project

BUILD TOOLS

https://eslint.org/docs/user-guide/getting-started (ESLINT)

https://webpack.js.org/guides/getting-started/ (WEBPACK)

CSS FRAMEWORKS

https://getbootstrap.com/docs/5.0/getting-started/introduction/ (Bootstrap)

https://www.youtube.com/watch?v=c9B4TPnak1A (Bootstrap)

https://tailwindcss.com/docs (Tailwind)

https://www.youtube.com/watch?v=j_5-LISy9Qg (Tailwind)

PRACTICE EXERCISES !!!

Pick from any of your previous projects and use any of the css frameworks you've learnt above on the project