HTML & CSS Ultimate Course - Build 10 Websites

Learn the basic html structure by using opening and closing html, head, and body tags, plus a title, in any text editor or Dreamweaver.

Learn how HTML comments communicate intent among developers, using the comment tag to document code, comment out sections, and reveal or hide content in a browser.

Learn how div tags organize web pages into containers, with a main container housing article and sidebar sections. Use id and class to name containers for clear, structured HTML layout.

Learn to write clean HTML by clearly nesting elements with proper indentation, identifying parent and child containers, and using consistent naming to improve readability and structure.

Learn how to structure a webpage with the section tag to organize header, navigation, content, and sidebar inside a container, and practice writing clean, readable code.

Explore heading tags from h1 to h6, learn how to apply them in HTML for structured pages, and understand their impact on browser rendering and SEO.

Learn how the span tag, an inline element, wraps a paragraph to apply color with CSS, and how it contrasts with the div as a block-level container.

Learn to insert images using the img tag, set src paths to an images folder, adjust width and height, and wrap images in a div for line breaks.

Discover how alt text improves accessibility and search engine understanding by using descriptive alt attributes for images, and learn practical placement and examples like coffee to boost SEO.

Demonstrate how anchor tags link to external web pages using href, enabling clickable navigation to sites like Google and Yahoo.

learn how to link to images by wrapping an image tag in an anchor tag, using an image from the images folder, and noting its dimensions.

Discover how to link text with anchor tags, create internal page links, link to headings and images, and test results in a browser for better SEO.

Explains header and footer tags, how to structure a page using header, footer, nav, article, and aside, and why semantic elements matter for search engines.

Learn how to structure web pages using article and aside tags in HTML5, with practical examples in WordPress, showing article content and a sidebar alongside header and containers.

Learn how to implement the nav tag to structure site navigation, build links like home, about, blog, and contact, and manage spacing with non-breaking spaces in the header.

Learn to create and customize ordered lists in HTML, including adding links and images within list items, saving files, and previewing in the browser, with a hint toward future styling.

Learn to build ordered lists with HTML using ol and li tags, add anchor links, and place lists within paragraphs or headings, with numeric or bullet styling.

Learn how to insert a horizontal line using the hr tag to place a rule beneath a heading, exploring self-closing syntax and its effect within article and heading structures.

Discover how the break tag (br) creates line breaks in HTML, compare it with divs, and practice using br for separate lines within paragraphs while preparing for simple styling later.

Learn how to center content using the center tag in HTML, with practical examples for headings and paragraphs, and a brief note on using CSS for layout.

Explore how to structure and style tables to display complex data, using table, td, and th elements, define rows, and apply padding and colors with CSS for clear results.

Apply inline CSS by using the style attribute to style elements in place, creating a yellow box with color, padding, and height, and compare with external stylesheets.

Explore internal CSS by placing style tags in the head to style headings with selectors and colors like red or green.

Create an external CSS file in an assets folder and link it to your HTML using a link tag with rel stylesheet and type text/css; refresh to see changes.

Apply CSS to target HTML tags like body, p, and div, adjusting color and padding. Learn to use a style sheet with comments and preview changes in the browser.

Apply colors to a web page using CSS by linking a stylesheet, styling the body, headings, lists, and anchors, and using global versus specific selectors to override colors.

Learn to change font sizes for headings and paragraphs using CSS font-size, with examples like 30px and 20px. Apply color and target elements with a stylesheet, including div tags.

Learn how to adjust line height in CSS using the line-height property, apply it to paragraphs, headings, and subheadings, and explore pixel and em values for readability.

Explore how font weight affects text appearance across font families, try bold, light, normal, and numeric values like 100 and 600, and see how Google Fonts influence weight.

Apply font-family to load Oswald and other fonts, test in the browser, and build font stacks with fallbacks to ensure readable text.

Learn to apply font color and background color with CSS properties, link a stylesheet, and choose color values using a color picker.

Learn to create links in HTML, apply anchor tags, and remove bullets; then style links with CSS using text-decoration none and color to control hover effects and appearance.

Learn to work with images in HTML and CSS by editing in a text editor, linking a style sheet, and adjusting image size and dimensions for proper display.

Learn to display and style images with CSS by linking a stylesheet, setting background images, and controlling width and height, padding, and text overlay within a container.

Apply the border property to create borders around elements, adjusting width in pixels and choosing solid, dashed, groove, or double styles, and set color.

Target multiple tags with CSS by applying a single style to several selectors, such as headings and paragraphs, using comma-separated selectors to color them together.

Explore how CSS floats position elements by aligning a header, article, and a sidebar using left and right floats, padding, and distinct background colors.

Explore CSS floats part 2 by floating article content and a sidebar to the left. See how floats affect following blocks and apply the clear property to fix the layout.

