Topics - Video Tutorials & Practice Problems

<v ->In Lesson 13, we're gonna add a few layers of polish</v> that'll help make your site look professional. The most important change will be styling that lets our site look good on both desktop and mobile devices, a practice known as responsive design. Websites made for big desktop screens that have lots of available space, don't look great when shrunk down to be shown on a tiny screen. And sites designed for small screens look terrible when expanded to fill a big screen, because mobile layouts need some things to be small to fit the screen, but other things need to be big for interaction purposes. After all, thumbs aren't very precise. Big on small, small on big, it's bad for all. So to make our site responsive to different screen sizes, we'll be using bits of CSS magic called Media Queries that can be set to apply certain styles to the page, only when the screen is a certain width or some other attribute. At the end of the lesson, we'll also get our site menu to work nicely on mobile devices. Up until now, the menu only drops down when a mouse cursor hovers over it, and now we're gonna make it respond to screen taps as well. The best part is that we're gonna do it all with just HTML and CSS instead of inviting more complicated technologies like JavaScript to the party.