HTML5 Elements & CSS3 Properties Bootcamp, V2

Discover the basics of front end web development, differentiating front end from back end, and focus on HTML and CSS as the course's core, with JavaScript's role explained.

Learn that HTML stands for Hypertext Markup Language and provides the content for websites. Observe how browser developer tools display the left-side HTML to reveal elements and headings.

Learn how CSS, or cascading style sheets, styles HTML by controlling color, font family, font size, layout, and a CSS custom property, enabling responsive design.

JavaScript adds interactivity to web pages by controlling a hamburger menu that shows and hides links, with the code hosted on GitHub and examples in HTML, CSS, and JavaScript.

Install Google Chrome and Firefox Developer Edition as the primary browsers for this bootcamp, enabling smooth progress through flexbox and grid lessons.

Open a folder in VS Code to start setup and explore the interface. Enable font size 18, tab size 2, word wrap, and format on save, and install necessary extensions.

Install and configure key Visual Studio Code extensions, including Live Server, Prettier, and CSS color highlight, and customize user settings to format and organize code.

Explore the basics of HTML in this beginner section, from opening a folder in VSCode to creating an HTML file and learning the building blocks and elements with practice activities.

Create an HTML file in VS Code by using the explorer, selecting new file, naming the file, and adding the .html extension for browser compatibility and SEO.

Review how to create an html document and boilerplate with Emmet, generating the html skeleton and lang attribute, and using the main element as a key styling foundation.

Explore the head element in HTML, covering the character set (UTF-8), the meta viewport for responsive scaling, and the title tag, with the head as the first HTML section.

Learn how the style element styles the body content with CSS, leverage emmet abbreviations to create a declaration block, and apply colors like light gray or light coral.

Discover how the body element serves as the container for all visible HTML content, using parent and child terminology and the inspector to understand structure and readability.

Explore the HTML heading elements from h1 to h6, their size and boldness, and how Emmet shortcuts generate headings. Learn to add single-line and multi-line HTML comments for code documentation.

Practice creating the most important heading with an h1 and add HTML comments, including a clear example that says this is an HTML comment, to reinforce core HTML concepts.

Learn to attribute classes and IDs to semantic HTML by building header, main, and sections named hero, about, services, and news, plus a footer, using Emmet shorthand.

Practice four guides you to redirect viewers by using an anchor with href and target attributes, open links in a new tab, and semantically group content with a section.

Discover how semantic elements in HTML convey meaning for search engines and screen readers, explore MDN resources, and learn key elements like main, nav, header, section, article, details, and figcaption.

Explore core semantic elements like main, section, article, and aside, and learn how H1, paragraph, figure, fig caption, and footer structure content with href links and forms.

Explore HTML multimedia elements, including images, audio, and video, and learn to structure content with lists and tables while applying semantic HTML for clearer pages; practice activities reinforce learning.

Explore the figcaption element as the accessible, semantically correct caption for images. See how to pair a figure, image, and caption with descriptive text that goes beyond alt.

Caption an image using a semantically correct figure with an image src attribute, alt text, and a figcaption, using free resources like Pixabay or Unsplash.

Embed audio files on web pages with the audio element and its source attribute, provide the file path, and enable controls to play and adjust the volume.

Create an ordered list outlining steps to learn front end web development, including learn HTML, learn CSS, and learn JavaScript, as fundamental skills for aspiring developers.

Explore unordered lists (ul) and list items (li), compare them to ordered lists, and learn how CSS styles bullets and discs for design-minded web layouts.

Create a shopping list using a h2 title and a ul with li items, demonstrating semantic html with items such as green tea, chocolate, cooking oil, oil, and bread.

Practice creating an HTML description list with a heading 'animals eating patterns', using dt and dd pairs for term and detail, such as hippo and omnivore.

Explore the HTML table element for displaying tabular data with semantic structure. Use thead, tbody, tr, th, and td to define headings and rows, with styling to come in CSS.

Learn to integrate Font Awesome icons via a CDN, choose free icons, and implement them with the i or span element using proper classes.

Explain the header element and its semantic role in a website header, and show how images and navigation can live within it.

Nest the nav element inside the header to create website navigation. Build an unordered list with anchor links to sections such as about and services.

