An expanded 90-Day Adobe Dreamweaver Study Plan containing comprehensive lecture-style text instructions, step-by-step procedures, code snippets, and key concepts for every single day.

Phase 1: Foundations (Days 1–20)

Day 1: Interface Basics

Lecture Text & Instructions:
Adobe Dreamweaver provides a hybrid development environment combining a visual editor with a robust text/code editor. Understanding the interface structure is key to efficient web authoring.
1. Workspace Layout: Open Dreamweaver. Navigate to the top right corner and select Standard workspace. Key panels include:
  - Document Window: Where your web page displays.
  - Property Inspector: Located at the bottom; dynamically updates based on the selected HTML element to allow quick modifications of attributes (ID, class, src, href).
  - Files Panel: Located on the right; functions as your integrated local/remote file explorer.
2. View Modes:
  - Code View: Displays pure source code.
  - Design View: Shows a visual representation of static HTML/CSS layout.
  - Split View: Divides the workspace into two panes. Code modifications update live in the visual panel, and visual selections highlight the underlying code.
3. Action Step: Go to File > New > HTML. Name your file index.html. Choose a dedicated folder on your local drive (e.g., C:/WebProjects/Dreamweaver90Day) and save your file inside it.

Day 2: Site Setup

Lecture Text & Instructions:
Defining a "Site" in Dreamweaver establishes pathing relationships (relative vs. absolute links) and unlocks code hints, auto-complete, asset management, and FTP sync capabilities.
1. Defining a Local Root Folder:
  - Go to the top menu: Site > New Site.
  - Under Site Name, enter Dreamweaver_Course_Site.
  - Under Local Site Folder, click the folder icon and select your project root folder (C:/WebProjects/Dreamweaver90Day).
2. Organization Structure:
  - Open the Files Panel (Window > Files or press F8).
  - Right-click the root folder and select New Folder. Create three subdirectories:
    - css/ — for stylesheet files.
    - images/ — for image assets.
    - js/ — for custom JavaScript scripts.
  - Go to Site > Manage Sites > Edit > Advanced Settings > Local Info. Set the Default Images Folder to your newly created images/ folder. This prompts Dreamweaver to automatically copy external images into your project directory upon insertion.

Day 3: HTML Basics

Lecture Text & Instructions:

HyperText Markup Language (HTML) forms the structural backbone of web content. Dreamweaver provides DOM navigation and Emmet support for quick markup insertion.

HTML Document Structure: Ensure index.html contains the modern HTML5 boilerplate:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Dreamweaver Site</title>
</head>
<body>
</body>
</html>

Adding Elements: Inside the <body> tag, type or visually insert semantic elements:

Headings:

HTML
<h1>Welcome to My Web Development Journey</h1>
<h2>Phase 1 Foundations</h2>

Paragraphs:

HTML
<p>This paragraph contains basic introductory text created during Day 3 of the Dreamweaver curriculum.</p>

Unordered List:

HTML
<ul>
    <li>HTML5 Structural Markup</li>
    <li>CSS3 Presentation Rules</li>
    <li>JavaScript Interactivity</li>
</ul>

Previewing: Click the Real-Time Preview icon at the bottom right corner of the Document Window (or press F12 / Opt+F12) to launch your default web browser and preview live edits.

Day 4: CSS Basics

Lecture Text & Instructions:
Cascading Style Sheets (CSS) separate content markup from visual formatting. Dreamweaver includes a visual CSS Designer Panel alongside standard code editing options.
1. Creating and Linking Stylesheets:
  - Select File > New > CSS and save the file as css/styles.css.
  - Open index.html. Inside the <head> section, add a link element:
    HTML
    <link rel="stylesheet" href="css/styles.css">
  - Alternatively, use the CSS Designer Panel (Window > CSS Designer): Under Sources, click + > Attach Existing CSS File or Create New CSS File.
2. Styling Typography: Open css/styles.css and write explicit style rules:
  CSS
  body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; color: #333333; background-color: #f4f4f4; } h1 { color: #0056b3; text-align: center; } p { margin-bottom: 15px; }

Day 5: Tables

Lecture Text & Instructions:

While modern web layouts rely on Flexbox and Grid, HTML tables remain essential for displaying structured tabular data accurately.

Inserting a Table via Interface:
- In Dreamweaver, switch to Split View.
- Place your cursor inside the <body> tags in Code view where the table should reside.
- Go to the Insert Panel (Window > Insert), select HTML from the dropdown, and click Table.
- Configure settings: Rows: 4, Columns: 3, Table width: 100%, Border thickness: 1, Cell padding: 8, Header: Top.

Customizing Markup and CSS Styling:

Observe the generated markup:

HTML
<table class="data-table">
    <thead>
        <tr>
            <th>Course Phase</th>
            <th>Duration</th>
            <th>Primary Objective</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Foundations</td>
            <td>20 Days</td>
            <td>Master HTML/CSS/DW Interface</td>
        </tr>
    </tbody>
</table>

Style the table in css/styles.css:

CSS
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
.data-table th, .data-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
.data-table th {
    background-color: #0056b3;
    color: #ffffff;
}

Day 6: Images

