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

Designing a Responsive Portfolio Site

with

Responsive web design is firmly embedded in a modern web design workflow and cannot and should not be ignored. There are two approaches to incorporating responsive design into your workflow; desktop-first and then make it responsive for mobile devices, or mobile-first and leave the desktop until last. Whatever is your preferred way, we generally start from a mockup. In this course you'll learn how to design two different breakpoints for a responsive portfolio website using Adobe Photoshop and Adobe Illustrator.

1× speed

Free Preview: Designing a Responsive Portfolio Site

Introduction

01:13

1.Welcome
2 lessons, 04:32

Free Preview
1.1
Introduction
01:13

Free Preview
1.2
Website Preview
03:19

2.Getting Started
2 lessons, 13:58

2.1
Setting Up the File
09:15

2.2
Using TypeKit Fonts
04:43

3.Designing for Desktop Browsers
11 lessons, 1:46:12

3.1
Importing and Masking Images
09:58

3.2
Columns and Text
08:29

3.3
Category Icons
11:31

3.4
Header and Paragraph Text
10:49

3.5
Creating a Navigation Bar
07:05

3.6
Social Media Icons
08:42

3.7
Portfolio Setup
07:31

3.8
Portfolio Samples
08:50

3.9
Portfolio Text
10:47

3.10
Creating the Footer
11:10

3.11
Registration Form
11:20

4.Designing for Mobile
6 lessons, 47:52

4.1
Re-Examining Our File
03:51

4.2
Adjusting Header Text
04:14

4.3
Adjusting Portfolio Categories
10:12

4.4
Adjusting the Menu
09:05

4.5
Adjusting the Portfolio Samples
12:31

4.6
Adjusting the Footer
07:59

5.Conclusion
1 lesson, 03:16

5.1
Final Thoughts
03:16


Preview for Designing a Responsive Portfolio Site
Lessons:
22
Length:
2.9 hours
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