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.

Adopt Visual Studio Code as your programming environment, download and install it across Windows, Mac, or Linux, and enable the open with code context menu for easy access.

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 a new project folder in Windows, name it, then open it in VSCode by right-clicking and selecting open with VSCode; uncheck the welcome page for faster launches.

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.

Master creating your first webpage in VS Code, generate the html boilerplate with Emmet, and go live in the browser with the Live Server.

Explore the head section by examining the title tag, the meta viewport tag, and the meta charset UTF-8, and see how saving changes updates the browser.

Learn the anatomy of an HTML element, from opening tag through content to closing tag, and how attributes, especially class as key-value pairs, shape styling in css.

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.

Explore HTML attributes by examining elements like h1 and h2, learn how id attributes should not repeat, and use flexible class attributes for styling with naming conventions.

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.

Explore the paragraph element, its role in providing site descriptions, and how to use the p tag with browser default styles, including lorem placeholder text via Emmet for prototyping.

Create two paragraphs: one with conventional dummy text and another with 50 random words, then view the solution in a live server.

Learn to use the anchor element in HTML to create links with href, point to external resources, and optionally open in a new tab with target blank.

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.

Display images with the HTML image element by using src for local folders or online files, and alt text for accessibility when loading fails.

Explore the figure element as a container for images in HTML, learn how to provide a caption with the image, and understand its relation to src and alt attributes.

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.

Explore how the video element embeds a media player, uses a source with a path and a video/mp4 type, enables controls, and sets width to 1200 pixels.

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.

Explore HTML ordered lists, including ol and li, with start, reversed, and type attributes for numbers, roman numerals, and letters, emphasizing semantic markup over CSS styling.

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.

Explore how the HTML description list (dl) uses description term (dt) and description details (dd) to present semantic key-value pairs for glossaries and metadata.

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.

Create an endangered animals database using an HTML5 table, including a table head and table body with rows for animal name, habitat, and population.

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

Learn to use the HTML blockquote element to semantically present quotes, with a source via the site attribute and a footer for attribution.

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.

Learn how the section element, with its heading and dependent main element, is created using wrap with abbreviation, and how changing section order reshapes a website's structure and meaning.

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

Create an article element by typing the word article and pressing enter, then add a title (H2) and content inside to structure your page.

Learn how to use the aside element inside a main content structure, including an article titled imagination beyond belief with an aside titled check out our other posts.

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.

explains how the div element serves as a block-level container in HTML, enabling layout control with CSS using flexbox or grid for precise page positioning.

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

Explore how the picture element enables responsive images by using multiple sources with media queries and a fallback image, adjusting visuals for different screen widths and device pixel ratios.

The script element embeds JavaScript in HTML, inline between its tags or via an external file using the src attribute. Place inline code at the end of the body.

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

Learn how the footer element creates a website footer and holds the logo, links, and contact information. Compare its semantics to nav and anticipate CSS styling for footers.

Discover how HTML forms work by using common form controls: text, email, password, number, range, date, time, checkboxes, and radios, plus placeholders and basic validation.

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.

Learn to group form controls with fieldsets and legends, build radio groups with names and labels for HTML, CSS, JavaScript, and Python, and wrap controls in divs to stack vertically.

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.

Build a semantic mini project using HTML elements, divs and BEM naming, practicing structure from top to bottom, and preview how CSS will style it for a responsive layout.

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.

Compare how ChatGPT and Gemini generate semantically captioned HTML using the figure element and image, highlighting accessibility, optional CSS, and maintainability for screen readers and search engines.

Compare how ChatGPT and Gemini generate HTML semantic elements, evaluate descriptions and completeness, and learn to apply semantic elements like header, nav, main, section, article, aside, and footer with caution.

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.

Compare how ChatGPT and Gemini generate an HTML table with test data, examine semantic structure using table, thead, tbody, tr, th, and td, and note styling differences from internal CSS.

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.

Explore browser default styles, inspect HTML elements and CSS in dev tools, and learn how to override browser defaults with specific CSS properties and values, noting browser differences and specificity.

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 CSS background images: set container size, apply a URL image, and use contain or cover to maintain aspect ratio, plus control repetition and positioning for responsive views.

Explore absolute length units in CSS, including centimeter, millimeter, pica, and points, with pixels as the computed unit and a 16-pixel browser font.

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.

Explore the css box model, including the relationship between content, padding, border, and margin, and how to reset and apply margins with shorthand.

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.

