Browsing websites on mobile devices has become just as common as browsing on a computer. In this video, explore a mobile-first approach for responsive web design.
- [Instructor] When responsive design was introduced,…it was common to start with a desktop design, then make…design changes for smaller screens and work our way down.…The mobile first approach starts with mobile devices…to make it a priority rather than an afterthought.…So, why mobile first?…When starting with a desktop design,…there's a lot of space to work with,…and as we rearrange or even remove content…for smaller screens, the question becomes,…did we even really need that content…or that design component to begin with?…Starting with a smaller screen may help you make…more thoughtful decisions about what elements…are actually necessary instead of just filling up space.…
Let's talk about two approaches,…progressive enhancement and graceful degradation.…These concepts came from designing for cross-browser support…and can also be applied…to designing for different screen sizes.…Graceful degradation prioritizes designing and developing…the best experience for modern browsers first,…then providing fallbacks…to ensure basic functionality for older browsers.…
- 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.