SUBSTITUTE LESSON 2: Html & css

project 3: chocolate cake

You will be importing and using google fonts in this chocolate cake recipe. Watch the video on using google fonts, then click on the picture to get started.
  1. Go to fonts.google.com
  2. Find two fonts you want to use in this recipe card. Click the red plus sign for the ones you want to use
  3. Copy and paste the <link> tag google fonts provides and paste into the <head> tag of this HTML page. There is a comment in the HTML to help you know where to put it.
  4. In CSS, change the h1 to use one of your fonts. You will need to create a selector and curly braces, then paste in the CSS code for this font that google fonts provides
  5. In CSS, change the p and/or the ul to use the other font you chose
  6. In CSS, change the font-size of the h1 to 60px (or any size you want)
  7. In CSS, change the font-size of the paragraph to 18px (or any size you want)
Note: This video shows you two ways to import google fonts.  You only need to watch the first way.  

    turn in your finished project

project 4: wallpaper

This web browser is going to be a mock-up of the new wallpaper you are going to put in your bedroom. Unfortunately at this time you are limited to using just one image from the web.

Fill up the web page with the wallpaper of your choice using the background-image property!

background-image:url("urlgoeshere");

To use an image:
  1. Go to google images to find the image of your choice
  2. Go to your CSS file.
  3. Use the background-image property on the body tag to make this the background of your web page.​​
             body{
                 background-image:url("");
             }
  1. Make sure it does not repeat using the background-repeat: no-repeat
  2. If it does not cover the whole height of your website, add the property height: 100vh; 100vh stands for 100% of the view height, so it should take up your whole screen


To do a repeating pattern:
  1. Do a google search for repeating pattern images
  2. Find a pattern that will connect so you can repeat it over an over to cover your whole screen
  3. add the image to the body tag as a background-image
  4. use the background-size property to make the background as big or small as you want

    turn in your finished project

more projects

Click the picture below and choose a project to work on.
Picture

    Turn In