From the course: Creating a Responsive Web Design
Join today to access over 22,500 courses taught by industry experts.
The strategy for our layout - CSS Tutorial
From the course: Creating a Responsive Web Design
The strategy for our layout
- Now before we start adding some HTML to our content, we should have some idea of the different sections that we're going to need in order to recreate the layout that we're after. Based on this particular layout, we're going to need a header element, we're going to need three section elements, a footer element, and then a navigation element. Now because we're going to be moving the navigation to the top of the document with CSS, the navigation is actually going to be between the third section and the footer. So showing the navigation down here is a little more accurate to what we're going to be doing in the HTML file. And then finally we're going to have a div that's going to be outside of all of these elements. This will be the highest-most element inside of the body tag. And we'll use an id, and we'll name this page. This way, when we absolute position items or give properties to individual elements here such as width=100, they'll all be based on this div container called page. And…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
-
Setting up our project4m 7s
-
The strategy for our layout1m 40s
-
Creating the main HTML containers2m 40s
-
Adding content into the header3m 52s
-
Adding content to the main section3m 25s
-
Adding content to the atmosphere section2m 18s
-
Adding content to the how-to section5m 19s
-
Adding the navigation5m 2s
-
Adding the footer content2m 20s
-
-
-
-
-
-
-
-