FREELessons: 29Length: 4 hours
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.Welcome
1.1Introduction02:27
1.1
Introduction
02:27
1.2Examining the Designs04:47
1.2
Examining the Designs
04:47
2.Structuring the Site
2.1Creating the Index File07:05
2.1
Creating the Index File
07:05
2.2Structuring the Navigation11:22
2.2
Structuring the Navigation
11:22
2.3Structuring the Feature Section09:32
2.3
Structuring the Feature Section
09:32
2.4Structuring the Portfolio Samples09:23
2.4
Structuring the Portfolio Samples
09:23
2.5Structuring the Footer09:40
2.5
Structuring the Footer
09:40
3.Styling the Site
3.1Creating a Stylesheet05:26
3.1
Creating a Stylesheet
05:26
3.2Typekit and Google Fonts11:25
3.2
Typekit and Google Fonts
11:25
3.3Setting Up the Navigation08:30
3.3
Setting Up the Navigation
08:30
3.4Styling the Menu Items05:36
3.4
Styling the Menu Items
05:36
3.5Preparing the Social Icons08:15
3.5
Preparing the Social Icons
08:15
3.6Arranging the Social Media Icons05:08
3.6
Arranging the Social Media Icons
05:08
3.7Styling the Body Text09:19
3.7
Styling the Body Text
09:19
3.8Preparing the Featured Icons06:00
3.8
Preparing the Featured Icons
06:00
3.9Preparing the Background Image05:21
3.9
Preparing the Background Image
05:21
3.10Styling the Feature Section11:41
3.10
Styling the Feature Section
11:41
3.11Preparing the Portfolio Images09:51
3.11
Preparing the Portfolio Images
09:51
3.12Laying Out the Columns14:15
3.12
Laying Out the Columns
14:15
3.13Styling the Captions09:15
3.13
Styling the Captions
09:15
3.14Setting Up the Footer06:08
3.14
Setting Up the Footer
06:08
3.15Styling the Footer Content11:38
3.15
Styling the Footer Content
11:38
4.Making It Responsive
4.1Reviewing the Photoshop Files02:43
4.1
Reviewing the Photoshop Files
02:43
4.2Our First Media Query06:50
4.2
Our First Media Query
06:50
4.3Responsive Portfolio Items08:01
4.3
Responsive Portfolio Items
08:01
4.4Styling the Responsive Menu10:07
4.4
Styling the Responsive Menu
10:07
4.5Arranging the Feature Section13:15
4.5
Arranging the Feature Section
13:15
4.6jQuery Navigation12:16
4.6
jQuery Navigation
12:16
5.Conclusion
5.1Final Thoughts02:22
5.1
Final Thoughts
02:22
