HTML CSS and SASS Bootcamp

Set up your development environment by installing Visual Studio Code and Google Chrome across Mac, Linux, or Windows, preparing your browser for HTML, CSS, and SASS work.

Set up Visual Studio Code and install the live server extension. Arrange your browser and editor side by side to preview changes in real time.

Enable the Emmet extension in Visual Studio Code, configure tab-triggered expansion in settings, and demonstrate rapid HTML scaffolding by typing p or ! and pressing tab to generate templates.

Learn to enable Emmet by searching for Emmet in settings, open settings.json, and set the image trigger to true using camelCase, then save.

Learn what HTML stands for, hypertext markup language, and how it powers web pages with tags that structure content and create hyperlinks, alongside JavaScript for front-end development.

Master HTML syntax by examining tags, elements, and attributes, including opening and closing tags and how browsers render content. Learn to add information with attributes like title to create tooltips.

Explore the basic structure of an HTML page, including doctype, html, head, body, and title, while practicing indentation and using live server in Visual Studio Code, with a paragraph tag.

Learn how HTML comments are non-rendered by the browser and can annotate code without displaying on the page. Use HTML comment syntax <!-- comment --> to explain structure while coding.

Explore HTML heading tags (h1–h6) and how horizontal rules separate content, then learn basic VS Code workflows, comment with Ctrl+/, and duplicate lines with Shift+Alt+Down Arrow to compare heading sizes.

Learn how to create paragraph tags in HTML using opening and closing p tags, with rapid VS Code shortcuts to auto-generate tags, and place a horizontal rule to structure content.

Explore adding formatting to paragraph text using HTML tags, including strong for bold, italics for emphasis, and mark for highlighted text, with examples of nesting tags inside paragraphs.

Learn how to create unordered and ordered lists in HTML, customize list items with bold, italic, and underline, and change bullet styles using list attributes.

Learn to create an ordered list in HTML with opening and closing tags and list items, compare it to bullets, and use reversed to display in reverse order.

Create an images folder, add image files, and insert a self-closing img tag with the correct src path; also link a favicon in the head with rel='icon' and type.

Learn to add audio to a webpage with the HTML audio tag, configure a source with src and type, include multiple formats, and enable controls for a functional audio player.

Learn to embed video in HTML using the video tag, include an mp4 source and type, enable controls, set width, and provide a fallback message for unsupported browsers.

Explore how to build and style HTML forms using the form tag, and implement text inputs, password fields, checkboxes, radio buttons, select menus, file uploads, text areas, and submit buttons.

Explore creating HTML tables using the table tag, define rows with table head and table data, and populate columns like name, age, and gender, including an unstyled default look.

Learn to create and use links with the a tag, including absolute and relative URLs, image links, mailto and tel links, and control tab behavior with target and no-referrer.

Learn how to use iframes to embed external sites and videos, adjust width and height, and see how YouTube embeds appear within a web page.

Learn to use HTML entities and emojis by inserting special characters with entity names or numbers and semicolons. See how to apply copyright symbols and emoji visuals to web pages.

Learn to incorporate Font Awesome icons into your web page using a CDN script, choose free icons, and place the icon tags in your HTML.

Learn block level and inline elements, with examples like paragraph, heading, forms, ol, and div, and see how inline elements like a, button, img, and span fit on a line.

Learn to layout an html page semantically with header, main, and section elements, using divs for components. The lecture covers emmet boilerplates and responsive meta tags for clarity.

Learn how CSS adds styles to HTML, defining color, font size, backgrounds, spaces between elements, margins, and layout, and enabling animations as defined by the Worldwide Web Consortium.

Master CSS syntax by selecting the paragraph tag, using curly braces, and adding a property and value ending with a semicolon. Compare inline, internal in head tag, and external placements.

Apply styles with inline CSS via the style attribute and with internal CSS in the head's style tag, targeting paragraph elements and adjusting color and font size.

Create an external CSS file and link it to your HTML to apply styles from a separate stylesheet. Learn the three approaches—inline, internal, and external CSS—and use color and font-size.

Learn how CSS rule priority determines element colors by comparing inline, internal, and external styles, with inline taking precedence over internal and external, and !important offering override but not recommended.

Learn to write CSS comments in ccis using single and multiline formats, including forward slash and asterisk syntax, and use the control and forward slash to quickly comment or uncomment.

Explore applying color in css, using a color picker, and understanding hex, rgb and rgba, hsv, and hsl formats to control transparency.

Learn to use CSS selectors with classes and ids, applying a class to multiple elements and an id to a single element, while ensuring ids are unique.

Explore borders in CSS by styling a paragraph with width, solid/dashed/groove styles, color, and shorthand notation; use border radius to create rounded corners and circles.

Tackle a left border CSS challenge by building a danger alert bar, using a left border, a red background with opacity, and tuned text color.

Learn how padding creates space inside an element's border, apply padding values to the top, right, bottom, and left, and use shorthand notation to set symmetric vertical and horizontal padding.

