Today’s Goals:

• Finish your self-guided CSS review and take a quick survey
• Start thinking about a topic for your webpage project and look at pages created by former students
• Make fun animations with CSS using Animate.CSS

 Today’s Featured Site:

• https://securityplanner.org/#/– This visual guide helps you make good decisions to keep your online accounts and internet-connected devices secure. Some of the content will look familiar since we covered it in our security class in October.

 Self-guided reviews

• You will spend time on any of the following topics you feel as though you need to review:
  • Box model
  • Positioning
  • Floats
  • Classes, IDs, and div tags
  • Display, block, inline, inline-block
  • Selectors, properties, and values
  • HTML and CSS comments
  • Don’t see what you’re looking for? Try w3school.com’s CSS tutorials.
  • Other topics from yesterday:
    • Styling links
    • z-index property
    • Aligning text
    • Styling bullets to create menus
    • Opacity property
    • Box shadow property
    • Adding images to HTML (link here) and styling images (link here)
    • Setting up and using a page wrapper

 When you’re done:

• Please complete this CSS questions survey
• Start thinking about topics for your first webpage project (coming up after vacation). What would you like to create 2-3 pages about?
• View projects created by previous students:
  • Personal photography site
  • Personal art work site
  • Christmas recipes
  • Personal portfolio
  • Winter Wonderland
  • Foodies
  • Twenty One Pilots

 Animate.css

• Let’s look at what Animate.css does.
• Let’s see how Animate.css works. What is a class again?
• Open Notepad++ and start a new webpage with this code
• That page is pretty ugly and annoying. See if you can make something better!
  • You can apply any of the animation classes to any element (your text and picture). You don’t have to make everything infinite. See what happens when you remove infinite. How often and when does the animation happen? How can you get it to happen again?
  • Change the page background color or add a background image. Good color list: http://materialuicolors.co/. Images: https://unsplash.com/, https://stock.tookapic.com/, https://www.pexels.com/, or Bing.com (do image search, then search for free to share and use)
  • Try adding some other images and animating them, too. Frosty needs some friends!