Define CSS classes, link an external stylesheet, and apply the same class to multiple elements to reuse styling, including coloring text red.

Learn how to use ids in HTML to target elements with CSS, recognizing ids are unique per page while classes can be reused, and practice styling with color and padding.

Learn how to create forms in HTML using form tags, input fields, placeholders, labels, and submit buttons, and style them with CSS for clean layouts.

Learn to integrate google fonts into web projects by selecting Oswald, copying the provided link, adding it to the head, and applying font-family in CSS with fallbacks.

Learn to code a simple header with a logo and navigation using HTML and CSS. Create a header container, float logo and menu, center content, and style links and colors.

Build a simple billboard header in HTML and CSS, organizing content with sections, styling with padding, margins, and center-aligned text, and adding a contact button link.

Design a centered 960-pixel content area with a left-floating article and right sidebar, using floats, clearing the floats, responsive images, and typography styling.

Build a simple HTML and CSS footer by creating a footer section, adding navigation links with anchor tags, applying padding, background color, and copyright text.

Create your first professional website with a simple navigation, headings, subheadings, icons, and a footer with social links, using downloadable resources that require no Photoshop.

Build and style a header by structuring a left logo and right navigation, linking CSS, applying a reset, and using Open Sans to center a 960px container.

Develop a billboard section from the design by building a centered container with a 392px height, heading, subheading, and a call-to-action button using open sans.

Coordinate the content section using list or div structures, set up six items with images, headings, and text, and apply classes like content and content heading for alignment and spacing.

Create and style a responsive photo section within a multi-part footer by exporting social icons, inserting images, and applying CSS for layout, color, padding, and centered alignment.

Add about and contact pages, update navigation, and build simple left-right layouts with headings, images, a contact form, and a Google map.

Build an about page in HTML and CSS with a container, two floated columns (left and right), a clear glass overlay, and text and image that mirror the Photoshop layout.

Code a contact page with a two-column layout, including a contact form (name, email, subject, message) and a Google map, and style with CSS to set widths, margins, and borders.

Learn to style the contact form placeholders with css, adjust colors and typography, and embed a Google map at 330 by 247 pixels while linking home, about, and contact pages.

Explore building a second four-page driving school website with a home page, menu, billboard, lessons, instructor page, and contact page, using background images, slicing, and absolute positioning; Photoshop not required.

Build a driving school header with a logo and navigation, styled in a container with reset css, floats, and inline display using spans.

Finish the header by styling the logo and navigation, set Arial 24 pixels font, apply color and text decoration none to links, and adjust padding and margins for centered navigation.

Create and style a billboard section with HTML and CSS, using a 490px tall container, a 960px centered layout, floating text and image, and a download button.

Design and implement a content area with three boxes in HTML and CSS by creating a container, floating the boxes, adding images, and centering text for a clean layout.

Build a footer in html and css with a 960px container, a pink-bordered photo area, social icons, and copyright text, then preview in the browser.

Learn practical HTML and CSS techniques to style a photo container, apply bold fonts, white text, background images, and precise sizing, padding, borders, and centering for web pages.

Copy the home page to create the lessons page, apply a body class, and build a container with three divs, left and right floats, a clear, and a block-level anchor.

Build a lessons page with a 900-pixel wide layout, create containers, add images and text, and implement a learn button while refining HTML and CSS structure.

Learn to complete a two-column lessons page by styling the left and right boxes, transforming buttons to block, centering content, and applying consistent colors, fonts, and dividers with CSS.

Code the become instructor page by creating a hero image on a blue background, with left and right floated divs and a linked image using absolute positioning.

Build the become instructor page by creating a hero section, exporting assets, grouping text and image, and styling a 400-pixel hero with a blue background and links.

Design the instructor page by building two content containers with images and text, centering content, and styling typography and layout using html and css.

Finish building the instructor page by styling a read more button with an anchor tag, using relative and absolute positioning.

Create a centered content container for contact page with a left box for contact info and a right box for the contact form, styled with CSS and a background theme.

continue building the contact page by implementing a contact form with name, email, phone, and message fields plus a send button, and apply styling and layout ideas.

Explore building and styling a contact page by adjusting padding, margins, colors, and spacing, organizing contact info, phone, fax, email, and a contact form across CSS classes.

Fix padding on the contact page and adjust the typography for contact info, email, and phone. Use a relative container and absolute positioning to place the image.

Master styling a contact page by refining the contact form container, heading, font size, line height, padding, and background color, then center the content for a clean, white-on-blue design.

Build a contact page by creating a form with name and message inputs and a textarea, then style with CSS: height, border radius, padding, margins, colors, and button links.

Improve the contact page by adjusting the stylesheet, padding, and margins for inputs and textarea, update placeholders for name, email, and phone, and ensure consistent button alignment across pages.