HTML and CSS Crash Course for Beginners

Learn how CSS separates presentation from content, enabling reuse and caching, and master the CSS rule structure with selectors, declaration blocks, and external styles, internal styles, or inline styles.

Explore how to pick colors with a color picker and apply hex or rgb values in a linked css style sheet, then style headers and paragraphs with cascading rules.

Learn to style web pages with color using hex, rgb, and color keywords, and format text through font families, sizes, weights, styles, and text alignment.

Apply css style properties to adorn html content, refining fonts, colors, and spacing in a live demo. Organize assets in css and images folders and link styles.css with relative paths.

Learn how the CSS box model controls content placement and how to manipulate margin, border, padding, and content on any side with width, height, and shorthand options.

See how the CSS box model and properties like margin, border, padding, width, and height affect how a block is placed on the page.

Understand block-level vs inline elements and how div and span group HTML for CSS styling. Explore tags like abbr, blockquote, code, var, samp, kbd, and pre for formatting and semantics.

Identify how the div tag groups content with class and id attributes and how css selectors style those blocks, including Google fonts and hover effects in the book list demo.

Explore the new HTML5 tags for clearer document structure, including header, footer, nav, figure, and time, and learn to embed audio and video with preload and controls.

Explore HTML5 header, nav, section, video and footer tags, with a dropdown navigation and an embedded video, plus CSS styling for layout and interactivity.

Review the basics of CSS rule sets, selectors, grouping, nesting, pseudo classes and elements, background properties, and the cascade, specificity, box model, and display options.

Explore the CSS block model and how fixed, relative, and absolute positioning and inline versus block display shape page layout, and demonstrate a pure CSS popup triggered by hover.

Explore the four position values: static, relative, absolute, and fixed. See how relative positioning shifts an element to its parent, while absolute and fixed place elements using top, right, bottom, and left.

Design a visually pleasing, easy-to-navigate web page using CSS concepts, with a header container, navigation tabs, content sections, and a membership form with payment.

Explore pure CSS navigation menus—tabbed, dropdown, button, and accordion—featuring color, graphics, embossing, and hover effects built with HTML structure and CSS techniques.

Design a membership registration and payment form using semantic HTML fieldsets and radio inputs for Visa or Mastercard, styled with CSS for a polished, accessible user experience.

Master advanced css positioning, including float behavior with clear fix and before/after elements, plus relative, absolute, and fixed placement with z-index for usable menus.

Build a button-based navigation menu using an unordered list and CSS, incorporating hover and active states, border radius, text shadow, and browser rendering engine prefixes (focus on Firefox).

Explore how to build an accordion style navigation menu with pure CSS, using IDs, classes, and anchor targets to create expandable submenus like services and contact with smooth transitions.

Master HTML basics and CSS through demonstrations and practice to lay out web pages from a design. Prepare for follow-on JavaScript, PHP, and MySQL courses.