Coding For Designers In Dreamweaver Cc 2017

Tags: Web Design

Create a beautiful, responsive website and publish it with the newest and most useful tricks from Dreamweaver.

Last updated 2022-01-10 | 4.4

- Build a responsive website
- Use Dreamweaver CC 2017 proficiently
- Understand HTML and CSS basics

What you'll learn

Build a responsive website

Use Dreamweaver CC 2017 proficiently

Understand HTML and CSS basics

Create a mobile friendly website

* Requirements

* You'll need a copy of Dreamweaver CC 2017 or above. A free 30 day trial can be download from Adobe.
* Basic design knowledge will be helpful
* If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

Description

Hi - my name is Dan and I’ll be leading you through this course on how to code responsive websites using Dreamweaver CC.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. Creating mobile, tablet and desktop versions.

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars using the ever so popular 'burger menu' style.

This course is full of the foundation techniques to be a front end web developer. By completing this, you'll have an excellent insight to what it takes to take a step into the wonderful career of Web Design!

Now it’s time to upgrade your skills, get that better job and impress your clients.

Note: A piece of the course that references the website 'slicknav' is now no longer accurate as the slicknav site has been taken down, however the files needed to complete the course are a part of the exercise files so you won't be missing out on anything!

Who this course is for:

This course is for creatives who want to implement their design knowledge into the web industry
Entrepreneurs
Dreamweaver users that want to update their skills to the newest release
This course is suited for people that want to learn the basics of coding a website

Course content

6 sections • 13 lectures

Overview 2 lectures

Introduction Preview 01:25

Hi, my name is Dan, and you, my creative type friend, are going to code your very first website.

Now, we're going to make this short, we'll make it super easy, and you have to think of all the extra money you're going to make with your mad, new web design coding skills.

What we'll be building and resources Preview 05:48

Hey there, in this video we're going to look at what we'll be creating throughout the site, as well as all the resources that I've got for you to help you along with this video series.

So, here's the website that we'll be building. It's a portfolio site for Creative, and, I'm happy for you to use this exact same layout for yourself, just switch out obviously, the images, and the logo.

Building our first mobile friendly web page 2 lectures

Our first HTML & CSS web page Preview 13:46

In this lecture we create our first HTML page and practice styling in our CSS sheet. We will also touch on how to make a new site in Dreamweaver, including the folder structure for images and css etc. We'll also have a look at the best working environment for building our site.

Making your site responsive Preview 07:16

In this lecture we're going to look at how to build the base of a responsive website. Responsive websites are one of the most important part of the internet in today's age. Thankfully, we make it easy to do. We're going to introduce you to media queries and explain how too use them effectively using the 'desktop first' method.

Creating a navigation 3 lectures

Creating a navigation hamburger menu Preview 14:40

The hamburger menu! One of the most revolutionary buttons of our time. In this lesson we look at using a hamburger menu to hide our navigation at mobile size.

Styling our responsive navigation menu Preview 19:20

In this lecture we're going to look at how to style our awesome burger menu that we made in the previous lecture.

Real time preview on phone & tablet Preview 03:38

In this lecture we're going to look at how we can accurately preview our website's mobile view on our actual phones using Adobe's build in preview option for mobiles.

Creating the content for your website 3 lectures

Working with typography on a website Preview 05:15

In this lecture we're going to look at fonts, where to get them, how to make sure they're fast and other things. Specifically how to use them. We will be using Google Fonts in this course.

Creating our hero box Preview 22:05

In this lecture we're going to look at creating the ever popular - Hero Box. The hero Box is one of the most popular modules of websites recently, so you should know how to make one. And you will!

Adding our image grid Preview 13:50

In this lecture we will create the image grid for our page, the grid will be responsive and resize when the browser gets smaller.

Publishing 1 lectures

Publishing your website to the internet Preview 04:59

In this lecture we're going to look at getting your site live using Dreamweaver. We'll take it step by step from making the FTP to showing you how to send each change to the server.

Conclusion 2 lectures

Lasts things now that you’re a coder Preview 04:11

In this lecture we'll discuss making new pages, getting paid and we'll touch on what you can do next to further your knowledge!

Dreamweaver Cheat Sheet Preview 14:53

This video is a compilation of useful shortcuts and abilities that Dreamweaver CC 2017 haves that you should be using! Check it out to improve your workflow.