Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
So now we're going to add some links and texts into our content containers. So let's come down here to the header element. Let's split that open. And we're going to create our logo out of an anchor link. So let's start by typing an anchor tag. Let's hit a space. Let's set a class of logo, then hit a space. Let's add an href. We're going to set that equal to a # sign, which is a self-link, and then end the tag and then end the anchor tag. So again, this is just a standard anchor link, and we're going to turn this into a logo by giving it dimensions and giving it a background graphic of the actual logo.
Next, we'll come down to the navigation element. Let's split that open, and in here we're going to add four links for our main navigation. So let's start with an anchor tag. We're going to set href equal to a # sign. Let's end the tag. We'll type in "About Us" and the anchor tag. I'm going to select this entire link. I'm going to paste this a few more times. And the second one, let's change About Us to Services.
The next link we'll call Portfolio. And then lastly, we'll call this one Contact Us. And then let's come down to the footer. Let's split that open, and let's just add a copyright for our website. So ©, hit a space, and then just type Your Organization Name. Now that we have links in our heading and navigation area and a copyright statement, next we'll open up a snippet and put some placeholder text in some of the other containers.
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.