LivingBots logo
Mission 2 — Create Your Own Bot Bio Page
Mission Covers
HTML • CSS • JavaScript

Overview

Build a single-page website about your custom LivingBot. Name your bot, write a bio, list strengths and weaknesses, tell a short story, and add a schedule table. Theme light/dark colors with CSS variables and test responsive layouts.

Learning Goals

  • Structure a page with semantic HTML (headings, paragraphs, lists, table).
  • Style with CSS variables and apply a light/dark theme.
  • Write helpful alt text for images and consider accessibility.
  • Understand and test a responsive website on desktop/tablet/phone.
  • Organize files/folders and export a working index.html.

Key Terms

  • HTML — structure of your page.
  • CSS — colors, layout, and fonts.
  • JavaScript — interactivity/behavior.
  • Responsive website — layout that adapts to different screens automatically.
  • Alt text — short description of an image for screen readers/fallback.
  • Accessibility — design choices that help everyone use your site.
  • Compiler — online editor/viewer to edit and preview code.
  • Elements — tags: <h1>, <p>, <ul>, <ol>, <li>, <table>.
  • Notes in code — HTML comments like <!-- your note here -->.

Sample Student Website (Responsive Preview)

Steps

    • Create your bot using the controls at the top.
    • Give it a name, then click Download Bot Image to save.
    • Make a folder on your Desktop called Mission 2 and place the image inside.
    • Open the supplied HTML to begin your page.
    1. Click View & Copy Starter Code to open the modal.
    2. Press Copy to copy all code, then paste it into your online compiler.
    3. Or click Download Starter Code to save mission2_starter.html to your Mission 2 folder.
    4. In the starter, change the page title and main heading to your bot’s name.
    5. Swap the img src to your saved bot image and write helpful alt text.
    • Write a short bio that matches your bot’s style (2–3 sentences).
    • Use an ordered list for strengths and an unordered list for weaknesses.
    • Complete the schedule table with Period, Teacher, Class, and Description.
    • Edit the LIGHT and DARK CSS variables to match your bot.
    • Use the preview tabs above to test Desktop and Phone layouts.
    • Save and submit your final index.html.

Key Term Flashcards

HTML

What is it?

HyperText Markup Language — the structure of a web page.

CSS

What is it?

Style rules for colors, layout, and fonts.

JavaScript

What is it?

The behavior layer that makes things interactive.

Responsive website

Meaning

A layout that adapts to different screen sizes automatically.

Alt text

Why add it?

Short description for images to support screen readers and fallbacks.

Accessibility

Why it matters

Use headings, contrast, keyboard focus, and alt text so everyone can use your site.

Elements

Common tags

<h1>, <p>, <ul>, <ol>, <li>, <table>

Notes in code

HTML comments

Use <!-- your note --> to explain parts of your code (not shown on the page).

Python

What is it?

A popular programming language known for readability — great for automation, data, and web backends.

Learn About Traits Mission Headquarters
Starter: mission2_starter.html