HTML5 + CSS3 Responsive Web Design

Set up a high‑resolution wireframe in Illustrator for web design by configuring a 960×600 pixel canvas, switching to RGB, and saving to the work files folder.

Create the header wireframe by drawing a rectangle, set width 960 and height 130 with x 0, y 0, and adjust fill, stroke via transform, stroke, and swatches panels.

Set up a main navigation menu under the header and add a centered slideshow placeholder using precise dimensions (840 by 300), aligning to the artboard for a clean wireframe layout.

Position three 300 by 400 px content boxes under the slideshow, with a 10 px left gap, and center the middle box using horizontal distribute.

Create four news feed items beneath three content boxes, styling each article title with Georgia at 30px bold and a Verdana body paragraph using lorem ipsum placeholders.

Finish the high-resolution wireframe by placing a 960 by 50 footer at the bottom edge, using copy-paste, the transform panel, and alignment tools, then save.

Set up Illustrator to create the medium resolution wireframe with 750 px width and 1200 px height, targeting 481–123 px devices, save as medium resolution wireframe.ai, and begin adding elements.

Create a header wireframe 750 wide by 130 high at top-left, then add a 35 high navigation under it with 20% gray fill and 70% gray stroke at 2 pt.

Design the medium resolution layout by creating a centered slideshow and three stacked content boxes, using fixed widths initially and preparing responsive scaling for different devices.

Create a news feed wireframe in Illustrator by extending the artboard height, adding a news feed and footer, populate titles and placeholder text with Georgia and Verdana, duplicating four articles.

Finish the medium resolution wireframe by adding a 750 by 50 footer rectangle, adjusting fill and stroke, and aligning it to the artboard edges.

Set up the low resolution wireframe by creating a new 480-pixel wide, portrait RGB document, then save it as low resolution wireframe.ai using the save as workflow.

Wireframe the header area by drawing a 480×130 rectangle across the top, align it to the artboard, and set fill and inner stroke colors to prepare the main navigation.

Construct a navigation menu in a wireframe by placing a 480 by 35 rectangle, aligned left and 130 pixels below the header, then use three content boxes in low-res layout.

Apply responsive design to three content boxes for mobile, making them span the layout width and appear horizontally, and use transform and duplicate techniques to align and space them.

Set up the news feed area in the wireframe by adding an article title and Lorem ipsum text, then format with Georgia bold and Verdana 30 point for mobile readability.

Finish the project by adjusting artboards and creating a responsive footer within three wireframe designs, and align elements while preparing client-approved designs for the Photoshop-based design phase.

Learn to prep wireframes for three layouts by removing strokes in Illustrator and exporting clean assets for Photoshop, covering header, menu, slideshow, content boxes, and footer.

Import a high resolution wire frame layout from Illustrator into Photoshop, preserve dimensions by converting units to pixels, and save as a layered Photoshop file for modular design.

Break apart the wireframe into layers by isolating the main navigation menu with a freehand rectangular selection, then use layer via cut to create a new nav menu layer.

Isolate wireframe components into separate layers in Photoshop using marquee, magic wand, and quick selection tools, then rename and arrange them for design.

Open the logo in Illustrator, set the fill color, and apply two strokes with distinct RGB color values using the appearance panel. Prepare the logo for the Photoshop layout.

Refine the site logo by adjusting stroke stacking in Illustrator's appearance panel, then import as a vector smart object into Photoshop to enable live updates.

Update your logo by editing an Illustrator vector inside a smart object in Photoshop, then save to reflect changes back in the Photoshop layout.

Apply a solid black fill to the navigation menu using Photoshop's layer styles and color overlay, ensuring a uniform black bar across the layout.

Insert the main navigation items into the black nav bar and adjust the logo. Center Verdana text at a small size and group layers into a nav menu.

Create a Photoshop slideshow layout using clipping groups for nondestructive masking and layer management. Drop a Flickr image as placeholder, adjust with move and transform, then group and rename slideshow.

Set up the first content box by applying a color overlay background, then add a framed image with a stroke and position it precisely via free transform.

