Testing is always an important part of web development. In this video, take a look at some simple ways to test responsive CSS.
- [Narrator] A common way to test responsive layouts…is to just resize the browser.…One thing to note is when you resize the browser,…it only goes down to about a 400 pixel width viewport.…And some mobile devices are smaller than that.…You can actually use your browser developer tools…to get around that.…If you don't have your project open already,…go ahead and open it,…then open your dev tools.…I'm going to right click anywhere on the page,…and select inspect.…By default,…the developer tools open at the bottom of the page.…
But if you select these three dots icon,…and select the icon that will…dock the developer tools to the right.…Not only will this make it a little bit easier to see…some of our HTML and CSS in the panels,…we can also now resize the panel…to view the different screen sizes.…And as you can see,…I'm going smaller than 400 pixels.…If you haven't noticed already,…in the top right hand corner of the viewport,…when I resize the page, I can actually see…the size of the viewport, as well.…
Though there are common device sizes,…
- 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?
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.