I wanted to officially learn HTML, CSS and JavaScript programming languages, but I quickly found myself feeling like I am missing some prerequisite knowledge as I tried to develop more complex front-end and back-end web applications with them.
Turns out what I was missing was about the general understanding about Networks. Since HTML, CSS and JavaScript are programming languages for the World Wide Web, and the World Wide Web is an application on top of the Internet, which is made up of Networks, I found it helpful to get some general understanding about Networks, the Internet and the World Wide Web, before diving into learning HTML, CSS and JavaScript programming languages.
IDE used: VSCode
Here is a directory to the explanations of what each folder contains in this Networks, the Internet, the World Wide Web, HTML, CSS and JavaScript learning journey repository:
- Networks (Prerequisite)
- HTML learn
- CSS learn
- JavaScript learn
- 'Setting_up_HTML_CSS_JavaScript_in_VScode_and_running_HTML_CSS_JavaScript_code_in_VScode.txt' text file
This folder contains all the files that goes through some foundational theory on Networks, the Internet and the World Wide Web including:
-
Open Systems Interconnection (OSI) 7 layer model
- Application Layer
- Presentation Layer
- Session Layer
- Transport Layer
- Network Layer
- Data Link Layer
- Physical Layer
-
Some of the most common Network Protocols
- TCP, UDP, IP
- DNS
- HTTP, HTTPS
- HTTP Request methods ('GET', 'POST', 'PUT', 'DELETE' HTTP Request methods)
- Status Codes
Source(s):
- https://www.youtube.com/watch?v=2VauFS071pg (CS50) (YouTube video by CS50 titled, 'CS50 2021 in HDR - Lecture 8 - HTML, CSS, JavaScript')
- https://www.youtube.com/watch?v=vv4y_uOneC0&t=2s (TechTerms) (YouTube video by TechTerms titiled, 'OSI Model Explained | OSI Animation | Open System Interconnection Model | OSI 7 layers | TechTerms')
- https://www.youtube.com/watch?v=uwoD5YsGACg&t=218s (PowerCert Animated Videos) (YouTube video by PowerCert Animated Videos titled, 'TCP vs UDP Comparison')
- https://www.youtube.com/watch?v=tkfVQK6UxDI&t=173s (Curious Code) (YouTube video by Curious Code titled, 'HTTP Request Methods | GET, POST, PUT, DELETE')
- etc. (see inside the files for the respective sources for each information)
This folder shows my learning journey of the HTML programming language.
Source(s):
- https://chat.openai.com/ (ChatGPT)
This folder shows my learning journey of the CSS programming language.
Source(s):
- https://chat.openai.com/ (ChatGPT)
This folder shows my learning journey of the JavaScript programming language.
1. JavaScript basics
This folder contains all the JavaScript files that deals with the basic syntax and structure in the JavaScript programming language.
2. JavaScript OOP
This folder contains all the JavaScript files that deals with Object-Oriented Programming (OOP) concept in the JavaScript programming language.
'What_is_Nodejs.txt' text file
This file contains information about the common confusion about what exactly is Node.js.
Source(s):
- https://www.youtube.com/watch?v=PkZNo7MFNFg (freeCodeCamp.org) (YouTube video by freeCodeCamp.org titled, 'Learn JavaScript - Full Course for Beginners')
- https://www.youtube.com/watch?v=q-xS25lsN3I&t=121s (Code ON 코드온) (YouTube video by Code ON 코드온 titled, 'What is Node.js and how it works (explained in 2 minutes)')
5. 'Setting_up_HTML_CSS_JavaScript_in_VScode_and_running_HTML_CSS_JavaScript_code_in_VScode.txt' text file
This file contains instructions on how to set up and run HTML, CSS and JavaScript in VS code.
Source(s):
- https://www.youtube.com/watch?v=bEIkw5dG-E4&t=270s (HMA WebDesign) (YouTube video by HMA WebDesign titled, 'How To Run JavaScript Program in Visual Studio Code | VSCode Terminal Not Working')
- https://datatas.com/how-to-run-html-css-and-javascript-in-visual-studio-code/ (DATATAS)