Shape of the Day:

• Checking marked homework and re-submitting any unfinished work
• Continue working with the Box Model

Website of the Day:

https://www.google.com/maps/space/earth – Here’s a Google Maps of some Planets and Moons!

1. Ensure the following assignments have been handed in:

• Image Editing – 5 edited images in your student folder plus one edited image with a quote posted onto your WordPress webpage
• CSS Quote Assignment – Handed into your student folder
• CSS Gradient Backgrounds Assignment – Handed into your student folder.

2. The Box Model:

• Can be applied to any element on a webpage (You can define margins, borders and padding for anything, as well as add a background or background image to every element).
  1.  What are some examples of elements on your web page?
  2. Why is it useful to apply the box model to each element on your page? How does this affect your design and layout?
  3. Since you can choose to define margins, borders, and padding – the browser will do its default thing if you do not choose. What are the default margins? Borders? Padding? Think about the first HTML pages we made at the start of this course, how did your content look? What did the browser do to the content?
• Open up your practice web page from yesterday’s lesson in the Brackets program look over what you did again.
• Using the box model, you can define a page wrapper, just like you did yesterday. As we move forward, try to keep this in mind as we continue to create different sections of a webpage, like a header, footer and sidebar.
• What is that div id below your body tag?
  • Div ids are made starting with a ‘#’ on a CSS style sheet. They identify specific sections of a webpage (eg. wrapper, menu, header, sidebar).
  • Div tags are applied in the HTML as a reference to sections of a page – div id=”wrapper” would be an example. Anything in that div will have properties defined in the style sheet. Background colour, background image, font, border can all be defined properties. Div tags require CSS to style them, otherwise they do not do anything by themselves. They must have IDs and/or classes.
• Please do the following exercises:
  • 4 margin exercises (helpful code here)
  • 4 border exercises (helpful code here)
  • 3 padding exercises (helpful code here)
  • 4 box model exercises (helpful code here)
• Now create a new practice web page
  1. Download this starter code
  2. Download this image
  3. Open Brackets and start a new webpage.
  4. Copy and paste the downloaded code into the new webpage and save the file as boxmodel2.html
  5. For each of the elements given, provide a different property for the borders, margins, and padding. Add background colours as well. Change the values that are given in your starter code – ensure to read the CSS Comments as you go.
  6. Border styles you can use: solid, dashed, double, groove, ridge, dotted, inset and outset
  7. Here’s another colour site: http://materialuicolors.co/
  8. Create a new paragraph. What happens? Why does this happen?
  9. Why does the link to YouTube have the same properties as the paragraph? How can you fix it so the link fits inside the box?
  10. Can you add a background image to any of the elements? How can you do this? Try using some older CSS photos you have used since you have them readily available. Try this code: background image url, background-repeat, and background-position
  11. Download this image code and paste it into your internal style sheet below the paragraph section, above your link section. What happens to your image? What does the opacity property do?
  12. Reverse the opacity of your image so when you roll your mouse over it, the image is fully visible, and when you take your mouse away, it’s nearly transparent.
  13. What type of selector is img:hover? Hint: it’s the same as when we style links. What is it called?