Basic HTML & CSS for beginners (Build One Project)

Explore HTML headings from h1 to h6, learn that these are block level elements, and apply a proper order with one h1 per page, demonstrated with live examples.

Define the p tag as a block-level paragraph, add content, and use the br tag for line breaks; browsers remove extra spaces, and the thematic break separates paragraph level elements.

Learn how to format text with semantic emphasis using the em tag, compare it with the non-semantic i tag, and use header over div to convey meaning.

Explore formatting text with strong and bold elements, showing how the semantic strong differs from the non-semantic bold tag and how emphasis and italic relate to markup.

Learn how to use the u underline and mark elements as semantic HTML for highlighting and emphasis. Understand when underlining is inappropriate and how CSS can achieve non semantic styling.

Learn to implement superscript and subscript using semantic HTML, with <sup> and <sub> tags inside a paragraph and practical examples for chemical formulas.

Learn how to add HTML comments to document your code, using <!-- and --> to create invisible notes that explain functionality while remaining hidden from the user.

Learn how HTML anchor elements enable navigation within pages or to external sites using the href attribute. See a practical example linking to Facebook.

Learn how to add an image to a webpage using the img tag with src and alt attributes, a self-closing tag, and using images from your project folder.

Learn to build and style a basic HTML table with table head, body, row, and data, featuring id, first name, and last name, plus an internal style sheet.

Learn to create web lists, including two types, by using the ordered list tag and wrapping each item in li tags with a proper list item structure.

Learn block level elements like divs that start on new lines and fill the full width. Compare inline elements like span and formatting tags such as b, i, and code.

Learn how an HTML form collects data from input elements and submits it to a web server using the form's action and method attributes, including post and get.

Explore html form elements and their input types, including button, checkbox, color, date, time, email, file, radio, range, search, tel, text, month, week, and the form action and method attributes.

Explore the select element with option children, adding name and value attributes, and use selected and multiple attributes to enable single or multi-select in HTML forms.

Learn how the textarea form element enables multi-line text input, using the required columns and rows attributes to set width and height for user messages.

Demonstrate the button element and its types—button, submit, and reset—and how they control form behavior, with labeled inputs, text fields, and value attributes for a practical landing page.

Learn how CSS rule sets function by identifying selectors and declaration blocks, writing properties and values such as color, font size, padding, and margin, and applying them to elements.

Learn inline CSS, internal styles, and external style sheets to apply rule sets; inline styles affect an element, internal styles live in the head, and external styles link to pages.

Practice applying CSS through inline styles, internal style in the head, and external stylesheets, learning to color text, create files, and link styles to HTML.

Explain the css display property and its values—block, inline, and inline-block—and show how they alter width, height, and layout of elements like spans, with floats.

Explore css length units including pixels, em, rem, and percentages. See how parent and root elements affect font sizes with practical examples using div and span.

Learn how CSS width and height govern block and inline-block elements using pixels and percentages, with practical examples of 50% width, 300px height, and scrolling behavior.

Explore CSS margin and padding to control spacing around and inside elements. Use top, right, bottom, and left values and the four-value shorthand to set outer margins and inner padding.

Master css margin and padding by applying padding inside borders and using top, right, bottom, and left values. See how shorthand padding works and how to remove space with zero.

Define borders with border-width, border-style, and border-color, or use the shorthand border to set all three at once. Use hex or rgb colors with dotted, dashed, and solid styles.

Learn how the CSS float property positions elements to the left or right of a container, and how none resets the float. See examples placing multiple items on one row.

Explore how the font family property selects fonts, uses multiple comma-separated fallbacks, and demonstrates inheritance from the body to child elements through practical examples.

Explore the CSS font-size property, using relative keywords (xx-small to xx-large) and numeric units to style text, with practical examples showing how different sizes affect a paragraph.

Apply css font-style values such as normal, italic, and oblique, and see how inherit, initial, and unset affect the styling.

Discover how css font weight works, using keyword values like normal, bold, and lighter, plus numeric weights from 100 to 900; browsers choose the closest available weight.

Explore how to use color and background-color in css, including predefined color keywords, hexadecimal values, and rgb formats, with practical examples and quick troubleshooting.

Discover how the CSS text-align property controls text content alignment within its parent element using left, right, center, and justify values. Apply these alignments to your landing page project.

Set up the project structure for a landing page by creating a Lander folder, image folder, and basic index.html and style.css files, then import and organize images.

Create the basic HTML structure by adding a doctype for HTML5, a root html element with a lang attribute, a head with a title, and a link to the stylesheet.

Build a header in HTML, create a header container with a list, add a logo and a fake phone number using spans and classes, and preview the result.

Style the header by removing body margins and paddings, setting a dark color, and padding; center an 800px container and create a bullet-free, floated menu with a logo and icons.

Create a main content section inside a container with headings, icons, images, and links; style blue elements and build content boxes with a vertical line.

Style the HDMI content with CSS, applying typography, margins, center alignment, container width adjustments, color, text decoration, borders, and link styling for a polished page.

Build the after content by creating a section with a container and a signup form featuring email, password, a select with options, a submit button, and a terms link.

Learn to style after content by adding a section background image, centering the heading, and styling the form wrapper, inputs, and button with padding, borders, and colors.

Build the footer content for a basic HTML & CSS project, including a contact phone number and email, and prepare to style the footer in the next lecture.

Style a footer in HTML and CSS with a dark background, a top border, and contrasting text; align left and right sections for mobile optimization in the next course.