Responsive Design HTML CSS Web design – Dreamweaver CC Course Syllabus
Full curriculum breakdown — modules, lessons, estimated time, and outcomes.
Overview: This hands-on course guides beginners through the process of transforming Adobe Illustrator designs into fully responsive websites using Dreamweaver CC. You'll learn how to export assets, structure HTML and CSS, use reusable templates and snippets, and add basic interactivity. With a total time commitment of approximately 7 hours, this course blends design and development to help graphic designers transition smoothly into front-end implementation.
Module 1: Preparing Your Illustrator Design
Estimated time: 1 hour
- Artboard setup for web layouts
- Slicing artwork for web export
- Exporting SVG, PNG, and JPEG assets
- Optimizing graphics for performance
Module 2: Dreamweaver Basics & Template Setup
Estimated time: 1.5 hours
- Navigating the Dreamweaver interface
- Defining a new site structure
- Understanding Dreamweaver Template Language (DTL)
- Setting up master pages and library items
Module 3: Integrating Illustrator Assets
Estimated time: 1 hour
- Placing exported images into HTML
- Positioning assets with CSS
- Linking external stylesheets
- Using <picture> elements for responsive images
Module 4: Structuring HTML & CSS
Estimated time: 1.5 hours
- Mapping Illustrator layers to semantic HTML
- Applying CSS Grid and Flexbox layouts
- Differentiating external and inline styles
- Introduction to Sass for styling
Module 5: Customizing Templates & Snippets
Estimated time: 1 hour
- Editing Dreamweaver library items
- Creating and using code snippets
- Managing editable and locked template regions
Module 6: Adding Interactivity with JavaScript
Estimated time: 1 hour
- Understanding DOM manipulation
- Adding event listeners for user interaction
- Integrating jQuery plugins for sliders and lightboxes
- Implementing mobile-friendly navigation toggles
Module 7: Testing & Publishing Your Site
Estimated time: 1 hour
- Using live preview and device emulation
- Testing responsiveness across viewports
- Setting up FTP/SFTP for publishing
- Deploying the final site to a remote server
Prerequisites
- Familiarity with Adobe Illustrator basics
- Basic understanding of web concepts (HTML, CSS)
- No prior coding experience required
What You'll Be Able to Do After
- Translate Illustrator mockups into functional websites
- Structure responsive layouts using HTML and CSS
- Use Dreamweaver templates and snippets efficiently
- Add interactive elements like menus and sliders
- Publish a responsive website to a live server