Code a Small Business Website using popular web frameworks

Compare how breakpoints vary across popular web frameworks like Bootstrap, Foundation, Semantic UI, Boma, and Materialize, highlighting extra small, wide, and extra large ranges for responsive grids.

Compare button elements across frameworks, rating primary, outline, active, and disabled styles, and implement simple buttons across bootstrap, semantic framework, bulma, materialize, and foundation.

Compare button group components across bootstrap, semantic, materialise, and foundation, showing how to build accessible button groups with framework-specific classes and noting gaps between buttons.

Explore how a cross-framework card component is built across bootstrap, semantic UI, materialize, foundation, and bulma, detailing image placement, card title, content, actions, and fluid vs fixed widths.

Explore the dropdown component across Bootstrap, Semantic UI, Polymer, Materialize, and Foundation, comparing styles, behaviors, and code structure to implement a reusable dropdown menu.

Compare form fields across popular frameworks, including inputs with labels and help text, text areas, selects, checkboxes, radios, switches, ranges, file uploads, and inline search forms with label and button.

Explore how different frameworks implement responsive grid systems, comparing a 12-column and 16-column grid, with mobile-first breakpoints, rows, and columns across bootstrap, semantic UI, materialize, and foundation.

Compare and build a cross-framework pagination component using bootstrap, semantic UI, foundation, polymer, and materialize, highlighting previous and next controls, page numbers, ellipses, and accessibility features.

Compare tab components across Bootstrap, Semantic UI, Materialize, Foundation, and Burma; learn to build tab menus and tab panels, address borders, widths, enable/disable states, and initialize interactivity with JavaScript.

Explore how tooltip pop-up components differ across popular web frameworks, and learn to create, initialize, and customize tooltips with Bootstrap, Semantic UI, Foundation, and Materialize.

Install Font Awesome icons and Google web fonts, add link and embed codes, and apply font families for body and headings to style the page.

Create a responsive hero section with a jumbotron, a 730x400 image, a lead paragraph, and two call-to-action buttons (read more and contact us) inside a container.

Learn to build a styled alert component that announces hiring, with an h2 alert heading, a link, padding, and a yellow contextual alert warning inside a page container.

Create reusable news card components with header, body, and footer, format the publication date using a time element for semantic accuracy, and implement a full-width blue primary read more button.

Create a row outside each of the four sections and place two columns inside, using col-12 and col-md-6 for full width on small screens and two-column layout on medium devices.

Build an about page with three sections, including text, two feature captions, and images; start from scratch and remove default container classes to tailor your small business website.

Create a responsive our office section featuring two figures with captions, using bootstrap classes like figure, img, img-fluid, and figure caption, with two short captions for photo credits.

Learn how to adjust an account page using utilities to center headings, icons, and text, align images, and apply responsive margins with container and spacing classes, finishing a polished page.

Implement responsive adjustments for the contact page by switching form groups from stacked to two-column layouts at small, medium, and large breakpoints, wrapping address, hours, message, and map in rows.

Adjust the contact page layout by adding padding around the page, centering the heading, and floating the hours to the right while applying bottom margins for small devices and up.

Build a five-page small business website with a fixed header, responsive mobile and desktop layouts, featuring services, about, team with social links, and a content page with address and map.

Create a responsive two-column hero section with a heading, lead paragraph, image, and primary or outline buttons, centered vertically using flex utilities.

Learn to build a responsive services page using a two-column grid, with image-first stacking on small devices and reversed order on medium devices, vertically centered content, and modular rows.

Create a responsive about page clients section with 12 images in a grid, using row and column classes (six, four, two) for different devices, and ensure images are fluid.

Build a responsive team page with 12 members in a grid that adapts from mobile three-column to large six-column, featuring circular avatars, icons, and links.

Build a small business site with responsive layouts featuring a map bar, language dropdown, hero and notification components, a grid with images and a car component, and services and contact.

Build a responsive four-card news grid that scales from two columns on tablets to three on desktops and four on wide screens, with a date, title, content, and read more.

Create a responsive contact page with an address section featuring icons, opening hours, a department-select form, a message field, and an embedded Google map; include phone and email contact links.

Create an opening hours section with a heading and paragraph showing the weekly hours: Monday–Thursday 10 a.m.–6 p.m.; Friday–Saturday 10 a.m.–10 p.m.; Sunday 10 a.m.–8 p.m.

Embed a Google Maps map into the contact section using the embed code in an iframe with a four-by-three aspect ratio.

Learn to build a small business website with a responsive layout, hero section, navigation with language selector, services, about, team, and contact pages, including map integration and social links.

Create a responsive navigation with home, services, about, team, and contact links and a language dropdown that stacks on small devices, highlighting the active page.

Create a message block with a light blue border, header, and a link using a 16-column grid, then add an h2 'We are hiring' in the info color.

Create the first section of the about page with a centered 'our story' header and three paragraphs, updating the title to the company name – about.

Create the contact page opening hours section in a two-column layout with header, listing hours: Mon–Thu 10 a.m.–6 p.m. ET; Fri–Sat 10 a.m.–10 p.m.; Sun 10 a.m.–8 p.m. with lunch.

Add an embedded Google map to the contact section by using an iframe source from the share embed map dialog, then initialize the embed module with jQuery for responsiveness.

Begin with a basic foundation six installation, using a custom version with prototyping utility classes and foundation icons. Initialize foundation javascript components and add dependencies for a functional start page.

Build a top navigation bar with a brand, menu items, and a dropdown. Link items to index, services, about, and other pages, with a JavaScript-driven dropdown for a functional layout.

Build a responsive hero section with a large image, lead paragraph, and two styled buttons, using a two-column layout that stacks on small screens and a custom hero background.

Set up a full-width hiring section using a vertical grid with padding and one column. Create a warning callout with a 'we're hiring' heading, a paragraph, and a linked anchor.

Create a four card news index that stacks on small screens and expands to two columns on medium and four on large, with headings, time, and a read more button.

Build a responsive services page using a grid container with two-column layouts, alternating row order via flex row-reverse, including images, headings, paragraphs, dividers, and read more buttons for each service.

This lecture covers creating the about page, duplicating the services page, renaming it company about, updating the active page, and adding a story heading with paragraphs.

Duplicate the current page to create the contact page, set the title to company name contact, activate the contact tab, and add a grid-based address section with the Florida address.

Design a responsive contact section using a grid system that stacks on small screens, becomes two-column on medium devices, and pairs a left-hand message form with a right-side map.

Create a responsive navigation with a top bar, brand logo, language dropdown, plus a collapsible left sidebar and hamburger menu for smaller devices; initialize dropdowns and sidebar with JavaScript.

Create a responsive hero that stacks on small devices and forms a two-column grid on larger screens, with an image left, white text on red, and clear call-to-action links.

Create a responsive services page by building a two-column grid with push and pull techniques to swap elements on medium devices, and add images, headings, text, and a button.

Duplicate the services file to create the about page, rename it to about, and insert a story heading with three paragraphs while updating the active navigation to about.

Create the about page's office section by adding a two-column layout with an image captioned in italic, a descriptive paragraph, and responsive styling using data row and grid classes.

Create a responsive team page using a grid that scales from two to three to four columns, featuring twelve employees with circular avatars, names, titles, and Twitter and LinkedIn profiles.