Explore semantic structure in HTML5 by using head, section, heading, grouping, and inline tags within elements, plus global attributes. Apply concepts in a lab to polish a vector corporate design.

Discover the anatomy of an HTML element by examining opening and closing tags, global attributes like id, and the role of nested elements, with a focus on lowercase conventions.

Learn how global and proprietary attributes in HTML5 work, including accesskey, tabindex, draggable, hidden, lang, title, translate, and how class, id, and style enable styling and JavaScript access.

Explore how head tags manage metadata, styles, and resources, including title, base, link, and meta. Learn script and no-script placement, plus how base affects hyperlinks and external stylesheets.

Explore how section tags define the semantic structure of a web page, using header, nav, article, aside, footer, and address to organize content without styling.

Explore grouping tags in HTML5, including p, br, hr, pre, blockquote, figure, figcaption, div, and main, and learn block-level versus inline elements, nesting rules, and semantic use.

Explore inline tags, the text level semantic elements in HTML5, and learn common inline tags like abbr, strong, code, dfn, and cite within a paragraph.

Explore inline editing tags like insert and delete, with site and datetime attributes. Understand related inline elements such as kbd, mark, q, s, sample, and small.

Learn inline tags like span, sub, and sup, use non-breaking spaces and special character entities, and apply time and br tags to format text.

In lab 1, build a simple semantic HTML5 page by structuring content into sections with headings, paragraphs, block quotes, and an address, using abbreviations.

Explore tables, lists, and images in HTML5 and CSS3, turning content into a table, building ordered and unordered lists, and incorporating GIF, JPEG, PNG, and SVG images.

Explore using HTML tables to organize tabular data with tr, td, th, thead, tbody, tfoot and caption, and learn to merge cells and style borders while understanding history and accessibility.

transform solution content into a three-column table (image, title, description), using colgroup for fixed widths (75px, 100%, 400px), and ensure a bordered, semantic table structure.

Explore how to use ordered list (ol), unordered list (ul), and definition list (dl) in HTML5, including list items, nesting, and attributes like type, start, and reversed, with practical examples.

Explore how to add and optimize images on web pages using gif, jpeg, webp, and spg formats, and master the image tag with src, alt, width, height, and accessibility considerations.

Insert header, welcome, and three product images (v convert, v prospect, v retain) into the Vector Corp page, adjusting sources and dimensions as needed.

Explore the fundamentals of hyperlinks in HTML, including link attributes, linking text and images, email and phone links, image maps, placeholders, and navigation between multi-page websites.

Explore how the a tag with href links text or images to other pages, emails, or sections. Understand default states: blue, purple, and red, and how CSS customizes their appearance.

Explore link attributes in HTML5, including href, target, rel, and download, and learn how to use relative and absolute paths to control navigation and resource linking.

Learn how to create mailto and tel links in HTML to launch the default email client or phone dialer, with prepopulated subject, body, and recipients.

Create image maps by defining hotspots with map and area tags, using shapes and coords to link specific image regions via use map.

Learn the basics of CSS, including external, embedded, and inline styles, selector types and level 1–3, and apply properties like background, box, border, list, and positioning to format pages.

Learn how CSS provides design and structure, separates content from design through semantic markup, and centralizes styling across pages, from 1997 origins to modern modules like grid, flexbox, and transitions.

Create style rules in an external stylesheet, link it to your HTML, and use class selectors to apply properties like color and font size to page elements.

Explore external, embedded, and inline style definitions, learn their use cases, and understand cascading precedence and debugging with browser developer tools.

learn css level one selector types, including class, id, and type selectors, plus grouping, descendant selectors, and pseudo classes (active, hover, link, visited) and pseudo elements (first letter, first line).

Explore CSS level 2 selector types in practice, including type, class, and ID selectors, pseudo elements like first letter, and descendant, multiple, and hover interactions with underline.

Explore CSS level two selectors, including universal selector, descendant and child selectors, and adjacent sibling selectors. Learn attribute selectors and pseudo elements like after and before, plus first-child and focus.

