Web Design for Beginners: Real World Coding in HTML & CSS

Learn how HTML powers web pages and why it's the first language for designers, with a split course teaching HTML first, then CSS, to build professional web skills.

Learn how html powers web pages by creating a simple page with h1, h2, and p elements, save as index.html, and view in a browser to see semantic content.

Start coding quickly with code pen, a browser-based editor that shows real-time HTML and CSS previews with no sign-up, and follow along demos to prepare for a true text editor.

Create your first HTML page by writing a heading in a plain text file, save it as .html, and load it in a browser to view.

Create a bulleted list and nest HTML elements inside one another using UL and LI, exploring ancestry and nesting to build well-structured, semantic HTML.

Learn to link pages using HTML anchors and the href attribute, building a two-page mini site and mastering how attributes enable navigation.

Explore vector graphics vs raster images, learn how to create and export SVGs in figma, and embed scalable vector graphics into web pages for crisp displays.

Explore how heading elements create structure and hierarchy in web pages, using h1 to h6 to organize content, with a printed-page analogy to understand sections and readability.

Learn to choose the right list type to describe content, focusing on unordered, ordered, and description lists. Build clean, semantically rich lists with ul, ol, and dl usage examples.

Learn how to emphasize text with strong and em tags, distinguish semantic meaning from presentational italics, and why prefer strong over b and em over i for accessibility.

Explore semantic structural elements—header, footer, article, and aside—and learn to wrap content for well-structured html pages. Apply these elements to organize headers, footers, and side content.

Learn to use the nav element to build a primary navigation with an unordered list of links (home, about, contact) in the header, ensuring consistent cross-page navigation.

Learn how div and span serve as non-semantic elements for structuring and styling web pages, using div for sectioning and span for inline styling with classes.

Learn how HTML comments serve as in-code documentation, not rendered by the browser, to explain structure. See the <!-- and --> syntax and practice ending divs with comments for clarity.

Discover how the section element creates semantic structure by dividing content into chapters and subsections. Nest sections to mirror heading hierarchy and improve accessibility and CSS targeting.

Learn to build an HTML form from scratch with text inputs for first and last name, accessible labels tied by for and id, and a submit button with name attributes.

Explore different input types for forms, such as email and tel, to improve validation and on-screen keyboards, and learn to use labels and textarea elements.

Learn to create select dropdowns, radio inputs, and checkboxes for user choices, choosing the right tool for single or multiple selections.

Create a data table in HTML using table, tr, td, and th, and organize rows with thead, tbody, and tfoot while labeling headers for clarity and semantic structure.

Discover why not using tables for layout is essential and how CSS handles layout and design in web design.

Discover how CSS transforms web pages by styling with colors and layouts, linking a stylesheet, and using selectors, declarations, properties, and values to control presentation.

Explore type selectors, descendant selectors, and class selectors to target elements across the page, and learn how the highlight class enables reusable, context-aware styling.

Explore the cascade by examining browser defaults, inheritance, and specificity, and learn how to override with style sheets, including descendant and class selectors.

Master the CSS box model by treating each element as a box and using padding, border, and margin to control width, height, and layout, including box sizing border box.

Learn how CSS floats pull images or text left or right to wrap content, and how modern flexbox replaces floats for two-column layouts while preserving prior float techniques.

Design a two-column page layout with floats by building a main area and a sidebar, setting widths and using a clear fix to manage floated content.

Style the header navigation menu with HTML and CSS to create a horizontal menu bar by removing bullets, floating items, and adding hover effects.

Learn to style data tables with CSS, applying left header alignment, borders and padding, and use zebra striping, 100% width, and nth-child selectors.