Web Blueprint Worksheet
Zero-Coding Preview PART 1 // STRUCTURE
Web Blueprint Worksheet
A beginner's guided introduction to how websites are written, styled, and designed.
Name: ___________________________
Date: ___________________________
Reading 1: The Secret Behind Every Webpage
When you open a web browser like Google Chrome, Safari, or Edge and go to a website, the internet does not send you a finished picture or video. Instead, it sends simple, plain text files filled with instructions!
Your browser is actually a high-speed translator. It reads the raw text instructions, figures out what words are headlines, what files are pictures, and where buttons belong, and then draws the webpage live on your screen.
Reading 2: Foundation 1 — HTML (The Skeleton)
HTML stands for HyperText Markup Language. The word "Markup" comes from old printing presses, where editors marked up manuscripts with red pens to tell the printers, "Make this title big" or "Start a new paragraph here." In HTML, we use tags instead of a red pen.
The Tag Sandwich 🥪
An HTML element is structured like a sandwich:
- Top Bun (Opening Tag):
<p> tells the browser a paragraph is starting.
- The Filling (Content): The actual text or words users see on the screen.
- Bottom Bun (Closing Tag):
</p> has a forward slash telling the browser to stop.
Essential HTML Tags You Must Know
<h1> to <h6>
Headings. <h1> is the largest title; <h6> is tiny subtext.
<p> ... </p>
Paragraph. Used for standard body text, articles, and descriptions.
<a href="...">
Anchor (link). Connects users to other websites when clicked.
<img src="...">
Image. Tells the browser which graphic or photo file to display.
<ul> & <li>
Lists. <ul> makes a bullet list; each <li> is one item.
<button>
Clickable button for forms, submits, purchases, or actions.
Practice & Check for Understanding
1. In your own words, what is the job of a web browser when you visit a webpage?
2. Examine this code: <h1>Welcome to Science Club</h1>
Opening Tag:
Content (visible words):
Closing Tag:
3. Spot the Syntax Error
Jordan wrote: <p>Donuts are delicious<p>
What is missing in Jordan's closing tag?
4. Predict the Output
If HTML has <h1>Dogs</h1> and <h6>Puppies</h6>:
Which word renders larger on screen?
Web Foundations Packet // Student Preview Page 1 of 3
Styling The Web PART 2 // PRESENTATION
Foundation 2: CSS
How Cascading Style Sheets transform plain documents into colorful, polished experiences.
Language: CSS
Reading 3: Why Do We Need CSS?
In the early 1990s, CSS did not exist. Every webpage on Earth looked nearly identical: black Times New Roman text on a boring gray background with bright blue underlined links. It looked like an old tax form!
CSS invented a revolutionary idea: Separation of Concerns. HTML is strictly for content (what the words say). CSS is strictly for presentation (what the words look like). By changing just one CSS file, you can restyle 1,000 pages of a website in half a second!
Reading 4: How a CSS Rule Works (The "Who, What, How" Formula)
CSS does not use tags. Instead, it uses rulesets. Every CSS rule answers three simple questions:
h1 {
color: navy;
font-size: 28px;
text-align: center;
}
1. Selector (Who?):
h1 points to the HTML element you want to style.
2. Property (What?):
color or font-size is the feature you are altering.
3. Value (How?):
navy or 28px is the exact setting applied.
Syntax Alert: Notice the punctuation! Properties and values are separated by a colon : and every rule line must end with a semicolon ; just like a period ends a sentence.
Reading 5: The "Box Model" — How CSS Sees Everything
In CSS, every paragraph, heading, and image is secretly treated as an invisible rectangular box. You control that box using three spatial layers:
Padding
The inner cushion between the words and the edge of the card.
Border
The visible outline or picture frame around the element.
Margin
The outer spacing pushing other elements away.
CSS Practice & Translation
A. Match the plain English desire to its CSS property:
"Change text to dark red" [ ___ ] color
"Make the letters giant" [ ___ ] font-size
"Paint the button background" [ ___ ] background-color
B. Complete the CSS Rule:
Make all paragraphs (<p>) have green text and 16px size:
p {
color: _________________ ;
font-size: _____________ ;
}
Web Foundations Packet // Student Preview Page 2 of 3
User Experience PART 3 // DESIGN THINKING
Foundation 3: Design Thinking
Why the greatest code in the world fails if humans cannot comfortably use it.
UI / UX
Reading 6: What Are UI and UX?
Writing clean code is only half the battle. Professional web creators spend most of their time thinking about psychology and human behavior:
UI (User Interface)
The visual look of the website: colors, shapes, font choices, icons, and button styling.
UX (User Experience)
How the website feels to use: Is it confusing? Can a user quickly find the information they need?
Reading 7: The 3 Golden Rules of Human-Friendly Layout
1. Visual Hierarchy
Human eyes scan in an "F" pattern from top to bottom. The most critical items (headline, logo) must be biggest and placed first to guide the user's focus.
2. High Contrast
Text must clearly contrast with its background. Dark navy text on light gray is great; light yellow text on white causes eye strain and fails accessibility laws!
3. Whitespace
Blank space is not wasted space! Generous margins and padding around buttons and cards prevent visual clutter and make content feel relaxed and readable.
Design Detective: Critique the Webpage
Scenario: Morgan made a gaming website. The page has neon green text on a bright yellow background, all words are typed in the exact same tiny font size, and 20 pictures are crammed touching each other with zero margins.
Problem 1 (Contrast Issue):
Problem 2 (Hierarchy Issue):
Capstone Challenge: Wireframe & Plan a "Club Card"
HTML + CSS + UX
A wireframe is an architect's quick sketch before writing any code. Plan a card for a school club:
A. Wireframe Sketch
Sketch your layout here (Club Title, Logo Box, 2-line Description & "Join" Button):
B. HTML Structure Plan
Write the HTML tag you will wrap around each item:
Club Headline:
< ______ > Anime Club < / ______ >
Logo Image:
< ______ src="logo.png" >
Club Bio / Description:
< ______ > We meet Fridays < / ______ >
C. CSS Color & Contrast Plan
Card Background Color:
Text Color (Must contrast!):
Final Takeaway: How do HTML, CSS, and Design Thinking work as a team?
Web Foundations Packet // Student Preview Page 3 of 3
