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'.
3.9 (83 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.
16,554 students enrolled
Instructed by M. Sajid Design / Web Design
67% off
Take This Course
  • Lectures 33
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 English

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

What are the 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.

What am I going to get from this course?

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

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Getting Started

An introductory video of this course.


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.


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


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


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


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

Section 2: Creating your First Web Page

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


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.


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


Let's convert a specific text into link.

  • Normal link
  • mailto link

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

Section 3: Html5 and CSS3

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


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


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


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.


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


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

2 questions
Section 4: Menu Items and Other Web Pages

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


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

Section 5: Inserting a Widget in the Web Page

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


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.


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


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

Section 6: Social Media Optimization

In this lecture i'll show you that how we can optimize our website for social media by inserting 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.

Section 7: Creating a Form

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

Form Fields:

  • Name Field.
  • Email Field
  • Message Box
  • Submit Button

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

Section 8: Finalizing and Uploading

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


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.


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.

Section 9: Thank You

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

M. Sajid, 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

Ready to start learning?
Take This Course