Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
Now, I've prepared a snippet of a bunch of placeholder text that we can place into some of these other containers. So from your text editor, choose File > Open. Locate your exercise files. Let's go into folder 4 called Snippets, and let's open Placeholder-Text.html. Now, inside this file I have groups of placeholder text. So up here, on line five, we have the article settings. So let's come in here and select from the beginning h1 tag all way out to the ending paragraph tag. Let's copy this to the clipboard.
Let's switch back to index.html, and inside of the article element, let's split that open. Let's paste our content in here. I'm also going to format this a little bit so we can see the structure. So inside of article we have an h1 and a paragraph tag. Let's switch back to our placeholder text. Let's come down here under Promo 1. Let's copy the content div and everything inside of there. Copy that to the clipboard. Switch back to index.html. I am going to scroll up here and find the first promo div.
Split that open. Let's paste our content inside of there. I am going to format that a little bit. Let's come back to our placeholder text. Let's copy all of the content for Promo 2. Copy that to the clipboard. Let's find the second promo container. Let's paste all of our content in here. I'll format that. Back to our placeholder text. Let's copy all of the content for Promo 3.
Copy to the clipboard. Back to index. Let's find the third promo element, split that open, and paste our content inside up there. So now we have a placeholder text inside of the article element and we have placeholder text inside of each one of the promo elements. At this point, save your file. Let's come back out out to the operating system and let's open our index.html file up in a web browser. So, in the web browser we'll see all of the HTML content showing up here. So this is a very well- structured HTML document. We don't have any CSS in place, so we're not seeing any design aspect, but we have all of our document structure in place.
Now, in the next chapter we're going to work inside of Photoshop, creating our web graphics, customizing some of our slices, and saving those graphics out. If you want to skip the Photoshop session, you can go right from here over to chapter four and continue with the HTML and CSS portion of this course.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.