Design
Web Design
Dreamweaver
Make Your First Website From Scratch - Adobe Dreamweaver® CC
4.2 (224 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
34,799 students enrolled

Make Your First Website From Scratch - Adobe Dreamweaver® CC

Using HTML5 And CSS3, Design A Complete Responsive & Mobile Friendly Website From 'Blank Page' To 'Uploading'.
4.2 (224 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
34,799 students enrolled
Created by M. Sajid
Last updated 1/2016
English
English [Auto]
Preview this course
Make Your First Website From Scratch - Adobe Dreamweaver® CC
Current price: $30.99 Original price: $44.99 Discount: 31% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 1 article
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn the basics of Html5 and CSS3.
  • Learn how to work on text and to customize the text
  • Learn how to create and stylize links
  • Learn how to use CSS in Dreamweaver CC to stylize webpage
  • Learn the use of webfonts to stylize text.
  • Learn how to convert a static webpage into responsive
  • Learn how to create the mobile version of the website
  • Learn how to create stylish menu bar and multiple pages of a website
  • Learn how to insert a widget in the webpage
  • Learn how to insert an awesome gallery widget in the webpage.
  • Learn how to create a stylish form and its processing.
  • And finally learn how to upload a website to get this online and to access this from anywhere in the world.
  • Mobile Friendly Course.
Requirements
  • A computer and Adobe Dreamweaver CC installed on it to follow along with me
  • If you don't have access to Adobe Dreamweaver CC, don't worry! just sit back and watch whole process of creating a website
  • Four hours.
  • And exercise files which i've provided you.
Description

Hi there and welcome to Making Your First Website From Scratch - Adobe Dreamweaver® CC tutorial. Like to thank you for taking a look at my course. In this course I am gonna walk you through every single step of creating a complete website.

Dreamweaver CC is an application provided by Adobe and is used by professional to create and edit websites.

As I said from scratch! So we will start from a blank page. Then we'll add some text in the page and will learn how to customize the text. After working with text, we will create and stylize links. Then After positioning our content we'll learn the basics of HTML5 and CSS. And then we'll use the power of CSS to stylize our page. And working on CSS is much easier in Adobe Dreamweaver CC because Dreamweaver gives you the full control on CSS with the new advanced layout of CSS designer panel. Then we'll learn how to use web fonts to stylize text. And then we'll learn the important part of a website designing and that is its responsiveness means the webpage should be flexible across different screen sizes. And then we'll create the mobile version of our website means our website will have different layout on mobile devices.

Then we'll learn how to create stylish menu bar and other pages for our website as our website is gonna contain four web pages. Then I'll show you how we can insert a widget in our website by inserting an awesome gallery widget. A website can't be complete without social media plug-ins, so we'll learn how to add twitter or Facebook widget and a YouTube video in our website. Then we'll create and stylize a form with which your visitors will be able to contact you. And finally we'll upload our website to get this online and to access this from anywhere in the world. We'll be discussing all these topics and much more in this course.

The course has been created in 720p High Definition video and extra zooming and panning has been applied in the videos so that you can easily watch this course on your tablets and mobile devices.

So this course is a great place to start if you are looking to make your first website or to familiarize with the latest version of Dreamweaver.

If you are interested in designing a website and don't know how and from where to start, then this course is for you. I'm really excited to get started on this course with you and hope you are too, so let's get started..

Who this course is for:
  • Any one who wants to create a website but don't know how to start.
  • Anyone who wants to make website without coding.
  • Anyone who knows the knowledge of Html5 and CSS3 but has not created any website yet.
  • Anyone who wants to familiarize with Adobe Dramweaver CC.
  • Anyone, young or old, from any country around the world.
Course content
Expand all 33 lectures 03:47:22
+ – Getting Started
6 lectures 18:07

An introductory video of this course.

Introduction
Preview 03:03

Get most out of this course by following along with me. I'm providing you exercise files for this purpose. Download these files from the 'view resources' tab of this lecture or you can download these files in the next lecture.

Getting Most out of This Course
01:24

Get most out of this course by following along with me. I'm providing you exercise files for this purpose.

Exercise Files
00:07

A little introduction of HTML to get started on this course.

HTML Introduction
Preview 03:02

Let's manage our files to get started and we'll use these files in this course.

Managing Files
04:18

Let's edit our images in Photoshop CC to use these images in our website.

Editing Images
06:13
+ – Creating your First Web Page
6 lectures 42:22

Let's open our first blank document and then we'll fill out this page with different contents in the later lectures.

Opening the Document
02:55

Let's create a working environment in Adobe Dreamweaver CC to work easily by creating a workspace.

Workspaces
03:23

Let's create our first web page in Adobe Dreamweaver CC.

Creating your First Web Page
07:22

Let's add text in our blank page and customize this text like changing it's color, creating headings, changing text font etc.

Working with Text
06:42

Let's convert a specific text into link.

  • Normal link
  • mailto link
Creating and Customizing Links
08:16

Now let's organize our content to have better look by positioning it using the <div> tag of HTML.

Positioning Content
13:44
+ – Html5 and CSS3
6 lectures 53:55

Know the basics of Html5 to use these html5 tags in the webpage.

HTML5 Basics
08:24

Know the basics of CSS and use this to stylize the webpages.

CSS Basics
13:01

In this course we'll use web fonts to stylize text in the web page.

Web Fonts
04:40

Learn the important part of web designing (responsiveness). We'll make our page responsive in this lecture. Means our page will be flexible across different screen sizes.

Responsiveness or Flexibility
Preview 06:05

In this lecture we'll make a separate CSS file and then we can use CSS more efficiently by linking it to multiple pages.

Flexible CSS
05:39

In this lecture we'll create the mobile version of our website so that it'll have different layout on mobile devices.

Creating the Mobile Version
16:06
Section 3
2 questions
+ – Menu Items and Other Web Pages
2 lectures 32:45

In this lecture we'll create stylish menu bar which will have transition on hovering on menu item.

Creating and Customizing Menu
19:32

Now let's create other pages of our website as our website is going to contain four web pages.

Multiple Pages
13:13
+ – Inserting a Widget in the Web Page
4 lectures 33:42

In this lecture we'll learn that how we can insert the widget in the web page.

Methods to Insert a Widget
11:41

Now it's time to give a great look to our gallery, so in this lecture we'll insert an awesome gallery widget in our website.

Inserting the Gallery Widget
06:48

After inserting the gallery widget in our website it's time to customize it to use our images in the widget.

Customizing the Gallery Widget
09:10

Now it's time to stylize the gallery widget using CSS to have better look.

Stylizing the Gallery Widget
06:03
+ – Social Media Optimization
2 lectures 08:59

In this lecture i'll show you that how we can optimize our website for social media by inserting Twitter or Facebook widget.

Adding Twitter or Facebook Widget
06:09

Adding a video in your website can be very effective, so in this lecture I'll show you how to add a Youtube video.

Adding a Video (Youtube)
02:50
+ – Creating a Form
2 lectures 16:27

Let's create a form to let our visitors to contact us.

Form Fields:

  • Name Field.
  • Email Field
  • Message Box
  • Submit Button
Creating and Stylizing the Form
10:11

After creating the form, it's time to take a look at it's processing. Form data will be sent to website owner.

Form Processing
06:16
+ – Finalizing and Uploading
4 lectures 19:45

In this lecture we'll learn how to use description and keywords in the website for search engine optimization.

Description and Keywords
02:49

Before uploading your website, make sure everything is working perfect. And for this purpose you can preview your website in number of different browsers or you can use other external applications to check your website.

Testing Offline
02:53

Now it's time take reward of your efforts by uploading your website. You can upload the website to an hosting server using FTP details of your hosting account.

Different methods of uploading.

  • using website file explorer
  • using a FTP client
  • using Dreamweaver FTP client to upload directly from Dreamweaver.
Uploading
10:12

After uploading the website let's check our website online in the browser by typing the URL of our website.

Checking Online
03:51
+ – Thank You
1 lecture 01:19

Finally, You made it. Thanks for joining this course.

Thank You
01:19