Beginner Photoshop to HTML5 and CSS3
4.5 (1,529 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.
66,650 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Beginner Photoshop to HTML5 and CSS3 to your Wishlist.

Add to Wishlist

Beginner Photoshop to HTML5 and CSS3

Learn how to convert a Photoshop design into HTML5/CSS3 using Dreamweaver.
4.5 (1,529 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.
66,650 students enrolled
Created by Mr Carl Heaton
Last updated 5/2013
English
Price: Free
Includes:
  • 2 hours on-demand video
  • 7 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
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: http://www.webcoursesshowcase.com/beginners/index.html

Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 22 Lectures Collapse All 22 Lectures 01:58:35
+
Chapter 1 - Introduction
3 Lectures 09:38
Udemy PSD To HTML Intro 1
09:26

http://www.webcoursesshowcase.com/beginners/index.html
Final Website
00:06

Adobe Dreamweaver  http://www.adobe.com/cfusion/tdrc/index.cfm?& Notepad ++  http://notepad-plus-plus.org/download/v6.1.5.html Textwrangler http://www.barebones.com/products/textwrangler/download.html
Links to download programs
00:05
+
Chapter 2 - Slicing up your PSD
6 Lectures 12:13
Homepage PSD
00:03

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

Session 3 Slicing And Dicing
12:10

Choosing the right image format

Powerpoint image filetypes
3.6 MB

Which image format to choose checklist

Choosing The Right Image Format checklist
85.5 kB

Homepage psd without slices

About No Slices
10.8 MB

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

About Slices
12.8 MB
+
Chapter 3 - Creating Perfect HTML5
5 Lectures 27:20

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

HTML
27:20

Worksheet on Tags and Sections on a web page

Homepage With Tags and Sections
348.1 kB

Introduction to HTML 

HTML
390.1 kB

Homepage HTML file

Homepage HTML
2.1 kB

Homepage images 

Homepage Images zip
59.7 kB
+
Chapter 4 - How to Style your Webpage Using CSS3
3 Lectures 57:40

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

Session 4 CSS
57:40

Final website files

Final Website files
870.7 kB

Styling your website with CSS

CSS styling
70.2 kB
+
Chapter 5 - Putting a Website Live
4 Lectures 00:06

How to use Filezilla software and link for download

http://filezilla-project.org/download.php/

Filezilla
3.7 MB

Easy and affordable Web Hosting at http://www.hostgator.com/
Hostgator
00:02

Domain registration at http://namescheap.com/
Namescheap
00:01

The detailed step-by-step process of putting your website Live! http://www.udemy.com/how-to-put-a-wordpress-website-live/
Screencast on how to put your website LIVE
00:02
+
Bonus Material
1 Lecture 10:39
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. 

Getting information from a PSD to use in your code
10:39
About the Instructor
Mr Carl Heaton
4.5 Average rating
4,954 Reviews
124,140 Students
5 Courses
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!