HTML&CSS Tutorial and Projects Course (Flexbox&Grid)

Explore the basics of HTML, the markup language that structures web pages, including opening and closing tags, single tags, and how it shapes page layout.

Use Google Chrome as the browser and Visual Studio Code as the text editor to develop and test web projects. Benefit from industry-leading free tools, though alternatives also work.

Follow a step-by-step guide to download Google Chrome for mac, run the installer, drag Chrome to applications, keep it in the dock, and set it as the default browser.

Download and install Visual Studio Code on Mac, locate the installer in downloads, open it, drag to applications, and keep it in the dock for quick access.

Discover how Visual Studio Code's explorer, search, and source control integrate with debugging to support web projects. Explore how extensions tailor JavaScript and React development, customize editor settings with GUI or JSON, and understand the left files pane and the right code pane.

Create your first web page by setting up a project folder on the desktop, then open it in Visual Studio Code using drag-and-drop or three methods to start coding.

Create your first web page by configuring Visual Studio Code, naming index.html as the home page, adding a heading and paragraph, saving with shortcuts, and previewing in Chrome.

Master the basic HTML document structure, including doctype, HTML root, head and body, proper nesting, and how the head stores metadata and links while the body holds visible content.

Learn how to set up and use the live server extension in Visual Studio Code to auto refresh your HTML edits in the browser, enhancing the development workflow.

Explore Visual Studio Code settings, including font size and word wrap, and use Emmet to speed up HTML generation while reviewing installed extensions like Live Server.

Learn how to use HTML heading elements from h1 to h6 to structure pages and make sections stand out, with live previews.

Use the paragraph element to display regular text by writing inside a p tag, creating one-liners or short paragraphs that appear on the web page.

Discover how HTML collapses white space, ignoring empty lines, and see why extra spaces in code do not appear on the page without using specific HTML elements.

Use lorem ipsum as placeholder text to preview paragraphs and typography in HTML and CSS. Learn Emmet abbreviations, word-count options, and hipster ipsum for realistic content.

Learn how to add images to a web page with the img tag, using src and alt attributes, and reference images in the same folder.

Learn to add images with the img element, create an images folder, and use relative paths (dot slash) to display multiple images side by side with proper src and alt attributes.

Display external images by setting the img src to a copied URL, include alt text, and note HTML5 permits an optional forward slash while React requires self-closing tags.

Learn to source copyright-free images for HTML and CSS projects using Pexels, Pixabay, and Gratisography, and master inserting and sizing images with practical examples.

Discover how to size images in HTML using width and height attributes, and understand how setting width can determine height for consistent on-page display.

Crop images to a consistent width to reduce loading times, avoiding giant files from width and height attributes. Use Mac tools as a quick alternative to Photoshop.

Learn how to use html comments to group and document code, easily comment out sections, and add spacing with the line break element.

Create external, internal, and single-page links with the anchor tag in HTML, using href to set the destination. Open external links in a new tab with target _blank.

Learn how to create internal links for navigating between pages, using correct hrefs like index.html and about.html, and manage relative paths for images.

Create and navigate within-page links by assigning IDs and using hrefs with hashtags to jump to sections, while considering fixed top navigation, line breaks, and back-to-top links for flow.

Turn images into clickable links by placing an image inside an anchor tag with an href, alt text, width and height attributes, and explore empty placeholder links using a hashtag.

Discover how to use sub elements in HTML to position text above and below, illustrated with a practical heading example and a quick fresh-page demonstration.

Explore the strong and em elements in HTML, learn when to apply them for emphasis and accessibility, and contrast them with CSS styling for semantic markup.

Learn to add special characters to HTML using character entities. Insert symbols via ampersand codes in headings or paragraphs and reference resources like W3Schools.

Learn how to create unordered lists using ul and li, and explore using lists for navigation with links like index.html and about.html.

Explore ordered lists in HTML, using numbers to represent item values, and learn the syntax by building an example with items like John, Peter, and Sarah.

Learn to create nested lists in HTML by embedding unordered and ordered lists inside list items, with examples showing how to structure names and languages like HTML and CSS.

Discover how to build tables in HTML using the table element, rows, td and th headings, and switch to a table heading for top labels like number and name.

Learn to build html forms with text, password, and email inputs and submit controls. Understand action, method, name, id, label, placeholder, and value, using Form Spree for front-end submission.

Explore HTML forms with textarea, radio, checkboxes, and select inputs. Understand how name and value attributes drive form submissions.

Install and configure the Prettier code formatter in Visual Studio Code to automatically format HTML and CSS on paste and on save, speeding up your workflow.

Master keyboard shortcuts in Visual Studio Code to speed up HTML and CSS work, including undo, copy-paste, multiple cursors, line navigation, and quick line creation.

Explore the head element and meta tags with external resources like MDN and W3Schools, learn how metadata in the head handles title, charset, styles, scripts, and viewport.

Download the setup images, replace or copy them into the images folder, and crop them to a uniform 320 by 240 for all assets.

Add a logo, heading, and navigation bar to index.html, linking to home, about, numbers, and contact pages using a relative image path and an unordered list.

Master building a coffee shop home page with a hero image, featured products, and Wikipedia links, using responsive layout and a footer with a back-to-top link.

Copy the index.html into a new about.html, update the title and heading, replace content with about us text, and keep the navigation, copyright, and back to top links.

Build the numbers page by duplicating the index.html and about html, add a table with inline css, and display city, orders, and profit for Chicago, New York, and Los Angeles.

Create a contact page by duplicating the about page, building a form with name, email, description text area, labels and ids, plus a submit button, and preview across layouts.

