Lessons:32Length:3.7 hours
Taking a website mock-up designed in Photoshop (PSD) and converting it into a working website is without doubt the most common task for any web designer today. In this course, Craig Campbell will show you how easy it can be!
1.Welcome
1.1Introduction01:55
1.1
Introduction
01:55
2.Setup
2.1The Photoshop File02:39
2.1
The Photoshop File
02:39
2.2Exporting Images10:32
2.2
Exporting Images
10:32
3.Building the HTML
3.1HTML Skeleton08:11
3.1
HTML Skeleton
08:11
3.2Logos and Icons08:20
3.2
Logos and Icons
08:20
3.3Navigation06:30
3.3
Navigation
06:30
3.4Coding the Content Slider11:17
3.4
Coding the Content Slider
11:17
3.5Two-Column Setup09:39
3.5
Two-Column Setup
09:39
3.6Four-Column Setup08:32
3.6
Four-Column Setup
08:32
3.7Coding the Footer08:54
3.7
Coding the Footer
08:54
4.Styling the Header
4.1Adding Fonts06:11
4.1
Adding Fonts
06:11
4.2Borders and Default Fonts03:19
4.2
Borders and Default Fonts
03:19
4.3Setting the Content Width04:35
4.3
Setting the Content Width
04:35
4.4Styling the Logo08:01
4.4
Styling the Logo
08:01
4.5Social Media Icons10:03
4.5
Social Media Icons
10:03
4.6Laying Out the Social Media Section06:42
4.6
Laying Out the Social Media Section
06:42
4.7Animated Hover Effects05:35
4.7
Animated Hover Effects
05:35
4.8Styling the Main Menu15:48
4.8
Styling the Main Menu
15:48
4.9Main Menu Hover Effects02:45
4.9
Main Menu Hover Effects
02:45
4.10The Search Form05:47
4.10
The Search Form
05:47
5.Styling The Content Slider
5.1Slider Navigation and Background10:34
5.1
Slider Navigation and Background
10:34
5.2Navigation Hover Effects02:15
5.2
Navigation Hover Effects
02:15
5.3Styling the Slider Content08:19
5.3
Styling the Slider Content
08:19
5.4Anchor Tag Buttons07:24
5.4
Anchor Tag Buttons
07:24
5.5Explaining Column Layouts06:07
5.5
Explaining Column Layouts
06:07
5.6Styling the Three-Column Layout10:23
5.6
Styling the Three-Column Layout
10:23
5.7Styling the Four-Column Layout09:11
5.7
Styling the Four-Column Layout
09:11
5.8Image Captions06:21
5.8
Image Captions
06:21
5.9Footer Background05:40
5.9
Footer Background
05:40
5.10Footer Columns04:07
5.10
Footer Columns
04:07
5.11Styling the Gallery Thumbnails05:48
5.11
Styling the Gallery Thumbnails
05:48
6.Finishing Up
6.1Final Thoughts01:11
6.1
Final Thoughts
01:11
