Web Design for Beginners: Build Websites in HTML & CSS

Explore how to install your next editor and how the browser works in a three second video series, while embracing self-guided learning through reading, observing, and online conversations.

Learn how the web connects clients and servers, uses dns to translate urls into ip addresses, and delivers web resources via http requests and responses.

Explore text editors and integrated development environments, compare simple and advanced tools like Sublime Text and Visual Studio Code, and learn how to install, write, and save code files.

Explore how browsers render pages using the rendering engine, HTML, CSS, the DOM, and JavaScript engines like V8, with live inspection via Chrome DevTools.

Explore html basics by defining an html5 document with doctype, html, head, and body sections; create a page title, meta tags, and an h1 heading to display content.

Learn to use html elements, create nested tags, and write paragraphs with proper closing tags, then disable auto close and auto complete, noting html is not case sensitive.

Explore how html attributes enrich elements by adding name-value pairs to tags, such as href on anchors and src on images, with practical examples.

Build web page structure by using headings from one to six to title sections and subtitles, and understand how proper heading use supports readability and search engine optimization.

Explore how HTML paragraphs behave, showing margins around each paragraph and how spaces collapse. Learn to create line breaks with the br tag and separate content with the hr tag.

Explore how to apply styles with the HTML style attribute, using inline, internal, and external CSS, and learn practical examples like setting color, font size, and body background.

Discover basic HTML text formatting with tags like bold (b), strong, italic (i), and small, and learn how nested elements and the nearest closing tag determine the display.

Learn how to use HTML comments to convey notes to other developers, hide code for testing, and document what the code does across different editors.

Explore CSS, the cascading style sheets language, to control color, font size, spacing, and layout. See how inline styles, internal style blocks, and external style sheets link under cascade rules.

Learn how HTML anchors create links to external sites, internal pages, and files. Explore using target attributes like _blank and hover titles to enhance navigation.

Add the img tag with a src attribute. Set width and height, provide alt text, and map relative paths through folders to prevent errors.

learn to create an html table with table, tr, th, and td, fill headers and data rows, and style borders and full width with inline styles.

Learn to create HTML lists, both ordered and unordered, using li elements with ol and ul, customize bullets with list-style-type, and display multiple items and basic list styling.

Learn to build a simple navigation menu with HTML and CSS, using an unordered list and anchors, then style margins, padding, bullets, colors, and a hover effect.

Explore how to build HTML forms that collect user data with labels and various inputs, including text, email, password, and a submit button, using type, name, and value attributes.

Explore core form elements by building a gender select box with options, a multi-line text area, and a submit button, including name attributes and a simple click alert.

Learn to implement radio buttons and checkboxes in HTML forms. See how to group radios with the same name, set values and labels, and use file inputs for uploads.

Explore how a form's action targets a backend file for processing and how the method uses get or post to submit data, with get exposing data in the url.

Explore inline versus block elements, how width, height, and margins shape layout, and practice with anchor and span tags, borders, and basic styling to build HTML structure.

Learn how HTML classes organize and style elements with CSS, applying shared classes, multiple classes, and basic properties like color, size, margins, and borders.

Explore how id attributes differ from classes, including case sensitivity, uniqueness, and rules (no starting with numbers, no spaces); use #id in CSS or JavaScript to style or manipulate elements.

Learn how the head defines page setup with UTF-8 encoding, meta description and keywords for SEO, and how scripts and styles should be ordered in HTML.

Explore HTML entities to safely display reserved characters like the less than and greater than signs and the ampersand without confusing them with tags, using codes terminated by semicolons.

Discover how CSS, the cascading style sheets language, controls HTML visuals—from colors and positions to layouts—using classes and IDs with inline, internal, or external styles.

Master css syntax by applying internal styles with selectors and declarations to html elements like paragraphs, using properties such as color and text-align and semicolons.

Learn how to use comments to document your source code, leave notes for collaborators, and understand that comments are not executed by browsers; explore C-style /* ... */ comments.

Master color in web design with color names, rgb and rgba values, and hex codes, and learn to link external stylesheets and apply background and text colors.

Learn how hexadecimal color values work in HTML and CSS, using #rrggbb codes, RGB components, shorthand three-digit forms, and color examples.

Learn to apply background color and background image to elements using CSS, see how colors interact with nested content, and how to set a full-page background on the body.

Learn to control background images in HTML and CSS by applying repeat-x for horizontal tiling, repeat-y for vertical tiling, and no-repeat for a single image, with the default repeat behavior.

Master css backgrounds by applying background attachment and position, compare fixed and scroll behavior, and use shorthand to combine color, image, repeat, and position.

Explore how borders frame elements by applying border width, style (solid, dotted, dashed), and color, using classes as selectors to style elements.

Explore css borders by using border-color with named colors or hex values, set different colors for each side, and apply the shorthand border with width and style like solid.