Learn about creating a media query to use for responsive design.
- [Instructor] In our last video,…we modified our nav toggle button…so that it would float to the right of our drawer,…but we still have this problem.…Our main component is kind of jammed here over to the left,…and we don't have a header for our site anymore.…We took that out.…So let's add those, too.…We also, if we look online,…can see that things aren't really mobile friendly.…Luckily, material UI makes things mobile friendly,…but again, because things are jammed over here…they wouldn't look great if we used this on a mobile device,…so we're going to do that, too.…
Let's navigate back over to Atom.…We can close NavDrawer styled,…and we can close NavDrawer components.…We're not going to be using those in this section.…Let's open up now Template.js in containers…and think about where we're going to be adding…our new styled components.…We're going to be getting rid of main,…and then we're going to be adding a header to the top.…I'm going to optimistically add those now.…I'm just going to put them here…and then we're going to make them in a second.…
- Installing local dependencies
- Generating a starter project
- Deploying to Heroku
- Planning your development process
- Using styled-components
- Styling for mobile
- Setting up models on Graphcool
- Creating Relay mutations
- Adding Relay to your authentication flow
- Protecting routes with authentication
Skill Level Intermediate
2. Deployment Environments
3. App Functionality
4. Implementing Libraries
5. Creating Components
- 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.