Class Recording

The Internet

• A giant system of connected computers and networks.
• Links millions of smaller networks (home Wi‑Fi, school LAN, mobile data).
• Uses shared rules (protocols) to send data in small packets from one device to another.

---

Client–Server Architecture

• Client: Device or software that requests data (e.g., your browser or an app).
• Server: Always‑on machine or service that listens for requests and responds with data.
• Flow: Client → Internet delivery system → Server → Internet → Client.

Domain Names and IP

• Domain Name: Human‑friendly address (e.g., myshop.com) that masks numeric IPs.
• IP Address: The actual numeric address of a server (e.g., 172.217.5.110).
• Domains are registered (bought) from a registrar—paid annually—and then map to IPs via DNS.

---

Hosting

• Hosting = the rented server space where your website’s files (HTML, CSS, images) live.
• Like renting a shop in a city: customers (clients) visit that space to see your products (pages).
• Choose a hosting provider, upload your files, and keep them online 24/7.

---

DNS (Domain Name System)

• DNS is the Internet’s phonebook: converts domain names to IP addresses

NOTES

---

Assignment

Objective

Learn how to take a pre‑built HTML/CSS template, make it your own by customizing its content and style, and document exactly what you changed and why.

1. Choose & Download a Template

• Go to html5up.netLinks to an external site. and pick one free template you like.
• Download the ZIP and unzip it. You’ll have a folder containing files like index.html, generic.html, elements.html, an assets/ folder, etc.

2. Set Up Your Project

• Create a new GitHub repo (or a local folder) named html5up‑yourname.
• Copy the entire template folder into it, preserving the structure:

html5up-yourname/
├─ assets/
├─ images/
├─ index.html
├─ generic.html
├─ elements.html
└─ README.txt

3. Customize the Template

Open index.html (and any other pages you choose) and make at least five meaningful changes. Examples:

• Text Content
  • Change headings, paragraphs, dates, button labels.
• Images
  • Replace template images (in images/) with your own photos or illustrations.
• Navigation
  • Add/remove menu items or links.
• Styling
  • Tweak colors in assets/css/main.css (e.g., link color, background).
• Structure
  • Add a new section (e.g., “About Me”) between existing sections.

4. Document Your Changes

Create a Markdown or Word document called customizations.md (or .docx) with two columns:

• For each change, note the file name (and line numbers if possible), what you did, and why you did it.

6. Submit

• Push your code and customizations.md to GitHub.
• Share the GitHub Pages link (or a ZIP file) so I can see your live site.