Lecture Text & Instructions:
Embedding image assets properly requires specifying dimension attributes, responsive handling, and accessibility compliance through alt attributes.
1. Inserting Images:
  - Save an image (e.g., sample.jpg) into your images/ directory.
  - From the Insert Panel, click Image, or drag the file directly from the Files Panel into Design/Code View.
  - Code structure:
    HTML
    <img src="images/sample.jpg" alt="A detailed description of the sample image" width="800" height="400" class="responsive-img">
2. Property Inspector Usage: Click the image element in Design view. Look at the Property Inspector at the bottom. Fill in the Alt field with descriptive context for screen readers.
3. Responsive Scaling via CSS: Define fluid image constraints in css/styles.css:
  CSS
  .responsive-img { max-width: 100%; height: auto; display: block; }

Day 7: Links

Lecture Text & Instructions:
Hyperlinks drive navigation across internal pages, external domains, and targeted page sections (anchors).
1. Internal and External Links:
  - In Code View or via Property Inspector (using the Point to File target tool), create internal and external anchors:
    HTML
     <p>Learn more at <a href="https://www.adobe.com" target="_blank" rel="noopener noreferrer">Adobe Official Site</a>.</p>  <p>Go to <a href="about.html">About Us</a>.</p>
2. Creating Anchor Links (In-Page Navigation):
  - Assign a unique id attribute to a section tag lower down the page:
    HTML
    <section id="contact-info"> <h2>Contact Details</h2> </section>
  - Create a navigation link pointing directly to that ID:
    HTML
    <a href="#contact-info">Jump to Contact Details</a>

Day 8: Forms

Lecture Text & Instructions:

HTML forms collect user inputs and send datasets to a backend handler or external API endpoint.

Inserting Form Containers and Elements:

Open the Insert Panel, switch the dropdown to Forms, and select Form.

Add input controls inside the form container:

HTML
<form action="process.php" method="POST" id="user-form">
    <div>
        <label for="username">Full Name:</label>
        <input type="text" id="username" name="username" required>
    </div>

    <div>
        <label for="subscribe">
            <input type="checkbox" id="subscribe" name="subscribe" value="yes"> Subscribe to Newsletter
        </label>
    </div>

    <div>
        <button type="submit">Submit Information</button>
    </div>
</form>

Styling Form Controls: Apply basic CSS formatting:

