SUBSTITUTE LESSON 1: 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

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

    turn in your finished project

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?

    turn in your finished project

more projects

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

    Turn In