Join James Williamson for an in-depth discussion in this video Building the basic tablet layout, part of Applied Responsive Design.
In our last exercise, we defined the basic page region styling for our desktop layout, and…we'll go ahead and continue working on our basic layout structure by tackling our tablet…styles in this exercise.…So, again, I have the index.htm in the main.css file open, and you can find these in the 02_06…directory. And we're going to work pretty much the same way we worked before.…I'm just going to paste some code in and then talk about it, and as I'm discussing it, …you can pause and type the code in.…We are going to be using pretty much the same structure we use before, so the selectors…are going to be almost identical.…
So what I really want to focus on when I talk about these selectors are the differences between…the tablet layout and the desktop styles layout, and kind of identifying what makes…that tablet layout a little bit different from desktop.…Now first off, notice that the tablet layout is only going to apply between 481 pixels…to a maximum width of 768 pixels.…So, the first thing we do is go ahead and paste in the body selector here, and you'll notice…
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
1. Planning Responsive Designs
2. Building Responsive Layouts
3. Responsive Navigation
4. Creating Responsive Media
5. Enhancing Sites for Mobile
6. Managing Resources
Additional resources4m 10s
- 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.