Join Chris Converse for an in-depth discussion in this video Setting up our project, part of Creating a Responsive Web Design.
- Now to begin our project, let's first create a folder on the desktop. Let's create a new folder. We'll name this My Website. Then we'll open this up. And then once you've created that folder, let's come inside of here, let's create two additional folders. One we'll name CSS and the other one we'll name Images. With these created, let's go back to the exercise files. Let's go into the Chapter 01 folder, let's open up the 01_01, let's find the files directory, let's come in here, and you can either copy or move the index.html file.
Let's move that into the root, or the top level area of the My Website folder. Let's come back and let's get the print.css and the screen.css. Let's copy these to the CSS directory. Then let's go back, let's close up files. Let's open up the graphics folder, select all of these, and let's copy all of these into the Images directory. Once these are all copied, let's close up these files here and the exercise files.
Now back in our main project, our root folder, which is this main folder here, has the index.html file out in the root, which means it's out in the main area of this folder. Then we have an images directory and a CSS directory. So this is going to keep all of our web assets nicely organized. Once we have this in place, let's select the index.html file and let's open this up in a text editor. As I mentioned before, this file is mostly blank. This has the minimum requirements to define this as an HTML document.
We have our document type at the top, our main HTML element, then a heading area, and then a body area. We're going to be adding all of our markup here where I have this html comment. At the top, we have a content type declaring this as text/html with a character set of UTF-8. We have a meta tag with a name of viewport. What this particular tag does by defining width as device-width and initial-scale, this is the tag that will tell individual devices not to scale the webpage, but rather to use the initial scale of one, meaning if we're on a device that has 700 pixels across, it will render the page as if there's only 700 pixels, allowing the rest of the HTML to move around.
The device will not attempt to show the entire webpage and scale it down. And if we didn't have this particular tag in here, every device would try to render the entire web page, and we would have to zoom up. Again, the idea here is we're going to make the page respond to the individual devices and adjust the layout so the users don't have to zoom in on the content. And then finally here we have our title tag. The first thing we're going to do is we're going to hook in our screen.css file. We're first going to build our screen layout, and then later on in the course, we're going to build in the print styles.
To hook in our CSS file, we're going to hit a return after the title element. We're going to use a link tag, so you're going to type a < the word link, then a space. We're going to set a relationship, so rel=stylesheet, then a space. The type, we're going to set this to text/css, then a space. Next we're going to use a media attribute to define that this particular CSS file is going to be used for screens.
So we'll type media="". Inside of the quotes we'll type screen, then a space. Then we're going to type href= and then we're going to go into our CSS directory. We're in the main root, so we can do css/screen.css. And then outside of the value for the href let's close the link tag. Now that we have all of our files set up on the desktop and we have our CSS file hooked into the html, next we'll create our outermost HTML containers based on our layout strategy.
The exercise files for this course are free to all members. Download them and start creating your own responsive websites today.
- Planning your layout
- Creating HTML containers, content, and links
- Creating and styling the layout with CSS
- Creating a menu system
- Styling headings, body text, and footers
- Styling and repositioning navigation links
- Swapping high-resolution graphics for Retina displays
- Making sure content is printable