Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

A Single Div: A Learning Experiment Slide 1 A Single Div: A Learning Experiment Slide 2 A Single Div: A Learning Experiment Slide 3 A Single Div: A Learning Experiment Slide 4 A Single Div: A Learning Experiment Slide 5 A Single Div: A Learning Experiment Slide 6 A Single Div: A Learning Experiment Slide 7 A Single Div: A Learning Experiment Slide 8 A Single Div: A Learning Experiment Slide 9 A Single Div: A Learning Experiment Slide 10 A Single Div: A Learning Experiment Slide 11 A Single Div: A Learning Experiment Slide 12 A Single Div: A Learning Experiment Slide 13 A Single Div: A Learning Experiment Slide 14 A Single Div: A Learning Experiment Slide 15 A Single Div: A Learning Experiment Slide 16 A Single Div: A Learning Experiment Slide 17 A Single Div: A Learning Experiment Slide 18 A Single Div: A Learning Experiment Slide 19 A Single Div: A Learning Experiment Slide 20 A Single Div: A Learning Experiment Slide 21 A Single Div: A Learning Experiment Slide 22 A Single Div: A Learning Experiment Slide 23 A Single Div: A Learning Experiment Slide 24
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

A Single Div: A Learning Experiment

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

A Single Div: A Learning Experiment

  1. 1. A single div: a learning experiment <div></div>
  2. 2. <div></div> A single div. Seriously.
  3. 3. a.singlediv.com by Lynn Fisher
  4. 4. a.singlediv.com by Lynn Fisher
  5. 5. a.singlediv.com by Lynn Fisher
  6. 6. See the Pen by Lauren Pittenger ( ) on . One Div Owl @lepittenger CodePen
  7. 7. Lesson #1 I do not know the syntax for box-shadow by heart
  8. 8. box-shadow: ??; box-shadow: horizontal vertical blur spread color;
  9. 9. Lesson #2 Know the basics
  10. 10. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen
  11. 11. Lesson #3 Looking it up is resourceful, not cheating
  12. 12. Lesson #4 Learn what to ask (Google)
  13. 13. Lesson #5 How to make a single div owl (100 lessons in 1)
  14. 14. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen div
  15. 15. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen div:before
  16. 16. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen The basic body
  17. 17. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen The beak
  18. 18. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen The beak
  19. 19. See the Pen by Lauren Pittenger ( ) on .One Div Owl @lepittenger CodePen Layered linear gradient backgrounds
  20. 20. The eyes
  21. 21. Element Layers div:before content box shadow (first on top, last on bottom) div background images background color
  22. 22. Further Exploration Shorthand background property to keep owl's body background color grey? Add feet to the :after element?
  23. 23. References Single Div Drawings with CSS MDN linear-gradient() a.singlediv.com
  24. 24. Thank You! Lauren Pittenger designer & developer laurenpittenger.com @laurenpittenger

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.

Views

Total views

304

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×