css floating

Class Friday, December 20, 2019- updated

 Today’s Goals:

  • Review CSS floats
  • Find hidden “Easter eggs” on various sites!
  • Download desktop wallpaper for January (optional)

  Today’s featured sites:

 CSS Floats

  • About:
    In addition to using positioning properties, we can float content to the left or right and control how the other content flows around it. However, CSS floats are not being used as much for webpage layout in favor of more mobile-friendly layouts. Floated content is also removed from its parent container, so the clearfix hack  is used to address that issue.
  • Examples:
    Let’s check out these examples: https://www.w3schools.com/css/css_float.asp 
    Live sites:
    bostonglobe.com/– stories
    amazon.com– left menu
    walgreens.com– top menu
  • To do (from before vacation):
    1. You’re going to create this image ! You will need to float the text, images, and footer correctly.
    2. Download this starter code  and copy/paste into a new Notepad++ file. Save as winterfloats.html.
    3. Read the CSS comments and begin at line 56. You will need to set up a #left section. Start by adding #left in your CSS. Add float: left; width: 45%; padding: 3px; and margin-left: 2px;
    4. Now set up a #right section. Start by adding #right in your CSS. Add float: right; width: 45%; padding: 3px; and margin-right: 5%;
    5. Both the #left and #right sections will contain text and images (see image above). The images in those sections are also being floated so the text will wrap around the images. This is one of the most useful applications of the float property- wrapping text around images.
    6. Now set up the footer section, which is at the bottom of the page below the content. Add clear: both; width: 100%; padding: 3px; background-color: #228c32; opacity: 0.5; and text-align: center;. We need to add clear: both; so our footer will clear the left and right sections from both directions.
    7. Now fill in the correct ID’s in the HTML in the body section. Look for the # before a selector in your CSS to find the correct ID names. Consider what should be first (see the image for what’s at the top of the page) and notice that the dog and mug images are on the left and the penguin and snowman images are on the right. This will help you fill in the ID names in the correct order in the HTML. Hint: read image file names.
    8. Make sure to close all of your div tags!
    9. Extra credit #1: We used placeholder text (gibberish) for our paragraphs just so we would have some text to work with. What language is it written in?
    10. Extra credit #2: What are the 2 descendant selectors that we used in this code? What did they do and why did we use them?
    11. Answer code: click here to download  if you need it for comparison purposes or trouble-shooting
    12. Review: Float and clear properties 
    13. Style questions: What went wrong with our site in terms of the content spilling off the page? What are some ways we can fix this issue?

 Easter Egg Hunt!

  1. Hidden interactions
    https://www.kickstarter.com/– can you find it? Hint: you have to click on an image somewhere near the bottom of the page
    https://en.wikipedia.org/wiki/Easter_egg_(media)– literally find Easter eggs by clicking on something inside of the photo on this page
    http://destroyer.la/– scroll to the bottom of the page
    https://www.bandit.co.nz/– try clicking on things
  2. Google
    google.com– do you know any?
    Try do a barrel roll, flip a coin, askew, blink html, play snake (also try typing tic tac toe and solitaire)
  3. Konami code
    What is it? What happened when you entered the code on Bruno Simon’s entertaining portfolio page?
    Try it on these sites:
    https://www.wwf.org.uk/
    http://sigmajs.org/
    polaroidoriginals.com– this might be the best one yet!
  4. ASCII art in source code
    https://www.kitkat.com/
    https://www.dominos.com/en/
    https://www.hillaryclinton.com/
    https://www.flickr.com/