Beginner Photoshop to HTML5 and CSS3

Learn how to convert a Photoshop design into HTML5/CSS3 using Dreamweaver.
4.4 (1,362 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.
60,056 students enrolled
Start Learning Now
  • Lectures 22
  • Length 2 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 7/2012 English

Course Description

In this course you will learn how to create a basic website using Phohoshop and Dreamweaver. You will be able to use Photoshop to create a design for your website and use Dreamweaver to organise the content and make the website fully functional. The website will contain 5 pages : Home, About me, Services, Portfolio and Contact and all the images and support materials are provided. By the end of this course you will be able to make a basic website and put it Live.

To see the website you will make goto:

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: Chapter 1 - Introduction
Udemy PSD To HTML Intro 1
Adobe Dreamweaver Notepad ++ Textwrangler
Section 2: Chapter 2 - Slicing up your PSD
Homepage PSD

Learn how to use Slicing tool on Photoshop and save slices for the web that later can be edited and resized in Photoshop.

3.6 MB

Choosing the right image format

85.5 kB

Which image format to choose checklist

10.8 MB

Homepage psd without slices

12.8 MB

An extra file if you want to try out your slicing skills on more than one PSD.

Section 3: Chapter 3 - Creating Perfect HTML5

Learn how to do basic HTML coding in Dreamweaver and use it to edit your page content.

348.1 kB

Worksheet on Tags and Sections on a web page

390.1 kB

Introduction to HTML 

2.1 kB

Homepage HTML file

59.7 kB

Homepage images 

Section 4: Chapter 4 - How to Style your Webpage Using CSS3

Learn how to use CSS code to style your webpage and attach it to HTML file

870.7 kB

Final website files

70.2 kB

Styling your website with CSS

Section 5: Chapter 5 - Putting a Website Live
3.7 MB

How to use Filezilla software and link for download

Easy and affordable Web Hosting at
Domain registration at
The detailed step-by-step process of putting your website Live!
Section 6: Bonus Material
Thank you so much for taking the course and as a thank you we want to add some bonus material. This episode was requested by one of our students on how to get information from a PSD. 

For example when a designer sends you a PSD how to get information like font-size, colours, gradients, padding, margin and even opacity. All is covered in new bonus video. Hope you enjoy and thank you again for all the wonderful reviews. 

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Mr Carl Heaton, UX Consultant and Web Design Instructor

Carl is the founder of Web Courses and a UX consultant for the United Nations. At Web Courses Carl teaches Web Design and Online Marketing to people from all around the world. He has been designing websites for over 16 years and is passionate about creating usable designs and creative online marketing strategies for WCB and their clients.

Accessibility is a big passion of Carl's and has spoken at UN conferences on Inclusive Business around South East Asia. Recently he has been invited to give Social Media Marketing advise to UNAIDS as part of a new Asia campaign.

When not UX`ing, HTML'ing or teaching there is nothing more Carl likes than a blank canvas on Adobe Photoshop, a tool he has been using since version 3.0!

Ready to start learning?
Start Learning Now