Responsive design is more than just making components bigger or smaller. In this video, take a look at the different design styles.
- [Instructor] Before responsive and mobile web designs…became a consideration when building websites,…the rule of thumb was to optimize…for the most common resolution.…Either a 1024 x 768 or a 1280 x 1024 pixel design…was pretty standard.…If a mobile version was required,…a separate website was created, often under a subdomain.…It would have its own design and code base…separate from the main website.…This technique is still used,…but with the variety of monitor sizes…and mobile devices now available,…optimizing for one or two screen sizes…has become a thing of the past.…
Responsive web design aims to be device-agnostic,…and optimized for any screen using one website…and one code base.…Media Queries houses a collection of responsive designs.…It's a good resource for comparing…how different websites manage page content layouts…for different screen sizes.…Before we dive deeper into responsive web design,…let's go over different styles.…Here's another website, liquidapsive.com.…This website provides examples and information…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 20m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- 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.