Asset Architecture Slides Asset Architecture
Building a Bulletproof File System
PORTFOLIO_LAUNCHPAD // UNIT_01
The "Broken Server" Disaster
CRITICAL ERROR
404: Not Found
src="My Cool Dog.JPG"
Why did it fail?
Spaces: Web servers hate spaces in file names.
Case Sensitivity: "Dog.jpg" is NOT "dog.jpg".
Bad Paths: The computer can't find the folder.
The Golden Rules of Naming
Keep it Low
Always use lowercase letters. No exceptions. It prevents accidental linking errors between different server types.
No Spaces
Use hyphens (kebab-case) or underscores. Computers read spaces as "%20", which breaks links.
Be Descriptive
Instead of "IMG_832.jpg", use "me-at-beach.jpg". It helps you stay organized and helps SEO!
The "Root" Anatomy
portfolio-2026/
css/
img/
js/
index.html
about.html
The index.html Rule
The home page MUST be named index.html . This is what servers look for first.
Folder Separation
Keep styles (CSS) and images (IMG) in their own buckets. Don't let files float around the root.
Speed Matters: Image Optimization
Raw Camera Image
12.5 MB
Large file = Slow loading.
Web-Optimized
180 KB
Compressed & Resized.
Tools: TinyPNG / Photoshop Export / Squoosh.app
File System Blueprint Worksheet File System Blueprint
Lesson 1: Asset Architecture // Project Phase: Planning
Name: __________________________
Date: __________________________
Part 1: The Naming Audit
Review the following file names. If the name is Web Safe , put a checkmark. If it is Risky , write the corrected version using the Golden Rules (lowercase, no spaces, hyphens/underscores).
Original File Name Corrected (Web Safe) Version Profile Picture New.JPG __________________________________________ about_me_page.html __________________________________________ Banner-Image-Final(2).png __________________________________________ my Portfolio Home.HTML __________________________________________
Part 2: Root Directory Map
Draw a diagram of your portfolio's file structure. Include your Root Folder , at least 3 sub-folders , and where your index.html file belongs.
Sketch Area
Part 3: Image Asset Prep
Identify three key images you plan to use and describe how you will optimize them.
Asset Description
Target File Size (KB)
Asset Description
Target File Size (KB)
Broken Server Setup Guide Broken Server Hook Guide
Teacher Facilitation Resource // Lesson 1: Asset Architecture
Activity Overview
The "Broken Server" challenge is a low-stakes, high-impact demonstration of why file naming conventions matter. Students will interact with a local webpage that appears "broken" and must diagnose the naming errors to fix it.
Preparation Steps
1
Create a "Broken" Folder
Create a folder named demo-site on your local machine or shared drive.
2
Add "Risky" Assets
Add 3-4 images to a subfolder, but name them poorly. Examples: Hero Image.jpg (space), Profile_Pic_FINAL.png (caps), logo(1).svg (symbols).
3
The HTML Sabotage
In your index.html, code the image tags using "Clean" names (e.g., <img src="img/hero-image.jpg">). Because the actual file has spaces/caps, the browser will fail to find it.
Facilitation Prompt
"Class, I spent all night building our unit landing page, but when I opened it today, everything is gone. The code is there, the files are in the folder, but the server is acting like they don't exist. Look at the folder and the code—can you find the hidden 'saboteurs' that are breaking my site?"
Critical Discussion Points
Server Behavior: Explain that while Windows/Mac might "guess" what a file is, web servers are literal. If a character doesn't match exactly, it's a 404.Special Characters: Spaces are converted to %20 in URLs. Many servers stop reading at the first space.The "Root" Concept: Emphasize that the folder structure on your computer must perfectly mirror the structure on the server. Digital Integrity Slides Digital Integrity
Ethics, Attribution, and the Global Web
PORTFOLIO_LAUNCHPAD // UNIT_02
Copyright Court
CASE STUDY
The Scenario:
An 8th grader creates a stunning photography portfolio. To make it "pop," they use a viral hit song as background music. They don't sell anything. They just want it to look cool.
Is this fair use?
YES NO
Who owns the rights?
Think: Does "Not Making Money" protect you?
Content Ownership Pillars
Copyright
"All Rights Reserved"
Default protection the moment something is created. You cannot use it without explicit permission.
Creative Commons
"Some Rights Reserved"
A flexible license that allows sharing with specific rules (like giving credit or not selling).
Public Domain
"No Rights Reserved"
Expired copyright or works gifted to the public. Free for anyone to use for anything!
The CC Language
BY (Attribution)
You must give the creator credit.
NC (Non-Commercial)
You can't make money from it.
SA (Share Alike)
Your project must use the same license.
ND (No Derivatives)
You can't change or edit the work.
How to Attribute Properly
TASL: The Secret Formula
T
Title
"Sunset over Bay"
A
Author
by Jane Doe
S
Source
via Flickr
L
License
CC BY-NC 2.0
"Sunset over Bay" by Jane Doe via Flickr is licensed under CC BY-NC 2.0
License Lab Worksheet License Lab
Lesson 2: Digital Integrity // Project Phase: Content Audit
Name: __________________________
Date: __________________________
Part 1: The Icon Decoder
Identify the meaning of each Creative Commons license component and its symbol.
BY:
NC:
SA:
ND:
Part 2: The TASL Formula
Practice writing a full attribution for the following asset found online.
Image Preview
Information Found:
Title: Blue Mountain PeakCreator: Alex RiveraSite: Pexels.comLicense: CC BY 4.0
Your Written Attribution:
Part 3: Content Audit
List 3 external assets (images, fonts, or code) you plan to use and their license type.
Asset Name License (Copyright / CC / PD) Attribution Required? ________________________ ________________________ ________________________ ________________________ ________________________ ________________________ ________________________ ________________________ ________________________
Copyright Court Scenarios Guide Copyright Court Scenarios
Teacher Discussion Guide // Lesson 2: Digital Integrity
The Goal
Use these scenarios to spark debate. Students should act as "Copyright Judges," citing rules from the lecture to justify their verdicts.
Scenario 1: The Background Beat
A student finds a 15-second loop of a popular song on a "Free Beats" website. They use it as a background track for their portfolio intro video. Three months later, the video is flagged and removed from the hosting platform.
The Trap:
"Free" doesn't mean "Copyright Free." Many sites offer free listening but require a license for publishing.
The Fix:
Search specifically for "CC0" or "Public Domain" audio on sites like FreePD.com or the YouTube Audio Library.
Scenario 2: The Fan Art Gallery
A student is a talented artist and includes a page of "Fan Art" of Disney characters on their site. They aren't selling the art; they are just showing their skills.
The Trap:
Characters are protected by trademark and copyright. Even if not sold, a company can demand removal to protect their brand.
The Fix:
Include a clear "Disclaimer" stating characters belong to the original owner, OR better yet, showcase original character designs.
Scenario 3: The Code Copy
A student finds a cool "Navigation Bar" on a tutorial site. They copy the CSS exactly but change the colors. They don't mention the tutorial site anywhere.
The Trap:
Plagiarism isn't just for essays! Code is also intellectual property. Many tutorials allow use but appreciate or require a link back.
The Fix:
Add a comment in the CSS: /* Based on tutorial by [Site Name] */. This shows professional integrity.
Discussion Power-Ups
"Does the 'Fair Use' rule for education apply if the portfolio is published publicly for the world to see?" (Answer: Generally no, once it's public, it's out of the classroom.)
"How would you feel if someone took your portfolio design and used it for their own project without asking?"
Server Secrets Slides Server Secrets
Where does your website actually live?
PORTFOLIO_LAUNCHPAD // UNIT_03
The Digital Conversation
The Client
Your Browser (Chrome, Safari, phone)
Request
Response
The Server
A powerful computer that "serves" files
DNS: The Web's Contacts List
IP Address
142.250.190.46
The physical address of the computer. Great for machines, impossible for humans to remember.
Domain Name (DNS)
google.com
The human-friendly nickname. The Domain Name System translates the name back into the IP.
The Internet is Physical
Your data doesn't just float in the "cloud." It travels through thousands of miles of fiber-optic cables under the ocean floor at the speed of light.
Traceroute Challenge
We're going to trace the path to a server in another country right now.
Getting "Live"
Step 1: Choose a Host
Companies like GitHub Pages, Netlify, or Vercel provide a "home" for your files.
Step 2: Upload Files
Move your Local files (on your computer) to the Remote server.
The Launch
Once uploaded, anyone in the world with your URL can "request" your site from the host server.
Packet Path Scavenger Hunt Packet Path Scavenger Hunt
UNIT_03 // ACTIVITY: PHYSICAL_INFRASTRUCTURE
NAME: ____________________
IP_ADDRESS: 127.0.0.1 (LOCAL)
Mission Briefing
Data doesn't teleport. It travels in little "packets" through physical wires. Today, you will use a traceroute tool (like monitis.com/traceroute or your computer's terminal) to see exactly how many "hops" it takes for your data to reach a server on the other side of the planet.
01 Target: A Local Server (Your School or a local business)
URL / Domain Name
Number of "Hops" (Steps)
02 Target: A Global Giant (Google.com or Amazon.com)
Target IP Address
Final Destination Location (City/Country)
03 Target: International (e.g., .jp, .uk, or .au domain)
The Longest Hop (Time in ms)
Probable Ocean Crossed
Hint: Look for jumps in "latency" (ms) that take over 100ms. That's usually an underwater cable jump!
The Big Picture
If a shark bites an underwater cable (which happens!), how would that affect your ability to view your portfolio if it's hosted in another country?
Snippet Masters Slides < / >
Snippet Masters
Controlling the "Hidden" Web
PORTFOLIO_LAUNCHPAD // UNIT_04
What is Metadata?
INVISIBLE DATA
Metadata is data about data . In web design, it's the code that tells search engines and social media apps what your site is about.
"I'm not on the page, but I'm in the code."
<head>
<title>My Portfolio</title>
<meta name="description" content="...">
<meta name="keywords" content="...">
</head>
The Google Snippet
Portfolio | Alex Rivera - Digital Artist
https://arivera.github.io/portfolio
Welcome to my 2026 creative portfolio. I specialize in 3D modeling and web architecture for sustainable tech...
Comes From:
<title>
The blue clickable link.
Comes From:
<meta name="description">
The descriptive text (Snippet).
Social Proof: Open Graph
ARIVERA.GITHUB.IO
Check out my new portfolio!
See my latest 3D models and web projects...
OG: Tags
These tags (Original Graph) control how your link looks when shared on Discord, Instagram, or Text.
og:title
og:image
og:description
SEO Masterclass
Keywords
Don't overstuff! Choose 5-10 specific words people would use to find you.
H1 & H2 Tags
Google looks at your headers to see what is important. Use clear titles on every page.
Alt Text
Always describe your images for screen readers. Google loves accessible sites!
Meta Tag Mission Worksheet Meta Tag Mission
Lesson 4: Snippet Masters // Project Phase: SEO & Metadata
NAME: ____________________
STATUS: DRAFTING_METADATA
01. Search Engine Snippet
Draft the text that will appear in search results. Remember: Titles should be under 60 characters, and descriptions under 160 characters.
<title> (Max 60 chars)
____________________________________________________________
<meta name="description"> (Max 160 chars)
________________________________________________________________________________________________________________________________________________________________
02. Keyword Strategy
List 5 specific keywords that someone would type into Google to find your specific portfolio.
1. ________
2. ________
3. ________
4. ________
5. ________
03. Social Preview (OG Tags)
YOURSITE.HTML
Sketch or describe the image you will use for your og:image tag. This is what people see when you text them the link.
Global Gallery Slides Global Gallery
Launch Day & The Digital Legacy
PORTFOLIO_LAUNCHPAD // UNIT_05
The "Time Capsule" Challenge
EVOLUTION
Google (1998)
Placeholder: Imagine a very basic, text-heavy site with blue links.
Pure function. No CSS. Just links and a search bar.
Your Portfolio (Today)
Responsive design. Optimized assets. Metadata ready.
"Websites are never finished. They are only launched."
The Gallery Walk
Observe
Test every link. Look at the images. Resize the window to see if it's responsive.
Critique
Use the "I Like, I Wish, I Wonder" framework. Be specific and kind.
Inspect
View the page source. Did they use meta tags? Are their file names clean?
The Permanence of "Public"
Once your site is on a live URL, it can be archived (Wayback Machine), indexed, and shared beyond your control.
Privacy Check
Did you accidentally include your home address or phone number?
Future Self
Will you be proud of this site in 4 years? 10 years?
Site Maintenance 101
Link Rot
External sites change. Check your links every few months to ensure they still work.
Content Refresh
As you learn new skills, update your portfolio! It's a living document of your growth.
Local Backups
Always keep a copy of your files on your own computer. Servers can disappear!
Final Thought
You are now a Publisher . Use your platform to build the web you want to see.
Critique Compass Handout Critique Compass
Lesson 5: Global Gallery // Activity: Peer Review
Reviewer: ________________
Project URL: ________________
"Critique is not about finding what is 'wrong.' It is about providing a fresh set of eyes to help the designer improve their work."
01. Technical Integrity
Assets & Links
All images load (No 404s)
All links point to the right place
Site works on mobile/smaller windows
The "Hidden" Code
Title tag describes the page clearly
Meta description is present
External assets are attributed (TASL)
02. The "I Like, I Wish, I Wonder" Framework
I Like... (Strengths)
What stands out? Great color choice? Clever navigation? Crisp images?
I Wish... (Suggestions)
What would make this even better? More contrast? A shorter description?
I Wonder... (Questions)
What technical choice did the designer make? "I wonder how you made that scroll effect?"
Final Launch Rating
1
2
3
4
5
Maintenance Roadmap Guide Maintenance Roadmap
Teacher Facilitation Resource // Lesson 5: Global Gallery
Post-Launch Discussion Prompts
On Digital Permanence:
"If you want to take this site down in two years, how hard do you think that will be? What parts of the site might still exist even if you delete the main files?"
On Professional Evolution:
"Look at your 'About Me' page. When will this information become outdated? How often should a professional update their portfolio?"
On Global Access:
"We saw how data travels through underwater cables. How does the speed of your site affect someone visiting from a country with slower internet infrastructure?"
Site Maintenance Checklist
Provide these tips to students as they finalize their projects to ensure long-term site health.
Quarterly (Every 3 Months)
Check for "Link Rot" (broken external links).
Test site on latest browser updates.
Backup all local files to a secondary drive/cloud.
Annually (Once a Year)
Update "Contact" and "About" info.
Review image optimization (new compression tools!).
Review SEO keywords for current trends.
The "Publisher" Mindset
Remind students that by publishing a portfolio, they have moved from being consumers of the web to architects of it. Their technical skills are now paired with ethical responsibilities.
Project Complete: Launch Sequence Finalized.
