Build World-class websites with HTML5, CSS3, and Bootstrap

Learn the basics of css, the birth of css, the separation of content and presentation, and how css enables clean, reusable style rules across elements and pages.

Learn how to link CSS to HTML using inline styles, internal style sheets, and external style sheets, and apply best practices for reusable, accessible styling.

Learn how to use the class selector to style elements with a specific class name, using a dot prefix, and apply blue, uppercase styles to paragraphs with class special.

Learn how the id selector targets an element using a unique id attribute, prefixed with a hash, and apply styles such as padding and background color, contrasting with class selector.

Group selectors in CSS by separating names with a comma to target multiple elements, using element, class, and id selectors, and apply the color property for red or blue text.

Demonstrate how the universal selector (the asterisk) applies styles to all elements, then refine by targeting a section, a content class, and an id to control colors.

Explore attribute selectors in css, using the ends-with $ selector to target hrefs like .com and .org, and use class contains selectors to style elements with cycle, orange, and bold.

Discover how the adjacent sibling combinator (the plus sign) targets the next p tag and apply text alignment and blue or red color changes to subsequent elements.

Explore how the child combinator selects direct children using the greater-than sign, demonstrated with a p tag and its span elements and the resulting padding and layout changes.

Explore the active pseudo-class, which styles elements such as links and buttons after user activation, and practice applying a:active to anchors to change color and background on click.

Discover how to use the :checked pseudo-class to style radio buttons, checkboxes, and select options, and apply adjacent sibling selectors to color labels.

Learn to use the disabled pseudo-class to target and style disabled form inputs with an attribute selector, build example inputs, apply the disabled attribute, and observe background color changes.

Explore the css :empty pseudo-class to target elements with no children or whitespace, and apply height and background color to visibly highlight emptiness in html5 and css3 layouts.

Learn how the enabled pseudo-class targets enabled form elements to style activation, selection, or typing. The lecture shows applying enabled and disabled selectors using name attributes and background color changes.

Learn how the first-child pseudo class selects the first child among siblings within a parent and apply styles in section and div examples with a black background and yellow text.

Learn how the first-of-type pseudo-class targets the first element of its type among siblings, and apply selectors like section p to style the initial paragraph with css.

Apply the focus pseudo-class to input elements to style the focused state, using two text fields and CSS that turns the background black and text red when active.

Explore the hover pseudo-class for anchor tags, triggering a hover state that changes background to yellow and text to red. Discover using class, id, or attribute selectors, and link-visited-hover-active order.

Learn to use the last-child pseudo-class to target the final list item in nested unordered lists. Apply color and background changes with the last-child selector in CSS.

Learn how to use the last-of-type pseudo-class to target the final p inside an article, applying color and background changes to illustrate the effect.

Explore the a tag and href attributes to create two links, apply color and background styles, and observe visited versus unvisited states as the color changes from yellow to purple.

Learn how to use the nth-last-child selector to target elements from the end, apply odd and even values, and style specific items with background colors.

Learn how the nth-of-type pseudo-class matches elements by type among siblings and counts from the start to target specific elements, such as spans and headings.

Learn to use the after pseudo element selector to insert cosmetic content with the content property, applying it to paragraphs and lists to show checkmarks, crosses, and colored text.

Learn to style the first letter of a block with the CSS first-letter pseudo-element by applying a class, adjusting font size and color blue, and observing changes in real time.

Learn to use the first-line pseudo-element selector to style the first line of a block element, applying color and uppercase text to paragraphs with a first-line class.

Explore the basic box model and the overflow property. Learn overflow-x and overflow-y, and how visible, hidden, scroll, and outer values control content on block-level elements with a set height.

Learn how height, max-height, and min-height control element size in css, including how height excludes padding, borders, and margins, and how content growth affects overflow.

Master how width, max-width, and min-width govern an element's size in the box model, using pixels, percentages, and overflow behavior to ensure responsive layouts.

Master the basic box model by learning how the CSS margin property controls top, right, bottom, and left space, using one to four values as shorthand.

Explore how the padding property creates inside space by using its shorthand with one to four values for top, right, bottom, and left, similar to margins.

Learn to control padding on all sides using css classes, starting with padding top (pt) and a 3em value, then padding right, bottom, and left to create inner space.