Master CSS margins to add space outside borders and center elements with auto left-right margins. Explore top, left, and right margins and negative margins.

Learn to use the span tag and class attributes to apply targeted css styles, create color variations with red and green text, and manage inline design through a style block.

Build a basic web page with a header, a main area with three text boxes and a button, and an aligned text section, using lorem ipsum and starter CSS concepts.

Create a basic HTML page with a boilerplate, link a stylesheet, and implement a header, a main features section, and a photo block with placeholder content.

Master targeting classes with dot notation, apply background colors and white text, and configure padding, borders, border radius, and centered layout inside a container.

Explore the box model in HTML elements, detailing content, padding, border, and margin. See how padding and margins shape layout through hands-on coding and browser inspection.

Discover how the universal selector targets all elements and resets padding and margins to zero for clean, ready-to-build projects.

Learn to format text using CSS by adjusting font size, weight, color, alignment, and enhancing with borders, padding, and line height on HTML paragraphs.

Explore the two main font families: serif and sans-serif, and learn how to apply fonts with the font-family property in CSS, including fallbacks and applying to the page body.

Learn to add Google Fonts to a web page by selecting fonts and weights on Google Fonts, copying the link into the head, and applying the font-family in css.

Learn to create and style HTML links, explore default, visited, hover, and active states using CSS pseudo-classes, adjust color, spacing, and text visibility with a demo and a hash link.

Learn to style links as buttons using CSS, applying borders, padding, background color, text color, border-radius, and hover transitions to create clickable, button-like links.

Explore how CSS position works by comparing absolute and relative positioning, positioning elements relative to their container or the page body, using top, right, bottom, and left.

Learn how to implement a fixed navigation bar using CSS, set position to fixed, anchor it to the top left with full width, and add top margin to prevent overlap.

Explain why floats are outdated in modern CSS and highlight the grid system as a better layout tool, then demonstrate a section with three child divs showing inline-block behavior.

Replace floats with flexbox using display:flex, then center and align items with justify-content and align-items to control horizontal and vertical alignment.

Explore how to implement and customize CSS background images using background-image, background-position, background-repeat, and background-size, plus shorthand notation and the parallax effect with background-attachment: fixed.

Explore common CSS units such as pixels, rem, em, percentages, and viewport units (vh, vw), and how font size defaults, root em relations, and responsive sizing influence layout and accessibility.

Explains how media queries adjust HTML content for different screen widths to create responsive websites, using max-width and min-width concepts, and testing in the browser on desktop, tablet, and mobile.

Learn practical debugging of HTML and CSS by inspecting your code, using the browser console to edit styles, and seeking help via Google or communities when issues arise.

Enable the Emmet extension in your editor to write HTML/CSS faster, generate boilerplates with a tab, auto close tags, and build elements with classes, IDs, and nesting.

Build a responsive, single-page restaurant demo site with menu hover effects, a parallax background in the reviews section, and an order area, translating mockups into css styling.

Set up the project environment for a HTML CSS and SASS bootcamp by organizing folders, adding an images directory, creating index.html and styles.css, linking Google fonts, and configuring a favicon.

Build a header markup inside a header tag within a container, include a logo image, and assemble a three-item navigation under the main tag, using emmet to streamline coding.

Apply global styles with a universal selector, reset margins, and set box sizing. Use rem-based typography and a centered flex container for consistent, responsive pages.

Learn to style the header with css by targeting header elements, using flex to align items, styling navigation links with hover effects, transitions, and an active current state.

Build the intro section markup by structuring a main section with a container, adding intro text, a primary heading, and a reserve button.

Style the intro section with a centered, cover background image at 60vh, white text, and typography. Add padding, borders, hover transitions, and a responsive media query for screens under 600px.

Build the about section markup by creating a container with class about, adding the restaurant image, a brief history paragraph, a secondary heading 'since 2010', and a follow-up paragraph.

Style the about section with a ground color, center content using a flex layout, and craft a responsive design with a circular image using 50% border radius and scalable headings.

Build the menu section with markup, including a container, a menu heading, and multiple menu item blocks with images and text, then plan styling in the next section.

Learn to style the menu section with CSS by naming menu item text descriptively, applying flex layouts, image sizing, and responsive media queries to stack items on mobile.

Learn to build a responsive testimonial section in CSS with a fixed parallax background, centered content, circular avatars, and careful padding and typography, plus media queries for small screens.

Structure the order section markup with sections, containers, and reusable order-item blocks featuring image, title, description, price, and a buy now button; learn clean, organized HTML layout.

Apply css to the order section with flex layouts, border radius, padding, and responsive media queries to optimize order books, images, and prices for mobile displays.

Build the footer markup by adding a container, links with a distinct class, and a copyright paragraph, preparing the footer section for styling.

Implement footer styling in CSS by applying a new background color, padding, and white text; use flex to space items and center them, and add media queries for responsive layout.

Explore flexbox fundamentals by shaping a flex container and its items, learning flex-direction (column, reverse), justify-content (center, space-between, space-around, space-evenly), align-items, flex-wrap, and the flex-flow shorthand for responsive layouts.

