Lessons:14Length:2.3 hours
- Overview
- Transcript
3.2 Creating Style Tiles in Adobe Photoshop
Dedicated design software can still play a major role in your web development workflow, as long as you have a web-friendly process to follow. In this lesson you’ll use Photoshop to create style tiles for all the content elements of your site, in a way that will easily translate to CSS.
Related Links1.Introduction
1.1Responsive Web Design Revisited01:34
1.1
Responsive Web Design Revisited
01:34
1.2What “Responsive” Means Today and What You’ll Be Building14:46
1.2
What “Responsive” Means Today and What You’ll Be Building
14:46
1.3“Content First” Methodology: Why You Should Use It and How05:33
1.3
“Content First” Methodology: Why You Should Use It and How
05:33
2.Content Stage
2.1Content and Responsiveness Plan07:44
2.1
Content and Responsiveness Plan
07:44
2.2Assemble Content07:48
2.2
Assemble Content
07:48
3.Style Tiles Stage
3.1“Style Tiles” and Catering for All by Designing Big07:09
3.1
“Style Tiles” and Catering for All by Designing Big
07:09
3.2Creating Style Tiles in Adobe Photoshop14:59
3.2
Creating Style Tiles in Adobe Photoshop
14:59
4.Foundational Code Stage
4.1Build Your Basic Code Shell14:56
4.1
Build Your Basic Code Shell
14:56
4.2Add Unstyled Content: HTML and JavaScript13:57
4.2
Add Unstyled Content: HTML and JavaScript
13:57
4.3Add Unstyled Content: CSS15:00
4.3
Add Unstyled Content: CSS
15:00
5.Style Code Stage
5.1Turn Style Tiles Into Style CSS14:15
5.1
Turn Style Tiles Into Style CSS
14:15
6.Optimization Stage
6.1The picture Element06:32
6.1
The picture Element
06:32
6.2Code Autoprefixing, Combination, and Minification12:43
6.2
Code Autoprefixing, Combination, and Minification
12:43
7.Conclusion
7.1Wrapping Up01:05
7.1
Wrapping Up
01:05
