The document provides tips and encouragement for learning to code, including identifying trustworthy learning resources, focusing on real use cases, using problem-based learning over solely information-based learning, getting excited about coding, creating a supportive learning environment, and getting involved through doing and teaching others. Reasons people want to learn coding include customizing websites, furthering careers, and communicating better with clients. Potential barriers addressed include not knowing where to start and lack of a clear curriculum.

3. OBLIGATORY CROWD
PARTICIPATION SECTION

4. IF YOU COULD LEARN ANYTHING,
WHAT WOULD IT BE?

5. •Start a fire
•Make mayonnaise
•Escape a straight jacket
•Create animated gifs
•Learn Italian
•Basic electronics
•Play guitar
•Make beer or spirits
•Perform the Heimlich
•Make jewelry
•Throw a football
•Garden
HERE ARE THINGS I’VE HEARD:

6. TELL THE PERSON SITTING NEXT TO
YOU YOUR ANSWER

7. WHY HAVEN’T YOU
LEARNED IT YET?

8. •Laziness
•Afraid to dislocate shoulder
•Can’t retain new information
•Too busy
•Requires someone to show me how
•Can’t find resources
•Don’t have the tools (Photoshop)
•Money
•Don’t know where to start
•Afraid to fail
•Time
WHY HAVEN’T YOU
LEARNED IT YET?

9. “There's an unlimited
number of things to
learn, so knowing
where to start is
daunting.”

10. “I need to be taught. I
don't learn well from books
unless I'm furthering
knowledge that's already in
my brain. So if I didn't have
someone literally teaching
me step-by-step, I never
would learn.”

11. “I need someone to
find a class and say it
happens at this time,
for this long and it
costs this much
and I would be in.”

12. “I need [help/support] to find
[a resource] at [a date], for
[length of time] for
[monetary value] and I’m
[confirmation exclamation]!”

13. “Jenn told me about a
Girl Develop It Class
on June 6th, for 4
hours for 80 bucks
and I’m totes in!”

14. GIRLDEVELOPIT.COM

15. I WANTED IN

17. ZELDMAN.COM - 1996

18. ZELDMAN.COM/FAQ.HTML - 1999

19. “It will show you how to use simple,
inexpensive tools to make web pages
that shine: pages that look great,
load fast, connect to each other
in intuitive ways, and above all
CONVEY SOMETHING WORTHWHILE
to your chosen audience.
Because it's not about dancing baloney
and flashing lights, it's about
COMMUNICATION AND SHARING.
This is our medium – perhaps the most
open and democratic medium the
world has yet known.
IT BEHOOVES US TO USE IT WELL.”

20. DANCING BALONEY FTW?
HTTP://CODEPEN.IO/JENN/PEN/YGAWI

21. LILBUB.COM
MORE CODERS, MORE CONTENT
LADIESINTECH.COM

23. SEXHOBBIT.TUMBLR.COM

31. HTTPS://TWITTER.COM/ZELDMAN/STATUS/29432105813

32. ALEXISANDJOE.TUMBLR.COM

33. PIXELUNION.NET/THEMES/FLUID

34. ALEXISANDJOE.TUMBLR.COM

35. ALEXISANDJOE.TUMBLR.COM

36. THIS IS MY MOM

37. ETSY.COM/SHOP/WISHTO

38. “I took a Dreamweaver class. I
loved every minute of it. I FELT
SMART while I was learning it ...
and IT FELT MAGICAL TO
WRITE CODE and it produced a
website!
I used to like to practice writing
different things and then
viewing what those different
things produce.”

39. THIS IS JOHN

40. FACULTY.CCP.EDU

41. FACULTY.CCP.EDU

42. “All of my students use
phones now, so I thought
a mobile site would be
good. Just trying to keep
up to date.”

43. DUDAMOBILE.COM

44. BUT WHY SHOULD I LEARN TO CODE?

45. “I don’t need to learn to code”
- Client

46. CODE EMPOWERMENT
• Format your content
• Make small updates to styles and text
without having to hire a development firm
• Share common language/jargon/terms to
ensure a proper outcome

47. VISITPHILLY.COM

