Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Make Your First Website From Scratch - Adobe Dreamweaver® CC to your Wishlist.

Add to Wishlist

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.3 (87 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
17,093 students enrolled
Created by M. Sajid
Last updated 1/2016
$15 $45 67% off
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

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 is the target audience?
  • 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.
Students Who Viewed This Course Also Viewed
What Will I 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.
View Curriculum
  • 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.
Curriculum For This Course
Expand All 33 Lectures Collapse All 33 Lectures 03:47:22
Getting Started
6 Lectures 18:06

An introductory video of this course.

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

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

Exercise Files

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

Preview 03:02

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

Managing Files

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

Editing Images
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

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


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

Creating your First Web Page

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

Let's convert a specific text into link.

  • Normal link
  • mailto link
Creating and Customizing Links

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

Positioning Content
Html5 and CSS3
6 Lectures 53:55

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

HTML5 Basics

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

CSS Basics

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

Web Fonts

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.

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

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

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

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

Multiple Pages
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

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

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

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

Stylizing the Gallery Widget
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

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)
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

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

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

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.

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

Checking Online
Thank You
1 Lecture 01:19

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

Thank You
About the Instructor
4.3 Average rating
86 Reviews
17,093 Students
1 Course
Engineer │ Web & Graphic Designer │ Internet Marketer

"If you are not learning, you are losing"
My name is M. Sajid and I am an Electrical Engineer. But I believe in learning everything, So that's why i keep learning other things. I have great knowledge of internet marketing. I have a lot of experience in Logo Designing, Graphic Designing, Web Designing, Video Editing.

I have intense knowledge of Internet Marketing. But having a lot of knowledge and experience i was missing something, and that thing was educate others. And then i felt that now i have been accomplished. And then i started out to share my knowledge and secrets to improve other people lives.

Software Skills:
Adobe Dreamweaver CC │ Adobe Photoshop CC │ Adobe Illustrator CC │ Adobe After Effects CC

Report Abuse