PSD to HTML & CSS Made Easy - For Absolute Beginners

In this course I will teach you how to design a basic website in Photoshop and code into HTML & CSS step by step.
5.0 (2 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.
20 students enrolled
Instructed by Mr Kashif Iqbal Design / Web Design
$19
$20
5% off
Take This Course
  • Lectures 24
  • Length 3.5 hours
  • Skill Level Beginner Level
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 9/2015 English

Course Description

A complete beginner level and easy to understand web designer course for absolute beginners. It gives you detailed explanation & practical examples on how to design a website in Photoshop and convert it into HTML & CSS.

I'm designing for the web since 2011 and I'm very excited to teach you how I design and code websites.

What will you exactly learn from this course?

  • Make web designs using Photoshop
  • How to code in HTML
  • How to code in CSS
  • How to convert PSD to HTML & CSS.

Where to go after finishing this course ?

After finishing this course I'll explain what you need to do to get better and better and what you need to have so you can get clients and jobs.

What are the requirements?

  • Basic knowledge of Computer
  • Web Browser
  • Must have text editor (Notepad++ is free)
  • Basic knowledge of HTML & CSS but not required
  • Basic knowledge of Photoshop but not required

What am I going to get from this course?

  • Design Websites In Photoshop
  • Code In HTML
  • Code In CSS
  • Convert PSD To HTML & CSS

What is the target audience?

  • Someone who is new to web design
  • someone who is new to web development
  • Someone who is totally beginner in web design & development
  • Someone who just getting started in web industry

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.

Curriculum

Section 1: Course Introduction
02:21

I welcome you to this course and thank you for joining. In this lecture we'll talk about what we are going to learn and I'll show you the completed projects.

06:26

In this lecture, I explained what you need to know and need to do before you join this course.

02:04

In this lecture, I show you how to download course files.

Section 2: Designing A Website In Photoshop
Websites To Get Inspiration
1 page
02:52

In this lecture, I'll teach you how to setup 960 grid system.

07:47

In this lecture, I'll teach you how to design a simple navigation.

11:53

In this section, I'll teach you how to design a billboard

10:57

In this section, I'll teach you how to design three boxes.

16:36

In this lecture, I'll teach you how to design a footer section.

06:03

In this section, I teach you how to clean up the messy PSD file so you can hand to developers without any problem.

Section 3: Converting PSD Into HTML & CSS
06:35

Welcome to the coding section. In this lecture,I'll teach you how to prepare your files and folders before coding the PSD file.

10:23

In this lecture, I'll teach you how to add css reset code to your style sheet to clear default formating from your browser.

12:18

In this lecture, I'll teach you how to code navigation bar.

07:29

In this lecture, I'll teach you how to code navigation bar.

08:50

In this lecture, I'll teach you how to code the billboard section.

10:49

In this lecture, I'll teach you how to code the billboard section.

15:29

In this lecture, I'll teach you how to code the three boxes.

13:20

In this lecture, I'll teach you how to code the three boxes.

10:31

In this lecture, I'll teach you how to code the footer section.

10:21

In this lecture, I'll teach you how to code the footer section.

11:14

Course files are included in this lecture. In this lecture we'll check for errors and we'll clean up the code.

Section 4: Review
03:01

In this lecture, we'll review what we've learned so far.

The Following Assignments You Need To Complete
2 pages
07:17

In this lecture, I'll give you some tips what to do next.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Mr Kashif Iqbal, Teacher, Blogger, Designer and developer.

Hello, I'm a designer, blogger, teacher and a developer. I'm creating and deigning websites over 5 years now and I am so passionate to teach this knowledge to other people. I believe technology made this world a amazing place to live and we are lucky to be around this time and we must now miss this amazing technology.  

Ready to start learning?
Take This Course