PSD to HTML: The Responsive Portfolio Build Premium class

Craig Campbell, Web designer/developer from Fort Worth, TX

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
27 Videos (3h 43m)
    • Introduction

      2:27
    • Examining the Designs

      4:47
    • Creating the Index File

      7:05
    • Structuring the Navigation

      11:22
    • Structuring the Feature Section

      9:32
    • Structuring the Portfolio Samples

      9:23
    • Structuring the Footer

      9:40
    • Creating a Stylesheet

      5:26
    • Typekit and Google Fonts

      11:25
    • Setting Up the Navigation

      8:30
    • Styling the Menu Items

      5:36
    • Preparing the Social Icons

      8:15
    • Arranging the Social Media Icons

      5:08
    • Styling the Body Text

      9:19
    • Preparing the Featured Icons

      6:00
    • Preparing the Background Image

      5:21
    • Styling the Feature Section

      11:41
    • Preparing the Portfolio Images

      9:51
    • Laying Out the Columns

      14:15
    • Styling the Captions

      9:15
    • Setting Up the Footer

      6:08
    • Styling the Footer Content

      11:38
    • Reviewing the Photoshop Files

      2:43
    • Our First Media Query

      6:50
    • Responsive Portfolio Items

      8:01
    • Styling the Responsive Menu

      10:07
    • Arranging the Feature Section

      13:15

This class is no longer available.

About This Class

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 class, you'll learn how to take a portfolio design and build it using responsive techniques, HTML, and CSS.

 Topics include:

1 . Examining the Design

2.  
Structuring the Site

3.  Creating the Index File

4.  Structuring the Navigation

5.  Structuring the Feature Section

6.  Structuring the Portfolio Samples

7.  Structuring the Footer

8.  
Styling the website


9.   Creating a Stylesheet

10. Typekit and Google Fonts

11. Setting Up the Navigation

12. Styling the Menu Items

13. Preparing the Social Icons

14. Arranging the Social Media Icons

15. Styling the Body Text

16. Preparing the Featured Icons

17.  Preparing the Background Image

18. Styling the Feature Section

19. Making It Responsive6

20. Styling the Responsive Menu and much more

What is the target audience?                                                                                                                                             

  • Complete beginners who want to learn how to build a professional, beautiful and responsive website
  • Designers who want to expand their skills
  • Students with some knowledge about Adobe Photoshop ,but who struggle to put together a great websit

100

Students

--

Projects

Craig Campbell

Web designer/developer from Fort Worth, TX

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.