CSS
form div {
    margin-bottom: 15px;
}
input[type="text"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

Day 9: Properties Inspector

Lecture Text & Instructions:
The Property Inspector provides context-sensitive controls for quick styling and attribute management without manually editing raw HTML tags.
1. Accessing the Panel: Go to Window > Properties (Ctrl+F3 or Cmd+F3).
2. Modifying Attributes Visually:
  - Highlight text in Design or Live view. Notice the Property Inspector toggles between HTML and CSS mode.
  - Select HTML mode to assign heading levels (<h1> through <h6>), format lists, or attach hyperlinks using the Link field.
  - Select an image element to visually inspect and modify Src, W, H, Link, and Alt tags.
  - Use the Point to File icon (compass target icon next to the Link field): Drag the string from the inspector directly onto a target file in your Files Panel to write relative paths automatically.

Day 10: Design View

Lecture Text & Instructions:
Dreamweaver’s visual layout engine allows visual composition, drag-and-drop structural updates, and real-time DOM element placement.
1. Visual Drag-and-Drop Workflow:
  - Switch the main document window to Design View or Split View (Design + Code).
  - Open the Insert Panel. Select an element (e.g., Heading 2 or Paragraph).
  - Drag the item directly into the Design View area. A blue insertion marker indicates where the code will be injected.
2. Monitoring Auto-Generated Code:
  - Observe how Dreamweaver writes clean, semantic HTML code in the Code window simultaneously.
  - Click any visual element in Design view, then look at the DOM Panel (Window > DOM) to inspect its exact hierarchical position in the document tree structure.

Days 11–15: Build a Simple 3-Page Static Website

Lecture Text & Instructions:
Consolidate learning from Days 1–10 by building a structured 3-page static website (index.html, about.html, contact.html).
1. Structure Setup: Create three files in the root folder using the same semantic master outline:
  HTML
  <header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header>
2. Page Content Requirements:
  - index.html: Hero banner image, welcome heading, introductory text, call-to-action button.
  - about.html: Profile section, biography paragraphs, structured table displaying skill sets/experience.
  - contact.html: Working HTML form with fields for Name, Email, Subject Message, and a Submit button.
3. Verification: Ensure navigation links function across all pages, stylesheets link correctly, and images load smoothly across all views.

Days 16–20: Practice Styling with CSS

Lecture Text & Instructions:
Refine your static 3-page site by applying advanced styling via css/styles.css using the CSS Designer Panel alongside manual coding.
1. CSS Reset and Typography Base:
  CSS
  * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #fdfdfd; color: #222; }
2. Styling Components:
  - Navigation bar: Horizontal layout using inline-block or floating rules, custom padding, background colors, hover state background changes (a:hover).
  - Forms: Modern rounded input boxes, clear labels, styled call-to-action buttons with subtle cursor feedback (cursor: pointer;).
  - Tables: Zebra striping using CSS selectors:
    CSS
    tbody tr:nth-child(even) { background-color: #f2f2f2; }

Phase 2: Core Web Design (Days 21–40)

Day 21: CSS Layouts — Flexbox and Grid

Lecture Text & Instructions:
Modern layouts rely on Flexbox for 1D alignments and CSS Grid for 2D structured components.
1. Flexbox Implementation: Use Flexbox for navigation headers or equal-height card lists:
  CSS
  .flex-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
2. CSS Grid Implementation: Use Grid for page-level multi-column layouts:
  CSS
  .grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
3. Dreamweaver Live View Inspection: Switch to Live View. Click grid/flex elements to observe blue outline boundaries and visual layout feedback directly on the active layout canvas.

Day 22: Responsive Design — Media Queries

Lecture Text & Instructions:
Responsive Web Design ensures pages adapt cleanly to varying screen sizes using CSS Media Queries.
1. Adding Meta Viewport Tag: Ensure <meta name="viewport" content="width=device-width, initial-scale=1.0"> is present in <head>.
2. Writing Mobile-First Media Queries:
  CSS
  /* Desktop Default Base Rules */ .site-main { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Mobile Override (Screens under 768px) */ @media screen and (max-width: 768px) { .site-main { grid-template-columns: 1fr; /* Stacks vertically */ } nav ul { flex-direction: column; } }
3. Dreamweaver Multiscreen Preview: Use the Window Size Switcher at the bottom right of Live View to switch between Mobile (320px, 375px), Tablet (768px), and Desktop (1200px) presets.

Day 23: Navigation Menus

Lecture Text & Instructions:

Constructing a clean multi-level menu bar requires semantic list structures paired with flex alignment rules.

HTML Markup:

HTML
<nav class="main-nav">
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#">Services &#9662;</a>
            <ul class="submenu">
                <li><a href="#">Design</a></li>
                <li><a href="#">Development</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS Styling for Dropdown Functionality:

CSS
.menu { display: flex; list-style: none; background: #333; }
.menu li { position: relative; }
.menu a { display: block; padding: 14px 20px; color: #fff; text-decoration: none; }
.submenu { display: none; position: absolute; top: 100%; left: 0; background: #444; list-style: none; min-width: 160px; }
.dropdown:hover .submenu { display: block; }

Day 24: CSS Transitions

Lecture Text & Instructions:
Transitions smoothly animate element state changes, improving user interaction feedback.
1. Creating Hover State Animations: Apply transitions directly to base state classes:
  CSS
  .btn-primary { background-color: #0056b3; color: #ffffff; padding: 12px 24px; border: none; border-radius: 4px; transition: background-color 0.3s ease, transform 0.2s ease; } .btn-primary:hover { background-color: #003d82; transform: translateY(-2px); }
2. Live View Verification: Switch to Live View inside Dreamweaver. Move your cursor over elements to test transition timing and visual feedback directly within the editor.

Day 25: JavaScript Basics

Lecture Text & Instructions:

JavaScript introduces client-side dynamic logic to the document.

Linking JavaScript Files: Create a script file at js/main.js. Attach it right before the closing </body> tag of your HTML document:
HTML
```
<script src="js/main.js"></script>
</body>
```
Creating Event Listeners: In index.html, add an interactive button:
HTML
```
<button id="alert-btn">Click For Alert</button>
```

Writing Logic in js/main.js:

JavaScript
document.addEventListener("DOMContentLoaded", function() {
    const alertButton = document.getElementById("alert-btn");
    alertButton.addEventListener("click", function() {
        alert("Hello! JavaScript is executing properly inside Dreamweaver.");
    });
});

Day 26: DOM Manipulation

Lecture Text & Instructions:

The Document Object Model (DOM) enables scripts to alter page structure, styles, and text content dynamically.

Targeting Elements and Modifying Properties:

HTML
<p id="dynamic-text">Original text content before DOM action.</p>
<button id="change-text-btn">Update Text</button>

Writing JavaScript Logic (js/main.js):

JavaScript
const textElement = document.getElementById("dynamic-text");
const changeTextBtn = document.getElementById("change-text-btn");

changeTextBtn.addEventListener("click", function() {
    textElement.textContent = "The paragraph text has been dynamically updated via JS!";
    textElement.style.color = "#28a745";
    textElement.style.fontWeight = "bold";
});

Day 27: Bootstrap Integration

Lecture Text & Instructions:

Bootstrap accelerates development by offering a pre-built responsive grid and UI component framework.

CDN Integration: Add Bootstrap CSS and JS bundles to your document <head> and </body>:

HTML
<!-- In <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Before </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Using Bootstrap Grid Classes:

HTML
<div class="container my-5">
    <div class="row">
        <div class="col-md-4"><div class="p-3 bg-light border">Column 1</div></div>
        <div class="col-md-4"><div class="p-3 bg-light border">Column 2</div></div>
        <div class="col-md-4"><div class="p-3 bg-light border">Column 3</div></div>
    </div>
</div>

Day 28: Templates (`.dwt`)

Lecture Text & Instructions:
Dreamweaver Templates (.dwt) allow you to create fixed layout regions while defining editable sections for child pages.
1. Creating a Template File: Save your master page file as a template: File > Save As Template.... Name it master.dwt. Dreamweaver creates a /Templates folder in your root directory.
2. Defining Editable Regions: Highlight content areas that should change across child pages (e.g., main content area). Select Insert > Template > Editable Region. Name it MainContent.
3. Generating Child Pages: Select File > New > Page from Template. Select master.dwt. Non-editable regions remain locked, ensuring uniform navigation and footer layouts across all pages.

Day 29: Snippets

Lecture Text & Instructions:
The Snippets panel stores frequently used code fragments for fast reuse across projects.
1. Accessing the Panel: Open Window > Snippets (Shift+F9).
2. Creating Custom Code Snippets:
  - Highlight a block of structured code (e.g., a Bootstrap modal window or custom card component).
  - Click the Create New Snippet button (+) at the bottom of the panel.
  - Set Name to Responsive Card Component.
  - Set Trigger Text to bs-card.
  - Insert Code Text:
    HTML
    <div class="card" style="width: 18rem;"> <img src="images/placeholder.jpg" class="card-img-top" alt="Card Placeholder"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">Some example text description here.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>
3. Usage: Type bs-card in Code View and press Tab to expand the snippet immediately.

Day 30: Libraries (`.lbi`)

Lecture Text & Instructions:
Dreamweaver Library items (.lbi) store reusable content blocks (such as footers or callouts) that update globally across all site pages when edited.
1. Creating a Library Item: Highlight code (e.g., global footer element). Select Insert > Template > Add Component to Library. Dreamweaver creates a /Library folder and saves the asset as footer.lbi.
2. Inserting Library Items: Open Window > Assets. Click the Library icon on the side sub-panel. Drag footer.lbi onto target page positions.
3. Global Updating: Open Library/footer.lbi directly, modify the copyright year text, and save. Dreamweaver prompts you to automatically update all child files containing that library reference across the site.

Days 31–35: Build a Responsive 5-Page Website with Bootstrap

Lecture Text & Instructions:
Apply Core Web Design skills to construct a responsive 5-page site (index.html, about.html, services.html, portfolio.html, contact.html) structured around a .dwt template or Bootstrap framework.
1. Architecture Requirements:
  - Master template defining site header, active Bootstrap Navbar navigation bar, and site footer.
  - Bootstrap grid columns used throughout all inner layouts.
2. Page Specifications:
  - index.html: Hero Carousel component, feature columns, client testimonials.
  - about.html: Team member cards using Bootstrap Grid.
  - services.html: Tabbed interfaces or accordion collapse components for service details.
  - portfolio.html: Multi-column image gallery with CSS hover effects.
  - contact.html: Validated form layout wrapped in Bootstrap spacing utilities (mb-3, form-control).

Days 36–40: Add Interactive Elements

Lecture Text & Instructions:
Enhance your 5-page Bootstrap project with JavaScript plugins, CSS keyframe animations, and form feedback rules.
1. CSS Keyframe Animations: Define visual accent highlights in css/styles.css:
  CSS
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .hero-text { animation: fadeIn 1s ease-in-out forwards; }
2. Interactive Elements:
  - Integrate Bootstrap JS Modals for portfolio detailed views.
  - Add customized client-side JavaScript input validation on contact.html to confirm proper email formats before submission.

Phase 3: Advanced Development (Days 41–65)

Day 41: PHP Basics

Lecture Text & Instructions:
PHP is a server-side scripting language executed before web pages are delivered to the browser.
1. Creating .php Files: Rename or create a new file in Dreamweaver named index.php.
2. Writing Basic Syntax:
  PHP
  <!DOCTYPE html> <html lang="en"> <head> <title>PHP Page in Dreamweaver</title> </head> <body> <h1><?php echo "Hello, Dynamic World!"; ?></h1> <p>Current server time is: <?php echo date("Y-m-d H:i:s"); ?></p> </body> </html>
3. Interpretation Note: Opening a .php file directly via browser file paths (file:///C:/...) displays plain source code. It must be processed through an active web server environment (e.g., Apache).

Day 42: Server Setup (Testing Server)

Lecture Text & Instructions:
To execute PHP script files locally, configure a local server stack (XAMPP or WAMP) and connect it within Dreamweaver's testing server configuration.
1. Installing Stack: Install XAMPP. Start Apache and MySQL modules in the XAMPP Control Panel.
2. Configuring Dreamweaver Testing Server:
  - Go to Site > Manage Sites > Select your site > Edit.
  - Click the Servers tab. Click the + icon to add a new server.
  - Server Name: Local Apache Server.
  - Connect using: Local/Network.
  - Server Folder: Navigate to your XAMPP web root folder (e.g., C:\xampp\htdocs\DreamweaverSite\).
  - Web URL: http://localhost/DreamweaverSite/.
  - Under Advanced, switch mode to PHP MySQL.
  - Check the Testing checkbox and click Save.
3. Testing: Save index.php. Live View or Real-Time Preview now parses server-side PHP scripts through http://localhost.

Day 43: Database Connection (MySQL)

Lecture Text & Instructions:

Connecting PHP scripts to MySQL databases enables content storage, dynamic updates, and data management.

Database Setup: Open phpMyAdmin (http://localhost/phpmyadmin). Create a new database named dw_project_db.

Creating Connection File (db.php):

PHP
<?php
$servername = "localhost";
$username   = "root";
$password   = ""; 
$dbname     = "dw_project_db";

// Create connection using PDO
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    // Echo statement for verification during testing:
    // echo "Connected successfully"; 
} catch(PDOException $e) {
    die("Database Connection failed: " . $e->getMessage());
}
?>

Day 44: Dynamic Forms & Database Ingestion

Lecture Text & Instructions:

Capturing user input via HTML forms and storing entries safely inside a MySQL table using PHP.

Create Table Structure in MySQL:

SQL
CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    fullname VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    message TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Writing Submission Logic (process_form.php):

PHP
<?php
require_once 'db.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $fullname = trim($_POST['fullname']);
    $email    = trim($_POST['email']);
    $message  = trim($_POST['message']);

    if(!empty($fullname) && !empty($email) && !empty($message)) {
        $sql = "INSERT INTO messages (fullname, email, message) VALUES (:fullname, :email, :message)";
        $stmt = $conn->prepare($sql);
        $stmt->execute([
            ':fullname' => $fullname,
            ':email'    => $email,
            ':message'  => $message
        ]);
        echo "Message saved successfully!";
    } else {
        echo "Please complete all required fields.";
    }
}
?>

Day 45: CMS Basics — WordPress Integration

Lecture Text & Instructions:
Dreamweaver functions effectively as a local code editor for developing and editing custom WordPress themes.
1. Local Setup: Install WordPress locally within your XAMPP htdocs directory.
2. Setting Up a Theme Project in Dreamweaver:
  - Define a new Dreamweaver Site pointing to htdocs/wordpress/wp-content/themes/my-custom-theme/.
  - Ensure style.css includes the required WordPress Theme Header comments:
    CSS
    /* Theme Name: My Custom Dreamweaver Theme Author: Student Developer Version: 1.0 */
3. Editing Core Template Files: Edit index.php, header.php, footer.php, and functions.php directly inside Dreamweaver while leveraging code hints for WordPress PHP template tags (e.g., <?php get_header(); ?>).

Day 46: Advanced CSS — Gradients & Keyframe Animations

Lecture Text & Instructions:

Elevate visual presentation using modern CSS properties like linear gradients, drop shadows, and complex animated timelines.

Complex Gradients & Shadows:

CSS
.hero-banner {
    background: linear-gradient(135deg, rgba(0,86,179,0.8), rgba(0,0,0,0.9)), url('../images/hero.jpg');
    background-size: cover;
    background-position: center;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19);
}

Multi-Step Keyframe Sequence:

CSS
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(0, 86, 179, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 86, 179, 0); }
}
.cta-button {
    animation: pulseGlow 2s infinite;
}

Day 47: Advanced JS — Image Slider

Lecture Text & Instructions:

Build a custom vanilla JavaScript carousel component to understand state indexing and automated element updates.

HTML Structure:

HTML
<div class="slider-container">
    <img id="slider-img" src="images/slide1.jpg" alt="Slider display image">
    <button id="prev-btn">Prev</button>
    <button id="next-btn">Next</button>
</div>

JavaScript Implementation (js/slider.js):

JavaScript
const images = ["images/slide1.jpg", "images/slide2.jpg", "images/slide3.jpg"];
let currentIndex = 0;

const sliderImg = document.getElementById("slider-img");
const nextBtn = document.getElementById("next-btn");
const prevBtn = document.getElementById("prev-btn");

function updateImage() {
    sliderImg.src = images[currentIndex];
}

nextBtn.addEventListener("click", () => {
    currentIndex = (currentIndex + 1) % images.length;
    updateImage();
});

prevBtn.addEventListener("click", () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    updateImage();
});

Day 48: AJAX Basics

Lecture Text & Instructions:

Asynchronous JavaScript and XML (AJAX) updates sections of a web page dynamically without requesting a full page reload.

HTML Placeholder Container:

HTML
<div id="content-area">Initial content block...</div>
<button id="load-ajax-btn">Load Remote Content</button>

Fetch API Request (js/ajax.js):

JavaScript
document.getElementById("load-ajax-btn").addEventListener("click", function() {
    fetch("data-fragment.html")
        .then(response => {
            if (!response.ok) throw new Error("Network request failed.");
            return response.text();
        })
        .then(data => {
            document.getElementById("content-area").innerHTML = data;
        })
        .catch(error => console.error("AJAX Error:", error));
});

Day 49: APIs — External Data Integration

Lecture Text & Instructions:

Fetching JSON payload datasets from external REST APIs and injecting them dynamically into the DOM.

Fetching Public Data: Fetch example user entries from JSONPlaceholder:
HTML
```
<ul id="user-list"></ul>
```

JavaScript Processing:

JavaScript
async function fetchWebUsers() {
    try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        const users = await res.json();
        const listContainer = document.getElementById("user-list");

        listContainer.innerHTML = ""; // Clear existing contents
        users.forEach(user => {
            const li = document.createElement("li");
            li.textContent = `${user.name} — Email: ${user.email}`;
            listContainer.appendChild(li);
        });
    } catch(err) {
        console.error("API Fetch Error:", err);
    }
}
fetchWebUsers();

Day 50: SEO Basics

Lecture Text & Instructions:

Search Engine Optimization (SEO) improves search engine crawling efficiency and site ranking metrics.

Structuring <head> Metadata Tags:

HTML
<title>Expert Web Development & Design Portfolio</title>
<meta name="description" content="Discover professional web design services, PHP dynamic application samples, and custom responsive solutions.">
<meta name="keywords" content="Web Design, Dreamweaver, PHP, Responsive, Frontend Developer">
<meta name="robots" content="index, follow">
<!-- Open Graph Metadata for Social Platforms -->
<meta property="og:title" content="Expert Web Development Portfolio">
<meta property="og:image" content="images/og-cover.jpg">

On-Page Semantic Best Practices: Use a single <h1> tag per page, enforce clean text hierarchy (<h2> to <h6>), ensure all <img> elements include meaningful alt attributes, and construct descriptive URL slugs.

Days 51–55: Build a Dynamic Blog Site with PHP + MySQL

Lecture Text & Instructions:
Construct a dynamic blog engine using PHP and MySQL.
1. Database Schema: Create a posts table containing: id, title, slug, content, author, created_at.
2. Page Architecture:
  - db.php: Database PDO configuration file.
  - index.php: Queries all posts from the database and loops through them:
    PHP
    <?php require_once 'db.php'; $stmt = $conn->query("SELECT * FROM posts ORDER BY created_at DESC"); while($row = $stmt->fetch(PDO::FETCH_ASSOC)) { echo "<article>"; echo "<h2>" . htmlspecialchars($row['title']) . "</h2>"; echo "<p>" . substr(htmlspecialchars($row['content']), 0, 150) . "...</p>"; echo "<a href='post.php?id=" . $row['id'] . "'>Read More</a>"; echo "</article>"; } ?>
  - post.php: Fetches dynamic post ID details via URL parameter ($_GET['id']) using prepared statements.
  - admin_create.php: Form layout to insert new blog post entries into the MySQL database.

Days 56–60: Add AJAX Features and API Integration

Lecture Text & Instructions:
Enhance your PHP dynamic blog by embedding asynchronous user interactions and third-party data feeds.
1. AJAX Comment Posting System: Place a comment form on post.php. Use fetch() inside JavaScript to send post submissions to add_comment.php asynchronously. Inject newly submitted comments directly into the DOM list without reloading the page.
2. API Data Integration Widget: Add a live weather or crypto ticker widget script to the blog sidebar that queries external REST APIs and updates metrics automatically every 60 seconds.

Days 61–65: Optimize Site for SEO & Performance

Lecture Text & Instructions:
Audit and optimize code structures, image assets, and database queries.
1. Asset Compression: Compress all JPEG/PNG assets using WebP formats. Update HTML tags to include explicit width and height attributes to mitigate Cumulative Layout Shift (CLS).
2. Canonical Links & Schema.org Markup: Add canonical URL declarations to prevent duplicate content indexing:
  HTML
  <link rel="canonical" href="https://www.example.com/blog/post.php">
3. SQL Optimization: Ensure primary index keys are properly configured in MySQL for efficient execution of SELECT queries across foreign key structures.

Phase 4: Professional Workflow (Days 66–90)

Day 66: Version Control — Git Integration

Lecture Text & Instructions:
Version control tracks code changes, manages revisions, and facilitates collaborative development workflows.
1. Initializing Repository: Open Terminal or Git Bash inside your project local root folder:
  Bash
  git init
2. Creating .gitignore: Create a .gitignore file to skip untracked system or server configuration files:
  Plaintext
  .DS_Store /nbproject/ /Library/ /Templates/ db.php
3. Staging and Committing:
  Bash
  git add . git commit -m "Initial commit of full Dreamweaver course project"
4. Dreamweaver Git Panel Integration: Open Window > Git. Dreamweaver provides built-in visual staging, commit message prompts, and branch management controls directly within the editor interface.

Day 67: Collaboration Workflows

Lecture Text & Instructions:
Managing remote repository syncing and resolving code merge conflicts.
1. Linking Remote Repositories: Connect local Git repositories to GitHub, GitLab, or Bitbucket:
  Bash
  git remote add origin https://github.com/username/dw-project.git git branch -M main git push -u origin main
2. Branching Strategy: Practice feature branching workflows before merging code changes into production:
  Bash
  git checkout -b feature/contact-form-update

Day 68: Accessibility (WCAG Compliance)

Lecture Text & Instructions:
Ensuring web applications meet Web Content Accessibility Guidelines (WCAG 2.1) standards for screen readers and keyboard navigation.
1. ARIA Roles and Attributes: Add ARIA landmarks and explicit field bindings:
  HTML
  <nav aria-label="Main Navigation"> ... </nav> <input type="text" id="user-email" aria-required="true" aria-describedby="email-help"> <span id="email-help" class="sr-only">Please enter a valid email address.</span>
2. Keyboard Focus States & Contrast Audit: Ensure interactive elements retain explicit visual focus indicators:
  CSS
  a:focus, button:focus { outline: 3px solid #ffbf47; outline-offset: 2px; }
3. Contrast Testing: Validate that color choices maintain a minimum contrast ratio of 4.5:1 for standard text.

Day 69: Cross-Browser & Device Testing

Lecture Text & Instructions:
Testing layouts across diverse browser engines (Blink, Gecko, WebKit) and device configurations.
1. Browser Engine Auditing: Open and test site pages across Chrome, Firefox, Safari, and Edge. Verify CSS reset rules prevent default styling discrepancies.
2. Emulation Tools: Use Browser Developer Tools (F12) device emulation modes to test layout rendering across target viewport sizes (e.g., iPhone, iPad, Galaxy Tablet).
3. Checking Feature Support: Verify CSS property compatibility using compatibility databases (e.g., CanIUse) before deploying newer layout properties.

Day 70: Deployment via FTP/SFTP

Lecture Text & Instructions:
Transferring local production files securely to live public web servers using Dreamweaver’s integrated FTP engine.
1. Configuring Remote Server in Dreamweaver:
  - Go to Site > Manage Sites > Edit > Servers.
  - Add a new server. Name: Live Production Server.
  - Connect using: SFTP (Secure File Transfer Protocol).
  - Enter SFTP Address (e.g., sftp.yourdomain.com), Port (22), Username, and Password or Private Key credentials.
  - Set Root Directory (e.g., /public_html/).
  - Set Web URL ([https://www.yourdomain.com](https://www.yourdomain.com)).
2. Syncing Files: Open the Files Panel. Select local project files and click the Put File(s) arrow icon (Up arrow) to upload assets to your live production host.

Day 71: Performance Optimization — Minification

Lecture Text & Instructions:
Reducing network payload sizes by minifying CSS/JS assets and configuring browser caching.
1. Asset Minification: Strip whitespace, comments, and unneeded characters from production files (styles.css -> styles.min.css) using CLI build engines or online minifiers.
2. Enabling Compression via .htaccess: Add compression directives to your Apache server setup:
  Apache
  <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/json </IfModule>

Day 72: Security Basics — Input Sanitization

Lecture Text & Instructions:
Protecting web applications against common web vulnerabilities, including Cross-Site Scripting (XSS) and SQL Injection attacks.
1. Preventing SQL Injection: Always use PDO Prepared Statements with parameterized queries instead of directly concatenating raw input variables:
  PHP
  // SECURE: $stmt = $conn->prepare("SELECT * FROM users WHERE email = :email"); $stmt->execute([':email' => $userEmail]);
2. Preventing XSS Attacks: Sanitize all user-generated content prior to rendering it in the DOM using htmlspecialchars():
  PHP
  echo htmlspecialchars($user_comment, ENT_QUOTES, 'UTF-8');

Day 73: Advanced PHP — User Authentication System

Lecture Text & Instructions:

Build secure user session management, password hashing, and authentication access controls.

Password Hashing (register.php): Secure user credentials using modern hashing algorithms:
PHP
```
$hashedPassword = password_hash($rawPassword, PASSWORD_BCRYPT);
```

Session Verification (login.php & dashboard.php):

PHP
// login.php
session_start();
if (password_verify($inputPassword, $user['password_hash'])) {
    $_SESSION['user_id'] = $user['id'];
    header("Location: dashboard.php");
    exit();
}

// dashboard.php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

Day 74: Frontend Framework Integration — React / Vue

Lecture Text & Instructions:

Integrating modern frontend framework components into traditional HTML/PHP pages using CDN script tags.

Vue.js CDN Integration:

HTML
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
    <h2>{{ message }}</h2>
    <button @click="reverseMessage">Reverse Text</button>
</div>

<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return { message: 'Vue Component Running inside Dreamweaver Page' }
    },
    methods: {
      reverseMessage() {
        this.message = this.message.split('').reverse().join('')
      }
    }
  }).mount('#app')
</script>

Day 75: API Projects — Live Weather Application

Lecture Text & Instructions:

Build a standalone single-page application that retrieves asynchronous weather metrics based on user city inputs.

Markup Architecture (weather.html):

HTML
<div class="weather-card">
    <input type="text" id="city-input" placeholder="Enter City Name...">
    <button id="get-weather-btn">Fetch Forecast</button>
    <div id="weather-display"></div>
</div>

JavaScript Integration (js/weather.js):

JavaScript
document.getElementById("get-weather-btn").addEventListener("click", async () => {
    const city = document.getElementById("city-input").value;
    const apiKey = "YOUR_OPENWEATHERMAP_API_KEY"; // Replace with key
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;

    try {
        const res = await fetch(url);
        if(!res.ok) throw new Error("City entry not found.");
        const data = await res.json();

        document.getElementById("weather-display").innerHTML = `
            <h3>${data.name}, ${data.sys.country}</h3>
            <p>Temperature: ${data.main.temp} &deg;C</p>
            <p>Condition: ${data.weather[0].description}</p>
        `;
    } catch(err) {
        document.getElementById("weather-display").textContent = err.message;
    }
});

Days 76–80: Build a Full E-Commerce Prototype

Lecture Text & Instructions:
Construct an interactive e-commerce product catalog with an active shopping cart mechanism using local storage or session states.
1. Product Database Table: products (id, title, price, image_url, description).
2. Catalog Page (products.php): Render product cards dynamically from MySQL entries. Add an "Add to Cart" button bound to product IDs.
3. Cart Session Mechanics (cart.php):
  - Manage an active cart array stored inside $_SESSION['cart'].
  - Display detailed cart breakdowns, subtotal calculations, and tax percentages.
4. Mock Checkout View (checkout.php): Build a billing information form with validation scripts to handle order submissions.

Days 81–85: Conduct Usability Testing & Accessibility Audit

Lecture Text & Instructions:
Perform comprehensive user testing and validate site accessibility compliance before final deployment.
1. Automated Audits: Run Google Lighthouse audits on your target pages. Work to achieve scores of 90+ across Performance, Accessibility, Best Practices, and SEO.
2. Manual Usability Testing: Test user flow paths across all main tasks (e.g., searching for a product, adding items to the cart, submitting contact queries). Address any navigation friction points or layout breaks.
3. Accessibility Verification: Run accessibility evaluation tools (such as WAVE) to identify and fix missing form labels, inadequate color contrast, or irregular heading structures.

Days 86–89: Final Polish

Lecture Text & Instructions:
Conduct a final code cleanup, remove debug scripts, and fix responsive edge cases across all devices.
1. Code Cleanup: Remove all console.log() statements, comment out unused PHP test blocks, format HTML/CSS files cleanly, and ensure consistent indentation across all project assets.
2. Cross-Device Validation: Re-test all site features across desktop, tablet, and mobile displays using live device previews and browser developer tools.
3. Final Performance Audit: Verify all images are compressed, scripts load asynchronously where appropriate, and all page links resolve without broken paths.

Day 90: Final Capstone Project — Portfolio Showcase

Lecture Text & Instructions:
Synthesize every core skill acquired throughout this 90-day curriculum into a production-ready, professional Web Development Portfolio Showcase site.

Portfolio Functional Requirements:
- Dynamic CMS Integration: Built using PHP & MySQL to dynamically render project case studies and blog entries.
- Interactive UI Components: Includes asynchronous dynamic content loads (JS/AJAX), custom image lightboxes, interactive filter controls, and dynamic API integrations.
- Responsive Design & Accessibility: Built mobile-first using Bootstrap 5 / Flexbox Grid, passing WCAG 2.1 AA standards with accessible navigation and proper keyboard support.
- Optimized SEO & Performance: Fully configured structured JSON-LD data, dynamic meta tags, optimized asset compression, minified stylesheet bundles, and canonical link structures.
Final Deployment Step: Configure remote site credentials inside Adobe Dreamweaver's Site Manager (Site > Manage Sites). Push your final portfolio code live using SFTP sync. Perform a live browser check to confirm database connections, script execution, and responsive layouts function seamlessly in production.

90-Day Adobe Dreamweaver Study Plan

Phase 1: Foundations (Days 1–20)

Day 1: Interface Basics

Day 2: Site Setup

Day 3: HTML Basics

Day 4: CSS Basics

Day 5: Tables

Day 6: Images

Day 7: Links

Day 8: Forms

Day 9: Properties Inspector

Day 10: Design View

Days 11–15: Build a Simple 3-Page Static Website

Days 16–20: Practice Styling with CSS

Phase 2: Core Web Design (Days 21–40)

Day 21: CSS Layouts — Flexbox and Grid

Day 22: Responsive Design — Media Queries

Day 23: Navigation Menus

Day 24: CSS Transitions

Day 25: JavaScript Basics

Day 26: DOM Manipulation

Day 27: Bootstrap Integration

Day 28: Templates (.dwt)

Day 29: Snippets

Day 30: Libraries (.lbi)

Days 31–35: Build a Responsive 5-Page Website with Bootstrap

Days 36–40: Add Interactive Elements

Phase 3: Advanced Development (Days 41–65)

Day 41: PHP Basics

Day 42: Server Setup (Testing Server)

Day 43: Database Connection (MySQL)

Day 44: Dynamic Forms & Database Ingestion

Day 45: CMS Basics — WordPress Integration

Day 46: Advanced CSS — Gradients & Keyframe Animations

Day 47: Advanced JS — Image Slider

Day 48: AJAX Basics

Day 49: APIs — External Data Integration

Day 50: SEO Basics

Days 51–55: Build a Dynamic Blog Site with PHP + MySQL

Days 56–60: Add AJAX Features and API Integration

Days 61–65: Optimize Site for SEO & Performance

Phase 4: Professional Workflow (Days 66–90)

Day 66: Version Control — Git Integration

Day 67: Collaboration Workflows

Day 68: Accessibility (WCAG Compliance)

Day 69: Cross-Browser & Device Testing

Day 70: Deployment via FTP/SFTP

Day 71: Performance Optimization — Minification

Day 72: Security Basics — Input Sanitization

Day 73: Advanced PHP — User Authentication System

Day 74: Frontend Framework Integration — React / Vue

Day 75: API Projects — Live Weather Application

Days 76–80: Build a Full E-Commerce Prototype

Days 81–85: Conduct Usability Testing & Accessibility Audit

Days 86–89: Final Polish

Day 90: Final Capstone Project — Portfolio Showcase

Comments

Post a Comment

Popular posts from this blog

average salary of virtual assistant in the Philippines

list the task of a virtual assistant

Google Digital Marketing & E-commerce Professional Certificate

Day 28: Templates (`.dwt`)

Day 30: Libraries (`.lbi`)