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.
Next, we're to create some styles for our headings. So after the page class, let's hit a return. Let's start with an h1, beginning and ending bracket. First, we're going to set font-size. We're going to set this to 2 ems. So the reason that we're setting ems here is we want all of the font sizes to be proportional based on the base font. So we're going to use a base font size of 14 pixels and then for every other font size after this, we're going to set this with ems, and these are proportional-based, so 2 ems will be two times the base font.
So that will give us roughly 28 pixels. Next, we're going to set font-weight. We're going to set this to normal. We don't want our h1s to be bold. Next, we're going to set color, #a6430a;. Next, we're going to set margins. We're going to set 0 on the top, space, zero on the right, space, .5 ems on the bottom, space, and then 0 on the left, then a semicolon.
Next line, we're going to set an h2. Put in our brackets. Font-size, we're going to set this to 1.7 ems, so 70% larger than the base font. Next, we're going to set margin. 0 on the top, 0 on the right, 1 em on the bottom, and 0 on the left. Now, we're not going to set font-weight because by default browsers will make heading text bold. Next line, h3, beginning and ending bracket. We're going to set font-size to 1.5 ems, so 50% larger than the base font.
We're going to set margin to 0 on the top, 0 on the right, 1 em on the bottom, and 0 on the left, semicolon. Let's hit Save. Let's come back out to our operating system. Let's reload this in the browser. So now, we can see the headings styled based on the CSS rules, including the reddish-brown color and the not-bold style of the heading 1 tag here at the top. So now with our headings styled, next we'll work on the paragraph and anchor tags.
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.