harmonycomputer.net
Contact Mr. Gregory
  • 6th grade
    • BOOT UP >
      • 1st quarter
      • 2nd quarter
      • 3rd quarter
      • 4th quarter
    • Intro to CPU >
      • Computer Parts
      • Fundamentals
      • Hardware
      • Software
      • Internet
      • Internet pt. 2
    • Typing Practice
    • Online Safety >
      • Share with Care
      • Google Presentation
    • Word Processing >
      • MLK Jr Formatting
      • Poster
    • Presentations >
      • Things that Make Me Feel...
    • Spreadsheets
    • Graphic Design >
      • About Me Poster
    • Black History Month >
      • Civil Rights
      • Martin Luther King Jr.
    • 3d printing
    • Programming >
      • Hour of Code
      • Scratch
      • Intro to CPU Science
      • Republic
      • Code.org
      • HTML
      • Game Development
      • Independent Study
    • Substitute >
      • Lesson 1: Code Monkey
      • Lesson 2: Google logo
  • 7th grade
    • BOOT UP >
      • 1st quarter
      • 2nd quarter
      • 3rd quarter
      • 4th quarter
    • Online Safety & Digital Citizenship >
      • Digital Footprint
      • Cyberbullying
      • Copyright
      • Privacy & Security
    • Touch Typing
    • Computer Fundamentals >
      • Hardware
      • Software
      • Internet
      • Internet pt. 2
    • Word Processing >
      • MLK Jr Formatting
      • Poster
    • Presentations >
      • Things that Make Me Feel...
      • About Me
    • Spreadsheets
    • Graphic Design >
      • Infographic
    • Martin Luther King Jr.
    • Hour of Code
    • Independent Study
  • 8th grade
    • BOOT UP >
      • 1st quarter
      • 2nd quarter
      • 3rd quarter
      • 4th quarter
    • Touch Typing
    • Computer Fundamentals >
      • Hardware
      • Software
      • Internet
      • Internet pt. 2
    • Online Safety & Digital Citizenship >
      • Digital Footprint
      • Copyright
    • Word Processing >
      • MLK Jr Formatting
      • Formatting
      • Poster
    • Presentations >
      • About Me Jeopardy
      • About Me Prezi
      • Google Slides
      • Texas Revolution
    • Spreadsheets
    • Graphic Design >
      • Brochure
    • Martin Luther King Jr.
    • Hour of Code
    • Independent Study
  • High School CS
    • Fundamentals of CS >
      • BOOT UP >
        • 1st quarter
        • 2nd quarter
        • 3rd quarter
        • 4th quarter
      • Why CPU Science?
      • GMetrix
      • EarSketch
      • What is a Computer?
      • Web Design >
        • My Summer Webpage
        • Hispanic Heritage Bio Project
        • My Winter Break
        • MLK Timeline
        • Advocacy Website
      • Code.org >
        • Intellectual Property
        • Internet Searches
      • CodeCombat
      • Code HS
      • Republic
      • PBL project
      • Independent Study
      • Substitute >
        • Lesson 1: HTML & CSS
        • Lesson 2: HTML & CSS
        • Lesson 3: Javascript
    • Principles of IT >
      • BOOT UP >
        • 1st quarter
        • 2nd quarter
        • 3rd quarter
      • Technology @ Work
      • Web Design >
        • My Winter Break
      • Internet Dilemmas
      • Digital Citizenship & Cyber Hygeine >
        • Digial Footprint
        • Safeguarding Passwords
      • Republic
      • GMetrix
      • Independent Study >
        • HTML & CSS
  • Robots
    • BOOT UP >
      • 1st quarter
      • 2nd quarter
      • 3rd quarter
      • 4th quarter
    • EV3
    • Spike
    • Sphero
    • Drones
    • AutoAuto
    • Independent Study
  • Resources
    • Microsoft enrollment
    • Harmony Portal
    • Class Dojo
    • Pixect
    • Codepen
    • Typing Resources >
      • Fun to Type
      • Free Typing Game
      • Typing Club
    • RefMe
    • Flocabulary
    • Chrome Music Lab
    • P.A.T.
    • Code Ninjas
    • After School >
      • ESports

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.  
Picture

    turn in your finished project

Submit

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
Picture

    turn in your finished project

Submit

more projects

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

    Turn In

Submit
Powered by Create your own unique website with customizable templates.