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

Html & css

sign up for a codepen account

  1. Click on the picture to the right.
  2. ​Click "Sign up for free."
  3. Click "Sign up with email."
  4. Use the same username & password that you use for logging into your computer.​
  5. Click "Submit."
  6. That's it.  You're done.  Now go to Project 1: Donut Shop
Picture

project 1: Donut Shop

In this project you will be using CSS to style this website! You'll also be editing the HTML to make it your own.
​Click on the picture to the right to get started.


HTML
  1. Change the name of the Donut shop to something unique by updating the h1 element
  2. Change the name of your first donut by updating the second h2 element on the site (currently "The Saturn"
  3. change the 3 ingredients by updating the li elements inside the ol


CSS
  1. Change the color of the h1 using the color property
  2. Change the background-color of the website by selecting the body and changing the background-color
  3. Use text-align to make the h1 centered
  4. The image is way too big! Use width to change how big your image is. Try 500px;


BONUS:
  • Use these same properties to add more color to your website! You can change the background-color of the ul, h2, or ol, as well as change the text color of these elements.
  • Try changing BOTH the background-color and the text color of some of these elements
Picture

    turn in your finished project

Submit

project 2: pokedex

Style this website with more CSS! You do not need to edit the HTML, just add CSS. 
​
Click on the picture to get started.
  1. Add a background-color to the h1
  2. Add a different background-color to the paragraphs
  3. Add padding to the h1. You can choose how much padding, start by trying 30px and change to however you like it.
  4. Add padding to the paragraphs. You can choose how much padding, start by trying 20px; and change to however you like it
  5. Add margin to the paragraphs. You can choose how much margin, start by trying 20px; and change to however you like it
  6. Add a dotted border around the h1
  7. Add a solid border around the paragraphs


Remember the border property requires 3 values separated by a space: SIZE(px) solid/dashed/dotted color;
examples:
border: 5px solid green;
border: 10px dotted orange;
border: 3px solid black;

Bonus: Add another Pokémon to this Pokédex! You will need to do this in HTML. See how the CSS styles are reused for all the paragraphs?
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.