Learn how to control flex items with alignments, order, grow, shrink, and basis in a responsive layout, including baseline and center alignment across boxes.

Explore the CSS grid system and how it complements flexbox to create two-dimensional layouts, using grid template columns, grid lines, and grid areas for responsive designs.

Master css grid techniques by using justify items, center alignment, and stretch defaults, then build responsive grid columns with grid-template-columns, repeat, and minmax for flexible layouts.

Design a responsive layout by combining CSS grid and flexbox inside a container, building boxes with headings and text, and applying background colors and spacing.

Explore how to use css pseudo-classes to style links, buttons, and list items, including hover effects, first-child, last-child, and nth-child selectors, with practical examples.

Explore CSS pseudo elements by using first-letter, before, and after to modify content and appearance of HTML elements; apply content, color, and font size to create dynamic text styling.

Learn to use the before pseudo element to inject content and align it with a container using absolute positioning, top, left, and text alignment in HTML and CSS.

Master the CSS box-shadow property by applying horizontal and vertical offsets, blur, and color (including rgba), with practical examples on containers to enhance UI visuals.

Learn how to use CSS variables by defining colors in the root with --color-primary and --color-secondary, applying them with var(--color-primary) to enable global style changes.

Explore the background property in CSS, using linear gradients, color stops, and an image in the background to create left-to-right and bottom-right blends, with practical examples.

Explore css transitions in depth, using hover on a button to demonstrate transition properties, duration, timing functions (including cubic-bezier), delay, and shorthand for multi-property animations.

Learn how the CSS transform property uses translate on the x and y axes to move elements in a flex-centered container, including single and two-axis translations.

Explore the scale property within transform by applying scale to the x and y axes, demonstrating how it increases or decreases image size and how only one transform takes effect.

Learn how transform origin sets the rotation point, moving from the center to top, top left, or top right and altering where the animation begins.

Learn to use the CSS transform skew property to tilt elements on the x and y axes with positive or negative angles, such as 20 degrees.

Explore how CSS keyframes animate a container by moving it along the x-axis from 0 to 100 percent, using the move animation with duration, iteration count, and alternating direction.

Design a responsive one-page website using HTML, CSS, SASS, and Tailwind CSS. Build a logo with text, interactive navigation, a header button, and a background video with a black overlay.

Set up your HTML, CSS, and SASS project environment by organizing folders, linking fonts, and defining variables, globals, and utility classes for efficient styling.

Learn to mark up a responsive header with logo text, a hamburger toggle, and a navigation menu featuring home, about, pricing, and contact links, plus a get a quote CTA.

Build the header section with CSS in the HTML CSS and SASS bootcamp, styling the logo and navigation with flex, adding hover arrows using before and after, and smooth transitions.

Build a CSS-only responsive header with a hamburger menu using media queries, a toggle checkbox, and transitions to slide the navigation in and out, all without JavaScript.

The lecture guides building the intro interest section markup beneath the header, including text blocks, a background video, and a get a quote button with autoplay, loop, and muted.

Learn to build the intro section with CSS by overlaying a video, using z-index, padding, utility classes, text animations, and responsive media queries with a bottom polygon border.

Build the about section markup by adding a container, a title, a secondary-head, and an about-text block, then include an about-image and a link using the defined classes.

Style the about section with a centered title and left-to-right gradient text from secondary to primary colors. Use flex and media queries to adapt layout for tablet.

Build a responsive services section with HTML markup, duplicating service boxes for items like website design and e-commerce. Include Font Awesome icons for each item.

Build the services section with css grid, set up gaps and alignment, and apply hover effects, borders, and shadows using variables and pseudo elements.

Develop pricing section markup by building a prize section with three price boxes, each featuring a price, a price list, and a learn more link, using containers and class modifiers.

Apply css techniques to transform clean markup into a responsive pricing section using flexbox, borders, gradients, and box shadows, and refine typography and spacing with media queries.

Build the testimonial section in HTML5 markup, with a container, three testimonial boxes (quote icon, image, name), and a call-to-action heading, paragraph, and button.

Learn to style a responsive testimonial section with CSS using flex, justify-content, align-items, background color, borders, border-radius, box-shadow, and transitions; include mobile media queries for column layout.

Build the contact section markup by embedding a google map background, and construct a container with a contact form (name, email, message) plus address, phone, and email details with icons.

Style the contact section with css, centering the embedded map, applying gradients, and building responsive forms and details using flex, inputs, placeholders, and hover transitions.

Fix the contact us section image by correcting the image path with a parent directory reference and verify the image displays after the change.

Develop a responsive footer markup with a four-column photo section, a logo, footer credits, and a top line that runs from green to orange, using a container and navigation links.

Style the footer section in css by applying padding, background color, and a top line created with a linear gradient using primary and secondary colors. Tweak link typography and transitions.

Link the different sections of a single-page website by assigning IDs to sections such as about, prizing, and contact, and update the navigation menu to anchor to them.