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

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 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.

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.

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.

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 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.

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.

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.

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 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.

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 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 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.

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.

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.

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.

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%.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.