- Overview
- Transcript
4.8 Dark Background Feature Section
In this lesson we’ll style the feature section with the dark background.
1.Welcome1 lesson, 02:51
1 lesson, 02:51
1.1Introduction02:51
1.1
Introduction
02:51
2.Writing The Markup4 lessons, 51:16
4 lessons, 51:16
2.1Workspace Preparation And Header Markup13:10
2.1
Workspace Preparation And Header Markup
13:10
2.2Main Banner And Light Background Feature List13:38
2.2
Main Banner And Light Background Feature List
13:38
2.3Dark Background Feature List And Testimonials11:01
2.3
Dark Background Feature List And Testimonials
11:01
2.4Gallery And Footer13:27
2.4
Gallery And Footer
13:27
3.Slicing The PSD2 lessons, 21:29
2 lessons, 21:29
3.1Logo, Textures, Misc Images09:19
3.1
Logo, Textures, Misc Images
09:19
3.2Creating The Sprites Image12:10
3.2
Creating The Sprites Image
12:10
4.Styling With CSS10 lessons, 2:05:04
10 lessons, 2:05:04
4.1Reset CSS, Bootstrap Grid, Less Variables And Mixins15:33
4.1
Reset CSS, Bootstrap Grid, Less Variables And Mixins
15:33
4.2General Styling & Google Fonts10:31
4.2
General Styling & Google Fonts
10:31
4.3Top Header & Button Styling15:56
4.3
Top Header & Button Styling
15:56
4.4Styling The Icons (plus A Mini Tutorial On Css Sprites)11:25
4.4
Styling The Icons (plus A Mini Tutorial On Css Sprites)
11:25
4.5Main Banner Styling And Single Field Form14:52
4.5
Main Banner Styling And Single Field Form
14:52
4.6Styling The Blockquote In The Main Banner10:47
4.6
Styling The Blockquote In The Main Banner
10:47
4.7Light Background Feature Section13:28
4.7
Light Background Feature Section
13:28
4.8Dark Background Feature Section08:12
4.8
Dark Background Feature Section
08:12
4.9Customers Section12:16
4.9
Customers Section
12:16
4.10Footer Styling12:04
4.10
Footer Styling
12:04
5.JavaScript/jQuery1 lesson, 10:34
1 lesson, 10:34
5.1Using jQuery To Power The Gallery10:34
5.1
Using jQuery To Power The Gallery
10:34
6.Finishing Up5 lessons, 48:16
5 lessons, 48:16
6.1Styling The Gallery14:03
6.1
Styling The Gallery
14:03
6.2Making The Images Retina-ready11:19
6.2
Making The Images Retina-ready
11:19
6.3Eliminating FOUT (Flash of Unstyled Text)06:18
6.3
Eliminating FOUT (Flash of Unstyled Text)
06:18
6.4Responsive Layout (brief Explanation On Bootstrap Grid And Media Queries)11:05
6.4
Responsive Layout (brief Explanation On Bootstrap Grid And Media Queries)
11:05
6.5Cross-browser Testing05:31
6.5
Cross-browser Testing
05:31
7.Closing1 lesson, 00:46
1 lesson, 00:46
7.1Conclusion00:46
7.1
Conclusion
00:46
Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value.
Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals.
When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets.
You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.