Join James Williamson for an in-depth discussion in this video Building the basic desktop layout, part of Applied Responsive Design.
- View Offline
- Exercise Files
- Code Practice
Once you've defined targeted screen sizes using media queries, you can then focus on…crafting the individual layouts themselves.…Much like how I really like to structure the basic page containers in HTML first, I also…like to control the layout of those page containers first, before I move on to working on the…specific regions themselves.…So in this exercise we are going to start that process by styling the basic containing…blocks of our desolve.org desktop layout.…I'm really going to be working on one file, but I have got two files open here:…the index.htm file from the 02_05 folder and the main.css file. Again, because I am in Dreamweaver…here, I only need to open up the index file and it gives me access to the main.css, but…if you're working in a code editor that does not do that for you, make sure you open up…the main.css from _css directory, because that's the file we are really going to be working on.…
Now, if I were to take this file right now and preview it in the browser, yeah, not awesome,…
- 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.