Code a Small Business Website using popular web frameworks

Explore how to create batch components across popular frameworks—Bootstrap, Semantic UI, Polymer, Materials, and Foundation—using span elements with batch, label, or tag classes, color variations, and collection integration.

Explore the breadcrumb component across popular frameworks, comparing ordered versus unordered lists and accessibility attributes. See how Bootstrap, Materialize, Semantic UI, and Foundation implement dividers, active items, and anchors.

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.

Explore how the message component varies across frameworks—Bootstrap alert, Semantic UI message, Materialize card, and Foundation call out—with accessible close buttons and related code patterns.

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.

Explore how utility classes across Bootstrap, Semantic UI, Materialize, and Foundation control borders, visibility, layout, and responsive embeds, including rounded images, text transforms, and screen readers only text.

Create a responsive five-page small business website with a home page featuring a language dropdown and hero, services with call-to-action buttons, about, clients, team, and contact with map.

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 an about section featuring an image, a responsive heading, a paragraph, and a primary blue button. Then test responsiveness and plan future utility-based adjustments.

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.

Build a full-width home footer with four columns: quick links, information, social icons, and a contact block with address, phone, email, plus a copyright row.

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.

Learn to adjust a small business website layout with utilities: center content, reverse section order, and apply responsive margins using flex and grid.

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.

Showcases the about clients section with twelve small images added via img tags, using the src img/400x300.png and the img-fluid class for responsiveness.

Learn to implement responsive adjustments by wrapping figures in a row and columns, resizing office to full width and client images to half, then to one third and one sixth.

Adjust the about page by applying spacing utilities, centering headings, italicizing photo captions, and adding margin to the image grid to finalize a clean, responsive layout.

Wrap the blocks in a row and apply responsive column classes: col-12, col-sm-6, col-md-4, col-lg-3, col-xl-2, to scale from full width to one-sixth width across breakpoints.

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.

Build a contact message form with icon-enhanced input groups for name, email, phone, department, and message, plus submit and reset actions, wrapped in a labeled form with required fields.

Embed a responsive google maps frame in the contact page using a 4:3 aspect ratio and an embed class, then copy the map frame code and test in the browser.

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.

Build a Bootstrap navigation bar with a brand, links (home, about, services, team, contact), and a language dropdown; collapse on small screens and fix to the top with 57px padding.

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

Create a responsive news section with a four-column grid of cards, including titles, publish times, and a read more button.

Create a responsive home footer with a stacked to two-column to four-column grid, featuring a copyright area, quick links, address, and social icons from font awesome.

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 responsive contact page with a two-column grid. Include the address and opening hours, plus a message form and map with a phone and email icons using Font Awesome.

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 navigation featuring a primary map bar, a left home link, a language dropdown, and a burger menu that toggles the map menu with is-active for accessibility.

Create a blue notification element with a title, text, and a link, within a padded container that uses a max width and the is info background.

Build a responsive what we do and who we are section. It uses a two-column grid that stacks on small screens and nests on desktop, with figures, images, and button.

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 home page footer with a photo section, a mobile-first multi-column grid, an address block, copyright information, and social links using font awesome icons.

Create a responsive team page using popular web frameworks by building a multi-column grid that adapts from one to four columns, featuring member figures, social icons, names, and titles.

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.

Review the basic setup, including a blank page, default semantic ui installation, type declaration, character set, a company name dash home title, and links to jquery and semantic ui.

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 responsive hero section with a latch image, company name, and two call-to-action buttons, converting from stacked layout on mobile to a two-column grid on larger devices.

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 about section using a nested grid that becomes two columns on larger screens and stacks on mobile, featuring an image, header, text, and a primary button.

Create a responsive news grid with four cards per row on desktop, two columns on tablets, and stacked on mobile, featuring a header, date, description, and a read more button.

Build a responsive services page with a stackable grid that stacks on mobile and reverses the second and fourth rows on screens, including image, text, and a read more button.

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.

Build a four-column grid team page with twelve centered team cards, each showing an image, name, position, and Twitter and LinkedIn links.

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.

Create a responsive contact message form with semantic ui, featuring two-column grids, name, email, phone, department, and message fields, a dropdown, submit and reset buttons, plus a map.

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.

Build the what and who section using a nested grid that becomes a two-column layout on medium and large screens, featuring a circular image, heading, paragraph, and a button.

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 the footer section for the first page by organizing four responsive columns of links, a social media row with icons, and contact information, followed by a centered copyright notice.

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.

Learn to construct the office section of a small business website by building a responsive two-column layout with an image, caption, and italicized photo credit, using padding and margin classes.

Create a responsive team page that displays 12 members in a grid with circular avatars, name, job title, and Twitter and LinkedIn links, adapting from two to four columns.

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.

build a two-column contact hours section for a small business site, displaying opening hours: monday–thursday 10 am–6 pm, friday–saturday 10 am–10 pm, and sunday 10 am–8 pm, using float right.

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.

Explore the index page's setup for a small business site, including doctype, HTML lang and dir, charset, viewport, title placeholder, and links to Google fonts material icons plus materialize assets.

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.

Explore the hiring section by building a yellow card panel message component inside a simple grid layout, featuring a heading 'we hiring' and copy text from the final project.

Create the what and who section with a responsive grid that stacks on small screens and forms two columns at large breakpoints, including image and text.

Develop a responsive footer using a four-column grid with nested grids that switch to two columns on medium screens, featuring quick links, information, social media, and contact details.

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.

Build a responsive clients section on the about page using twelve-column grid that shifts from two to three to six columns, with twelve client images and a responsive image class.

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.