Recreate practice activity 11: a header navigation with a logo anchor and a five-item nav list featuring home, about, solutions, pricing, and contact.

Learn how the main element displays the main content of an HTML document, with sections and articles nested inside, and how to add an id like container or wrapper.

Explore block level elements such as side, article, and iframe, learn container elements and HTML forms, and practice building a cohesive web layout.

Learn how the HTML abbreviation element (abbr) provides context for a keyword, with the title attribute revealing the full form such as hypertext markup language when hovered.

Explore the span element, a generic inline container for phrasing content, and learn how CSS styles target the span to apply bold font weight and italic style.

Discover how the iframe element embeds one HTML document into another, and how to embed a YouTube video while adjusting its width and height.

Learn how the details element creates a disclosure widget that reveals information when toggled, with a required summary element and live-preview demonstration.

Explore html forms using the data list input type with a labeled input linked by id and for, compare to select lists, and learn about text areas and submit buttons.

Explore container and contained elements; identify main as the container and section as the contained element, and describe parent, direct child, and descendant relationships for flexbox, grid, and CSS selectors.

Identify HTML block vs inline elements using div and span, noting how a block occupies the full line while inline uses only content width and how CSS can change display.

Explore using artificial intelligence to generate HTML elements with ChatGPT and Google's Gemini. Compare prompts and outputs, analyze code, fix deficiencies, and prepare for pure HTML before CSS comes later.

Generate a simple HTML5 boilerplate using AI tools and compare ChatGPT and Gemini. Learn how each tool describes HTML elements and outputs code, guiding efficient AI-assisted web development.

Compare generating html headings with ChatGPT and Gemini, highlighting how ChatGPT adds boilerplate while Gemini outputs all six heading elements with clear hierarchy.

Compare generating HTML lists with ChatGPT and Gemini, covering types: ordered, unordered, description, and menu lists. Observe differences in code samples and the menu element as an alternative to ul.

This lesson compares generating a social media signup form with ChatGPT and Gemini, highlighting semantic form structure, labels, inputs, and validation, with ChatGPT delivering clearer, more usable HTML.

Learn the foundations of CSS by linking HTML to CSS and mastering basic colors, selectors, margins, paddings, box sizing, and display and position properties.

Discover how to link CSS to HTML using inline, internal, and external methods; learn to use a boilerplate, live server, and external stylesheet best practices.

Explore the anatomy of a CSS rule set, including the selector and declaration block, with the body element as an example, and understand declarations as property name and value.

Master the five basic CSS selectors — universal, type (element), class, id, and attribute selectors — and learn to select elements, apply styles, with Emmet and font linking tips.

Learn how to apply CSS colors to text, background, borders, and shadows using color names, hex codes, RGB, HSL, and HWB with modern comma-free syntax.

Explore how CSS height and width set an element’s dimensions using pixels and other units, and observe the box model in action with a colored background.

Master CSS padding by applying top, right, bottom, and left values with shorthand forms, and understand padding as the space around content in the box model.

Explore the CSS border shorthand to style the main, section, and paragraph elements, setting border width, color, and style while mapping the box model’s content, padding, and border layers.

Learn how border radius creates curves at each corner, using individual and shorthand values, and inspect the box model to see content, padding, border, and margins.

Discover how every HTML element becomes a CSS box and how the box model defines content dimensions, margins, and the core of CSS layout.

Learn how CSS box sizing controls element dimensions using content box and border box, showing how padding and borders affect width and height and how resets create predictable layouts.

Practice 13 teaches how to style text with CSS in a practical HTML setup, covering typography, alignment, color, underlines, and spacing, including font family choices, text transform, and line height.

Style a read more anchor by removing text decoration, using Arial, 25px font, 15px 25px padding, light sky blue background, white text, and 5px border radius.

Explore tree-structural pseudo-classes in CSS, including root, first-child, last-child, nth-child, nth-last-child, first-of-type, and last-of-type, to target elements in structured HTML.

Explore CSS location pseudo-classes that style links by state, contrast unvisited in light green with visited in light coral, and note that the active state precedes visited while clicking.

Explore css input pseudo-classes to style form elements, including text, email, number, and checkboxes; apply enabled, disabled, valid, invalid, and checked states with practical examples.

