From the course: Creating a Responsive Web Design
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Creating the main HTML containers - CSS Tutorial
From the course: Creating a Responsive Web Design
Creating the main HTML containers
- Now to start creating our main containers let's go back to our index.html file in our text editor. Let's come down here and let's select this comment here that I have that says 'markup goes here.' Let's delete that. And let's start by adding that outermost div container. So start with a div tag, add a space, we'll add an attribute, id= " let's put in the word page, let's end the tag, then let's end the div element. I'll come in here and split this open. Now we can use a class or an id. When you use an id in a page, you should only use the id name once, as opposed to class names, which we'll use in a moment. Class names can be reused any number of times in a page. But since this page container's only going to be used once and it's going to hold all of our elements, I'll use an id for this. Now let's get our cursor inside of here. Let's add our header element, so I'll type header, and the tag, and the element. Let's hit a few returns. Next line, we'll add a section element, end that…
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.
Contents
-
-
-
Setting up our project4m 7s
-
(Locked)
The strategy for our layout1m 40s
-
(Locked)
Creating the main HTML containers2m 40s
-
(Locked)
Adding content into the header3m 52s
-
(Locked)
Adding content to the main section3m 25s
-
(Locked)
Adding content to the atmosphere section2m 18s
-
(Locked)
Adding content to the how-to section5m 19s
-
(Locked)
Adding the navigation5m 2s
-
(Locked)
Adding the footer content2m 20s
-
-
-
-
-
-
-
-