# Web Development

## Table of Contents <!-- omit in toc -->

- [Topics](#topics)
- [Internet](#internet)
- [Web](#web)
- [Front-End and Back-End](#front-end-and-back-end)
- [HTML](#html)
- [CSS](#css)
- [JS](#js)


## Topics

- Crucial
  - Installing VSCode and Chrome
  - Understanding the roles of HTML, CSS, and JS
- Important
  - How the internet works
  - HTTP Request/Response Cycle
  - Intro to the Web
- Nice To Have
  - VSCode Theme


## Internet

- internet
  - global network of interconnected computers that communicate via TCP/IP
  - network of networks
- [How the Internet Works](https://www.youtube.com/watch?v=qEdv_pem-JM) Youtube link
- Finding the Right Address
  - query is submitted to your ISP
  - from ISP, DNS takes the Domain name and
turns it into an IP address
- Going to that Address
  - request is sent to the desired IP address via HTTP
  - request finds the fastest path possible path to the server with the specified IP
  - requires hopping from server to server
- Server Responds
  - requested server figures out what we're asking for
  - server builds the content, often pulling information from database
  - server responds with HTML, CSS, and JS
- View Page Source
  - we can view the HTML, CSS, and JS on any webpage
  - every browsers have different ways to view page source


## Web

- World Wide Web is an information system where documents and others resources are available over the Internet
- documents are transferred via HTTP
- HTTP Requests
  - **Hyper Text Transfer Protocol**
  - foundation of communication on the World Wide Web
  - request -> I would like this information please
  - response -> Ok, here you go!
- web server
  - a computer that satisfies requests on the Web
  - _server_ is also used to refer to the software running on the computer
- client
  - a computer that accesses a server


## Front-End and Back-End

- Front End is what you see and interact
with
  - HTML, CSS, JS
- Back End is handles the logic of the project, it's what happens behind the scenes
  - Python, Ruby, Java, C, C++, Node.js
- **Restaurant Analogy**: Back-End is everything that happens in the kitchen; Front-End is what is plated and sent to your table


## HTML

- HyperText Markup Language
- defines the structure of a webpage
  - "put an image here"
  - "put a form here"
- "nouns" of a webpage


## CSS

- Cascading Style Sheets
- defines the style of HTML
  - "make all text purple"
  - "give the first image a yellow border"
- "adjectives" of a webpage


## JS

- JavaScript
- adds logic and interactivity to a page
  - "Do some math"
  - "Change color when the user clicks"
  - "Load new data from twitter"
- actions or "verbs" of a webpage