Learn css fundamentals, including how cascading style sheets style pages, control layout, colors, sizes, and positioning; use a selector, property, and value, with an h1 color example.

Set up your workspace by creating a project folder, opening it in your editor, and loading index.html with a live server. See hello world in side-by-side browser windows.

Explore how to use CSS with HTML via inline, internal, and external methods, and see why inline CSS becomes hard to maintain as projects grow, with color and font-size examples.

Use internal css by placing a style tag in the head, removing inline styles, and styling headings (h1, h2) in one place to control color and font size.

Learn how external css centralizes styling across multiple html pages, replacing internal styles, linking via a stylesheet link tag, and organizing styles in a css folder for scalable projects.

Explore the power struggle between inline, internal, and external styles, and learn how the same property can be overridden by placement and by inline styles used by libraries.

Compare external versus internal stylesheets while mastering CSS syntax, including selectors, declaration blocks, properties, and values, and using comments, semicolons, braces, and debugging tips.

Learn how to use the element selector in CSS to target h1, h2, and p, apply color properties, and build simple style rules with curly braces.

Group selectors in CSS to apply a single style to multiple elements, using comma-separated lists with element selectors like h1, h2, and p, and set a shared color property.

Learn to target elements with the id attribute in CSS using id selectors, creating unique ids like title and subheading to apply color and background color.

Learn how to use class selectors to style HTML elements with shared classes, using CSS dot notation to apply green and red colors.

Combine id and class selectors by assigning an id of title and classes like uppercase, then adjust font size and text transform. Note: IDs are unique; classes are reusable.

Explore how to use div and span to group elements, apply styles via CSS selectors, and differentiate block-level and inline content.

Learn how CSS inheritance lets child elements inherit styles from their parent, while explicit styles on the child override inherited ones, with practical div and class examples.

See how CSS inheritance passes font-family, line-height, and font-size from the body to children, while borders are not inherited, and how a special class overrides these properties.

Learn how the last rule principle, CSS specificity, and the universal selector determine which styles apply, with examples using id, class, and element selectors and color properties.

Combine selectors by pairing a parent container with a child element to target specific paragraphs or headings, demonstrating the descendant selector without overusing classes.

Build a small project after each tutorial section to solidify HTML and CSS fundamentals. Apply learned concepts to real-life scenarios, using repetition and a single approach to reinforce skills.

Create the first project by building two containers, arranging elements, and applying color to each element to reinforce core CSS fundamentals.

Follow a repeatable, step-by-step approach to building HTML and CSS projects, starting with setup and structure, then styling containers, icons, headings, and paragraphs.

Set up a HTML and CSS project in Visual Studio Code on Mac, create index.html with a container, icon, and title, then apply styling like blue title and gray paragraphs.

Create a dedicated folder for all html and css projects, index it numerically (01, 02), and store it on desktop or documents for easy reference.

Explore color properties in CSS, learn about color values versus color codes, and discover tools and palettes for upcoming web projects.

Learn how to use color and background-color to style text and background in CSS, with hands-on examples on headings and the background shorthand for combining color and image.

Learn to use color names with color and background-color properties, using Visual Studio Code's color-name suggestions and samples; explore options like white, red, wheat, white smoke, yellow, and yellow green.

Apply rgba in css to control color opacity, using a fourth alpha value from 0 to 1; explore red and black overlays to improve text readability on images.

Explore how CSS hex values define colors using the #RRGGBB format. Learn how red, green, and blue map to two-digit hex pairs, with examples like #ff0000 and #fff.

Explore how Visual Studio Code aids css color work with inline pickers, supporting hex, hsl, and rgb syntax, real-time shade and opacity adjustments, and quick color swaps.

Discover how to use a color generator to produce five colors that go together, lock selections, and copy color values into CSS for your web projects.

Welcome to the project where we set up containers and apply background colors to the body, headings, and paragraphs, then customize a special container using an rgb value.

Create a folder-based html/css project, set up index.html, build three containers (one special) with text and lorem, apply a translucent background, and use comments and class selectors for styling.

Set up the folder and project, use Visual Studio Code, launch a live server, and style a container layout with headings, paragraphs, and a special container.

Explore CSS units by comparing absolute and relative types, learn to use pixels, rem values, and viewport units, and discover new properties that apply unit values.

Discover how pixels act as absolute values in css to control font size, width, and height, with hands-on examples of 60 pixels font and 200 pixels width on blue background.

Learn how percent units in css are relative to the parent element, affecting inner elements based on the parent's size; explore practical examples with 50%, 33%, 67%, and 100% sizing.

Learn how em units in css are relative to their parent and how changing the parent base affects text size, demonstrated with absolute and relative classes and practical examples.

Learn how rem units scale with the root font size and how root styling or browser settings control them, with 2rem equal to 32px at a 16px root.

Use viewport units vh and vw to create layouts, setting elements to 100% width and height relative to the screen rather than a parent, useful for banners and hero sections.

Explore default browser styles and use Google dev tools to inspect the document via the elements tab, view the user agent stylesheet, and test CSS changes across different screen sizes.

Apply the calc function to make the banner and nav bar span the full viewport using 100 view heights minus nav height, mixing pixels and view heights with correct spaces.

Demonstrate how height defaults to auto and how min-height, max-height, and overflow (hidden or scroll) control content in a banner div using calc(100 view heights minus six rems).

Start the project by building a logo and banner with subtitle, text, and a button on the left, using margin concepts and the box model to set a percent-height banner.

Structure a hero section using divs with ids and classes, place logo text and a call-to-action button, and apply css to reset margins and style colors and typography.

Create html/css project by building a hero section with a logo and white typography, preview with live-server, reset margins, and apply 100vh hero sizing with css variables for future styles.