HTML and CSS: Introduction to Frontend Web Development

Explore HTML syntax, including opening, content, and closing tags, and note how elements like the image tag have no closing tag, while attributes like src define locations.

Generate starter HTML boilerplate by typing an exclamation mark, then learn how the document type, HTML tag, Lang attribute, head, title, meta tags, and body organize content.

Learn to create text and emojis with HTML using header tags for headings, the p element for paragraphs, and copy and paste emojis from an emoji website.

Discover how to format HTML text with bold via the b tag and strong, italics and emphasized text, highlight with mark, delete or insert with underline, and subscript and superscript.

Add images in HTML with the img tag and src, control size with width to avoid overflow, and use relative paths like images/mountain for local files.

Learn to add icons in HTML with Font Awesome by creating a free kit, inserting the script in the head, and embedding icons in the body.

Learn to add a favicon by inserting a single link tag in the head that points to images/star.png. Save and refresh to see the updated star favicon.

Learn to add hyperlinks in HTML with the a tag and href, then wrap an image tag in the a tag to create a clickable image link.

Learn how to use the HTML input tag to collect email and password data on sign up and sign in pages. Explore input types, placeholders, and form actions.

Embed a YouTube video in an HTML page using the iframe tag by converting the watch URL to embed, removing the v parameter, and setting width and height.

discover how the div element acts as a container for other elements, wrapping p tags and images, and how text inside a div defaults to a p tag.

Learn to specify HTML image paths using relative references, including current directory, images folder, and going up one level with ..

Explore the css syntax by showing how a selector targets the body element, opens braces, and sets the text color property to red, demonstrating how css renders styled text.

Discover three ways to add CSS to HTML: internal styles using a style element, inline styles with a style attribute, and external CSS linked via a stylesheet.

Discover the difference between id and class attributes in HTML. Learn how to select them in CSS using # for id and . for class, and when to use each.

Learn to change text color and font family in CSS by linking styles.css, targeting the body, and applying color, font-family, font-size, and font-weight with Google fonts or custom fonts.

Learn to add comments in HTML and CSS files to document your code, use the comment syntax to disable lines, and understand that comments are ignored by the compiler.

Learn to create and reuse CSS variables using root and var(), store colors such as the primary color, and apply them to divs and font sizes via a styles.css file.

See how to set width and height in CSS by styling an element with the id container using #container, applying 600px by 400px and updating to 800px by 500px.

Understand padding versus margin in CSS: padding adds space inside a container between content and border, while margin adds space between the container and surrounding elements.

Explore CSS selectors, including class and id selectors, element and descendant selectors, and powerful pseudo-classes like hover, first-child, last-child, and nth-child, with practical examples.

Explore CSS specificity and precedence, where inline CSS outranks IDs and pseudo class selectors, and learn how the important rule can override even inline styles with practical examples.

Explore css units from pixel sizes to relative values like percentage, view width and height, em, and rem, and see how viewport and root font sizes shape layout and accessibility.

Learn CSS backgrounds, including background color and image, background size with cover and contain, no-repeat and position, plus 100 view height, overlay opacity, and hover effects on a styled button.

Learn to style borders with CSS, using border radius for shape, per-edge control, and the border shorthand with width, style, and color, plus basic box shadows.

Explore the five CSS position values: static, relative, fixed, absolute, and sticky, and learn how top, bottom, left, and right control element placement.

Explore css grid layout fundamentals, including grid-template-columns and rows, fr units, gaps, alignment, and grid-template-areas to build responsive page structures.

Apply media queries to build responsive layouts, starting mobile-first with a grid of boxes and breakpoints at 700 and 768 pixels, adjusting layout, orientation, and element visibility.

Discover What Font? to identify font name, weight, size, and line height, and use the color eyedropper for hex colors and gradients; Go Full Page saves to recreate the site.

Replicate a dribble-style web design from start to finish using HTML and CSS, including Google fonts, Font Awesome, and assets, to build header, hero, about, menu, and services sections.

Learn how DNS translates domain names to IP addresses and how a hosting server serves pages, including selecting a hosting plan, registering a domain, and uploading files to public_html.