Before you create a responsive website, taking the time to make sure your base styles are flexible from the start can go a long way. In this video, take a look at how to make your base CSS flexible and fluid.
- [Instructor] Before incorporating media queries…to create responsive layouts,…start with fluid and flexible CSS.…This is key for making the content fit…for as many screen sizes as possible.…Make the design relative to its container,…rather than setting a specific size…from the start.…While there are some standard sizes for devices,…you can't always assume people will be…viewing your site at these exact sizes.…For example, if someone is viewing a website…on a large monitor,…they may not have the browser completely maximized…to the width of the screen,…so you have no way of knowing…what width or height they've resized…their browser to.…
Using percentages for major page layout components…is an important step in making your pages flexible.…Combine it with min and max width values…to maintain some control over the dimensions…of your components,…or you can use them together.…Let's take a look at an example.…In this example, the width has already been set…to a fixed value of 400 pixels,…and that means, no matter what,…
- 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.