Learning Responsive Web Design

Explore fluid grid layouts in Dreamweaver 6 to build responsive pages for mobile, tablet, and desktop, adjusting column counts, gutters, and width percentages, then save an external stylesheet.

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.

Explore the external style sheet in Dreamweaver, including how mobile, tablet, and desktop media queries organize rules and inheritance for building responsive layouts by hand.

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.

Connect the stylesheet to the HTML file with a head link tag using rel stylesheet, type text/css, and media all, and test by coloring the body to verify the change.

Set up a low resolution mobile media query targeting 480 pixels and below in an external stylesheet, test by resizing the browser, and apply blue paragraph text within the query.

Set up and test the medium resolution media query to target tablet devices, using a min-width of 481 pixels and applying responsive CSS rules inside its block.

Test the medium resolution media query by redefining the paragraph style to red and refreshing to verify it. Note the 481px min-width threshold and that a desktop query will follow.

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.

Test high resolution media queries across devices to build a unique layout for each resolution, adjusting text color at each threshold and validating with refresh.

Create the raw layout inside index dot hvm with a master div, a header with the logo, and a HTML5 nav, then apply the three media queries.

In the learning responsive web design course, develop the main navigation for a responsive layout using a semantic nav element, an unordered list of list items, and dummy links.

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.

Build a responsive news feed area by creating four article blocks with a news item class and an h2 title, plus a meta section for date and author.

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.

Wireframe the three target devices and begin the high-resolution layout by building a high-resolution media query, styling the page with RGB colors, and testing changes in the browser.

Apply the master id selector to style the master div, set a white background, width 960px for 1024px+ screens, center with margin auto, and add a 1px solid border.

Set the header's structure in an external stylesheet by styling a header element with a width of 960px, height of 130px, and a light gray background for visible layout.

Set up the wireframe formatting for the slideshow, defining width, height, and a border. Center the slideshow within the master div using auto margins to balance left and right.

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.

Finish the footer by styling the footer nav and its hyperlinks, remove the bottom gap with a margin-bottom reset in the high-resolution media query, and create three responsive wireframe layouts.

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 header in responsive web design with a fixed height of 130 pixels, a light gray background (rgb 200,200,200), and let it automatically fill the master container's width.

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.

Apply formatting to the slideshow by setting a responsive width, a fixed 300px height, centering it in the master, and adding a 1px solid black border.

Format three content boxes in the medium resolution layout by styling divs with a content box class in an external style sheet, using gray background, float left, borders, and padding.

Define article and news class rules to control the news feed look, setting the article width to 95 percent and a 10-pixel left margin, with 20-pixel vertical margins for spacing.

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.

Adjust the main navigation by styling the nav element and its list items to create a centered, black background menu with spacing via margin and padding. Convert the vertical bulleted list to a horizontal menu using display inline, adjust left margins, and color anchors to rgb(2, 55, 255), ensuring the same styling also appears in the footer.

Explore formatting content boxes in a responsive layout by excluding the low-resolution slideshow and styling three content boxes with borders, padding, and full-width sizing for mobile screens.

Apply formatting to the news feed in a low resolution wireframe by defining article and news classes in styles.css, setting width and footer spacing.

Fix the space under the footer by using a compound rule to remove the nav bottom margin inside footer, and frame the layout as a wireframe for sign-off across devices.

Fix the left navigation gap by applying a WebKit padding-start rule outside media queries, ensuring consistent menu spacing across all three layouts during design phase while applying colors and fonts.

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.

Increase the main navigation font size with a relative unit, remove link underlines using text-decoration, and group CSS rules in the high‑resolution media query for a cleaner header.

selects and applies a new border color to the slideshow within the high-resolution media query, using rgb(193,180,152) to match the master design; previews results and plans content boxes.

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.

Format the news feed by styling the news article, the linked h2, and metadata with a red rgb(189,30,44); use an external style sheet for font sizes and alignment.

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.

Within the medium resolution media query, update the master div border to rgb(193,180,152), scale the navigation font to 110 percent, remove underlines, and set line height to 160 percent.

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.

Apply news feed formatting with external styles, targeting medium resolution layouts, by styling the news class, links, and metadata, and adjusting font sizes and margins in a responsive design workflow.

Finish the footer navigation by tweaking the external stylesheet: adjust margin, font size to 80 percent, and Verdana font for consistency across medium and low resolutions, before adding graphics.

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.

Format the news feed area by updating the external stylesheet: style the news heading at 120% font size, remove underlines, and apply the red color rgb(189,30,44).