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
        • Intellectual Property
        • Evaluate Credibility
        • Avoiding Scams
        • Tech Ethics & Security
      • 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

project 1: css hamburger

Directions:
Click on the hamburger picture to open the starter project.
​
You are given a top-bun div with CSS styling to start with. You can change this bun to make it your own, however you want your bun to look! Start by looking at the CSS and figuring out, what does each of those properties do? Try changing the numbers around and clicking run, especially with the border and border-radius properties.

Make your own bottom bun, patty, lettuce, pickles, onion and more! You must create at least 8 ingredients of your own. 
Picture

    Turn in Assignment

Submit

project 2: Hover practice

pt. 1  Hover effects

Directions:
Default (non-hover) styling is already done for you. Your task is to add a hover effect to each of the buttons
  1. The first button, "Grow" should get both wider and taller on hover. Look at the HTML to figure out what classname you will need to use to select this button. On hover, increase the width and the height of the button.
  2. Add a transition to the Grow hover effect
  3. On hover of the "Background" button, change the background-color.
  4. Add a transition to the "Background" button hover effect
  5. On hover of the "Border" button, add a border of your choice
  6. On hover of the "Spin" button, use the transform property to make the button spin in a complete circle. Must use a transition for this to show on the screen.
Click the button below to watch the video.
Video
Click the picture below to open the starter code.
Picture

    Turn in Assignment

Submit

pt. 2  Picture dictionary

Your task is to create a picture dictionary to help non-English speakers learn vocabulary words! On hover over each div with a vocabulary word, we'll be inserting a picture of the word!

See the first word "Apple" as an example. We have a div with a class of "apple", then in CSS we select ".apple" and add a background-image on hover. Then we can use the background-size property to make the image the same size as the element. Feel free to change the size of your divs by editing the div CSS provided.

Add at least 3 more vocabulary words, where the background-image on hover is a picture that matches the word.
Picture

    Turn in Assignment

Submit

project 3: Animations

Your task is to make this Jellybean factory website animated! You do not need to edit the CSS, you must animate by adding the correct classNames as defined by the Animate.CSS library
  1. Make the header animate on load
  2. Make the sidebar animate on load
  3. Each of the beans should animate infinitely


BONUS:
Look at the CSS and change the values around, making sure you know what each property is doing to make this website. See how the sidebar and the beans section line up side by side? This is due to the display property, with a value of inline-block. We'll be going over this in the next section
Picture
animate.css

    Turn in Assignment

Submit

project 4: Airline schedule

For this airline website, we want to create a table like the following:
Picture
Directions
​
HTML
  1. Change the name of your airline to something of your choice.
CSS
  1. Add a background-color or a background-image to the body tag
  2. Add a background-color to the h1
  3. Add padding to the h1
HTML Table
  1. Your task is to add a table for flight information underneath the <h3>Schedule</h3>.
  2. We have a <table></table> element started for you already with three table rows (<tr></tr>). Inside the first row, add four table heading <th></th> tags. They should say "From", "To", "Date and Time", "Price".
  3. In the next two table rows, add four <td></td> (table data) tags. These values should match the header over that column

Style table with CSS
  1. Select the th and td tags in CSS, and add a padding of 20px;
  2. Add a border to the th and td tags.
  3. Add border-collapse: collapse; to the table tag if you do not want double borders.
  4. Add a background-color to the th tag.
  5. You can also add a background color to the table tag, if you would like to do so.

    Turn in Assignment

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