Learn CSS position layout, focusing on static and fixed values, and how top, right, bottom, and left determine element placement. See how fixed removes an element from the document flow.

Explore how the top and bottom CSS properties control vertical placement for a fixed positioned element, using examples like 100px from the top and 200px from the bottom within viewport.

Understand CSS positioned layout with relative and sticky positions, top/bottom/left/right offsets, and see how sticky becomes fixed at a 50-pixel top trigger to fix the nav element.

Learn how CSS combinators—descendant selector, child combinator, adjacent sibling selector, and general sibling—select elements by their relationships, illustrated with a container, sections, paragraphs, and headings.

Learn how CSS specificity ranks inline styling as highest, then ID, class, and type selectors, with universal selector used for resets, and why later declarations win when weights are equal.

Explore how the CSS display block converts inline elements into block level elements, enabling width, height, and vertical margins, and compare with the default inline behavior of spans.

Explore how inline-block blends inline and block behaviors, letting elements like sections respect width and height while staying on the line, and allowing spans to gain height, width, and margins.

Explore the flex property and the one-dimensional flexbox model to distribute space with a flex container and flex items. Use justify-content, align-items, and a column gap to build responsive layouts.

Master CSS display grid to create two-dimensional layouts using grid template columns and grid template rows, adjust column and row gaps, and center content with justify content and align content.

Create a header navigation with a five-item ul of anchors, then style the menu with a flex layout, hover effects, and no bullets, plus a full-screen main background image.

Create a responsive CSS grid gallery that adapts from four to one column using auto-fill and minmax. Display 12 images in figure elements with object-fit: cover.

Explore how CSS opacity controls transparency from 0 to 1, including 50% opacity, the alpha channel in RGB and HSL, and the modern slash syntax for colors.

Apply css box-shadow with x and y offsets, blur and spread radii, and optional rgba colors; combine multiple shadows with commas, including inset shadows created by negative offsets.

Master css radial gradients by defining shape, size, and position; ellipse is the default shape, and center is the default position.

Explore how the CSS transition shorthand controls duration, timing function, and delay to create smooth two-step hover animations for height, width, and background color.

Explore how the CSS transform origin sets the rotation point (default 50% 50%), and practice adjusting x, y, and z offsets to rotate an element.

practice activity shows styling an overlay to boost text contrast on a background image with css gradients, covering background properties and font family arial for readability.

Demonstrates showing text on hover by overlaying an image with a css after element, animating with transform and transition, centering the caption and toggling its opacity.

Master CSS animations by writing keyframes and using the animation shorthand to control duration, delay, iterations, direction, fill mode, and play state, with practical translateX examples.

Learn to create a three-dot loading indicator by animating scales with CSS transform, using a single keyframe and staggered delays for an infinite, smooth preload effect.

Master the CSS object-position property for inline and HTML images, focusing on a specific part by shifting the view with a default of 50% 50%.

Learn how the CSS background blend mode controls how background images blend with the background color, using modes like multiply, screen, overlay, darken, and hue.

Explore css mix-blend-mode to blend text with a background, or backgrounds with backgrounds, using options like multiply, screen, luminosity, color, and exclusion.

Explore CSS filters and the filter property to apply blur, brightness, contrast, grayscale, and drop shadow to images. Adjust pixel values and percentages, and rotate colors with 0.5 turn.

Discover four more CSS filter functions for images: opacity, invert, saturate, and sepia. Explore how these controls change transparency, color, saturation, and a warm vintage look.

Discover how the css clip-path property creates visible regions of an image using circle, ellipse, and polygon shapes, with coordinates in pixels or percentages and polygon points.

Explore CSS multi columns and compare them with flexbox and grid, then learn to create both fixed and fluid column layouts using column count, column width, and the columns shorthand.

Explore the CSS multi-column layout column-rule property to define the line between columns, using color, width, and style with separate properties or a shorthand, including light coral and dashed examples.

Adjust and visualize the CSS multi-column layout using column gap and column span. Learn how to style the column title with font size, weight, padding, background, and alignment.

Explore how the CSS overflow property controls content that doesn't fit its parent, with visible, hidden, scroll, and auto values, and apply overflow-x and overflow-y to manage scrolling.

