Creating Modern Websites from Scratch using HTML & CSS

Explore how HTML shapes web pages through tags, opening and closing elements, and void elements, and learn to view source, doctype, head, and body.

Set up a web project with a root folder, organize images and styles in subfolders, and name files in lowercase with dashes or underscores.

Create a 'doctors' root folder and an images folder, then build four pages—index.html, about.html, staff.html, and contact.html—saving them in the root to establish the site's foundation.

Explore how to structure web pages with headings, paragraphs, and breaks, including using a single h1 heading, creating paragraph blocks, and the break element to control line spacing.

Explore how whitespace collapses in the browser and how HTML comments, including opening and closing tags, help separate sections and debug code.

Explore how to format text in HTML using inline and block elements, including bold and strong, italics and em, small, subscript, superscript, and blockquotes with citations.

Explore creating ordered, unordered, and definition lists with ol, ul, and dl, using li, dt, and dd tags, and nesting lists for navigation menus.

Explore how to create external and internal links, use absolute and relative destinations, implement anchor targets, and craft accessible mailto and id-based page jumps in HTML.

Learn basic HTML formatting by copying text into pages, structuring navigation, headings, and paragraphs, applying italics and sections to organize a four-page site.

Select and insert high-quality images for web pages, understanding image rights and licensing, using stock or own images, and properly sizing with alt text and relative or absolute sources.

Discover how to create and extend tables in HTML, using table, rows, and data cells with borders, captions, and semantic sections like table head, table body, and table foot.

Learn to create and use web forms with text inputs, password fields, textareas, radio buttons, checkboxes, dropdowns, labels, and placeholders; understand get and post submissions and basic validation.

Master containment in HTML by using divs and classes to structure header, hero, nav, content, and footer, while adding images, a logo, call-to-action, and a newsletter field.

Copy the header and the footer across pages to establish a consistent layout, then set up the about page with a wrapper and add staff section with icons and titles.

Explore HTML5 basics and learn how semantic elements like header, nav, main, and footer replace generic divs for clearer structure, with consistent id naming and improved accessibility.

Replace the header div with a semantic header element, embed navigation inside it, and apply the 3Cs specification to improve semantic markup and accessibility.

Explain how the nav element marks major navigation blocks, its place among flow content and sections, and when to include or omit it, with examples like footer links.

Explore how the aside element creates semantically related content and sidebars, and learn to replace divs with aside to improve semantic markup and pull quotes on modern websites.

Learn when to use the section element, article element, or div, guided by the specification, flow content rules, and whether content should appear in the document outline.

Explore the article element as a self-contained, reusable content unit in a web page, with nested articles, use cases like blog posts and reviews, and guidelines on author information.

Learn how the footer element represents a page or section footer with flow content, including authorship, related links, and copyright, and how to replace a div for semantic meaning.

Learn how to upgrade semantics by replacing divs with header, section, article, and footer elements to improve meaning and accessibility using HTML5 elements.

Explore how cascading style sheets define presentation with selectors and declarations, visualize the invisible box around each element, distinguish block and inline elements, and apply properties and hover effects.

Explore how to use comments in css to document code, understand how properties and values form declarations, and see how inheritance affects styling and how to override with specific values.

Explore how cascade, inheritance, and specificity determine CSS styling: the last rule wins, more specific selectors override, and some properties inherit font-family while background color does not.

Learn how to apply styles across pages using inline, embedded, and external styles, and link an external stylesheet to update multiple pages from one place.

Explore how CSS selectors target elements to apply style rules, from type and universal selectors to class, id, and attribute selectors, including descendant, child, and sibling relationships.

Explore the units of measurement in css, including pixels, ems, and percentages, and learn how font size interacts with the browser's 16px default to build scalable layouts.

Explore how default browser styles differ across browsers and learn to reset or normalize them using Eric Meyer's CSS reset for a consistent starting point.

Create and link an external stylesheet to apply consistent styling across multiple pages. Organize styles with page sections and comments, add header and footer links, and include a global reset.

Explore how CSS colors bring pages to life by using hex, short hex, rgb, color names, and hsla with alpha, plus color charts and practical examples.

Discover CSS text properties that affect readability, including color, text transform, line height, and letter and word spacing. Practice text align, text indent, text-decoration, and text-shadow to round out typography.

