Craig CampbellJun 13, 2014Lessons: 29Length: 4 hours

Next lesson playing in 5 seconds

Overview
Transcript

2.3 Structuring the Feature Section

In this lesson we'll construct the HTML for the feature section, which will highlight the different categories of services offered.

1.Welcome
2 lessons, 07:14

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

5.Conclusion
1 lesson, 02:22

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.

craigsoup

PSD to HTML: The Responsive Portfolio Build

Next lesson playing in 5 seconds

2.3 Structuring the Feature Section

1.Welcome
2 lessons, 07:14

1.1
Introduction
02:27

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

PSD to HTML: The Responsive Portfolio Build

Next lesson playing in 5 seconds

2.3 Structuring the Feature Section

1.Welcome2 lessons, 07:14

2.Structuring the Site5 lessons, 47:02

3.Styling the Site15 lessons, 2:07:48

4.Making It Responsive6 lessons, 53:12

5.Conclusion1 lesson, 02:22

1.Welcome
2 lessons, 07:14

2.Structuring the Site
5 lessons, 47:02

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

4.Making It Responsive
6 lessons, 53:12

5.Conclusion
1 lesson, 02:22