Recreate a register form with sections, fieldsets, and labeled inputs. Style the form using grid and flex, responsive placeholders, and checkbox and terms links.

Learn to build a css-only hamburger menu with a checkbox, transforming three lines into a cross when checked, using adjacent sibling selectors, transforms, and opacity.

Convert a checkbox into a polished on-off toggle using HTML and CSS, with a before pseudo-element, color transitions, and responsive movement on check state.

Style a heading to create a text cut-out effect with CSS. Enlarge font to 300px, center the text, use background color #2F9DC9, add padding, and apply mix-blend-mode to reveal effect.

Practice 26 demonstrates styling a modal by converting a design into a flex column layout with a translucent rgba background and backdrop blur, aligning the image, form, and sign-in link.

Explore advanced css concepts including flexbox, grid, relative units, and media queries, and build responsive layouts with a mobile-first approach through hands-on code, examples, and practice activities.

Learn how flexbox distributes whitespace by turning a container into a flex container and arranging direct flex items along the main axis (horizontal) and the cross axis.

Learn how flexbox direction sets the main and cross axes, and how switching between row, column, and their reverse variants changes item flow.

Explore flex wrap by switching from no wrap to wrap or wrap reverse, so flex items in a flex container move to the next line without shrinking, enabling responsive design.

Explore the flex flow shorthand to control flex direction and wrap, with defaults of row and no wrap. Experiment with column wrap and row wrap to create flexible layouts.

Explore how align-content in flexbox positions multi-line containers along the cross axis by using wrap to create lines and values like flex-start, center, space around, space between, and space evenly.

Learn how to use the CSS flexbox gap to create vertical and horizontal spacing between flex items, using row gap, column gap, and the shorthand syntax.

Learn how the order property controls flex item ordering, with default source order, higher numbers moving items to the front, and negative values moving items left, using unique item classes.

Explore CSS grid, a two dimensional layout system more powerful than flexbox, by building a grid container with ten grid items and learning about grid tracks, lines, cells, and areas.

Explore how to create columns and rows with CSS grid using grid template columns, repeat, and the fr unit to allocate space and define grid cells.

Explore CSS grid gap and its shorthand, then define and assign grid areas with grid-template-areas to build a header, main, sidebar, and footer layout.

Master justify items, align items, and place items to control horizontal and vertical positioning within grid cells. Learn default stretch behavior and practical shorthand for centering and alignment.

Explore positioning individual grid items with justify self, align self, and place self in CSS grid. See practical examples using start and center for horizontal and vertical alignment.

Learn to span grid items across multiple columns and rows using grid column start/end properties and the shorthand; practice with real examples.

Relocate grid items by using grid column start/end and grid row start/end lines, then adjust position or span with the grid area shorthand.

Explore css relative units with a focus on the ch unit and how it scales with the html font size and the width of the zero character.

Explore the M unit as a relative typographical unit that depends on the parent font size, and learn why width and height are unreliable.

Explore viewport width and the vw unit, learning how elements scale with the viewport from five vw to one hundred vw, so images respond to window size.

Explore the vremen unit, a CSS relative measurement equal to 1% of the smaller viewport dimension, and see how setting an element width to 50 vmin scales with the viewport.

Use vmax to size elements by the larger viewport dimension. Observe that 50vmax represents 50 percent of the larger dimension, so width resizing happens when width stays larger than height.

Learn to use CSS media queries to apply styles based on viewport width and height, including min-width, max-width, and range-based conditions for responsive layouts.

Explore how CSS media queries target device orientation and input capabilities, applying landscape or portrait styles and hover or touch specific rules.

Master CSS media queries by applying and, or, and not logic with min width and orientation conditions to control styles like background color across portrait and landscape viewports.

Learn how to choose breakpoints for responsive design by identifying where layouts change, and apply desktop-first and mobile-first media queries to switch from two columns to one.

Implement a mobile-first responsive design that adapts with viewport size using breakpoints and media queries, organizing HTML into containers, sections (services, description), and content features.

Apply mobile-first CSS strategies to build responsive layouts using flex and grid, optimize containers, and implement breakpoints with min-width media queries as you scale from small to larger screens.

Practice activity 32 shows mobile-first responsive design by using media queries at 600, 800, and 1200 pixels to adjust layout, colors, and content alignment.