HTML & CSS From Zero to Pro: Build Your First Web Page Today

Create clickable links in HTML using the anchor element and href attribute, learn to set up a new HTML file, and test links to Reddit and Google in the browser.

Learn to create accurate HTML links using the anchor element, set href correctly, copy link addresses, and display meaningful text that matches the destination.

Explore how urls work, including authority, domain names, paths, schemes, and https encryption, and learn how href links navigate the web.

Learn to open links in a new tab by adding a target attribute set to _blank to your href links, and apply this to all desired destinations.

Enable word wrap in VSCode to keep long links visible when resizing the editor. It affects only display, not file content, and helps coding on the Reddit clone project.

Learn to create internal and external links in HTML using the href attribute, link files in the same folder, and update paths after renaming files to keep navigation working.

Learn to distinguish absolute and relative URLs, using the a element and href to create internal and external links, with protocols and https, including opening in a new tab.

Practice with a curated list of exercises to reinforce what we've learned, helping you level up your skills and make clear progress. Pause this video if you need to.

Learn how to add images in HTML using the img tag and the src attribute, by creating an images.html file and embedding the Reddit logo from its image address.

Use the src attribute to load images from absolute https URLs by adding an img tag with the image URL. Ensure the right angle bracket is present to display images.

Learn how images behave like text on the same line and how to force them onto separate lines by wrapping each image in a paragraph, practicing layout responsiveness.

Learn to add images with the src attribute, using absolute and relative URLs, place files in the same folder as your HTML, download images, and verify rendering in the browser.

Practice adding an image to your web page by using its absolute address in the src attribute and wrapping the image into a paragraph, without downloading the image.

Organize your web project by creating an images folder and updating the img src to a relative path like images/reddit-logo.png. Learn to nest folders like images/icons and adjust paths accordingly.

Turn an image into a clickable link by nesting the image inside an anchor element with an href, then test hover.

Practice what we've learned with the exercise list to level up your skills and make progress. Complete these exercises, and pause the video if you need to.

Master manual code indentation in VS Code using tab and shift+tab, indenting single or multiple lines and removing extra newlines to keep HTML and CSS tidy.

Discover how the br element creates a line break, a void tag with no closing tag, and use it to push images and text onto lines without vertical space.

Discover how the hr element creates a thin horizontal rule and visual separation, and when to use br for line breaks; learn to add links and images with URLs.

Complete the practice exercises to reinforce what we've learned and level up your skills as you progress toward building your first web page.

Learn to resize images with CSS by adding a style block and setting image width to 200px, using both relative and absolute URLs.

Learn how CSS styles HTML by adjusting width to 200 pixels and height to 400 pixels, using a style element to modify an image and explain CSS as a language.

Learn how the CSS tag selector targets all img elements to set their width, and observe how adjusting width makes all images resize across the page.

Explore using the style element and css rules, apply a class selector to target specific images, and manage rule order to set different widths.

Learn how the HTML class attribute marks elements with a custom name and how the class selector, starting with a dot, targets those elements from CSS.

Learn how the class attribute targets multiple elements with a class, using class selectors in CSS to style all matching elements, and recap tag and class selectors for building pages.

Utilize these practice exercises to reinforce what we've learned, level up your skills, and track steady progress.

Explore changing text size with CSS using class selectors and the font-size property in pixels, then apply or compare tag selectors for broader styling while keeping code readable.

Learn to change text color with CSS using tag and class selectors, adjust font size, and apply colors like red, green, and dark violet to specific paragraphs.

Apply CSS text-transform to convert text to uppercase, adjust font size to 80px with a tag selector, and style specific paragraphs using a class in an HTML page.

Explore how multiple CSS rules affect a single element, resolve conflicts with class selectors over tag selectors, and apply text transform properties to control case and size.

Practice exercises help you apply what you've learned in HTML and CSS, level up your skills, and track steady progress as you build your first web page.

Create a sidebar image in HTML/CSS by building sidebar.html, using an img src, and refine its width with CSS from 150px to 270–280px to match the reference.

Transform the sidebar image paragraph text to uppercase with a CSS rule, ensuring robust styling independent of HTML, and apply gray color to match the reference page.

Create an online indicator by combining text and a green dot image in HTML, then use CSS class selectors to size the images, italicize the text, and adjust the font.

Create a paragraph element to display the online users, apply a text bold class with font-weight to thicken the number, and adjust the paragraph size to match the reference page.

Explore styling paragraphs with width and line height in CSS, using a 270px paragraph width and adjustable line height to control spacing and readability.

Create the final sidebar title in bold, review CSS properties for text styling—font-size, color, text-transform, font-style, line-height, and font-weight—and organize project files into tutorial-specific folders.

Use these practice exercises to apply what we've learned, level up your skills, and make good progress, with a quick pause of the video if you need to.

