Responsive Design HTML CSS Web design – Dreamweaver CC

Module 1: Preparing Your Illustrator Design

⏳ 1 hour

• Topics: Artboard setup, slicing artwork, exporting web-ready assets

• Hands-on: Slice a multi-section landing page and export SVG icons and image slices

Module 2: Dreamweaver Basics & Template Setup

⏳ 1.5 hours

• Topics: Dreamweaver interface, site definition, template concepts (DTL, library items)

• Hands-on: Define a new site, import a basic HTML template, and set up master pages

Module 3: Integrating Illustrator Assets

⏳ 1 hour

• Topics: Placing and positioning images, linking CSS, responsive image techniques

• Hands-on: Insert exported assets into the template and configure <picture> elements for responsiveness

Module 4: Structuring HTML & CSS

⏳ 1.5 hours

• Topics: Semantic HTML, CSS grid/flex basics, external vs. inline styles, Sass introduction

• Hands-on: Map Illustrator layers to semantic HTML sections and apply grid layouts in CSS

Module 5: Customizing Templates & Snippets

⏳ 1 hour

• Topics: Editing Dreamweaver library items, using reusable code snippets, template regions

• Hands-on: Modify header and footer library items and create a snippet for a call-to-action block

Module 6: Adding Interactivity with JavaScript

⏳ 1 hour

• Topics: DOM manipulation, event listeners, integrating jQuery plugins (carousel, lightbox)

• Hands-on: Implement a mobile-friendly menu toggle and image slider in the template

Module 7: Testing & Publishing Your Site

⏳ 1 hour

• Topics: Live preview, device emulation, FTP/SFTP publishing workflow

• Hands-on: Test across desktop and mobile viewports, then publish the finished site to a remote server

Get certificate