Week 1 — Website Anatomy: How Websites Are Organized

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

Sublime Text setup, folders, filenames, HTML document skeleton

Project files and folder structure

Create `web-design-course/week-01/index.html`.

Syntax to practice

`<!doctype html>`, `<html lang=”en”>`, `<head>`, `<meta charset=”UTF-8″>`, viewport meta, `<title>`, and `<body>`.

Build it

Create a valid page for a fictional creative studio. Include a title, one main heading, one descriptive paragraph, and a footer. Save in Sublime Text, open in a browser, change the heading, save, and refresh.

Code along: Start with a valid HTML document.

Open in Sublime Text: week-01/index.html

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <header><h1>My First Website</h1></header>
  <main><p>This page was written in Sublime Text.</p></main>
  <footer><p>Created by Your Name</p></footer>
</body>
</html>

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: week-01/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Web Page</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header class="site-header"><h1>My First Website</h1></header>
  <main class="content">
    <p>This page was created in Sublime Text.</p>
  </main>
  <footer class="site-footer"><p>Created by Your Name</p></footer>
</body>
</html>

CSS file: week-01/css/styles.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #222;
}
.site-header, .site-footer {
  padding: 20px;
  background: #e8eef7;
}
.content { padding: 20px; }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Change the title, heading, paragraph, and footer. Save and refresh the browser.

Save and test

1. Save the file in the exact folder shown above.
2. Open the HTML file in a browser, or refresh it after saving if it is already open.
3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

• `week-01/index.html` — valid HTML with title, one `<h1>`, one paragraph, and footer.
• `week-01/website-anatomy.png` or `.pdf` — labeled sketch showing header, hero, main content, and footer.
• `week-01/README.txt` — 3–5 sentences identifying the analyzed website and purpose of each region.

Submission checklist

• HTML opens in a browser; one clear `<h1>`; sketch labels all four regions; README included.
• Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
• Open the HTML file in a browser before submitting and confirm linked CSS and images load.