Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.

PSD to HTML: The Responsive Portfolio Build

with

Responsive web design is an essential part of the modern-day web designer's toolkit. If you're looking to learn how to build responsive websites and want to get started with something hands-on, then look no further. In this course you'll learn how to take a portfolio design and build it using responsive techniques, HTML, and CSS.

1× speed

Free Preview: PSD to HTML: The Responsive Portfolio Build

Introduction

02:27

1.Welcome
2 lessons, 07:14

Free Preview
1.1
Introduction
02:27

Free Preview
1.2
Examining the Designs
04:47

2.Structuring the Site
5 lessons, 47:02

2.1
Creating the Index File
07:05

2.2
Structuring the Navigation
11:22

2.3
Structuring the Feature Section
09:32

2.4
Structuring the Portfolio Samples
09:23

2.5
Structuring the Footer
09:40

3.Styling the Site
15 lessons, 2:07:48

3.1
Creating a Stylesheet
05:26

3.2
Typekit and Google Fonts
11:25

3.3
Setting Up the Navigation
08:30

3.4
Styling the Menu Items
05:36

3.5
Preparing the Social Icons
08:15

3.6
Arranging the Social Media Icons
05:08

3.7
Styling the Body Text
09:19

3.8
Preparing the Featured Icons
06:00

3.9
Preparing the Background Image
05:21

3.10
Styling the Feature Section
11:41

3.11
Preparing the Portfolio Images
09:51

3.12
Laying Out the Columns
14:15

3.13
Styling the Captions
09:15

3.14
Setting Up the Footer
06:08

3.15
Styling the Footer Content
11:38

4.Making It Responsive
6 lessons, 53:12

4.1
Reviewing the Photoshop Files
02:43

4.2
Our First Media Query
06:50

4.3
Responsive Portfolio Items
08:01

4.4
Styling the Responsive Menu
10:07

4.5
Arranging the Feature Section
13:15

4.6
jQuery Navigation
12:16

5.Conclusion
1 lesson, 02:22

5.1
Final Thoughts
02:22


Preview for PSD to HTML: The Responsive Portfolio Build
Lessons:
29
Length:
4 hours
Categories:
Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.
+ Expand Bio- Collapse Bio