Explore CSS level 2 selectors through a vector corp page, applying universal, pseudo-element, last-child, adjacent sibling, and attribute selectors to style links, forms, and typography.

Explore css level 3 selectors by styling a fictitious contact form, using first-of-type, last-of-type, and not selectors. Learn to target mailto links, ends-with and contains patterns, and empty elements.

Explore the five core background properties—color, image, position, repeat, and attachment—and learn how shorthand, size, clip, and origin refine how backgrounds render on web pages.

Explore CSS block properties from level 1 to 3, including word spacing, letter spacing, line height, vertical and text alignment, whitespace, text transform, and text overflow control.

Explore the CSS box model and its properties, including width, height, padding, border, margin, background color, and overflow. Learn how min and max width and height influence layout and clipping.

Learn to control marker appearance in CSS using list-style-type, list-style-image, and list-style-position. Use the shorthand list-style to combine image, position, and type, including custom images.

Style the Vecta Corp site with css to center the layout and cap width at 960 pixels. Link a stylesheet and apply consistent rules across index and other pages.

Explore CSS layout and positioning concepts, from the 960 grid system and floats to the box model, then create text columns and prepare for flexbox and grid layouts.

Explore how grid systems shape design across architecture, city planning, graphic design, and web layouts, tracing the modern typographic grid and Swiss style from postwar practice to contemporary websites.

Discover how grid systems in web design establish a consistent, logical layout, organize content with columns, reduce visual chaos, and guide proportions, whitespace, and margins for a modern, clean site.

Explore how 12-column grid systems organize web layouts, using gutters, margins, and the 960 grid for scalable, chaos-free designs built from the box model.

Overlay the 960 grid system, a 12-column grid, onto a Photoshop prototype to visualize header, nav, content, sidebar, and footer within a 960-pixel width.

Learn to create multi-column text using CSS3 properties column-count, column-width, column-gap, column-rule, and column-span to structure paragraphs into three columns without floats.

Explain the five CSS positioning modes—static, relative, absolute, fixed, plus left, right, top, bottom—and how overflow and clipping regulate content, with examples of static vs relative and absolute navigation.

Structure a web page in Brackets using the 960 grid system, building a container and semantic sections (header, nav, section, aside, footer) with a linked stylesheet.

Explore advanced CSS features, including web fonts, sprites, navigation menus, accordions, and visual effects with transitions and transforms. Learn backward compatibility and print-friendly layouts for broader browser support.

Review essential third-party CSS and HTML tools, including normalize.css, HTML5 boilerplate, CSS lint, CSSmatic, Can I use, HTML5 shiv, color hex resources, and cheat sheets for cross-browser consistency.

Master the @font-face selector to embed custom fonts, define font-family, and specify the font source. Compare Google web fonts and Adobe Edge web fonts for flexible typography.

Browse Google web fonts to style sites by selecting font families and weights (400 and 700), embedding the css link, and applying font-family in your stylesheet.

Discover how CSS sprites reduce front-end load time by combining many icons into a single image, compare sprites with fonts and icon libraries, and learn practical implementation trade-offs.

Explore CSS transforms that change size, shape, and position using 2d and 3d methods like rotate, rotateX, rotateY, scale, translate, skew, and transform-origin, with matrix, hover examples, and Safari prefixes.

Explore CSS animations with keyframes and from-to or percentage-based sequences, using the shorthand animation property to control delay, duration, direction, iteration count, timing function, name, and fill mode with prefixes.

Explore css filter properties to blur, adjust brightness, contrast, hue, opacity, saturation, grayscale, sepia, and drop shadows on web page elements using CSX, with broad browser support except IEEE.

Explore building an advanced web page layout with html5 and css3, featuring a vector corp site, multi-tier navigation, image gallery hover effects, and a carousel powered by cssx and animations.

Design a print-specific stylesheet to produce a clean, print-friendly page by linking a separate CSS, hiding headers, navigation, and footers, and applying serif fonts with adjusted margins and padding.

