Responsive Design HTML CSS Web design Dreamweaver CC

Learn HTML5 & CSS3 web design skills. Build beautiful responsive design websites in Dreamweaver CC
Responsive Design HTML CSS Web design Dreamweaver CC
File Size :
2.40 GB
Total length :
3h 52m



Daniel Walter Scott


Last update




Responsive Design HTML CSS Web design Dreamweaver CC

What you’ll learn

39 lectures 3+ hours of well-structured content!
You’ll learn to build a responsive portfolio website from scratch.
Learn how to take a design from Illustrator & create a professional website.
How to use templates in Dreamweaver.
Create mobile, tablet & desktop versions of the website.
Build our own custom responsive navigation with burger menu.
Introduction to JavaScript & jQuery.
How to publish your website to the internet.
Ways to preview your designs straight to your mobile device.
How to get the most from your portfolio Images.
How to use beautiful web fonts in your designs.
You will get the finished files so you never fall behind.
Downloadable exercise files & cheat sheet.
Forum support from me and the rest of the BYOL crew.
All the techniques used by professional website designers.

Responsive Design HTML CSS Web design Dreamweaver CC


You will need a copy of Adobe Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe.
No previous web design skills are needed.
No previous Dreamweaver skills are needed.


Hi there, my name is Dan and together we’re going to build a portfolio website using Adobe Dreamweaver.We’ll use Dreamweaver’s handy templating tools to make updates to our site super easy. We’ll create our very own mobile ‘burger menu’ from scratch learning some basic JavaScript & jQuery.I am an Adobe Certified Instructor and better yet I work closely with Adobe themselves to develop their own online help videos. I am also a Dreamweaver speaker at the huge Adobe Max conference in Las Vegas. I’m even inside your version of Dreamweaver right now… go on try it… open Dreamweaver > Go to Help > quick tutorial – I’m right there!This course is for beginners. You do not need any previous knowledge in Dreamweaver or web design. We will use Dreamweaver ‘split’ view so we can use all the good visual tools as well as doing some simple amends down here in the code as well. In this series we will take this static design from either Illustrator or Photoshop and together, step by step, build everything in HTML5, CSS3 & JavaScript. We will make our own responsive design navigation. We will make adjustments so that everything looks great on different mobile devices. We will work with beautiful fonts & colours & even add Google Analytics to our site to get amazing information about exactly who visits your site.

Now web design can sometimes be tricky so I am here to help – just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.Let’s get excited about finally being able to build a website like a professional web designer. See you in class.


Section 1: Overview

Lecture 1 Introduction

Lecture 2 What we’ll be building & resources for this course

Section 2: Creating an HTML Website in Dreamweaver

Lecture 3 Setting up Adobe Dreamweaver to create websites

Lecture 4 How to create a new website in Dreamweaver

Lecture 5 How to create a new HTML page in Dreamweaver & put in your logo

Lecture 6 How best to preview your website in Adobe Dreamweaver

Lecture 7 Moving tags around in Dreamweaver

Section 3: Using CSS in Dreamweaver

Lecture 8 How to create, edit & style your first CSS style sheet in using Dreamweaver

Lecture 9 How to change or adjust the CSS styles in your Dreamweaver website

Lecture 10 How to centre your website in Dreamweaver using a container

Section 4: Responsive Websites

Lecture 11 How to make a website change for mobile cell phones & tablets using Dreamweaver

Lecture 12 How to test your Dreamweaver website on a mobile phone or tablet

Section 5: Mobile Navigation Menu

Lecture 13 How to create a hamburger mobile drop down menu in Dreamweaver

Lecture 14 Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver

Lecture 15 Styling our hamburger menu & getting our ul menu to stack side by side

Lecture 16 How to add different fonts to a website in Dreamweaver

Lecture 17 Fixing the style of the mobile burger drop down menu in Dreamweaver

Section 6: Adding Content

Lecture 18 Planning for our Dreamweaver template

Lecture 19 Add a background image that is outside our main container in Dreamweaver

Lecture 20 How to use the HTML5 main tag in Dreamweaver

Lecture 21 How to add the HTML5 footer tag to a website using Adobe Dreamweaver

Section 7: Templates in Dreamweaver

Lecture 22 How do I make a template in Adobe Dreamweaver

Lecture 23 How to create new pages based on a Dreamweaver template

Section 8: Adding Content 2

Lecture 24 How to create a responsive hero box for our website in Dreamweaver

Lecture 25 Fix problems with div tags when you float left in Dreamweaver aka clearing the f

Lecture 26 How to add and change the styling of a horizontal rule HR in Dreamweaver

Lecture 27 How to create a button in Adobe Dreamweaver CC

Section 9: Responsive Content

Lecture 28 Change fonts & spacing of a website for Tablet & Mobile sizes using Dreamweaver

Lecture 29 How to turn off parts of a website in different views like mobile or desktop

Lecture 30 How to create a responsive image grid in Dreamweaver

Lecture 31 How to make your images responsive in Dreamweaver to match the page size

Lecture 32 How to make different columns for desktop, tablet & mobile websites, Dreamweaver

Lecture 33 How to create a clearfix pseudo after class in Adobe Dreamweaver

Section 10: Other Pages

Lecture 34 How to create & link new pages in Dreamweaver using templates

Section 11: Hosting & Analytics

Lecture 35 How to upload your website to the internet hosting via Dreamweaver

Lecture 36 How to add Google Analytics to your Dreamweaver website

Section 12: What Next

Lecture 37 What next in the Dreamweaver course

Lecture 38 Dreamweaver class exercise

YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.,NO: This course is NOT suited to people experienced in using HTML & CSS.

Course Information:

Udemy | English | 3h 52m | 2.40 GB
Created by: Daniel Walter Scott

You Can See More Courses in the Design >> Greetings from

New Courses

Scroll to Top