Learning Responsive Web Design

Master Dreamweaver's fluid grid layout by inserting layout div tags inside the grid container and switch among mobile, tablet, and desktop views while managing dependent files.

Set up a single external stylesheet to style mobile, tablet, and desktop layouts using CSS3 media queries, and link it to the HTML file to control the page appearance.

Learn to set up a high resolution media query for displays 1024 pixels wide or higher, building on the low and medium queries in external CSS stylesheets.

Build page body by adding a slide show area with an id and three content boxes beneath the navigation, using class for repetition and inserting placeholder text in each paragraph.

Finish the footer structure by placing the main navigation inside the footer, reusing the nav element with its unordered list, and moving from a wireframe to CSS styling.

Create three content boxes as divs under a content box class. Apply the styles to all three, including 300px width, light gray background, float left, padding, and 10px bottom margin.

Apply simple, external stylesheet formatting to the news feed, setting the article width to 940 pixels, adding a 10-pixel left gap, and a 20-pixel bottom margin.

Update the medium resolution wireframe in styles.css by turning the redefined paragraph black, applying a white background, centering the master layout at 95 percent width, with a 1px border.

Format the main navigation in a medium-resolution layout by styling the nav and its bulleted items into a horizontal menu with centered text, white links on a black background.

Finalize the medium resolution footer by correcting spacing in the footer navigation, and demonstrate how medium and high resolution media queries shape the footer, nav, and content wireframe.

Create low resolution wireframe using a scaling layout in the low resolution media query, with an external stylesheet, a master id selector, centered 95% width, and a light gray background.

Add a header to the low-resolution wireframe, style it in the external stylesheet, set its width to 100 percent of the master div, and set a height of 130 pixels.

Apply formatting to the high resolution layout by changing the master div's border color in the high resolution media query, using RSGB values 193, 180, 152.

In the high resolution media query, update the content box borders to rgb(193,180,152) on top and bottom, and style its paragraphs with Verdana, 80% font size, and 140% line height.

Improve the responsive layout by fixing footer text formatting and article spacing in the high-resolution layout; adjust the footer nav font size and Verdana family.

Apply the RGB color values 193 180 152 to the slide show border and content box borders, and style content box paragraphs with font-family Focalin Vidana, 80% font-size, 140% line-height.

Format the main navigation for low-resolution devices via a media query, adjust the external stylesheet's font size and line height, and remove underlines to improve mobile usability.

Learn to manage content boxes in a responsive layout by applying the master border color and adjusting font size, line height, and paragraph styling within the media query.