Building Responsive Websites with HTML 5 & CSS3

Explore fixed versus flexible widths, media queries, and the cascading effect of css to craft responsive layouts that adapt across device sizes using flexible widths and percentages.

Identify three target device widths—320, 768, and 1200—to guide responsive layouts for smartphones, tablets, and desktops, and implement three media queries accordingly.

Wireframe three responsive layouts for smartphones, tablets, and desktops before coding, deciding which components to include or remove and sketching ideas to save design time.

Learn to manage multiple stylesheets for responsive web design by linking screen and print CSS files, applying media-specific rules to tailor presentation across devices.

Develop responsive layouts by loading multiple style sheets with media queries based on device width, using low.css, medium.css, and high.css to color the header red, green, and blue.

Consolidate styles by building three media queries into a single external stylesheet, using min-width breakpoints at 320px, 768px, and 1200px to adapt layouts with css3.

Explain how media query expressions apply css rules based on device width using min-width and max-width thresholds. Demonstrate combining queries within a single stylesheet to create responsive designs.

Begin building a responsive design by scaffolding the HTML structure and connecting styles.css to index.html, then develop CSS for high, medium, and low resolutions while previewing in a browser.

Learn to design a responsive header from the top-down using HTML and CSS, building a full-width black header with a centered 940px container and a left-aligned logo.

Insert a main navigation menu inside a nav element as an unordered list; float it right, display items inline, use white color and no underline, then add a search field.

Insert the search field into the header after the main navigation, apply the search class to the input, and style it with border radius, padding, and a background image.

Explore how applying floats in CSS affects responsive designs, with float left and float right examples, and the role of clear rules in maintaining layout.

Integrate Google Fonts API to load the Olio script font and apply it via external CSS to enhance typography in the hero section of your responsive layout.

Construct the hero section structure by creating a container with an image and a hero content area that holds an h1 and a paragraph, then add a clearing element.

Learn to dress the hero section with CSS by floating the image and content, applying Google fonts, adding a full-width background, and subtle text shadows.

Insert a div with class button beneath the placeholder and turn it into a hyperlink. Style with external CSS to set size, color, border, shadows, cursor pointer, and hover effects.

Create a features section under the hero, using a features class and h2/h4 headings with three feature containers, styled with centered layout, spacing, and the olio font.

Create three feature asides inside the features section, each with an image (feature image 1-3) and an h3 heading loaded with features, easy to use, mix, sort, and share.

Insert the organize section under features, create a container with class organize, add an image and content that float left, and apply CSS for sizing and borders.

Copy the organize section to build the share section, remove the container, and place the image on the right with text on the left. Speed up styling with group selectors.

build a full-width call-to-action area with a solid background, a 'get it in the app store' heading, and a graphical button, using a container structure and css styling.

Insert a footer containing the existing navigation menu and display a simple set of hyperlinks across the bottom; apply CSS for 100% width, 60px height, and centered links.

Clean up and organize the HTML and CSS for the high resolution layout, tighten indentation, align header, hero, and features styles, fix the heading font, and prep for responsive design.

Add the medium resolution media query to the external stylesheet, copy high-res rules from empty CSSA, and test the query to cascade styles from high to medium and low resolutions.

Format the medium resolution header by setting container width 100%, logo width 25%, nav margins 15px, font size 90%, and search field 10% within the media query.

Format the medium resolution hero section by applying responsive CSS: set background-size, margins, max-height, and padding; adjust the hero image, content widths, heading size, and call to action button.

Configure the medium-resolution features section by setting the section width to 100 percent, three feature containers to 33 percent width, and images to 100 percent width with auto height.

Learn to clean up and organize the organize and share sections with responsive CSS, adjusting padding and setting image widths at 50 percent and content widths at 40 percent.

Refine the get section in the external stylesheet by adjusting font size, margins, and button spacing for the medium resolution layout, then preview and prepare for the low resolution breakpoint.

Set up the low-resolution CSS inside the external stylesheet, define a max-width of 320px, and test the media query by adjusting the body background and a 90 percent width container.

optimize the low-resolution header by adjusting its height, centering the logo at 200px, hiding the search field with display: none, and resetting the nav float to none.

Adjusts navigation and hero image floats to fix responsive layout issues, integrating float rules into the nav and removing hero image floats, to stabilize the header across breakpoints.

Adjust the low-res hero by setting a 1000x800 background, removing floats, centering the hero content with 90% width and margin auto, and applying 20px bottom padding.

Adjust the features section in the external stylesheet’s low-resolution media query: set images to 90% width, 100% line height, a 15px bottom margin, and disable floats so items stack.

Within the low-resolution media query, format the organize and share sections: set images to 100% width, content to 90% width, remove floats, and center with 10px padding.

Set up the get section in the low-resolution layout with centered text, padding, and float reset, and refine the call-to-action button and footer across breakpoints.

Disable smart zoom by adding a viewport tag with width=device-width and initial-scale=1 to ensure media queries render tablet and smartphone layouts correctly on mobile devices.

Test your responsive layouts using screen fly to preview a live-uploaded design on tablets and smartphones. Rotate between devices, compare with real devices, and refresh after re-uploading.

Learn to create retina graphics by saving images at twice the size with the @2x suffix and using a retina.js script to swap high-res versions for retina displays.

Explore fundamentals of responsive design, establish a workflow from high-resolution to tablet and smartphone layouts using media queries and multiple style sheets, then test responsiveness and optimize for retina graphics.