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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.