Explore the flex box layout module, which efficiently lays out a line and distributes space among items even with unknown or dynamic sizes, and supports responsive design and grid layouts.

Explore flex box terminology, including flex container and flex items, main and cross axes, and main and cross sizes, with examples of flex start and end, gaps, and direction.

Learn how to build with flexbox by outlining and applying container properties like display, flex direction, wrap, and justify content, then control items with order, flex, and align-self.

Build your first flex box layout by creating a navigation menu inside a flex container, with divs as flex items and horizontal/vertical layouts via flex direction row and column.

Explore how flex grow, flex shrink, and flex basis determine how remaining space is distributed among flex items, and how the shorthand flex property simplifies these dimensions.

Explore how to align flex items horizontally using the justify-content property to distribute space along the main axis with values like flex-start, center, space-between, space-around, and space-evenly.

Master vertical alignment of flex items along the cross axis using flex-start, center, flex-end, stretch, and baseline; control with container height and line items properties.

Use the order property to rearrange flex items and customize navigation menus, and explore responsive design scenarios where the menu moves above or beside the logo using flex layout.

Build a responsive page with flex box by making the main container a flex container, enabling wrap in a 960-pixel layout, and styling figure, nav, and sections with precise widths.

Turn a container into a grid with display grid, then manage grid container and item properties, including grid template columns, rows, areas, gaps, and alignment.

Create a grid layout by turning a container into a grid, define grid-template-columns and grid-template-rows, and use grid-template-areas to arrange header, sidebar, content, and footer.

Learn how to structure grid items with named lines in CSS, compare it to the numbered lines method, and understand when this approach is appropriate for a project.

Explore the twelve column grid concept, a simple alternative to the numbered lines method, using span to size grid items within a 12-column system and compare to the 960 grid.

Apply grid layout to recreate the Vector Corp site, adding a logo header, nav, sections, client testimonials, and footer, all wired through a styles.css with template areas.

Build an advanced HTML5 and CSS3 grid layout with a top logo, right navigation, and a centered call to action. Organize blog posts and featured products using grid template areas.

Create a grid layout for a product site with a top header (logo and navigation), a main image with text and a call to action, and four featured buckets.

Build a fixed left sidebar grid layout with a right content area containing a header, title, main image, product images, and a footer using grid techniques.

Create a headline and gallery grid layout with a logo, navigation, and call to action, featuring a 3x3 image grid with lazy loading using CSS grid areas.

Create a three boxes grid layout for featured products with a top logo and navigation, a central featured item, and bottom product boxes, using grid areas and grid template columns.

Explore how responsive web design uses one content, one codebase, and fluid layouts to adapt a site from desktop to mobile viewports with dropdown navigation.

Apply the target-by-context formula to type, converting pixel sizes to em or percent units. Explore CSS3 viewport units—vh, vw, vmin, and vmax—and how they support responsive typography.

Balance imagery in responsive design by using optimized pngs and considering data usage; implement responsiveness with max-width, height auto, and the picture tag to swap images by viewport.

Learn how to make traditional HTML tables responsive with CSS by switching to a single-column layout below 479px through a media query, turning rows into blocks and auto-sizing columns.

Media queries empower responsive web design by adapting the entire layout across devices, using the meta viewport tag and breakpoints to switch styles without changing content.

Test responsive sites on real devices to ensure compatibility across modern and old devices. Use device simulators only as a fallback, and leverage Chrome's device toolbar to preview multiple sizes.

Discover essential resources for responsive design, including articles, responsive design weekly, mobile-first and progressive enhancement concepts, and frameworks such as skeleton, bootstrap, foundation, cubism, and less.

Turn a grid-based vector Corp site with template areas into a responsive layout using media queries, switching to one column under 768px and centering the logo and navigation.

Learn to make a navigation menu responsive using the responsive menu plugin with jQuery to create a dropdown mobile menu and tune the switch width to 768px.