- [Instructor] Now that we have a fair amount…of structure in place,…it's time to start making our presentation…resemble our mock-up a little more closely.…So if we look over here,…we can see I want to have my presentation area…be a square.…And I want that square to be centered…eventually on my content area.…But let's talk about formatting something as a square first.…It's not as trivial as it sounds.…But imagine if you're in a window like this,…one that is broader than it is tall,…well what if I resize my window and make it, you know,…taller than it is broad?…Now all of a sudden, I can't used fixed units.…
I mean, I could make a fixed sized square…using pixels or something like that,…but it would be truncated on smaller devices.…Thankfully, CSS has a view unit for us…that is called VMIN.…And so let's go back into our source code.…And I'm gonna add some styling to the presentation area.…If you look back here in the HTML.…This presentation area is what I want to format.…I want to make it a square.…So let's go in and create a new rule…
AuthorW. Scott Means
- Creating a dynamic layout with flexbox
- Navigating the DOM
- Adding animation
- Controlling animations with classes
- Applying CSS to SVG
Skill Level Intermediate
Web Portfolio Projects: Binding and Propagationwith Leigh Lawhon1h 9m Intermediate
What you should know1m 4s
1. Building a Foundation
2. HTML Layout
4. Adding Animation
5. Working with SVG
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.