Use flexbox to create a responsive linear layout.
- [Instructor] So as you can see,…I've created some more HTML structure for our page.…We had the content element before…and I've added a presentation element,…if you look at our mock-up again.…In our HTML design,…content is equated to this gray background.…This is just what our presentation is floating on.…The presentation element would equate with this white square…which is going to contain our slides.…And then the slide itself,…would be this curved box.…And then these text elements,…I've created a new tag called HP title.…
And that's where I'm gonna put all the text.…And I can style that however I like.…Once again, by discarding the H1 tag,…now I can choose to style it however I want to.…So I've created the structure.…Let's go back and look at the browser…and see how close our presentation is to our dream.…And as you can see, not close at all.…So now we need to start thinking…about how to structure this application…so that it can look good on every screen…from a mobile phone all the way up…to a wall-mounted display.…
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.