50. <div class="split-alt">
!
! <!-- FIRST GREY MAJOR HEADLINE WITHIN TAB CONTENT SECTION: Edit this <h4> line to updated the grey major headline text
within the content area -->
! <h4 class="kappa">Featured:</h4>
! ! !
! ! !
! <div class="node first">
! !
! ! <ul class="summary">
<li>
<a href="http://www.visitphilly.com/articles/philadelphia/top-summer-festivals-in-philadelphia/"><img src="http://
photos.visitphilly.com/spring-festivals-philadelphia-200vp.jpg" alt="couple" width="115" height="115" /></a>
<h5 class="delta">Top Summer Festivals</h5>
<h6 class="zeta"><a href="http://www.visitphilly.com/articles/philadelphia/top-summer-festivals-in-
philadelphia/">Time to Celebrate</a></h6>
<p>Celebrate the summer season with our top fireworks, concerts, festivals and more.<a class="more" href="http://
www.visitphilly.com/articles/philadelphia/top-summer-festivals-in-philadelphia/">More</a></p>
</li>
<li>
<a href="http://withart.visitphilly.com/"><img src="http://c468732.r32.cf0.rackcdn.com/barnes-foundation-ext-
crane-200.jpg" alt="Benjamin Franklin Parkway" width="115" height="115" /></a>
<h5 class="delta">With Art Philadelphia™</h5>
<h6 class="zeta"><a href="http://withart.visitphilly.com/">Curate Your Own Experience</a></h6>
<p>Visit With Art Philadelphia™ to discover the city's unparalleled visual arts, museums and more.<a class="more"
href="http://withart.visitphilly.com/">More</a></p>
</li>
<li>
<a href="http://www.visitphilly.com/museums-attractions/philadelphia/benjamin-franklin-museum/"> <img src="http://
photos.visitphilly.com/franklin-ghost-house-200.jpg" alt="Franklin" width="115" height="115" /></a>
<h5 class="delta">Benjamin Franklin Museum</h5>
<h6 class="zeta"><a href="http://www.visitphilly.com/museums-attractions/philadelphia/benjamin-franklin-
museum/">Reopening August 24</a></h6>
<p>Newly revitalized museum dedicated to the life and legacy of Philadelphia’s Renaissance man.<a class="more"
href="http://www.visitphilly.com/museums-attractions/philadelphia/benjamin-franklin-museum/">More</a></p>
</li>
<li>
<a href="http://www.visitphilly.com/philadelphia-neighborhoods/"><img src="http://photos.visitphilly.com/baltimore-
avenue-university-city-200vp.jpg" alt="Neighborhoods" width="115" height="115" /></a>
<h5 class="delta">Explore Philadelphia Neighborhoods</h5>
<h6 class="zeta"><a href="http://www.visitphilly.com/philadelphia-neighborhoods/">Go one more block</a></h6>
<p>Discover amazing restaurants, arts, shopping, events, nightlife and more in Philly's neighborhoods.<a class="more"
href="http://www.visitphilly.com/philadelphia-neighborhoods/">More</a></p>
</li>
<li>
<a href="http://www.visitphilly.com/campaign/withlove/"><img src="http://
c0468822.cdn.cloudfiles.rackspacecloud.com/with-love-philadelphia-xoxo-logo-120.jpg" alt="" width="115" height="115" /></a>

55. “I have developers that code
for me already.”
- Your Local Information Architect

57. DISTRITORESTAURANT.COM

62. “I have a great idea for a website!!!
...But I don’t know how to code it.”
- You/Your Neighbor/Your Dentist

63. LADIESINTECH.COM

69. “This website is broken.”
- Everyone, everywhere, at one time or another

76. THERE’S NO SHORTAGE OF REASONS
THAT PEOPLE WANT TO LEARN CSS
•Edit blogging themes
•Customize your MySpace page
•Bulletin Board posts
•Portfolio sites
•Try out web fonts
•Further careers
•Help inform web design decisions
•Control appearance of content
•Communicate with clients about their website
•Learn something new

77. THIS IS SNOOP DOGG AND HE WANTS
YOU TO LEARN TO CODE

78. TWITTER.COM/SNOOPDOGG/STATUS/306540425152442368

80. “Computer programming is the
single best professional
opportunity in the world. “
- Steve Ballmer
CEO, Microsoft Corporation

81. CODE.ORG

83. THIS IS THE MAYOR OF NEW YORK CITY

84. TWITTER.COM/MIKEBLOOMBERG/STATUS/154999795159805952

85. CODEYEAR.COM

86. CODEYEAR.COM
This site is run by codeacademy:

87. CODEACADEMY.COM

88. CODESCHOOL.COM

89. HTTPS://DEVELOPERS.GOOGLE.COM/UNIVERSITY/

90. FTACADEMY.ORG

91. LYNDA.COM

92. ACADEMICEARTH.ORG

93. P2PU.ORG/EN/SCHOOLS/SCHOOL-OF-WEBCRAFT

94. TEAMTREEHOUSE.COM

95. HTTP://CODERACE.ME/

96. THECODEPLAYER.COM

97. CODELEARN.ORG

98. HTTP://WWW.UDACITY.COM/

99. CODEAVENGERS.COM

100. HTTP://LEARNCSS.TUTSPLUS.COM/

101. SOME PEOPLE DID NOT THINK THIS
WAS A GOOD IDEA