Learn how the CSS visibility property controls element display with values visible, hidden, and collapse, including how hidden preserves space while collapse removes the element from table layouts.

This lesson teaches the position property and its five values—static, relative, absolute, fixed, and sticky—and how each affects an element's placement in its parent and the document.

Learn how the top, right, bottom, and left properties position a box using absolute and relative positioning, and practice offset control and centering with margins.

Learn how z-index controls stacking order for overlapping elements using positioned boxes (absolute, relative, fixed). Adjust z-index values to bring elements forward or push them behind others.

Learn how to use the CSS font-family property to specify one or more font names with comma-separated fallbacks, including quoted names and generic families like serif or sans-serif.

Explore the font shorthand and its properties, with font size and font family required, then apply six font values to HTML elements to see varied typography.

Learn how the text-transform property controls capitalization, using values like capitalized, uppercase, lowercase, and none, and apply these with simple classes to transform text in HTML.

Learn how the overflow-wrap property lets the browser break long words and wrap text, using normal and break-word values with practical examples.

Discover how the text-decoration property decorates text with lines like underline, overline, or line-through. The caption covers the subproperties text-decoration-line, text-decoration-color, and text-decoration-style, and demonstrates solid, wavy, and dashed styles.

Explore the CSS text-shadow property by applying X and Y offsets, blur radius, and color, including multiple comma-separated shadows for text.

Learn to apply color and background-color to text and blocks using predefined keywords, hex codes, and RGB values, and understand how width and height influence the visible background.

Explore how background-repeat controls a background image in CSS, using repeat x, repeat y, no repeat, space, and round, and apply these with background-image, width, height, and centering.

Learn how the background-size property controls a background image with contain, cover, length values, and percentage values to set width and height and manage cropping, stretching, and repetition.

Explore CSS borders by learning border-width values (thin, medium, thick), border-top style and color, and the border-top shorthand. Apply borders to all sides with solid, dashed, or dotted styles.

Master the border property as a shorthand for border style and color, using thin, medium, and thick values, and apply a 6px dashed border to an element.

Learn to apply border radius to each corner—top left, top right, bottom left, and bottom right—using length units and percentages, with examples like 10px, 20px, 25%, and 50%.

Learn how to use the CSS border-radius property to round all four corners of an element with 1–4 values using length units or percentages, including shorthand variations.

Demonstrates how CSS transitions work by animating a moon-to-sun element on hover, covering transition-property and transition-duration, and showing vendor prefixes for cross-browser support.

Master CSS transitions by exploring transition-timing-function and transition-delay, including transition-duration, and experimenting with linear, ease, ease-in, ease-out, ease-in-out, and step functions through hover interactions and WebKit prefixes.

Create the HappyFood project structure with a root folder, USS and image AMG subfolders, and an index.html home page plus menu, event, and about pages, using HTML5 and Bootstrap CDN.

Build a responsive header for the HappyFood project using Bootstrap container, row, and navbar, include a logo image inside a circular anchor, and implement a mobile-friendly navigation.

Style the header in HappyFood by resetting margins, setting a font stack, adding text shadows, and applying a header background, box shadow, and responsive navigation with a mobile toggle.

Style the HappyFood page footer by updating the CSS: set background color, border radius, input width, font size, hover button effects, and white copyright text styling.

Builds the home page layout with a header, section between header and footer, a container, three cards and a main card, featuring card images, rounded circles, and centered white text.

Learn to build the HappyFood events page by updating the title, saving as events.html, linking navigation, and creating a Bootstrap-styled events list with images and descriptions.

Learn to style the events page with bootstrap components, applying a white background to list items, adjusting heading fonts and text color, and adding responsive image borders and shadows.

Style the about page by removing the contact link from navigation, customize the about card colors, and remove the text shadow to prep for the next menu lesson.

Build the menu page using Bootstrap cards, set the title to our menu with the subtitle delicious food to feed and taste, and add starters, soups and salads, and steaks.

Style the menu content with layered cards and rows, adjust colors, borders, shadows, and typography, apply responsive media queries, update the navigation active state, and set page-specific background images.

Test the new website on multiple mobile devices using the browser's device toolbar, verify menus and rotations on various phones, and ensure the events page navigates smoothly.

Update site typography by adding a Google font spectral, embedding the link, and adjusting navigation, circle card text, and main card titles with responsive font sizes.

