Jenn Lukas: Alle bør kunne kode litt (Webdagene 2013)Presentation Transcript
IF YOU COULD LEARN ANYTHING,
WHAT WOULD IT BE?
•Start a fire
•Escape a straight jacket
•Create animated gifs
•Make beer or spirits
•Perform the Heimlich
•Throw a football
HERE ARE THINGS I’VE HEARD:
TELL THE PERSON SITTING NEXT TO
YOU YOUR ANSWER
WHY HAVEN’T YOU
LEARNED IT YET?
•Afraid to dislocate shoulder
•Can’t retain new information
•Requires someone to show me how
•Can’t find resources
•Don’t have the tools (Photoshop)
•Don’t know where to start
•Afraid to fail
WHY HAVEN’T YOU
LEARNED IT YET?
“There's an unlimited
number of things to
learn, so knowing
where to start is
“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
“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.”
“I need [help/support] to find
[a resource] at [a date], for
[length of time] for
[monetary value] and I’m
“Jenn told me about a
Girl Develop It Class
on June 6th, for 4
hours for 80 bucks
and I’m totes in!”
I WANTED IN
ZELDMAN.COM - 1996
ZELDMAN.COM/FAQ.HTML - 1999
“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.”
MORE CODERS, MORE CONTENT
THIS IS MY MOM
“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
I used to like to practice writing
different things and then
viewing what those different
THIS IS JOHN
“All of my students use
phones now, so I thought
a mobile site would be
good. Just trying to keep
up to date.”
BUT WHY SHOULD I LEARN TO CODE?
“I don’t need to learn to code”
• 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
! <!-- 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">
<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://
<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"
<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"
<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"
<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>
“I have developers that code
for me already.”
- Your Local Information Architect
“I have a great idea for a website!!!
...But I don’t know how to code it.”
- You/Your Neighbor/Your Dentist
“This website is broken.”
- Everyone, everywhere, at one time or another
THERE’S NO SHORTAGE OF REASONS
THAT PEOPLE WANT TO LEARN CSS
•Edit blogging themes
•Customize your MySpace page
•Bulletin Board posts
•Try out web fonts
•Help inform web design decisions
•Control appearance of content
•Communicate with clients about their website
•Learn something new
THIS IS SNOOP DOGG AND HE WANTS
YOU TO LEARN TO CODE
“Computer programming is the
single best professional
opportunity in the world. “
- Steve Ballmer
CEO, Microsoft Corporation
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
•No use case for lessons learned
•A tool seeking a problem
•Reciting code, not understanding code
•Implies that there's a thin, easily permeable
membrane between learning to program and
getting paid to program professionally
LEARN X IN Y MINUTES!!
SET REALISTIC EXPECTATIONS
IDENTIFY TRUST-WORTHY RESOURCES
“This talks to you like you’re
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.
I've worked my way through
all the "Getting Started with
Programming" lessons and
I've even tackled the
course. I've got badges. I've
earned achievements. And I
don't know shit.
- Audrey Watters
FOCUS ON REAL USE CASES
Focuses on the delivery of
information by the teacher through
lectures, notes, etc. and its recall by
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.
“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
It was incredibly valuable
having a curriculum to follow.”
- Yesenia Perez-Cruz
CREATE A SUPPORTIVE ENVIRONMENT
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”
DON’T WASTE ANYONES TIME
MAKE TIME YOUR FRIEND
MAKE TIME YOUR FRIEND
IF YOU COULD TEACH ANYTHING,
WHAT WOULD IT BE?
LEARNING NEW STUFF FEELS GREAT
GET YOUR RUBBER BANDS OUT
Kiss My CSS Shirts: http://www.neatoshop.com/catg/Matt-Sutter