Web Pages with HTML/CSS


Project 4 - Educate Me - due Feb. 3, 2022

Project 4 - Educate Me


TED Talks and Animations to Educate and Entertain

Learn to create images and hyperlinks for your web pages

Demonstrated Skills

  • Native Tools
    • Visual Studio Code, Firefox, Github
  • Web Services
    • Github Pages, Validator
  • Media
    • Use embedded images and video
  • HTML
    • Basic HTML template
    • Headings, Lists, Tables, Links, Images
    • h1, p, a, img, ul, table

Web Assets

  • Pages
    • bacs200/index.html
    • bacs200/profile.html
    • bacs200/educate.html
  • Images
    • bacs200/images/Bear.png

Creative Content

  • Selfie - take a photo and upload it
  • Three selected TED Talks
  • One RSA Animations
  • Brief summary and introduction to each


Update Home Page

  • Update your home page "bacs200/index.html"
  • Add a Bear logo (search and download a logo from https://unco.edu)

Profile Page

  • Update your profile page "bacs200/profile.html"
  • Add a selfie to your profile
  • Display images using the Thumbnail/Full Size image pattern
  • Save the full size image at 500 pixel wide
  • Add a list of special interests
  • Make sure all pages validate

Create Educate Page

  • Make page "bacs200/educate.html" using your template file
  • Create a table to show three TED Talks
  • Each row (3 columns)
    • Title & speaker
    • Embedded video with link to TED Talk site
    • Summary text to introduce the topic
  • Find a RSA animations video and repeat this process

Mark Seaman's Page


The following requirements can be used as a checklist for your testing.

  • Page exists at "bacs200/index.html"
  • Page exists at "bacs200/profile.html"
  • Page exists at "bacs200/educate.html"
  • Home Page has correct content (Project links, Logo, Class website link, Github repo, etc.)
  • Profile page has a selfie
  • Correct use of Thumbnail with Full Size image link
  • Educate and entertain page (TED Talks and RSA Animation)