Master Foundation 6.5 and code 3 projects with 9 pages

Learn to build forms with input labels, text areas, selects, checkboxes, radios, and field sets, then style with a grid layout and add file upload and custom control labels.

Discover Icahn's foundation icons pack (283 icons), install them in your project, and insert icons with the i tag and a foundation class to control color and size.

Explore prototyping utilities that style components with utility classes—radius, borders, shadows, arrows, separators, typography, and list options—plus text transformation, decoration, truncation, wrapping, and display and positioning controls.

Master Foundation 6.5 float utilities to align elements left, right, or center using auto margins, with clear fixed to maintain the document flow, demonstrated in practice.

Master foundation typography using semantic markup to style paragraphs, headings, lists, quotes, code, and keystrokes without relying on classes.

Learn to create and customize buttons with anchor and button elements, covering sizes, colors, hollow and disabled styles, clear buttons, dropdowns, and icon options.

Learn to implement a close button that removes the parent element, using data-close attributes, accessible aria-label, and optional motion UI slide-out animation for a call out.

Create basic sliders and range sliders with step control, vertical layouts, and disabled states. Implement two-handle ranges, data bindings, and nonlinear value translation, plus a native range input.

Explore building flexible menus with basic, vertical, and nested styles, including right, center, and expanded alignments, active states, text items in bold, and icon placements left, right, top, or bottom.

Explore horizontal and vertical dropdown menus with single and multi-level nesting, including hover-to-open and click-to-open options. Learn to initialize with data attributes and adjust closing times to tailor behavior.

Master drill-down menus for mobile by exploring vertical navigation alternatives to drop-downs, with nested menus, auto height, parent links, and features like scroll to top and close on body click.

Create and customize a Korean-style accordion menu with triggers for submenus, indented nested items, active states on load, and single-open panes to prevent multiple sections from opening.

Build a responsive top bar with left and right sections, a left menu, and a right search input with a button, with stacking that adapts from small to extra large.

Build responsive navigation that shifts between vertical, horizontal, drill down, dropdown, and accordion menus at defined breakpoints, with responsive tapas and animated transitions for small to large devices.

Explore smooth scrolling navigation with a links menu that jumps to sections and highlights the current section by applying the is-active class, using data attributes to map targets.

Create a pagination navigation with previous and next controls, current page highlight, page numbers, and ellipsis. Enhance accessibility with semantic labels and screen-reader text, and experiment with centered alignment.

Build a breadcrumbs navigation with home, category, disabled, and current article items using an ordered list, anchors for links, and accessibility attributes such as aria-label and aria-current.

Build and configure accordions with single or multi expand and active, disabled, and all-closed states. Customize animation, deep links, and browser history to control panel open states.

Learn to use the card container with borders, padding, and header or image content, and size cards with the grid system for responsive layouts from 1 to 3 columns.

Explore the media object pattern to position a thumbnail and content, with two media items left and right, vertical alignment options, stacking for small screens, and nested comments.

Create and control off-canvas content with a toggle button and a close button. Configure direction, transitions, absolute positioning, and responsive breakpoints.

Learn to create a reveal modal with configurable sizes, nested modals, optional overlay, and accessible labeling; close via outside click, escape, or a close button, with deep linking and history.

Learn to build a versatile tabs component with horizontal and vertical taps, content panels, collapsing and height-matching, plus deep link and browser history support.

Learn to implement a responsive embed component to embed external content like YouTube, maintaining 4:3 or widescreen aspect ratios and resizing to fill available space using iframe code.

Master the label component: create basic and accessible labels, apply color variants (primary, secondary, success, alert, warning), and combine icons and text for inline labeling in foundation.

Explore building an orbit slider or carousel with image slides and captions, including navigation arrows, bullets, auto transitions, and motion UI options via data attributes.

Explore building and styling progress bars with foundation components, including colored variants and native progress and meter elements, plus accessibility attributes and inline labels.

Learn to implement a tooltip component with placements around elements, open on hover or click, customize HTML inside tooltips, and control positioning and alignment with data attributes.

Learn to implement Abide, a form validation plugin, for client-side input validation, with required fields, patterns, live validation, and accessible error messages using data-abide, aria attributes, and customizable error alerts.

Toggle classes to change colors and show or hide call outs with spin and fade animations, including close buttons, focus-triggered reveals, and multi-target toggling.

Learn to implement smooth scroll effects by linking menu items or direct links to page sections with transitions using data smooth scroll attribute, and adjust duration, easing, threshold, and offset.

Learn to implement sticky elements with a plugin by anchoring them to the top or bottom of the screen, toggling stickiness across breakpoints, and building a sticky navigation example.

Build an about section inside a card component using a responsive grid, featuring a name header, image, lead paragraph, additional paragraphs, a block quote with author, and CSS tweaks.

Update the education section, configure education cards, headings, and icons for Stanford, Harvard, Berkeley, and New York College, then adjust icons from Font Awesome.

Build the skills section of the project page using headings, icons, and progress bars, applying color classes and accessibility attributes across front-end frameworks and content management systems.