Building something that already exists is a great way to gain new skills and refine old skills. When I attempted to recreate Lynn Fisher’s Single Div project last year, I learned two things: 1) having a solid foundation of the basics is invaluable and 2) it’s totally fine if you have to look something up. Presented to the WordPress DC Meetup Group, June 2016.

1. A single div: a
learning experiment
<div></div>

2. <div></div>
A single div. Seriously.

3. a.singlediv.com
by Lynn Fisher

4. a.singlediv.com
by Lynn Fisher

5. a.singlediv.com
by Lynn Fisher

6. See the Pen by Lauren
Pittenger ( ) on .
One Div Owl
@lepittenger CodePen

7. Lesson #1
I do not know the syntax
for box-shadow by heart

8. box-shadow: ??;
box-shadow: horizontal vertical blur spread color;

9. Lesson #2
Know the basics

10. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen

11. Lesson #3
Looking it up is
resourceful, not cheating

12. Lesson #4
Learn what to ask (Google)

13. Lesson #5
How to make a single div owl
(100 lessons in 1)

14. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen
div

15. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen
div:before

16. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen
The basic body

17. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen
The beak

18. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen
The beak

19. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen
Layered linear gradient backgrounds

20. The eyes

21. Element Layers
div:before
content
box shadow
(first on top, last on bottom)
div
background images
background color

22. Further Exploration
Shorthand background property to keep
owl's body background color grey?
Add feet to the :after element?

23. References
Single Div Drawings with CSS
MDN linear-gradient()
a.singlediv.com

24. Thank You!
Lauren Pittenger
designer & developer
laurenpittenger.com
@laurenpittenger