Create the Zoolland zoo website project structure with eight pages, including plan your visit, meet the animals, tickets, and donate, plus root, image, and styles folders.

Create a responsive header with Bootstrap’s navbar and container, enabling a mobile collapse toggle and a full-width header with a nav list including plan your visit, tickets, membership, and donate.

Build the before content on the home page with a top section and full-width background image, plus a responsive 12:7 card offering tickets and a book tickets button.

Style the before content in Zoolland by centering a no-repeat background image with cover, while designing the card with cursive fonts, shadows, and Bootstrap overrides.

Learn how Zoolland styles the before content (part 2) using media queries to adjust the main image container min-height, before content margins, heading sizes, and opacity.

Build four cards on the home page, adjust borders and background colors, and structure content with Bootstrap card components, including card title, card text, and a learn more button.

Style the cards by adding image backgrounds and color-coded backgrounds for red, orange, blue, and green cards, and tailor button styles, typography, spacing, and responsive media queries for mobile layouts.

Zoolland shows building and styling a homepage footer, creating a nav bar footer with an inline link list including plan your visit, tickets, membership, and donate, and CSS basics.

Build the visit page content with a bootstrap grid—container, row, no gutters—two columns featuring tickets, pricing, and a get membership call to action.

Style the visit page content with targeted selectors, media queries, and responsive image sizing to create a polished mobile-first layout.

Build and style the right column on a visit page using bootstrap grid by adjusting padding and margins, then add an announcement section with event containers and a donation box.

Style the right column of the Zoolland visit page by applying typography, colors, borders, and shadows to the event container and donation box.

Build the animals page for Zoolland by creating a responsive Bootstrap card grid with images and a card body to showcase more than 230 species.

Style the animals page by adding the image to before content section, applying the animals class, and refining the layout with media queries, text shadow, and a green card background.

Build a tickets page by updating titles and content, then create a responsive column layout with Bootstrap classes, linking to daily pass, daily pass plus, and annual pass options.

Style the Zoolland ticket page by applying before content and main content, creating three orange, red, and blue ticket cards with image backgrounds and icons.

Builds a Zoolland type-pass page with tickets and prices, including day pass and age-based pricing, using a Bootstrap grid and add-to-cart interactions.

Finish the page by adding the census and styling the type pass row with rgba backgrounds, and set the first and last p elements' font sizes and input width.

Build the cart page for the Zoolland project using a bootstrap-like grid, turning day-pass details into a shopping cart with item, price, quantity, total, and remove, plus an update button.

Create a responsive cart page layout using Bootstrap grid, featuring subtotals, tax, shipping, and total with clear action buttons for continuing shopping and checkout.

Testing a mobile-optimized zoo website across pages like home, tickets, membership, and meet the animals, resizing windows, refining borders, and ensuring navigation works demonstrates practical site validation.

Create a header with a logo and search box, and build a left-aligned navigation using Bootstrap nav components, container-fluid, and form inline for responsive layout.

Style the header and navigation on the home page by configuring body margins, fonts, shadows, and the search box, then implement responsive media queries for mobile nav links.

Build a home page content section with Bootstrap grid and list group, adding a top stories heading, bordered list items with bullets, and duplicated sections for politics, technology, and food.

Style the home page header and navigation bullets using list group items, hover effects, and circular bullets with transparent backgrounds, pointer cursors, and emphasized typography.

Continue building the home page content with Bootstrap, adding a left wrapper with padding and borders, then implement a top-aligned media object with a rounded image and a linked heading.

Create the home page footer with bootstrap styling and a top border, centering a navigation list for privacy policy, terms of service, and about; add padding and margin for spacing.

Create the U.S. page by configuring spotlight images, text sections, and top stories with Bootstrap media objects, while updating navigation links and applying responsive styles.

Learn how to build a post detail view with bootstrap, linking the detail page, updating images, removing extra media, and inserting a responsive statue image with proper classes and attributes.

Build a detailed content view by adding last-updated metadata, location, and a structured article body with multiple paragraphs, plus a Bootstrap card deck showcasing images, titles, and timestamps.

Build a breadcrumb component with a nav and an ordered list, create breadcrumb items, link home and US pages, set active state, and test navigation on the detail view page.

Link the site's pages, create new posts and detail pages, and set active states and titles for sections like politics, business, technology, health, entertainment, sports, food, and travel.