Learn to apply a CSS hover pseudo-class to links, create an HTML page with anchor elements, and test color changes and underlines in the browser.

Learn how the :hover pseudo-class targets anchor elements with a class to change color on hover, and how more specific selectors resolve conflicts between normal and hover rules.

Learn how to change a link's color when clicked using the active pseudo-class, and compare it to hover for different element states.

Understand how hover, normal, and active states interact in CSS, where specificity and rule order determine a link color; place the active rule after hover to resolve conflicts.

Learn to control link underlines with CSS by using text-decoration to remove the default underline in the normal state and add it on hover.

Explore an efficient CSS approach to style all links by default with no underlines and underline on hover using the anchor tag selector, ensuring consistency as the page grows.

Learn how CSS hover pseudo-classes apply a wide range of properties. Experiment with bold, italic, larger, and uppercase on hover for engaging links.

Learn how to use CSS pseudo-classes on any HTML element, including paragraphs and images, to style hover effects, cursor changes, and active states with practical examples.

Explore how to use CSS pseudo classes with images, implementing hover and active effects to resize on hover and click, while referencing relative URLs and tag selectors for streamlined styling.

Use these exercises to practice what we've learned in html and css from zero to pro, level up your skills, and make good progress; pause the video if needed.

Learn to style links with CSS by applying background colors, removing text decoration, and using dodger blue for hover transitions.

Learn to use padding to add space around content, create hover color changes, and use a color picker to choose and copy hex and rgb color values for css.

Learn how to use rgb colors in CSS by applying rgb(red, green, blue) with comma-separated values. Update the link background on hover and active states using an rgb color.

Style links with rgb and hex colors to create hover and active states. Apply forest green to the Glassdoor link and sienna to the indeed link.

Learn to shrink a link on hover by lowering its font size from 16 to 15 pixels, so the background also shrinks as the content area shrinks.

Apply CSS transitions to animate font size and background color on hover, using durations like one second or half a second for smooth, gradual changes.

Practice exercises reinforce what we've learned, helping you level up your skills and track progress, with the option to pause the video if needed.

Learn to open Chrome developer tools, inspect and edit HTML in the elements tab, modify and delete elements, and undo changes with Cmd/Ctrl+Z for debugging.

Select elements to view the html structure and applied css rules, and disable or enable properties to refine styles and add new ones.

Open the computed tab to view an element's final CSS properties. Use show all and the font filter to reveal font sizes and values.

Learn to use devtools to inspect any website, hover and select elements, view computed properties like background color and text color, and copy values with keyboard shortcuts command/ctrl shift c.

Master browser developer tools to inspect a sign-up link, use the hub button to emulate hover and active states, and copy the resulting background colors for CSS.

Learn how developer tools let you temporarily modify a page, inspect elements, and apply inline styles; changes disappear on reload, enabling safe learning and debugging for a Reddit clone project.

Practice these exercises to apply what we've learned, level up your HTML and CSS skills, and track progress toward building your first web page.

Learn to apply the CSS box model to manage content, padding, border, and margins, using real paragraphs, width/height adjustments, and developer tools to inspect results.

Explore how padding shapes the box model and learn to apply padding with both individual properties and the concise shorthand, including top, right, bottom, and left values.

Explore how the css box model uses borders to frame content, set thickness and color with the border property, and apply rgb or hex colors for borders on each side.

Learn how margins create space outside an element and how they differ from padding. Use shorthand and individual properties to control top, right, bottom, and left margins, and override defaults.

Enable autosave in VSCode by turning on autosave on focus change in settings, so files save automatically when you switch away, demonstrated during a Chrome page reload.

Explore how CSS margins collapse between adjacent blocks with no content between them, making the space the larger margin wins, and fix by increasing the first or second element's margin.

Learn how block and inline elements determine layout by comparing paragraphs and links, and how width, height, padding, and margins affect their size and spacing.

Learn how padding, borders, and margins behave for block and inline elements: blocks push away in both directions, while inline elements shift horizontally and ignore width and height.

Turn paragraphs inline and links block using the css display property, demonstrating how inline vs block behaviors affect padding, margins, width, and layout for responsive navigation.

Combine inline and block behavior with inline-block to keep links on one line, while respecting padding, borders, margins, width, height, and vertical spacing.

Apply the box model and inline block concepts to build a PayPal login link with a border, rounded corners, and hover color changes, using an html file and css class.

Apply a hover color change and matching border to a login link using CSS, mirroring PayPal's style, by copying the computed color and updating hover rules.

Apply CSS to recreate the PayPal login link by adjusting padding, border-radius, margin, display, font-weight, and font-family for a close visual match.

Explore a curated list of exercises to practice what we've learned, complete them to level up your skills, and pause the video if you need a break.