Step 1

1. Main Site Root Folder

The Site Root Folder is key to your project's success. Computers are sensitive to file placement. If a file is moved after linking, the webpage may not function correctly. Commit to keeping the Main Site Root Folder in one place and consider backing it up on additional storage. Follow the steps below to set up the folder in Dreamweaver, particularly on lab computers where you'll need to re-link it each time.

2. HTML Sandwich

Modern HTML documents are structured for better accessibility and search engine optimization. The basic structure includes:
  • Doctype Declaration: `` for HTML5.
  • HTML Element: `<html>` wrapping the entire document.
  • Head Element: `<head> </head>` for meta-information, stylesheets, and scripts.
  • Body Element: `<body> </body>` containing visible content.
Use semantic elements (`<header>`, `<nav>`, `<main>`, etc.) to make the page more understandable for both users and search engines.

3. HTML Structure and Content

HTML uses semantic elements to define content and structure:
  • Content Elements: Text, images, multimedia.
  • Structural Elements: Semantic tags like `<header>`, `<main>`, `<footer>`, `<article>`, `<section>`, and `<aside>`.
  • Identifiers: Use `class` for elements that repeat and `id` for unique elements.
  • Tags: Define elements like `<p>` for paragraphs, `<a>` for links.
Semantic tags offer better accessibility and SEO than non-semantic ones like `<div>`.

4. CSS = Style

CSS defines the look and layout of a webpage. Modern practices include responsive design, Flexbox, and CSS Grid.

4A. External Stylesheets:

Linking a separate `.css` file is the most efficient way to style your site, separating content from design.

4B. Embedded CSS:

Use `<style>` tags inside the `<head>` for single-page styles.

4C. Inline CSS:

Inline CSS is least efficient but useful for quick, specific styling. For layout and structure, use Flexbox for one-dimensional layouts and CSS Grid for two-dimensional layouts. Adopt responsive design practices with media queries and relative units like percentages to ensure adaptability across devices.

5. Advanced CSS Techniques

Flexbox manages one-dimensional layouts, allowing for dynamic item alignment and space distribution. CSS Grid handles two-dimensional layouts, organizing items into both rows and columns. Both methods are powerful and make older layout techniques like floats obsolete.