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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.