Lessons:27Length:3 hours
Pro Web Design Workflow is a course designed to teach you how to develop a professional workflow for your web design projects. You’ll learn how to work with grids, custom fonts, icon fonts and Photoshop actions. You’ll also learn about CSS preprocessors and why it’s important to make your projects responsive and how this is achieved.
If you’re new to web design, then it is suggested that you take our Web Design for Beginners course before this one, as it lays the foundation for what you’re about to learn.
1.Introduction
1.1Welcome01:35
1.1
Welcome
01:35
2.From Beginner to Pro
2.1How Do You Become a Pro Web Designer?04:29
2.1
How Do You Become a Pro Web Designer?
04:29
2.2Working With Grids09:17
2.2
Working With Grids
09:17
2.3Using Google Fonts05:56
2.3
Using Google Fonts
05:56
2.4Using Icon Fonts05:02
2.4
Using Icon Fonts
05:02
2.5Some Handy Photoshop Actions04:16
2.5
Some Handy Photoshop Actions
04:16
2.6Introduction to Preprocessors05:19
2.6
Introduction to Preprocessors
05:19
2.7Introduction to Responsive Web Design04:13
2.7
Introduction to Responsive Web Design
04:13
3.Creating a PSD Design
3.1PSD: Header and Slider14:22
3.1
PSD: Header and Slider
14:22
3.2PSD: Homepage Portfolio Area06:49
3.2
PSD: Homepage Portfolio Area
06:49
3.3PSD: Footer06:32
3.3
PSD: Footer
06:32
3.4PSD: Portfolio and About Pages07:53
3.4
PSD: Portfolio and About Pages
07:53
4.Rewriting the Code
4.1HTML: Header and Slider09:34
4.1
HTML: Header and Slider
09:34
4.2HTML: Portfolio Area and Footer08:21
4.2
HTML: Portfolio Area and Footer
08:21
4.3HTML: Portfolio and About Pages06:25
4.3
HTML: Portfolio and About Pages
06:25
4.4CSS: The Grid, Fonts and Reset Files07:18
4.4
CSS: The Grid, Fonts and Reset Files
07:18
4.5CSS: Variables04:14
4.5
CSS: Variables
04:14
4.6CSS: Typography07:31
4.6
CSS: Typography
07:31
4.7CSS: Buttons and Forms05:28
4.7
CSS: Buttons and Forms
05:28
4.8CSS: Page Header04:57
4.8
CSS: Page Header
04:57
4.9CSS: Homepage Slider07:49
4.9
CSS: Homepage Slider
07:49
4.10CSS: Page Banners09:37
4.10
CSS: Page Banners
09:37
4.11CSS: Main Content08:38
4.11
CSS: Main Content
08:38
4.12CSS: Footer06:37
4.12
CSS: Footer
06:37
4.13CSS: Making It Responsive (Part 1)09:23
4.13
CSS: Making It Responsive (Part 1)
09:23
4.14CSS: Making It Responsive (Part 2)06:38
4.14
CSS: Making It Responsive (Part 2)
06:38
5.Conclusion
5.1Recap00:57
5.1
Recap
00:57
