U1LA1 Mini Project: My Fan Page Part 1
How do you use HTML elements to build a webpage?
Last updated
How do you use HTML elements to build a webpage?
Last updated
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 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 ( | ).
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...
An html skeleton (html, head, body)
At least two header elements(h1, h3, etc)
At least one paragraph element
At least one image element
At least one anchor element linking to another page
All the elements above are nested inside the body
Encapsulate sections in a div
Stretch: Display something (like the other websites) as a list.
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!
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.
Take a look at this before you start to get an idea of what your fan page might look like.
How do I make a link? How do I import a picture? I forgot the syntax! Check out 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 or search "Color Picker" on Google and select an exact color. Check out on how to apply it on w3schools.