PSD to HTML for Designers

with

Have you ever tried to take a nice PSD design for a web site and tried to translate it to HTML? Not always easy, is it! Here is Adi Purdila to help us learn this sometimes tricky art, where you will be taking an already designed web page layout and developing it into a functional, working web page using intermediate and current techniques.

Free Preview: PSD to HTML for Designers

Introduction

02:51

1.Welcome
1 lesson, 02:51

Free Preview
1.1
Introduction
02:51

2.Writing The Markup
4 lessons, 51:16

Free Preview
2.1
Workspace Preparation And Header Markup
13:10

2.2
Main Banner And Light Background Feature List
13:38

2.3
Dark Background Feature List And Testimonials
11:01

2.4
Gallery And Footer
13:27

3.Slicing The PSD
2 lessons, 21:29

3.1
Logo, Textures, Misc Images
09:19

3.2
Creating The Sprites Image
12:10

4.Styling With CSS
10 lessons, 2:05:04

4.1
Reset CSS, Bootstrap Grid, Less Variables And Mixins
15:33

4.2
General Styling & Google Fonts
10:31

4.3
Top Header & Button Styling
15:56

4.4
Styling The Icons (plus A Mini Tutorial On Css Sprites)
11:25

4.5
Main Banner Styling And Single Field Form
14:52

4.6
Styling The Blockquote In The Main Banner
10:47

4.7
Light Background Feature Section
13:28

4.8
Dark Background Feature Section
08:12

4.9
Customers Section
12:16

4.10
Footer Styling
12:04

5.JavaScript/jQuery
1 lesson, 10:34

5.1
Using jQuery To Power The Gallery
10:34

6.Finishing Up
5 lessons, 48:16

6.1
Styling The Gallery
14:03

6.2
Making The Images Retina-ready
11:19

6.3
Eliminating FOUT (Flash of Unstyled Text)
06:18

6.4
Responsive Layout (brief Explanation On Bootstrap Grid And Media Queries)
11:05

6.5
Cross-browser Testing
05:31

7.Closing
1 lesson, 00:46

7.1
Conclusion
00:46


Preview for PSD to HTML for Designers
Lessons:
24
Length:
4.3 hours
Tagged with:
About Adi Purdila
Photoshop, HTML, CSS? Yep, that's what I do best. Mix that with lots of head nodding from trance music and you've got me in a nutshell.
+ Expand Bio- Collapse Bio