{"id":"js-beginner","ageRange":"8–11","curriculum":{"courseId":"js-beginner","showcaseProject":{"title":"My Personal Website","emoji":"🌟","pitch":"A real webpage about you, live in a browser.","description":"Build a one-page personal website that introduces you, is styled with your own colors and fonts, and includes one interactive button.","features":["A heading and an intro paragraph about you","An image or a small gallery","Custom CSS colors and fonts that feel like \"you\"","One clickable button that changes something on the page"],"stretchGoals":["Add a second section, like a favorites list","Add a light/dark theme toggle button","Add a fun hover effect to a link or image"],"skillsShowcased":["HTML","CSS","First JS","Buttons & clicks"],"shareTip":"Open it in a browser and give a family member a guided tour of your website."},"overview":"A vibrant web-making journey for ages 8–11. Students design pages, style them with color and motion, and discover JavaScript through fun interactive projects that feel like creative play.","units":[{"id":"jsb-u1","title":"Web Pages 101","emoji":"🏠","description":"Learn the skeleton of every website — HTML — and build your first page.","lessons":[{"id":"jsb-u1-l1","title":"Build the Web HQ","emoji":"🏗️","summary":"Stack HTML blocks like building bricks and create the skeleton of a webpage that can grow into a real digital home.","concepts":["HTML","Tags","Headings & paragraphs"],"example":"Example:

Hello!

creates a big heading, and

...

creates a paragraph.","codingPractices":["Close every tag you open, like

after

.","Use one

per page for the main title."],"practicePrompt":"Write an

with your name and a
with one fun fact about you.","activities":[{"id":"jsb-u1-l1-a1","title":"Tag Human Chain","emoji":"🧑‍🤝‍🧑","type":"unplugged","durationMin":10,"description":"Each kid is a tag. Build a human chain of
,

, and to form a “page”."},{"id":"jsb-u1-l1-a2","title":"My First Page","emoji":"🖥️","type":"build","durationMin":25,"description":"Build a page that introduces you with a heading, a paragraph, and your favorite emoji."}],"labs":[{"id":"jsb-u1-l1-lab","title":"All About Me!","emoji":"🦄","objective":"A personal webpage with a big title, 3 facts about you, and a dream list.","steps":["Add an

with your name.","Add a paragraph with 3 fun facts.","Add an
list of things you want to learn."],"stretchGoal":"Add a link to your favorite website."}]},{"id":"jsb-u1-l2","title":"Picture Party & Clicky Links","emoji":"🖼️","summary":"Turn a plain page into a fun adventure with pictures, clickable links, and tidy list layouts.","concepts":["","","Lists"],"example":"Example: $\"A$ shows a picture, and Click me makes a link.","codingPractices":["Always add an alt description to images.","Use quotes around every src and href value."],"practicePrompt":"Write one tag and one link to your favorite website.","activities":[{"id":"jsb-u1-l2-a1","title":"Emoji Gallery","emoji":"🎨","type":"craft","durationMin":20,"description":"Create a gallery page of your favorite emoji — one per card."},{"id":"jsb-u1-l2-a2","title":"Link Hunt","emoji":"🔗","type":"quiz","durationMin":15,"description":"Race to find which line of HTML creates a link, an image, or a list."}],"labs":[{"id":"jsb-u1-l2-lab","title":"Pets Picture Wall","emoji":"🐾","objective":"A wall of pet photos with captions and links to adoption sites.","steps":["Add 3 images with .","Add a caption under each.","Turn one into a link with ."],"stretchGoal":"Style the captions in a different color."}]}]},{"id":"jsb-u2","title":"Make It Pretty","emoji":"🎨","description":"Style your pages with CSS — colors, fonts, and magic layouts.","lessons":[{"id":"jsb-u2-l1","title":"Paint the Page!","emoji":"🌈","summary":"Use CSS as your digital paint set and turn boring content into a colorful, bold browser masterpiece.","concepts":["CSS","color","background","font-family"],"example":"Example: h1 { color: purple; background: yellow; } paints a heading purple on a yellow background.","codingPractices":["Pick colors that are still easy to read.","Change one CSS property at a time to see what it does."],"practicePrompt":"Write a CSS rule that changes your page’s background and font color.","activities":[{"id":"jsb-u2-l1-a1","title":"Paint Swatches","emoji":"🖌️","type":"unplugged","durationMin":10,"description":"Match color names to paint swatches, then use the best three on your page."},{"id":"jsb-u2-l1-a2","title":"Font Fashion Show","emoji":"👗","type":"build","durationMin":20,"description":"Dress one heading in 4 different fonts and vote on the fanciest."}],"labs":[{"id":"jsb-u2-l1-lab","title":"Mood Page","emoji":"🌙","objective":"Build a page that matches a mood — calm (blues) or hype (brights) — using CSS.","steps":["Pick a mood and 3 colors for it.","Paint the background and headings.","Change the font to match the vibe."],"stretchGoal":"Add a hover effect that flips the colors."}]},{"id":"jsb-u2-l2","title":"Box Magic Lab","emoji":"📦","summary":"Learn why every element is a box, then shape it with padding, spacing, and rounded edges to look polished.","concepts":["Box model","Padding","Border-radius"],"example":"Example: .card { padding: 16px; border-radius: 12px; } adds space inside a box and rounds its corners.","codingPractices":["Add padding so text does not touch the edges.","Round corners a little at a time to find the look you like."],"practicePrompt":"Style a box with padding and rounded corners for a card.","activities":[{"id":"jsb-u2-l2-a1","title":"Box Stack Race","emoji":"🧱","type":"game","durationMin":15,"description":"Teams race to recreate a mystery layout using only padding, borders, and margins."},{"id":"jsb-u2-l2-a2","title":"Button Makeover","emoji":"🔘","type":"challenge","durationMin":20,"description":"Turn a boring button into a squishy, rounded, shadowed candy button."},{"id":"jsb-u2-l2-a3","title":"Box Model Match","emoji":"📦","type":"quiz","durationMin":10,"description":"Match padding, border-radius, and margin to what each one actually changes.","example":"Example: padding adds space inside the box; margin adds space outside it.","codingPractices":["Padding is inside the border; margin is outside it.","border-radius only rounds corners — it does not add space."]}],"labs":[{"id":"jsb-u2-l2-lab","title":"Candy Store Cards","emoji":"🍭","objective":"Build 3 candy product cards with spacing, rounded corners, and a buy button.","steps":["Create 3 card divs.","Add padding and rounded corners.","Style a button that looks good enough to eat."],"stretchGoal":"Make the button pop on hover."}]}]},{"id":"jsb-u3","title":"Make It Move","emoji":"⚡","description":"Add your first JavaScript — buttons that click, text that changes, surprises on demand.","lessons":[{"id":"jsb-u3-l1","title":"Button Magic","emoji":"🔘","summary":"Turn ordinary buttons into magic triggers that make text, surprises, and actions appear on demand.","concepts":["JavaScript","onclick","Functions"],"example":"Example: runs the sayHi() function when clicked.","codingPractices":["Give your function a name that matches what it does.","Test a function by calling it before wiring it to a button."],"practicePrompt":"Write a function that returns a surprise message, and call it once to check it works.","activities":[{"id":"jsb-u3-l1-a1","title":"Human Button","emoji":"🙋","type":"unplugged","durationMin":10,"description":"One kid is the “button”, another is the “code”. Clap to trigger, then switch roles."},{"id":"jsb-u3-l1-a2","title":"The Popping Surprise","emoji":"🎉","type":"build","durationMin":20,"description":"A button that makes a surprise message pop up when clicked."},{"id":"jsb-u3-l1-a3","title":"Click Detective","emoji":"🕵️","type":"quiz","durationMin":10,"description":"Guess which line of code actually runs when a button with onclick is clicked.","example":"Example:

Hello!

per page for the main title."],"practicePrompt":"Write an

with your name and a with one fun fact about you.","activities":[{"id":"jsb-u1-l1-a1","title":"Tag Human Chain","emoji":"🧑‍🤝‍🧑","type":"unplugged","durationMin":10,"description":"Each kid is a tag. Build a human chain of ,

with your name and a
with one fun fact about you.","activities":[{"id":"jsb-u1-l1-a1","title":"Tag Human Chain","emoji":"🧑‍🤝‍🧑","type":"unplugged","durationMin":10,"description":"Each kid is a tag. Build a human chain of
,