Apply the same blue color overlay to the second content box, size and center the photo using a marquee selection and clipping group, then prepare the next image.

Position and clip a photo into the content box, resize with free transform, and apply a white stroke to complete the layered design using clipping masks and layer styles.

Apply Illustrator graphic styles to the second content box text, paste as a smart object in Photoshop, and organize the content box 2 layer folder.

Set up the third content box in photoshop, apply a blue color overlay to content box 3, and prepare a cookie cutter mask for clipping the photo.

Apply the Illustrator graphic style to the third content box title, copy the text, and paste it as a smart object in Photoshop for precise placement.

Insert placeholder text into all three content boxes by creating and duplicating text layers in each box. Use lorem ipsum, Verdana 4pt, black, and place text on top.

Apply final touches to the responsive layout by adding a solid black footer overlay, duplicating the main navigation into the footer, and repositioning layers in Photoshop.

Prepare medium and low resolution wireframes by extracting content from the high resolution design, organizing components in layer groups, and removing strokes in Illustrator before importing into Photoshop.

Transfer the wireframe from Illustrator to Photoshop by matching dimensions and using the preferred import method, then save as a Photoshop file with pixel-based dimensions and optional smart object pasting.

Extract the header from the wireframe in Photoshop using the rectangular marquee to select 750 by 130 pixels. Create a new header layer via cut.

Select and refine wireframe content boxes with marquee or magic wand tools, rename layers, arrange the news feed and footer, create a background, and save as you transition to design.

Apply the high-resolution header to the medium-resolution wireframe by sampling the blue color with color overlay, dragging in the logo, and grouping header elements.

Create and tailor the main navigation menu across medium and high resolution layouts by applying a black color overlay, copying text layers, and resizing with Free Transform.

Rebuild the slideshow clipping group in the medium resolution layout, transfer the photo layer, and adjust the image with free transform to fit the slide show.

Set up three content boxes in responsive layouts, apply color overlays and copy layer styles, and move placeholder text and a vector smart object between high and medium resolution files.

Finish arranging the remaining content boxes by duplicating layer styles to boxes two and three, aligning titles and imagery, and organizing layers into groups for a clean, responsive layout.

Set a black color overlay on the footer and duplicate the top navigation above it, repositioning the menu for a clean medium‑resolution layout.

Transfer the low resolution wireframe from Illustrator into Photoshop, remove strokes, set 480 by 1358 pixel canvas at 72 ppi, and organize layers as background and wireframe for code-ready design.

Extract the header and menu from a wireframe in Photoshop using a fixed 480-by-130 marquee, then cut to new layers with Ctrl/Cmd+Shift+J and rename them.

Master how to pull out content boxes using marquee or magic wand, cut to new layers with command shift J, name them content box one to three, and finalize layout.

Finish breaking up the low resolution wireframe by selecting the correct layer, naming layer 2 as news feed, and rearranging layers above the footer, preparing for design.

Format the header in Photoshop by applying a blue color overlay, placing the logo from the medium resolution file, and aligning the navigation on the low-resolution layout.

Center the logo and align the header, then set the navigation menu overlay to black and adapt the menu for mobile with a readable, multiline layout.

Adjust the layout by repositioning content boxes and turning the navigation menu into a footer. Duplicate layer groups, move elements, and resize the canvas to remove excess space.

Set up the first content box in a low resolution layout, insert the Lorem Ipsum placeholder text, position the Emily Dickinson image and title, and resize text for handheld viewing.

Finish the low resolution layout by styling the second content box in the three content box layout, adding blue background overlays, placeholder text, and aligning photos with Photoshop guides.

Finish the Photoshop design by adjusting content box 3 in the medium resolution layout, resizing smart objects and layers, grouping elements, and saving to prepare for the coding phase.

Create a new html page by building the html, head, and body structure, save as index.html, and set up an external css file using a plain text editor.

Create an HTML file and an external CSS file, then connect them with a link tag in the head to control layout and styling.

Test the external stylesheet by applying a blue body background and refreshing the browser, then set three media queries for 480px, 481–1023px, and above 1024px to enable responsive designs.

