{"id":"web-beginner","ageRange":"8–11","curriculum":{"courseId":"web-beginner","showcaseProject":{"title":"My World Homepage","emoji":"🏠","pitch":"A colorful homepage all about YOU — tags, colors, and a link to something you love.","description":"Combine HTML structure and CSS style from this course into one personal homepage with a heading, a photo or emoji gallery, and at least two styled sections.","features":["A page title and a friendly heading that uses your name","At least two sections (About and Favorites) with real HTML tags","CSS that sets background, font, and a highlight color","A working link to a page or project you care about"],"stretchGoals":["Add a third section for a pretend shop or pet","Give each section its own background color","Add a tiny footer with a secret message"],"skillsShowcased":["HTML tags","CSS colors","Fonts & boxes","Links & images"],"shareTip":"Open it for a family member and give a 30-second tour: “This heading is me, this color is my mood, this link is my favorite thing.”"},"overview":"A generous, design-led web adventure for ages 8–11. Kids grow from first-time page builders into proud designers through tags, colors, and playful labs that always end in something they can show.","units":[{"id":"webb-u1","title":"Tags Are Boxes","emoji":"📦","description":"Meet HTML: every piece of a webpage lives in a tagged box you can name and nest.","lessons":[{"id":"webb-u1-l1","title":"Hello, Tags!","emoji":"👋","summary":"Discover that a webpage is just labeled boxes — headings, paragraphs, and lists — stacked in a smart order.","concepts":["HTML tags","Headings","Paragraphs"],"example":"Example:

Hi, I am Mina!

makes a big title, and

I love robots.

makes a normal sentence.","codingPractices":["Every opening tag needs a matching closing tag.","Use h1 for the main title, then h2 for smaller section titles."],"practicePrompt":"Write an h1 with your name and two p tags that tell two true facts about you.","activities":[{"id":"webb-u1-l1-a1","title":"Human Webpage","emoji":"🧍","type":"unplugged","durationMin":10,"description":"Kids become tags: one is

, two are
. They line up in page order, then swap to see how the “page” changes.","example":"Example: the tallest kid as

stands first, then two
kids tell a sentence each.","codingPractices":["The order of tags is the order the reader sees.","Keep the main title at the top."]},{"id":"webb-u1-l1-a2","title":"Name Billboard","emoji":"🪧","type":"build","durationMin":20,"description":"Build a tiny “billboard” with one heading, two paragraphs, and a list of three favorite things.","example":"Example:
pizza
soccer
makes a bulleted list.","codingPractices":["Use a list for more than two related items.","Put each idea in its own tag so it is easy to restyle later."]},{"id":"webb-u1-l1-a3","title":"Tag or Text?","emoji":"🔎","type":"quiz","durationMin":10,"description":"Look at five snippets and decide which ones are real HTML tags and which ones are just words.","example":"Example:

is a tag; Hello world! by itself is just text.","codingPractices":["Tags live inside angle brackets < >.","The browser uses tags as instructions, not as visible words."]}],"labs":[{"id":"webb-u1-l1-lab","title":"All About Me Card","emoji":"🪪","objective":"Print a mini about-me card using a heading, two facts, and a three-item list.","steps":["Print an

that says hello with your name.","Print two
facts (a hobby and a favorite snack).","Print a
with three
items you love."],"stretchGoal":"Add an
called “This week’s goal” and one extra paragraph under it.","example":"Example: print(\"
Hi, I am Mina!
\") writes a real heading the browser would show.","codingPractices":["Write one tag per print line so you can check each piece.","Read your tags out loud — “open h1, close h1” — to catch missing ends."]}]},{"id":"webb-u1-l2","title":"Pictures & Portals","emoji":"🚪","summary":"Add images and links so your page can show a picture and take a reader somewhere new.","concepts":["img","alt text","a href links"],"example":"Example: $\"Luna$ shows a picture, and Visit makes clickable text.","codingPractices":["Always write alt text that describes the picture for someone who cannot see it.","Make link text describe the destination, not just “click here”."],"practicePrompt":"Write one image tag with alt text and one link to a page about your favorite animal.","activities":[{"id":"webb-u1-l2-a1","title":"Alt-Text Charades","emoji":"🎭","type":"game","durationMin":10,"description":"One kid “is the picture.” Others write a short alt sentence. The best alt lets someone guess the picture with their eyes closed.","example":"Example: alt=\"orange cat sleeping on a keyboard\" beats alt=\"cat\" or alt=\"image1\".","codingPractices":["Describe what matters in the picture, not the file name.","Keep alt text short but specific."]},{"id":"webb-u1-l2-a2","title":"Portal Hunt","emoji":"🔗","type":"challenge","durationMin":15,"description":"Write three links: one to a hobby, one to a made-up shop, and one that goes back to the top of your page with href=\"#top\".","example":"Example: Back to top is a portal on the same page.","codingPractices":["Use href for the destination.","Choose link words a friend would understand."]}],"labs":[{"id":"webb-u1-l2-lab","title":"Pet Gallery Teaser","emoji":"🐾","objective":"Build a tiny gallery card with an image, a caption, and a link to “adopt” a pretend pet.","steps":["Print an with src and a clear alt.","Print a
caption about the pet.","Print an link with friendly link text."],"stretchGoal":"Add a second pet card underneath the first.","example":"Example: $\"Luna$ then a caption and a link makes a complete gallery card.","codingPractices":["Keep the picture, caption, and link together as one idea.","Test that the link text still makes sense if you read it alone."]}]}]},{"id":"webb-u2","title":"Paint with CSS","emoji":"🎨","description":"CSS is the paint, fabric, and furniture of your page — colors, fonts, and boxes.","lessons":[{"id":"webb-u2-l1","title":"Mood Colors","emoji":"🌈","summary":"Pick colors and fonts that match a feeling, then watch the whole page change personality.","concepts":["background","color","font-family"],"example":"Example: body { background: #cdefff; color: #223; font-family: Georgia; } paints a calm, bookish page.","codingPractices":["Choose one background and one text color that still contrast enough to read.","Name the mood first, then pick colors that match it."],"practicePrompt":"Write CSS for a “sunny picnic” mood and a “midnight library” mood.","activities":[{"id":"webb-u2-l1-a1","title":"Mood Swatch Game","emoji":"🧪","type":"game","durationMin":10,"description":"Draw three color swatches. Classmates guess the mood. Then write the CSS that would create that mood.","example":"Example: bright yellow + sky blue often reads as “playful,” while navy + cream reads as “calm.”","codingPractices":["High contrast helps everyone read the page.","Use one main color and one accent, not ten competing colors."]},{"id":"webb-u2-l1-a2","title":"Font Personality","emoji":"🔤","type":"discussion","durationMin":15,"description":"Compare a silly font, a serious font, and a simple font. Decide which one belongs on a homework site vs a party invite.","example":"Example: Comic-style fonts feel playful; simple sans-serif fonts feel clean and modern.","codingPractices":["Font choice is part of the message, not decoration only.","Keep body text easy to read even if headings are extra fun."]}],"labs":[{"id":"webb-u2-l1-lab","title":"Mood Page Stylesheet","emoji":"💅","objective":"Write a tiny stylesheet that sets background, text color, font, and heading color for one chosen mood.","steps":["Pick a mood word (cozy, electric, ocean, forest).","Write body rules for background, color, and font-family.","Write an h1 rule with a highlight color."],"stretchGoal":"Add a p rule that makes paragraphs a little smaller than the heading.","example":"Example: body { background: #cdefff; } and h1 { color: #2b6cb0; } already change the whole vibe.","codingPractices":["Group all the body styles together.","Change one property at a time so you can see what each one does."]}]},{"id":"webb-u2-l2","title":"Boxes with Breathing Room","emoji":"📦","summary":"Learn padding, borders, and rounded corners so your content sits in friendly cards instead of a cramped pile.","concepts":["padding","border","border-radius","background"],"example":"Example: .card { padding: 16px; border-radius: 20px; background: pink; } makes a soft, comfy card.","codingPractices":["Padding is space inside the box; margin is space outside.","Rounded corners feel friendlier for kid-facing pages."],"practicePrompt":"Style a card called .sticker with padding, a border, and a round corner.","activities":[{"id":"webb-u2-l2-a1","title":"Card or Cram?","emoji":"📏","type":"unplugged","durationMin":10,"description":"Tape a “card” on the floor. Stand inside it (padding) vs outside it (margin). Feel the difference.","example":"Example: padding pushes content away from the edge of the same box.","codingPractices":["Give text room to breathe with padding.","Do not squash a heading against the border."]},{"id":"webb-u2-l2-a2","title":"Sticker Shop Sketch","emoji":"🛍️","type":"craft","durationMin":20,"description":"On paper, design three product cards with a title, price, and color. Then name the CSS class each card would use.","example":"Example: a class like .sticker-card can be reused for every product.","codingPractices":["Reuse one class for items that should look the same.","Keep the class name about the thing, like sticker-card."]}],"labs":[{"id":"webb-u2-l2-lab","title":"Sticker Card Style","emoji":"⭐","objective":"Write CSS for a product card with padding, rounded corners, and a sweet background.","steps":["Create a .sticker-card rule.","Add padding, border-radius, and background.","Add a .price rule with a bold highlight color."],"stretchGoal":"Add a hover comment in a CSS comment describing what you would change on hover.","example":"Example: padding: 16px; border-radius: 20px; background: pink; is already a friendly card.","codingPractices":["Put related properties in one rule.","Use a class name you could reuse on every product."]}]}]},{"id":"webb-u3","title":"Ship a Homepage","emoji":"🚀","description":"Plan, build, and polish a real personal homepage that uses everything from this course.","lessons":[{"id":"webb-u3-l1","title":"Page Blueprint","emoji":"🗺️","summary":"Sketch the sections of your homepage before writing tags, so the structure is already decided.","concepts":["Page sections","Planning","Semantic order"],"example":"Example: a homepage might go header → about → favorites → link → footer, just like chapters in a book.","codingPractices":["Draw the page first, then code it.","Give each section one job."],"practicePrompt":"List four sections for your homepage and one HTML tag you will use in each.","activities":[{"id":"webb-u3-l1-a1","title":"Wireframe Doodles","emoji":"✏️","type":"craft","durationMin":20,"description":"Draw a simple boxes-only wireframe of your homepage. Label each box with the HTML tag it will become.","example":"Example: a big top box labeled h1, two stacked boxes labeled p, a row of three boxes labeled li.","codingPractices":["A wireframe is a map, not a pretty drawing.","If a box has no job, delete it."]},{"id":"webb-u3-l1-a2","title":"Section Sorting","emoji":"🗂️","type":"puzzle","durationMin":10,"description":"Shuffle five possible sections and put them in an order a first-time visitor would understand.","example":"Example: title and hello come before a shop and a footer.","codingPractices":["Put the most important message near the top.","End with a way to go somewhere else (a link) or a goodbye."]}],"labs":[{"id":"webb-u3-l1-lab","title":"Homepage Skeleton","emoji":"🦴","objective":"Print the HTML skeleton of your homepage: header, about, favorites, and a link — no extra decoration yet.","steps":["Print an
and a short
intro.","Print an
About section with one paragraph.","Print an
Favorites section with a list, then one link."],"stretchGoal":"Add a
line with the year and your first name only.","example":"Example: h1, then h2 About, then h2 Favorites, then a link is a complete skeleton.","codingPractices":["Build structure before style.","Keep section titles honest — About should be about you."]}]},{"id":"webb-u3-l2","title":"Polish & Present","emoji":"✨","summary":"Add CSS personality, check contrast, and practice a tiny demo of your finished homepage.","concepts":["Combining HTML + CSS","Contrast","Sharing"],"example":"Example: the same HTML with two different stylesheets can feel like a party or a library.","codingPractices":["Style after the structure works.","Read your page out loud to catch missing pieces."],"practicePrompt":"Write three CSS rules you will add to your skeleton: one for body, one for h1, one for a card or list.","activities":[{"id":"webb-u3-l2-a1","title":"Contrast Check","emoji":"👓","type":"quiz","durationMin":10,"description":"Look at four color pairs and vote which ones are easy to read. Rebuild any pair that fails.","example":"Example: pale yellow text on white is hard to read; navy on cream is easy.","codingPractices":["Text has to win against its background.","If you squint and lose the words, change the colors."]},{"id":"webb-u3-l2-a2","title":"Thirty-Second Tour","emoji":"🎤","type":"discussion","durationMin":15,"description":"Practice presenting: name, mood color, favorite section, and one thing you would add next week.","example":"Example: “This is my page. The blue is ocean mood. The favorites list is my favorite part.”","codingPractices":["Point to a specific tag or color when you explain.","Share one next step so the project feels alive."]}],"labs":[{"id":"webb-u3-l2-lab","title":"Homepage Glow-Up","emoji":"🌟","objective":"Write the CSS that turns your homepage skeleton into a mood-matched, readable page.","steps":["Set body background, color, and font-family.","Style h1 with a highlight color.","Style a .card or ul with padding and border-radius."],"stretchGoal":"Add a second highlight color just for links.","example":"Example: body { background: #fff4e6; color: #3b2f2f; } plus a rounded list already feels like a finished page.","codingPractices":["Match the CSS to the mood you chose in the last unit.","Keep one main color story, not a rainbow explosion."]}]}]}]},"description":"An eight-week design studio where kids ages 8–11 learn HTML tags and CSS colors by building cheerful pages they can show off on any screen.","durationWeeks":8,"emoji":"🖼️","gradient":"from-rose-100 to-orange-50","level":"beginner","projects":["About-me homepage","Mood color board","Sticker shop landing page"],"skills":["HTML tags","CSS colors","Fonts & boxes","Links & images"],"tagline":"Your first websites, painted with code","title":"Pixel Pages","track":"web"}

Hi, I am Mina!

, two are . They line up in page order, then swap to see how the “page” changes.","example":"Example: the tallest kid as

called “This week’s goal” and one extra paragraph under it.","example":"Example: print(\"

Hi, I am Mina!

About section with one paragraph.","Print an

, two are
. They line up in page order, then swap to see how the “page” changes.","example":"Example: the tallest kid as