Free Preview: PSD to HTML for Designers

Workspace Preparation And Header Markup

13:10

Workspace Preparation And Header Markup

We’ll kick things off with the header markup. But first, we must prepare our workspace by creating all the folders we need and setting up LiveReload.

 

Further Reading

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


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