About This Course

Let’s 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.

You do not need any previous knowledge of Dreamweaver or web design experience. 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 HTML, CSS & JavaScript. We will make our own navigation. We will make adjustments so that everything looks great on different mobile devices.We will work with beautiful fonts & colors & even add Google Analytics to our site to get amazing information about exactly who visits your site.

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 against mine if yours 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.

What are the requirements?

  • 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.

What am I going to get from this course?

  • 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 on the internet.
  • Ways to preview your designs straight on 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.
  • All the techniques used by professional website designers.

Who is the target audience?

  • 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.

Our Promise to You

By the end of this course, you will have learned how to build websites using Dreamweaver templates and JavaScript menus.

30 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.

Get started today and learn more about the building websites using Dreamweaver templates and JavaScript menus.

Course Curriculum

Section 1 - Overview
Illustrator To Dreamweaver Tutorial Introduction 00:00:00
What We’ll Be Building And Resources For This Course 00:00:00
Section 2 - Creating An HTML Website In Dreamweaver
Setting Up Adobe Dreamweaver To Create Websites 00:00:00
How To Create A New Website In Dreamweaver 00:00:00
How To Create A New HTML Page In Dreamweaver And Put In Your Logo 00:00:00
How Best To Preview Your Website In Adobe Dreamweaver 00:00:00
Moving Tags Around In Dreamweaver 00:00:00
Section 3 - Using CSS In Dreamweaver
How To Create, Edit And Style Your First CSS Style Sheet In Using Dreamweaver 00:00:00
How To Change Or Adjust The CSS Styles In Your Dreamweaver Website 00:00:00
How To Center Your Website In Dreamweaver Using A Container 00:00:00
Section 4 - Responsive Websites
How To Make A Website Change For Mobile Cell Phones And Tablets Using Dreamweaver 00:00:00
How To Test Your Dreamweaver Website On A Mobile Phone Or Tablet 00:00:00
Section 5 - Mobile Navigation Menu
How To Create A Hamburger Mobile Drop Down Menu In Dreamweaver 00:00:00
Using Javascript jQuery To Make A Mobile Dropdown Burger Menu In Dreamweaver 00:00:00
Styling Our Hamburger Menu And Getting Our Ul Menu To Stack Side By Side 00:00:00
How To Add Different Fonts To A Website In Dreamweaver 00:00:00
Fixing The Style Of The Mobile Burger Drop Down Menu In Dreamweaver 00:00:00
Section 6 - Adding Content
Planning For Our Dreamweaver Template 00:00:00
Add A Background Image That Is Outside Our Main Container In Dreamweaver 00:00:00
How To Use The HTML5 Main Tag In Dreamweaver 00:00:00
How To Add The HTML5 Footer Tag To A Website Using Adobe Dreamweaver 00:00:00
Section 7 - Templates In Dreamweaver
How Do I Make A Template In Adobe Dreamweaver? 00:00:00
How To Create New Pages Based On A Dreamweaver Template. 00:00:00
Section 8 - Adding Content 2
How To Create A Responsive Hero Box For Our Website In Dreamweaver 00:00:00
Fix Problems With Div Tags When You Float Left In Dreamweaver Aka Clearing The Float 00:00:00
How To Add And Change The Styling Of A Horizontal Rule HR In Dreamweaver 00:00:00
How To Create A Button In Adobe Dreamweaver CC 00:00:00
Section 9 - Responsive Content
Change Fonts And Spacing Of A Website For Tablet And Mobile Sizes Using Dreamweaver 00:00:00
How To Turn Off Parts Of A Website In Different Views Like Mobile Or Desktop 00:00:00
How To Create A Responsive Image Grid In Dreamweaver 00:00:00
How To Make Your Images Responsive In Dreamweaver To Match The Page Size 00:00:00
How To Make Different Columns For Desktop, Tablet And Mobile Websites In Dreamweaver 00:00:00
How To Create A Clearfix Pseudo After Class In Adobe Dreamweaver 00:00:00
Section 10 - Other Pages
How To Create And Link New Pages In Dreamweaver Using Templates 00:00:00
Section 11 - Hosting And Analytics
How To Upload Your Website To The Internet Hosting Via Dreamweaver 00:00:00
How To Add Google Analytics To Your Dreamweaver Website 00:00:00
Template Design © VibeThemes. All rights reserved.

Setup Menus in Admin Panel