Web Development - Lesson 10
Name(s)_______________________________________________ Period _______ Date _____________________
CSS Project - Adding Style to a Webpage
Overview
In this project, you will once again be a web developer and style an HTML web page for
a user and their needs. To make sure you are meeting the user’s needs, you will need
to go through the Problem-Solving Steps below to define the needs of the user,
brainstorm on how best to meet their needs (prepare), write the HTML and CSS code
for their page (try), and then reflect on if your finished product would meet the user’s
expectations. You can refer to the Problem Solving Process with Design to help you
with the steps.
Your page will show that you can…
❏ Design a page to meet a user’s needs
❏ Use CSS to style a webpage
❏ Write readable code
Step 1: Define - Define your user’s needs
1. You previously built a web page for either Alana, Denzel, or Kiri in Lesson 5. Find your user’s
description below to learn how they would now like their page to look.
a. If you were absent or unable to build a web page during Lesson 5, read through the NEW user
descriptions below and pick a user.
2. Highlight or underline important information that will help you style their website.
3. Write yourself a list of colors or other style ideas for your user’s web page that you will style for
them.
My user would like their page styled like …
Colors:
Type of fonts:
Anything else of note:
✔️
Lesson 5 Users:
Note: you should be choosing one of these users if you built a webpage for one of them during Lesson 5
User 1: Alana User 2: Denzel User 3: Kiri User 4: YOU!
Alana would like colors of Denzel would like colors Kiri would like welcoming Decide what colors
black, gray, and white like cream and pastel colors like red, orange, and you would like for
accented by navy and maroon shades for his webpage. earthly greens for her your webpage and
for her webpage. She would He would like his font to be webpage. She would like what kind of fonts
like the fonts to be similar to similar to “Verdana” for fonts similar to “Arial” for the you want for your
“Arial” for body text and the body text and “Cursive” body text and “Fantasy” for body text and
“Georgia” for headings. for headings. the headings. headings.
Web Development - Lesson 10
⚠️
NEW Users:
Note: you should only be choosing one of these NEW users if you did NOT build a webpage during
Lesson 5
User 5: Savannah User 6: Sofia User 7: Pedro
Savannah would like earthy tones Sofia would like a modern palette Pedro would like an artistic palette
like greens, browns, and beiges with shades of blue, complemented with bold colors against a backdrop
complimented by pastel blues or by grays and whites for her of blacks, whites or metallics for his
pinks for her animal shelter. She computer repair shop, 'TechSavvy makeup brand webpage. He would
would like fonts similar to “Open Solutions.” She would like fonts like fonts similar to “Verdana” for
Sans” for body text and “Lato” for similar to “Roboto” for body text body text and “Georgia” for
headings. and “Fantasy” for headings. headings.
Step 2: Prepare - Design the Style
Based on your user’s request, plan out the style for each element below.
Body’s style:
● Background color:
● Other:
Heading’s style:
● Color:
● Font-family:
● Font-size:
● Optional styling (text-decoration, text-align, letter-spacing, text-shadow):
Paragraph’s style:
● Color:
● Font-family:
● Font-size:
● Optional styling (text-decoration, text-align, letter-spacing, text-shadow):
List’s style:
● Color:
● Font-family:
● Font-size:
● Optional styling (text-decoration, text-align, letter-spacing, text-shadow):
Image's style:
● Size:
● Optional styling:
○ border-style
○ border-color
○ border-radius
Web Development - Lesson 10
○ margin:
○ float:
For those adding on to the HTML web page you made during the previous mini-project in lesson 5, go to Code
Studio, Lesson 10, level 3 to view the images that your user would like you to add to their web page.
For those that did not build an HTML web page during the previous mini-project in lesson 5, go to Code Studio,
Lesson 10, level 2 to see the images that your user would like you to add to their web page.
.
Based on the images provided, sketch out a plan for where the best place will be to add each image in order to meet
your user’s needs.
Step 3: Try - Create the Page for Your User
● Check that you’ve completed the items below and then check with your teacher to make sure you are ready.
I chose a user and made a general list of the way they want their page styled
I planned out the style of all the elements on the page
I sketched the placement of each image
I’m ready to start coding! Teacher signature ______________________________________
● If you feel like you need a review of the tags you have learned so far, you can review them in Code Studio,
Lesson 10, Level 1
● Once you receive your teacher’s signature, go to Code Studio, Lesson 10, Level 2, and start styling your web
page!
Web Development - Lesson 10
● Don’t forget to use white-space, proper indentation, and comments to make your code readable!
Step 4: Reflect
Answer the following questions from the Problem-Solving Process with Design and Problem-Solving with
Programming handout:
What feedback did you get from your design of the web page? What changes did you make based on that feedback?
_______________________________________________________________________________________
_______________________________________________________________________________________
What aspect of the web page you built are you most proud of? What part would you do differently the next time you
build a simple HTML web page for someone?
_______________________________________________________________________________________
_______________________________________________________________________________________
What was the most challenging? How did you work through the challenge?
_______________________________________________________________________________________
_______________________________________________________________________________________
