🗃️U1LA1 Mini Project: My Fan Page Part 1

How do you use HTML elements to build a webpage?

Teacher Notes

Students pick up HTML element tags and nesting best through practice. This mini-lab is designed to have them explore these ideas through a lense they feel most comfortable with.

Be careful sharing documentation for this lesson. The list of HTML Elements are cumbersome and can be overwhelming for students. Instead, consider showing students the few elements you'd like them to practice using, and have them look up examples if need be.

Students can begin this project from any blank HTML editor. You are also welcome to use our premade starter code (github | repl.it).

Prompt

Who's your favorite TV character, celebrity, historical figure, or role model? Imagine you were hired to make a fan page website for them. What would you include: a brief bio, a bunch of photos, links to other sites where you can see more of them?

Directions: Your task is to build a website or fan page with enough content to convince anyone that this person is worth knowing about.

Include the following sections each wrapped in a div with an appropriate ID name:

• "Intro" or "Header" section with:

  • The person's name

  • catch phrase or quote

  • A picture

• "About Me" section

  • that describes what they're known for.

• An "Achievements", "Last Seen", or similar section.

  • This should include at least 3 nested div's that each contain a title, picture, and an optional description for context.

  • This could be movie appearances, popular events, achievements or awards, or fictional locations that they've made an appearance at.

• An "Other" section

  • This should include other websites you can go to to find their work or impact on the world.

Requirements:

Include the following html elements in your code...

1. An html skeleton (html, head, body)

2. At least two header elements(h1, h3, etc)

3. At least one paragraph element

4. At least one image element

5. At least one anchor element linking to another page

6. All the elements above are nested inside the body

7. Encapsulate sections in a div

8. Stretch: Display something (like the other websites) as a list.

Exemplar

Take a look at this finished example before you start to get an idea of what your fan page might look like.

Culturally Responsive Best Practice

Within this HTML skill challenge, you can always adjust the prompt given to students to make the project seem more relevant to them and the cultures of communities that they are a part of. While 'fan page' is our suggestion, adapt to meet the needs of your students! (Please recall that communities can refer to a lot of things, including just the culture of being a teen, a Minecraft player, or a KPop fan - be mindful that you are allowing students to explore choice in their creations in a way that is authentic to them!)

Allowing for student choice in this project is one of the best ways to be culturally responsive!

Extra Help?

How do I make a link? How do I import a picture? I forgot the syntax! Check out this documentation on w3schools use CTRL F (CMD F on a mac) to find what you're looking for.

Finished with your HTML and want to browse through more specific colors? Check out this Color Picker or search "Color Picker" on Google and select an exact color. Check out this CSS example on how to apply it on w3schools.

Extensions

Directions:

• Turn your achievements section into a table with a title, date, picture, and description.

• You may have noticed that some your page is already styled with colors. Add IDs and class names where appropriate and see if you can fiddle with the colors on your page. Use the example lab to help you.

Reflection Questions:

• What are some things you would do to make this website prettier if you could and had more time? You may want to look online for some inspiration.