From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Off-screen to cover navigation overview

Off-screen to cover navigation overview - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Off-screen to cover navigation overview

- [Narrator] Just like with the earlier chapters I've taken a page out of the TV chef cookbook here and started the project for us to save some time. If you open the exercise files for this movie in your browser, you'll find a page that is quite similar to what we had at the end of the previous chapter. We have a header and the advanced responsive card based layout using CSS Grid in the middle. And what's new here is there's also a navigation section below the header and if we scroll down we have a sidebar and then the footer. Looking at index.html, you'll find clean structured and semantic HTML without any unnecessary containers or nesting divs. Just like before we have a body with a class site that contains our skip to content link. Then there's a header with a class mast header. That's the header. We have a section with a class main and nav and this is the navigation. Inside here we have a button that will become the trigger to open and close the menu as well as the nav itself that…

Contents