All right. Well, using all the skills that you’ve learned throughout this course, it’s time to make some final tweaks to the home town site. To start off, I want you to update the sports score table. Go ahead and put your favorite sports teams in, and make sure it’s responsive. I’ve also added another
For this quiz, I want you to take a look at the hometown hero image and the navigation links, NEWS, EVENTS, CULTURE, and BLOG. Start with a small viewport and resize the page to make it larger. Pay attention to the size of the hero image, and the spacing between the nav links. As you
So far, I’ve used only simple media queries, testing only one characteristic, but in some cases, I need more complex tests. This media query, only applies styles when the screen width, is greater than 500 pixels. And the screen width, has to also be less than 600 pixels. If we look at this altogether, our
Here’s a simple site, Skinny Ties. I’ve opened up Dev Tools in another window, so when I resize this, you’ll see the resolution show up right here. And like any responsible, responsive designer, I’m starting with a small mobile design. This one looks pretty clean. I’ll start expanding and at 480 pixels, I hit the
I’ll start from the last diagram. It shows the nav coming in from the right, see how it’s over here off the canvas? And then it comes in and covers the canvas on the right side. This one is wrong, because this property translate negative 300 pixels, means that the nav bar is starting 300
This wasn’t too hard. The green box and the light blue box, both have widths of 50%, because they take up half the width of the container, but all the other boxes like the dark blue, the red, and the orange, all take up the full width of the container, so they’re at 100% width.
The first step to developing a responsive site is to get inspired by other responsive sites. For this quiz, I want you to surf the web and find an example of a site that does responsive design well. Share your findings in the box below or in the forums.
So, you just learned how to make a hamburger menu, which is pretty darn cool. So I want you to think about what that means for your site layouts and transitions. I want you to pretend that you’re developing a website, with an off canvas navigation menu. When the user clicks on the hamburger icon,
Here’s another challenge. The layout that you see here was created with Flexbox. For all of the elements of different colors that you see on the screen, type in the width and the order of the element that would be needed to create this layout. I’ll give you the first one. The light green box