In the early stages of development, it may not be possible to test on a range of devices. In this video, take a look at using the device emulator included in the browser developer tools.
- [Narrator] We've been working on a project…that we started with…in part one of this series.…So way back in the first chapter of part one…we briefly talked about this meta tag here…the viewport meta tag online 8.…This is important for making sure…that your responsive and mobile friendly styles…are displayed properly on the device.…In the last exercise,…we were testing our responsive styles…by resizing the browser's viewport.…But this doesn't quite mimic…how it would look on an actual device.…
Let's just temporarily comment out this viewport meta tag.…The keyboard shortcut I've been using to comment out…CSS comments and GS Fiddle…also works for HTML as well.…And that is…the command on a Mac or…control on a PC plus forward slash.…So we're going to comment this out…and save it.…And then let's go back to the browser…and take a look at our developer tools.…Refresh the page,…and if you don't have your developer tools open…go ahead and do that…we're going to take a look at the built-in device emulator.…
This will allow us for a little bit more accurate testing…
- 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 19m 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.