102. FORBES.COM/SITES/TARABROWN/2012/01/10/LEARNING-HOW-TO-CODE-IS-A-WASTE-OF-TIME

103. HTTP://WWW.FORBES.COM/SITES/ANTHONYKOSNER/2012/10/06/LEARN-TO-CODE-1-DOES-
EVERYBODY-REALLY-NEED-TO-PROGRAM/

104. CODINGHORROR.COM/BLOG/2012/05/PLEASE-DONT-LEARN-TO-CODE.HTML

105. HTTPS://TWITTER.COM/FLANGY/STATUS/155414080247709697

106. SOME PEOPLE DID NOT THINK THIS
WAS A GOOD IDEA
•Underestimates time it takes to learn code
•There's no help with definitions or concepts
•There's no help at all
•Badges aren’t enough incentive
•Boring content
•No use case for lessons learned
•A tool seeking a problem
•Reciting code, not understanding code
•Unnecessary skill
•Implies that there's a thin, easily permeable
membrane between learning to program and
getting paid to program professionally

107. RINKWORKS.COM/BOOKAMINUTE
LEARN X IN Y MINUTES!!

109. SET REALISTIC EXPECTATIONS

110. IDENTIFY TRUST-WORTHY RESOURCES

112. HTML.NET

113. “Oh boy.”

114. HTML.NET

115. “This talks to you like you’re
an idiot.”

116. W3SCHOOLS.COM

117. W3FOOLS.COM

118. W3FOOLS.COM
BAD EDUCATION HURTS.
1.BEING BADLY EDUCATED HAMPERS YOUR
ABILITY TO SCORE A GOOD JOB.
2.INACCURATE REFERENCES SLOW
DEVELOPMENT AND CAUSE COSTLY QA LOOPS.
3.LEARNING KEY WEB DEVELOPMENT IDIOMS
SLOWLY OR INCORRECTLY PUTS YOU YEARS
BEHIND YOUR OWN COLLEAGUES.

119. HTTP://WWW.HACKEDUCATION.COM/2011/10/28/CODECADEMY-AND-THE-
FUTURE-OF-NOT-LEARNING-TO-CODE/

120. I've worked my way through
all the "Getting Started with
Programming" lessons and
I've even tackled the
Intermediate Javascript
course. I've got badges. I've
earned achievements. And I
don't know shit.
http://www.hackeducation.com/2011/10/28/codecademy-and-the-future-of-not-learning-to-code/
- Audrey Watters

121. FOCUS ON REAL USE CASES

122. INFORMATION-BASED LEARNING
Focuses on the delivery of
information by the teacher through
lectures, notes, etc. and its recall by
the student

123. PROBLEM-BASED LEARNING
In a problem-based learning (PBL) model, students
engage complex, challenging problems and
collaboratively work toward their resolution.
PBL is about students connecting
disciplinary knowledge to real-world
problems—the motivation to
solve a problem becomes
the motivation to learn.

124. “My biggest barrier was that I
didn't know where to start. I
read articles, did tutorials, and
watched videos, but I wasn't
sure of what I should focus on,
so I felt like I wasn't
progressing
It was incredibly valuable
having a curriculum to follow.”
- Yesenia Perez-Cruz

125. YESENIAPEREZCRUZ.COM

126. YESENIAPEREZCRUZ.COM

127. YESENIAPEREZCRUZ.COM

128. GET EXCITED!!

129. HTTP://WWW.CODEAVENGERS.COM

131. TWITTER.COM/JERESIG

132. KHANACADEMY.ORG/CS

134. CREATE A SUPPORTIVE ENVIRONMENT

135. GET PEOPLE INVOLVED
Adults often learn or remember the following
after one month:
• 10% of what they read.
• 20% of what they hear.
• 30% of what they see.
• 50% of what they see and hear.
• 70% of what they say.
• 90% of what they do and say.
“How People Learn”
http://www.extension.umn.edu/distribution/familydevelopment/components/08503p13-14.pdf

136. BLOC.IO

137. DEVBOOTCAMP.COM

138. DON’T WASTE ANYONES TIME

140. HTTP://WWW.CODECADEMY.COM/#!/EXERCISES/0

141. HTTP://TRYRUBY.ORG/LEVELS/1/CHALLENGES/0

142. MAKE TIME YOUR FRIEND

143. MAKE TIME YOUR FRIEND

144. SKILLSHARE.COM

145. MEETUP.COM

146. IF YOU COULD TEACH ANYTHING,
WHAT WOULD IT BE?

147. LEARNING NEW STUFF FEELS GREAT
GET YOUR RUBBER BANDS OUT

149. Kiss My CSS Shirts: http://www.neatoshop.com/catg/Matt-Sutter