Explore how fonts affect text display by examining typeface flavors, font family and fallbacks, and learn to use font-face and web fonts for consistent design.

Customize browser default link styles by changing color and removing underlines, and apply anchor pseudo-classes (link, visited, hover, active) to create interactive states.

Explore the CSS box model, where each element has a box of content, padding, borders, and margins. Adjust width and height to fit content, and use overflow and auto margins.

Explore how to control backgrounds in CSS, from setting the body and element backgrounds to using background image, repeat, attachment, position, and shorthand, with practical embedded style examples.

Explore how to customize lists with CSS using list-style-type, list-style-position, and list-style-image, transform lists into navigation menus with hover effects, and control cursors for interactive behavior.

Facelift the index.html by styling the navigation with a selected state and hover effects, adding a header gradient, and centering the hero in a 960px container.

Apply a call-to-action background image, position text above it, and style key sections—headings, office hours, footer, and newsletter—using CSS with gold accents.

Reuse the header and footer to build the about page, add a gradient, format the company and mission statements, and style the image with gold strips.

Copy the header and footer from existing pages and center the staff content within a 960-pixel wrapper. Style the staff image, title, description, and links with hover effects.

Learn how to perform a facelift of the contact page by integrating header and footer, adding background images, centering a form image and map, and applying borders with CSS.

Explore the three layout approaches: fixed, fluid, and elastic, and learn how width is set with pixels, percentages, or ems to guide responsive design.

Explore the difference between block level and inline elements, and how the display property shapes their layout. Use inline and inline-block values to create horizontal navigation from list items.

Learn to control page layout by positioning elements with relative, absolute, and fixed methods, using top, bottom, left, and right offsets, and understand z-index stacking.

Understand how to float elements to align blocks on a single line, let surrounding content flow, and use clear with both to reset layout and add margins for even spacing.

Style a dental doctors contact form using a basic form class, labels, inputs, selects, and a hover submit button, ensuring consistency across different browsers with CSS styling.

Test and debug CSS across browsers and platforms using elimination, comment-out techniques, and a red border to isolate issues, then validate with the browser's developer tools and an online validator.

Master the layout by floating the logo and navigation, fixing the hero and CTA sections, and debugging with browser inspector to adjust borders, margins, and colors.

Learn to lay out index.html by floating the welcome text and hours, clearing floats, and refining widths, margins, and line height for services and footer.

Learn to lay out the about page by floating the image and content beside the company statement, clear the floats, and refine typography with CSS for a polished page.

Master the staff page layout by turning text into a link, wrapping content in divs, applying floats and display block, and polishing header navigation and footer details.

Create and style a contact page by embedding a form with an embedded stylesheet, copying its structure from a staff page, and refining the header and spacing inside a container.

Learn how vendor prefixes let browsers adopt new CSS properties before the final spec, with WebKit prefixes used by Chrome and Safari.

Explore how to create rounded corners with pure css3 using the border-radius property, applying it to divs, images, and text, with vendor prefixes, individual corners, and circle tricks.

Explore how to apply drop shadows with text-shadow and box-shadow in CSS, including multiple shadows, offsets, blur, color, and optional inset and spread for different elements.

Learn how to apply CSS border images using the border-image shorthand, slicing an image into corners and edges, and controlling stretch, round, or repeat with vendor prefixes.

Explore implementing multiple backgrounds in CSS by layering a clouds image over a sky background, with a fallback color, using comma-separated background-image values, background-position, and background-repeat to control each layer.

Explore gradients in CSS, including linear and radial types, directions, and multi-color stops; learn to use background shorthand, vendor prefixes, and display techniques like inline-block.

Apply the opacity property to control an element's transparency from 0 to 1, using values like 0.5 or 0.1 to create semi-transparent effects, with backgrounds or parent elements shining through.

Apply finishing touches to a modern website by styling the contact form with rounded corners and shadows, validating code, and testing browser compatibility across major browsers.

Launch a personal website to showcase your HTML and CSS skills, build a portfolio, and promote your services to gain referrals.

Customize the Korsh project by replacing images, colors, layouts, and theme to make it your own. Create a backup before editing and share your final project in the course discussion.

Discover how reviews guide course improvements, with lifetime access to leave a detailed, star-rated review and title to help the instructor refine content for future students.