💻
[JS] The Interactive Web
CS4All Resources
  • Curriculum Overview
  • 📬Leave Us Feedback
  • Unit 1: HTML & CSS: Good vs Bad Design
    • 🔮Unit 1 Overview
    • U1LA1.1: Building with HTML
    • U1LA1.2: Structuring Pages with Divs, Classes, IDs
    • 🗃️U1LA1 Mini Project: My Fan Page Part 1
    • U1LA2.1: Styling your page with CSS
    • 🗃️U1LA2 Lab: My Fan Page Part 2
    • U1LA3.1: Layout with CSS Grid
    • 🗃️U1LA3.1 Lab: Grid Interview
    • U1LA3.2: Layout with Flexbox
    • 🗃️U1LA3.2 Lab: Flexbox Interview
    • U1LA4.1: Focus on Design in HTML && CSS
    • U1LA4.2: Breakpoint Lesson
    • 🗃️U1LA4 Lab: ChefHub Goes Mobile
    • U1LA5.1: Creating Accessible Websites
    • 🗃️U1LA5 Lab: What Do You Hear? Make it Accessible
    • U1LA6.1: Working with CSS Frameworks - Bulma
    • 🗃️U1LA6 Lab: CheeseBook Computers with Bulma
    • 🎨Unit 1 Final Project: My Travel Page
  • Unit 2: Intro to DOM Manipulation Basics
    • 🔮Unit 2 Overview
    • U2LA1: JavaScript Essentials - Variables to Arrow Functions
    • 🗃️U2LA1 Mini Project: JavaScript Essentials
    • U2LA2.1: DOM Manipulation with JavaScript Click Interactions
    • U2LA2.2: Accessible Shopping Cart
    • 🗃️U2LA2 Mini Project: The National Horse Race
    • U2LA3: Inputs and Conditionals
    • 🗃️U2LA3 Mini Project: The Interactive Site
    • U2LA4: Add, Remove, and Toggle
    • 🗃️U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle
    • 🎨Unit 2 Final Project: Input-Output Helper Site
  • Unit 3: Advanced DOM
    • 🔮Unit 3 Overview
    • U3LA1: JavaScript Arrays, Iteration, and Objects
    • 🗃️U3LA1 Mini Project: Arrays, Iteration, and Objects Lab
    • U3LA2.1: JavaScript Essentials - Variables to Arrow Functions
    • U3LA2.2: Typeahead Search
    • U3LA2.3: Fuzzy Matching - Autocorrect
    • 🗃️U3LA2 Mini Project: Fuzzy Matching Personality Quiz
    • U3LA3.1 JavaScript Mutability
    • U3LA3.2: Advanced DOM Manipulation
    • 🗃️U3LA3 Mini Project: Card Organizer
    • U3LA4: Local Storage
    • 🎨Unit Final/U3LA4 Project: Twenty in Ten Game
  • Unit 4: Intro to APIs
    • 🔮Unit 4 Overview
    • U4LA1: Intro to APIs
    • U4LA1.2: JavaScript Arrays, Iteration, and Objects
    • 🗃️U4LA1 Mini Project: Deck of Cards: Higher Lower
    • U4LA2: Connecting to Closed APIs using the Giphy API
    • 🗃️U4LA2 Mini Project: DIY Dictionary
    • U4LA3.1: APIs vs SDKs
    • U4LA3.2: Requests on the Web - GET & POST
    • 🎨Unit 4 Final Project: API GUIs
  • Unit 5: Simple Websockets and Final Project
    • 🔮Unit 5 Overview
    • U5LA1: Servers and Express
    • 🗃️U5LA1 Mini Project: Express Lab
    • U5LA2: Intro to WebSockets
    • 🗃️U5LA2 Mini Project: Simple Sockets Lab
    • U5LA3: Socket Servers
    • 🗃️U5LA3 Mini Project: Socket Server Lab
    • U5LA4 [TBD]
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes
  • Prompt
  • Exemplar
  • Culturally Responsive Best Practice
  • Extra Help?
  • Extensions
  1. Unit 1: HTML & CSS: Good vs Bad Design

U1LA2 Lab: My Fan Page Part 2

How can I add specific styles such as color, spacing, and font to my web page?

PreviousU1LA2.1: Styling your page with CSSNextU1LA3.1: Layout with CSS Grid

Last updated 1 year ago

Teacher Notes

This lab is designed to be built off of a template website, "Frida Kahlo's Fan Page." If students have a completed the first lab that they feel proud of, encourage them to build off of what they already have from lab 1 instead of the provided starter code. Otherwise, this lab's stater code ( | ) is best to have them effectively get some experience with CSS.

There's a lot of fun things to add to your website with CSS. After having students go through the steps below, give students the documentation and the liberty to explore as many additional things beyond this personalizing their page to satisfaction.

Prompt

We've seen the limitations HTML has when trying to build a beautiful website. It's time to take a Fan Page to the next level. By adding spacing, colors, and other styling via CSS, we can really make these websites even more special.

Directions:

Your task is to add styling to this website. You will access elements of the page by ID, class name, and semantic element tag. Part 1 focuses on background color, font color, margin, and padding, and part 2 gets trickier focussing on border, shadow, centering, and more. The style.css has already been linked to the index.html. You're ready to go!

