HTML5 and CSS3 - Essential Training

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 heading tags from h1 to h6, organized in section order per W3C guidelines. Use at least one h1 for SEO, and adjust sizes with CSS.

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.

Explore less used HTML table features, including the call and call group to define columns, and thead, tbody, tfoot and caption for semantic structure, with border attribute basics.

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.

Transform a block of manager names into a structured list using ul, li, and optional numbering in vector corporation lab, exploring bullet, ordered, and roman numeral list formats.

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 to create links for text and images using anchor tags, and build a navigation menu linking to about us, solutions, support, and contact us, with target attributes.

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 and link to placeholders within a page using ids and hash anchors, enabling sub navigation to sections like v prospect, v convert, and v retain.

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.

Discover how CSS delivers consistency, responsiveness, and performance through external style sheets, semantic tags, and powerful selectors and pseudo-classes for clean, accessible web design.

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.

Discover css level 3 selector types, including general sibling selectors, attribute selectors with ^ $ *= operators, and pseudo-class selectors for forms such as checked, disabled, enabled, required, valid, and invalid.

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 css font properties, including font-family, font-size, color, font-style, font-weight, font-variant, and text-decoration; learn shorthand usage, color formats, web fonts, and opacity for styling text.

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.

Master css border properties to set width, style, and color for all sides or individually; outline avoids adding box dimensions while border radius and box shadow add curves and depth.

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.

Explore css positioning properties such as static and relative. Manage display, visibility, and float to shape layout, overflow, clipping, and the box model, including grid and flex box.

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 grid systems as a two-dimensional structure of intersecting lines that organize content and achieve balance in web design, guiding layout with the box model.

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.

Master traditional page layout by applying float and clear within the box model to create multi-column boxes, control left and right float behavior, and implement liquid layouts with responsive considerations.

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.

Create multi-tier navigation menus using nested unordered lists for vertical and horizontal layouts with hover to reveal submenus, applying relative and absolute positioning to place nested items.

Build accessible accordions using a definition list and CSS3 selectors, expanding panels with :target and not() while collapsing others via overflow hidden and clickable headings.

Explore csx transitions to animate width, height, color, and visibility with duration, delay, and timing functions, including hover and accordion examples, with Safari support via WebKit prefix.

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.

Learn to make web pages backward compatible with older Internet Explorer versions using html5shiv. Apply conditional comments to load the shiv for IE9 and below, enabling HTML5 semantic elements.

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.

Shift focus to structuring with flex box layout, learning flex properties, horizontal and vertical alignment, wrap, and item order to build a simple navigation menu and the Vector Corp layout.

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.

Learn how to wrap flex items with the flex-wrap property, including no wrap, wrap, and wrap-reverse, and align wrapped lines using align-content.

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.

Explore grid layout as a revolutionary way to structure sites, using template areas, named and numbered lines, and the twelve-column concept to build layouts in labs.

Explore CSS grid terminology, including grid container, grid items, grid lines, columns, rows, tracks, cells, areas, and gutters, to understand two-dimensional layouts for web pages.

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.

Discover how to align grid items and grid tracks using justify content, justify items, justify self, align content, align items, and align self for centered and evenly spaced layouts.

Learn grid layouts by using numbered lines to position items precisely. Build layouts by defining row and column tracks with numbers, and compare this approach with template areas.

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.

Learn to build responsive web designs with css3 media queries and fluid layouts. Explore responsive type, images, tables, and navigation, and test across devices with a mobile menu plugin.

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.

Explore the ux of the modern web by comparing mobile first and desktop down approaches, retrofitting vs rebuilding, and progressive enhancement versus graceful degradation for responsive design.

Explore responsive web design fundamentals with a flexible grid and imagery, using percentages, margins, and media queries to build adaptive, device-independent layouts.

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.

Explore how flat design reduces asset footprint in responsive web design, focusing on simple, asset-efficient visuals that load quickly across devices, illustrated with Bootstrap and Twitter examples.

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.