Learn CSS user action pseudo-classes such as hover, active, focus, and focus within, and how mouse and keyboard interactions drive styling for links and form controls.

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.

Explore css positioned layout by mastering left and right with fixed elements, edge references, and pixel offsets; learn how negative values move elements in and out of the 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.

Position absolute removes an element from the normal flow and anchors it to a reference point, enabling placement with top, bottom, left, or right.

Explore how css pseudo elements, including first line, first letter, selection, and placeholder, enhance styling with before and after; apply transitions and absolute positioning for interactive effects.

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.

Style a table using HTML and CSS, building the table head and body, applying colors, padding, and typography, and using border-collapse and the not pseudo-class to target cells.

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.

Learn how the CSS display property controls block and inline layout, explain that section elements default to block in the browser, and show switching to inline to alter element behavior.

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 CSS shadows, gradients, transitions, transforms, and animations to bring websites alive, then learn CSS multi-column layouts and practical practice activities to solidify concepts.

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.

Learn how text shadow differs from box shadow by applying shadow to textual content, using offset-x, offset-y, blur radius, color, and browser defaults.

Explore how CSS linear gradient creates a background image that transitions colors along a straight line, from tomato to teal.

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

Explore how repeating linear gradients fill containers by repeating color stops, and create repeating radial gradients with a circle at the center, using percentage and pixel stops in css.

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 CSS transforms by rotating, translating, scaling, and skewing elements with the transform property. Rotate along z, x, and y axes and use standalone transform functions for two-dimensional effects.

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.

Learn how to animate a link with css by turning the anchor into an inline-block, adding padding and a hover transition with a transparent 1px border to avoid layout shift.

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.

Learn to build a wiggle button with CSS animations by applying an animation on the button, crafting seven-step keyframes, and adjusting transform-origin for accurate left-right wiggle.

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 to preserve image aspect ratio with CSS object-fit for inline images, using cover and contain, adjust with object-position, and maintain aspect ratio by specifying a single dimension.

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.

Explore the CSS backdrop-filter property, which applies blur and color shifting to the area behind an element and requires partial transparency to reveal the background.

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 CSS z-index controls stacking order along the z axis for absolutely positioned images, showing how higher z-index values bring elements to the front.

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.

Practice 21 demonstrates turning a link into a left-to-right expanding background using an after pseudo-element, transform origin, and a smooth scaleX transition on hover.

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.

Transform a tile layout into a responsive multi-column grid using CSS columns with a 300px minimum width and 25px gaps. Ensure images cover and adjust heading and paragraph styles.

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 the flexbox justify-content property distributes white space along the main axis, aligning items horizontally or vertically and controlling spacing with values like flex-start, flex-end, space-between, space-around, and space-evenly.

Explore how align-items uses the cross axis, with flex direction determining the cross and main axes. See default stretch and how baseline aligns items by the text baseline.

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 how the flex grow property makes flex items fill space in the container using unitless values. Default is zero; use 1 or 2 to grow along the main axis.

Understand how the flex shrink property controls the rate at which flex items shrink, with a default value of one, demonstrated in Firefox dev tools for responsive layouts.

Learn how flex basis sets the initial size of a flex item before remaining space is distributed, acting as width on a horizontal axis and height on a vertical axis.

Master the align-self property to individually align flex items inside a flex container. Set items to center, flex-start, flex-end, or stretch along the cross axis with align-items and align content.

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.

Align the entire grid content inside a container using justify content, align content, and place content, with values like start, end, center, and space-around, space-between, and space-evenly.

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.

The x unit is a font-relative height unit that varies by font family, giving 7.15 px in Times New Roman, 8.3 px in Arial, and 8.48 px in Lucida Sans.

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

Master the rem unit, a predictable CSS relative unit tied to the HTML font size, and set a root font size (10px or 62.5%) for fluid typography.

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.

Explore the percentage unit, which bases dimensions on the parent element. See how a 500-pixel-wide container yields a child at 50% width, illustrating responsive sizing.

Apply min-width and max-width to control an element's starting size and limits, using a paragraph example and max-content vs min-content to illustrate responsive behavior.

Learn how min height and max height work, their relation to min width and max width, and when to rely on content-driven height versus constrained layouts in responsive designs.

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.

Explore how to choose breakpoints for responsive websites in practice, coding HTML and CSS with grid and flexbox, and applying media queries to keep layouts accessible across sizes.

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.