HTML and CSS Crash Course

Learn to create a new project folder and an index.html file in VS Code, using the explorer panel, open folder prompts, and basic file naming conventions for HTML pages.

Learn to add boilerplate code to every HTML file, creating a skeleton and organizing content between the body tags, via the exclamation point plus tab shortcut.

Explore the basic building blocks of HTML, including tags, opening and closing tags, content, and elements, with nested structures and indentation practices to improve readability.

Explore how attributes and values add information to HTML elements, with examples such as charset, content, and name attributes, and note that some attributes have no values.

Edit the title element to control browser tab text, replacing the text between tags with coding course. Learn that changing the title updates the tab name in your HTML.

Preview your HTML file in the browser using the copy path method when live preview isn't working, save and refresh to see changes, and note it's slower than live preview.

Learn how to write a paragraph element in VS Code, comparing two methods and noting that VS Code can auto-close the p tag after typing the opening tag.

Discover Emmet in VS Code to speed up HTML writing with shortcuts, like typing p and then pressing tab to generate paragraph tags and cursor placement, then explore more shortcuts.

Use the lorem shortcut to generate a full paragraph of placeholder lorem ipsum text for quick page layout, noting paragraphs start on a new line as block elements.

Use HTML comments to annotate code, remind what lines do, and temporarily disable code; the browser ignores comments, and you can add them in HTML, CSS, and JavaScript using shortcuts.

The course explains how HTML treats white space, showing that extra blank lines and spaces do not affect the web page. Use blank lines to separate code sections.

Learn why beginners hear absolutes like always in HTML and CSS, and how exceptions appear as you gain experience, while the course emphasizes simple rules for now.

Explore heading elements from h1 to h6 and learn how to create the main h1 heading for a page. Understand using headings properly rather than styling them by appearance.

Develop proper heading structure by using h1 for the main heading, h2 for sections, and h3 for subsections, creating an outline that reflects the page content.

Learn to validate HTML with the W3C validator, using direct input, file upload, and URL checks to identify errors, view error messages, and highlighted areas.

Learn how to create and use HTML ordered lists with li items inside the ol tags, and understand when to use ordered versus unordered lists for ordered content.

Learn how to create unordered lists with ul and li, add items, and understand when order doesn't matter, using bullets for grocery lists.

Add another html file to create a multi-page site, introducing an about page alongside index.html. Follow steps to create, name, and insert a header to distinguish pages.

Demonstrate creating an internal link from the home page to the about page using the a tag and href, with index.html and about.html in the same folder.

Create external links in HTML by copying a URL from the address bar and inserting it into an anchor tag for testing in a browser.

Learn to open links in a new tab by adding the target attribute with the value _blank to anchor tags, testing in the browser for external and internal links.

Explore how to view page source across major browsers to inspect HTML and CSS in pages, and understand how JavaScript, code minification, and line wrap affect readability.

Download an image from Unsplash in jpeg, png, or gif, add it to the images folder, rename it to laptop using dashes, and optionally credit the photographer.

Learn to add an image element with the img tag, using src and alt attributes, and use a style element in head to cap max-width for responsive display and accessibility.

Explore common HTML elements essential for every web page and learn how to navigate MDN's HTML element reference to discover both familiar and lesser-known elements.

Explore obsolete and deprecated HTML elements, and learn why deprecated features should be replaced by newer methods, often with CSS styling.

Learn how to create a CSS file, distinguish between .css and .html extensions, name files like main.css, create multiple CSS files, and start with a blank file in VS Code.

Connect your css file to html by placing a link element in the head, set rel to stylesheet, and set href to the css file name (e.g., main.css).

Write your first CSS rule by targeting the p selector and setting the color to red. Explore how declarations pair a property with a value inside curly braces.

Learn how CSS comments let you leave notes, temporarily disable lines, and uncomment code to test styles using the /* ... */ syntax.

Explore how to use the CSS background color property to set an element's background, using keyword values while noting other color formats to be covered later.

Explore hex color codes in CSS, including six-character values with a leading #, representing red, green, and blue, plus optional alpha transparency and the shorthand three-character shortcut.

Learn rgb notation in css, using red, green, and blue values from 0 to 255 to produce colors and gray shades, with alpha transparency and the VS code color picker.