Set up three external stylesheet media queries to detect device resolution and apply responsive CSS: a low-resolution max-width 480px, a medium min-width 481px, and a high-resolution min-width 1024px.

Test three media queries by applying body background colors at breakpoints, resize the browser window to verify 480, 481, and 1024-pixel thresholds, and prepare device-ready designs.

Use CSS comments to organize media queries, label low, medium, and high resolutions, and place rules inside each media query to keep the stylesheet readable.

Learn to build the main layout structure using HTML5 elements—header, nav, divs with IDs and classes, content boxes, articles, and a footer—driven by three media queries and an external stylesheet.

Wrap the entire layout in a master div using an id selector, enclosing all content to simplify centering and overall layout control as you build the header and navigation.

Build the main navigation menu by structuring nav, an unordered list of list items, and dummy links to simulate hyperlinks before adding real pages.

Structure three content boxes with placeholder lorem ipsum text inside paragraphs, using divs to build the raw layout for a responsive html5 and css3 page.

Learn to build a responsive news feed by structuring article blocks with h2 headlines, paragraphs, and a wrapping div with class 'news', then duplicate layouts and finish with a footer.

Copy and paste the entire nav block into the footer, including the nav element and its list items. Save, refresh, and then adjust CSS for the footer styling.

Define a fixed 960px master div in the external stylesheet, center it with auto margins, and apply a 1px border and rgb background for the high-resolution layout.

Format the header in the high-resolution layout by styling a 960px wide, 130px tall header with a gray background in the external stylesheet, preparing the wireframe before the main navigation.

Style the nav element and list items, set a 960px header with 35px height, and apply padding and margins as you prepare to convert a bulleted list into a menu.

Explore applying a compound CSS rule to nav menus, turning list items inside a nav into a horizontal, spaced inline menu and refining spacing with a vertical pipe separator.

Format the slideshow to 140 by 300 pixels, center it in the layout with margin: 0 auto, and apply a temporary gray background in the external stylesheet and media query.

Learn to design three reusable content boxes with a single CSS rule, set their width of 285 pixels, padding, and margins, and float them left to align in a row.

Format the news feed with the article element inside the news div, and apply CSS to set width 940px, 10px left margin, and 20px bottom spacing via high-resolution media query.

Finish the footer by making footer nav items inline with a compound CSS rule and remove extra whitespace using a zero bottom margin in the high-resolution media query.

Enable the medium resolution media query, set the master id selector to 95% width centered with a 1px solid border, and apply rgb gray background while staying within 481–1023 px.

Configure the header to span the 95% master width, set a 130px height, and apply a light gray background, then advance to the navigation menu.

Style the nav element and its list items to display inline for horizontal navigation, with a black background, 10px padding, and 20px bottom margin under a medium resolution media query.

Style the slide show with the style sheet's #slideShow: set 90% width, 300px height, centered, 10px top and bottom margins, auto side margins, gray background, and 1px solid black border.

Set up the content box formatting for the medium resolution layout by applying a .content-box class rule with 10px padding and 10px bottom margin to stack three boxes beneath slideshow.

Adjust the news feed layout by styling article and news sections in the external CSS, setting 95 percent width, left margin, and bottom margin for a responsive, flexible news layout.

Adjust footer to mirror main navigation by duplicating spacing and styles, fix the medium resolution bottom gap with a zero bottom margin, and proceed to the low resolution wireframe.

Learn to build a low-resolution responsive layout with CSS media queries, centering a 95% scaled master, adding borders and a white background, and implementing header and navigation.

Format the header and nav menu in a low-resolution media query, styling header and nav list items with height, background, and padding for better usability on narrow widths.

Format responsive content boxes that stack on narrow screens and hide the slideshow with a low-resolution media query, using a content box class and a wireframe background with padding.

Apply formatting to the news feed by styling the article with a 95 percent width, a 10 pixel left margin, and a 20 pixel bottom margin using the news class.

Learn to finalize a responsive footer with margin-bottom:0 in an external stylesheet, preview across desktop, tablet, and mobile, and move from wireframes to dress-up in CSS.