HTML and CSS Tutorial for complete Beginners

Learn how file extensions tell browsers and applications how to open files, and how a default index file loads when a web host serves your domain.

Learn how the HTML5 declaration tells the browser how to render the page. Start every web page with this declaration, and note that Bootstrap may include similar setup.

Explore the HTML document structure by identifying its header, head, and body, and learn how opening and closing tags define content, with images and scripts linked in the head.

Master the basics by structuring an HTML document with head and body, setting the title, using heading tags from h1 to h6, and adding a paragraph with p.

Explore how divs create blocks to group and separate page sections, such as sidebars and content areas. See how comments document intent in code without affecting the browser display.

Explore how HTML divs act as blocks, with opening and closing tags, nested divs, and using CSS to position a main page and a sidebar.

Explore how divs structure a page by nesting and adding headings to reveal the layout in the browser, and see how HTML describes the page and prepares for images.

Explore how to add images with the image tag, using src, alt, and title attributes, and load placeholder images from lorem pixel at 800px width.

Display an image on a web page using the img tag with a src from the same folder, add alt text, and adjust width and height to preserve aspect ratio.

Organize your web project by placing images in an img folder and referencing them with a relative path, including going outside the directory with ../ when needed.

Learn how to reference images with relative paths when they sit in the same directory, a subfolder, or outside folders, going up multiple levels as needed.

Links form the foundation of menus, using anchor tags with href and visible anchor text. For external links, include the protocol and absolute paths.

Learn how to use the target attribute to control where links open—in the same page, a new tab, or the full body of the window (top).

Build a simple navigation menu using unordered and ordered lists, with list items and links, using ul, li, and a tags, and preview changes in the browser.

Learn to create an ordered list in HTML with ol and li, include items like web development topics, and customize numbering using CSS list-style-type and styles linked in the head.

create a css file in the same directory ending with .css to style your html, use ids for unique elements and classes for reuse across elements.

Assign an id to the body and add classes to elements in Sublime Text to illustrate id and class usage, including a full page class and an active link style.

Explore the fundamentals of cascading stylesheets in this beginner lesson, learning how to link external CSS, target elements by tag, class, or id, and apply styles across a page.

Upload html and index.html to a web server, learn that index.html loads by default and overrides default.html, and add an index.html to every folder for security.

Compress your website folder into a zip, upload it to your web server, and extract it to publish the site online.

Join a brief crash course that continues from the previous module and introduces HTML and CSS basics for building web pages, with a roadmap for future, more advanced lessons.

Install and use Firefox extensions such as Firebug for real-time element inspection and Color Zilah for color picking, plus Chrome equivalents and the built-in developer tools (press F12).

Learn the three parts of CSS: selectors, declarations, and property-value pairs, using body, class, id, and tag selectors, with declarations inside brackets and ending with semicolons.

Demonstrates applying a background color to the body and setting text color with a color code, previewing changes in the browser, and introduces selectors for future videos.

Learn how tag, class, and ID selectors target elements in CSS, adjust font sizes with em units, and understand how specificity and browser defaults influence which styles apply.

Explore css selectors and how to target elements using descendants, classes, and IDs, then apply combination selectors to style nested content efficiently.

Explore css selectors, focusing on direct child selectors and their effect on only immediate children, not grandchildren, with practical examples using list items and nested elements.

Explore targeting elements by hierarchy with CSS selectors, including child and grandchild relationships, the descendant (space) selector, and the adjacent sibling (+) selector, using div and p examples.

Explore css selectors with class and id examples, showing how child and descendant selectors affect color and font across elements. Practice and compare immediate children versus grandchildren.

Learn how to color elements in CSS using color keywords and hex color codes, and recognize color components that range from 0 to 255.

Learn how colors are represented in HTML and CSS, including hex codes and rgb values. Explore six-digit and shorthand hex forms and how they map to red, green, and blue.

Explore CSS color options, including keywords, hex, and rgb, noting case-insensitivity. See how to apply colors to links and navigation, inspect with Firebug, and learn about transparency colors.

Explore transparency colors using rgb values and an alpha channel to control opacity. See how to apply a background image with css and adjust transparency in an example.

Discover css transparency by selecting a color with a color picker and applying rgba to a background, adjusting alpha from 0 (invisible) to 1 (solid), and tweaking padding and margins.