Topics
Box Model
- Border
- Padding
- Margin
- Width & Height
- Border Radius
- Display Property
- Units – Percentages, EMs, & REMs
Assorted CSS Properties
- Opacity & Alpha Channel
- Position Property
- Transforms
- Transitions
- Google Fonts
- Background Property
Tutorials
- 08 The CSS Box Model, videos 83 – 91, Box model and Units CODE
- 09 Assorted Useful CSS Properties videos 92 – 101, Other CSS CODE
box_model / index.html & style.cssposition / index.html & style.cssfancy_button / index.html & style.css
Starter html and css below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Me!</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Hover Me</button>
</body>
</html>body {
font-family: 'Roboto', sans-serif;
}google_fonts / index.html & style.css
Problem Set
The final set of tutorials, videos 100 & 01 are a code-a-long to build a basic, nice looking photo blog. You should build this project using photos of your own or from a source like Unsplash.com. Have the images follow some sort of theme: content choice, color pallette, shape, etc… Also appropriately name the photo blog.
photo_blog / index.html , style.css, img/all_jpgs
There’s one really important technical requirement. All images must be square – equal width/height pixel dimensions. All images must be 1000px x 1000px or less. Consider using Unsplash.com for free to use images.
****BONUS CHALLENGE****
Create a hover state that scales the image 10% larger using a smooth transition.
Have fun curating some images!
For the blog
Describe how absolute positioning works. How could you use absolute positioning in combination with a transform function to center an element inside another element? Hint: look at the web design 2 comment box problem from week 1. Give a code block with CSS to support your answer.