Part 1

  1. Head to the style.css page and notice that there is already styling for the image elements on the page max-width: 80%;. This means the image will take up at most 80 percent of the page. This is good if our image is too big, but if the image is too small, then it will not be consistent with the other images. Change that to say width: 300px;, and notice what happens. All the images are forced to be exactly 300 pixels wide; no more, no less.

  2. There are 3 ways to access specific parts of an HTML file in order to style them. We can select the element tag (as we did with img above), the ID name, or the class name. First, style the font color of all the h2 elements to the custom color #e63946. Add the following ruleset to the style.css and notice what changes.

    h2 {
        color: #e63946;
    }
  3. Head over to the index.html page and notice that there are 4 sections to the page each wrapped in div elements with different ID names: id="header", id="about", id="achievements", and id="other". Let's add some color to the header's background. We'll reference it by ID, and set a custom color to the background. In the style.css add the following ruleset to change the background color:

    #header {
        background-color: #f1faee;
    }
  4. Now, let's add a different color #a8dadc to the about and the achievements sections. Instead of writing these color changes individually, notice in the index.html how the two divs and no others have a class name class="section". We can access the sections by class name using the following declaration:

    .section {
        background-color: #a8dadc;
    }
  5. Use this same technique of accessing multiple divs by class name to add the following properties to each of Frida Kahlo's (or your own page's) achievements. You'll need to locate the 4 divs and give them each the same class name: class="feature".

    • Change the background-color to #457b9d

    • Change the font color to #f1faee

  6. Great! Now, this webpage is desperately needing some spacing in the form of margin and padding. As a reminder, margin is the spacing around a section while padding is the spacing between the border of the section and all the contents inside. First, add margin in the following places. Be sure to check out the results after each change.

    • Give the body a 30px margin,

    • give each div a 20px margin at the bottom,

    • give each li a 10px margin at the bottom,

    • and give the quote a 20px margin to the left. You'll need to add an ID name to the quote to access it and style it directly.

  7. That feels halfway there. Notice that the words and other content on the page is flush with the edges or border of the divs. Spacing there can be created with padding. Give every div a 15px padding, and see what changes. NOTE: this is the second declaration we're giving to div. Use the same selector ruleset from before to add this instead of redundantly creating another div ruleset.

Part 2

    • border-style: solid; to create a border

    • border-width: 2px; to change the thickness of the border

  1. Great! The features have a nice pop to them now. Let's move on to centering and enlarging the main image.

  2. We don't yet have a selector to access the main image without affecting the other images on the page. In the index.html, find the img that's tied to the main image at the top of the page and give it a special ID name like id="main-image". Then, in the style.css, create a new ruleset that increases the image size to 400px. If you did this right, the first main image of Frida should be bigger than all the others. The code should look as follows:

    #main-image {
        width: 400px;
    }
  3. #main-image {
        width: 400px;
    
        display: block;
        margin: auto;
    }

Exemplar

Culturally Responsive Best Practice

Remember that this project can be a continuation of My Fan Page Part 1: you are not required to make every student use the same Frida Kahlo fan page. Additionally, students should feel free to adjust the suggested colors/margins/padding etc to best fit their preferences. While they should complete each challenge, they can modify to make their page uniquely their own.

Allowing for student choice in this project is one of the best ways to be culturally responsive! (Please recall that communities and culture 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!)

Extra Help?

Extensions

Directions:

  • Take a moment to change some of the styles we've already added. Keep in mind the audience that will see this page and adjust accordingly. Maybe the images are too small or big for your taste. Maybe the margin and padding feels a bit off with the new colors you picked. Maybe you want the main image to have some shadow as well. Do what feels right to match your creative vision.

  • Spicy! Do a search for "css animation" and see if you can have the features slide into the page as you scroll.

Reflection Questions:

  • Do a search for some examples of some good looking and not so good looking websites. What's the difference? Name at least 5 observable characteristics of a bad looking website, and name what CSS you would try to use to make the website look better.

  • You may have noticed that there are a couple of different ways to use a color. You can use RGB, RGBA, Hexadecimal, and just a color name like 'red'. Try using all of these. When might it make more sense to use one over another? Which is your favorite to use, and why?

For this next section, we'll look at A.) adding a border and shadow to our features, B.) centering and enlarging the main image, and C.) using "colorPicker" to change the color scheme all throughout the page. Challenge yourself add these three elements to your page before reading on for a more guided walk through. Use to look up examples.

Now that you've given it a try, we'll start with walking through to our features. There are three properties you should add to the feature rule:

and border-color: black; to change the border color. Notice that we're using a CSS friendly color "black" instead of a custom color. .

Now to add . This we we can do in one line. Try adding box-shadow: 8px 8px 5px grey; to the feature ruleset - The first 2 pixels are to designate the size of the shadow, the 3rd pixel size creates a blur effect, and the color grey is the color of the shadow.

Now that we have access to just this image, let's it. You can add three declarations, display: block;, margin-left: auto;, and margin-right: auto;, or, since they have the same value ("auto") you can just add two as shown below:

Awesome! This last part is up to you. Use this to pick a palette and customize this website's colors ina different way. Make sure you change all the colors so that they are from the same palette.

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

I can't get my images to center! Always look up your questions on w3schools.com before asking your teacher, but this one in particular is tricky. Check out the to see an example on how to do it.

How can I custom create some cool, unique colors? Check out . Simply search "Color Picker" on Google, select an exact color, and copy and paste the hex number. Check out in w3schools on how to apply it in your style.css code.

and see if you can implement some uniquely customized fonts onto the fan page.

We already added some shadow to the features on the page, but use so that the shadow only appears when the mouse hovers over the feature. ( HINT: you will have to create a separate ruleset with the selector .feature:hover). Once you do, carry this concept over and see if you can use the same resource to customize the links at the bottom of the fan page as well.

🗃️
github
repl.it
w3schools
this w3schools documentation to add border
You can find more of those colors here
"box shadow"
center
color palette picker
finished example
w3schools tutorial
Google's Color Picker
this CSS example
Checkout this page
this resource for "on hover" effects