Module 1 — Computers, Internet & Developer Setup

Learning Objectives

• Explain core concepts: hardware, software, client, server, HTTP/HTTPS, DNS, and IP addresses.
• Install and configure a developer toolset: VS Code, Live Server, Node.js (optional), and Git.
• Create a clean project structure, run a local site, use DevTools, and perform basic Git version control.
• Understand best practices for file naming, accessibility basics, and foundational workflows.

Key Terms & Definitions (for this module)

Definitions are intentionally short and student-friendly. Read each term, then continue to see how they're used in examples.

Detailed Theory — Full Lesson (from zero)

This section explains concepts slowly and clearly, with examples and analogies. Read each subsection and try the practical steps afterward.

What is a computer? (simple)

Think of a computer as a factory that accepts instructions and materials, performs work, stores results, and produces output. In web development, you mostly interact with two classes of software: the operating system and applications (code editors, browsers).

How the Internet works — simple flow

Imagine the internet like a postal network. When you want a web page, your browser writes a letter (HTTP request) and sends it to a server. The server responds with a package (HTML/CSS/JS files). DNS is like a directory service that translates human-friendly names (example.com) into machine addresses (IP addresses) so the postal system knows where to deliver the letter.

Client vs Server (roles)

The client is your browser on your device. It requests pages and runs JavaScript to make pages interactive. The server is often a powerful machine somewhere else that stores files, performs calculations, or talks to databases. For early learning we build static pages served from simple servers (Live Server, GitHub Pages) and later learn about dynamic servers (Node, PHP, Python).

Protocols: HTTP and HTTPS

HTTP is the ruleset for how the client and server exchange data. HTTPS adds encryption (TLS) which protects data in transit. Always expect production websites to use HTTPS.

Files that make up a website

At the basic level, a website consists of:

• HTML — structure and content.
• CSS — presentation and layout.
• JavaScript — behavior and interactivity.
• Media files — images, fonts, videos.

Why splitting files matters

Keeping structure (HTML), style (CSS) and behavior (JS) separate follows a principle called separation of concerns. It makes code easier to read, maintain and reuse.

Browsers and rendering

When a browser receives HTML it builds a DOM (Document Object Model) — a tree that represents the structure of the page. CSS rules are applied to this DOM and JS can modify it at runtime. Learning to inspect the DOM with DevTools is essential for debugging and understanding pages.

Local development: why use a local server?

Some features (modules, fetch for local files) behave differently when opened directly as a file (file://). A local server simulates a real web environment and provides live reloads, which speeds up development.

Version control basics (Git)

Git helps you track changes and recover previous versions. Basic workflow:

1. Initialize a repo: git init
2. Stage changes: git add .
3. Commit: git commit -m "message"
4. Push to remote (GitHub/GitLab): git push

File naming, organization, and best practices

Use lowercase-file names, avoid spaces, and prefer hyphens. Keep related files together (css, js, images). Comment your code thoughtfully and commit often. Small commits are better than large, mixed commits.

Accessibility basics (important from the start)

Accessibility ensures people with disabilities can use your site. Simple actions: provide alt text for images, use semantic HTML, and ensure sufficient color contrast. These early habits prevent rework later and help SEO.

Practical Activities — Step-by-step hands-on labs

Complete the labs in order. Each step includes exact commands and code snippets. Do them on your machine.

Lab 1 — Create your project and open in Live Server

1. Create a folder aan-module1 and open it in VS Code.
2. Create index.html, css/style.css, and js/app.js.
3. Paste the following into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="css/style.css"/>
  <title>AAN — Module 1</title>
</head>
<body>
  <header><h1>Module 1 — Setup</h1></header>
  <main>
    <p id="status">Status: not started</p>
    <button id="helloBtn">Say Hello</button>
  </main>
  <script src="js/app.js"></script>
</body>
</html>

4. Open index.html, right-click and select Open with Live Server (if extension installed). You should see the page served on http://127.0.0.1:5500 or similar.
5. Add this JavaScript to js/app.js and observe the console:

const btn = document.getElementById('helloBtn');
btn.addEventListener('click', () => {
  console.log('Hello from Module 1');
  document.getElementById('status').innerText = 'Status: running JS';
});

Lab 2 — Basic Styling

1. Edit css/style.css and add simple styles:

body { font-family: system-ui, sans-serif; background:#fafafa; color:#111 }
header{background:#111827;color:#fff;padding:12px;border-radius:8px}
button{padding:8px 12px;border-radius:8px;border:0}

2. Save files and watch Live Server reload the page automatically.

Lab 3 — Git basics

Open the terminal in VS Code and run these commands to begin version control:

git init
git add .
git commit -m "Initial Module 1 project"

Later, create a GitHub repo and push your code so it's backed up remotely.

Lab 4 — Inspecting and debugging

Open DevTools (F12). Use the Elements panel to inspect markup, the Console to view logs, and the Network panel to see resource requests. Experiment: change a CSS property live and observe the page update.

Exercises & Mini Projects (practice toward mastery)

1. Theme switcher: Implement a light/dark theme toggle and save preference to localStorage. Use a class on body to switch themes.
2. Profile card: Build a responsive profile card with an image, name, short bio and contact link. Use semantic HTML and accessible alt text.
3. Project README: Create a README.md describing your project, setup steps and what you learned; commit it to Git.

Assessment Checklist

• Create and run a local site with Live Server.
• Open DevTools and identify at least two elements you can change live.
• Commit code into a Git repository.
• Implement a simple theme switcher and persist the choice across reloads.

Summary & Study Tips

Module 1 sets the foundation. Practice habits: organize projects, commit frequently, and use DevTools. Focus on understanding terms and the workflow more than memorizing commands. Over time the terminal, Git, and editor become second nature.