Based on a talk I gave at Creator's Camp in Tallahassee, FL.
Originally published at http://makerbasededucation.com/2014/07/23/learn-html-css-this-month/
10. You could hire
someone, but...
You’ll pay TOO MUCH
because you don’t know
HTML & CSS to measure
the estimate
11. You could hire
someone, but...
You’ll pay TOO MUCH
because you don’t know
HTML & CSS to measure
the estimate
It’s HARD to find a good
developer
12. You could hire
someone, but...
You’ll pay TOO MUCH
because you don’t know
HTML & CSS to measure
the estimate
It’s HARD to find a good
developer
You’ll continue to pay
TOO MUCH every time
you need your site
updated
13. And you could use the numerous
free website-creation tools
which
are FREE
and EASY TO USE
14. And you could use the numerous
free website-creation tools
you DON’T KNOW what’s
going on behind-the-
scenes
you are RESTRICTED to
their LIMITED templates
and features
butwhich
are FREE
and EASY TO USE
16. There are 2 types of people:
creators1
- the 1% that creates
the internet
17. There are 2 types of people:
consumers2
the 99% that
simply consumes it
18. creators1
consumers2
Know how to code. They create the technology and
shape the world we interact with daily.
Don’t know how to code. Their lives are dependent
on and their interactions are shaped by the
technologies being built.
21. You’ll always have a way to make money
FREELANCE
CAREER
STARTUPS
Over 100,000 new websites are created a day.
By 2020 there will be a surplus of 1 million jobs in the
IT industry to people capable of filling them
In a startup coders are valued at $1 million...EACH
22. BUT...I want to make web applications with Ruby,
PHP, Javascript, Python, etc.
23. BUT...I want to make web applications with Ruby,
PHP, Javascript, Python, etc.
...do I need to know HTML and CSS for that????
24. A web application allows users to interact
with it and perform actions.
26. Every web application has a...
FRONT-END BACK-END
What you see. The look and style of the
site.
Behind-the-scenes. The way the
applications functions and stores data.
39. OLDway
NEWway
VS.
1 week 2 weeks
3 weeks 1 month
have your
first site up your second
site up
1 month
you are a website
building pro
finish “learning” (aka studying)
and start your first site
have your
first site up
41. choose a lovable project
You gotta be careful if you don’t know where you’re
going, because you might not get there. - Yogi Berra
42. choose a lovable project
“You got to be careful if you don’t know where you’re
going, because you might not get there.” - Yogi Berra
When you’ve
finished it you’ve
learned it.
47. identify the
building blocks
(this holds true for HTML and CSS too)
Translation: 20% of a language
comprises 80% of its usage (spoken,
written, coding, etc)
48. identify the
building blocks
(search amazon and google for “learn
html and css” and see which rank the
highest)
How I do it: Take three of the most
popular guides and courses. Quickly go
through them to find the common
themes.
49. Other tricks before you start:
No Stakes Learning and Fast-Feedback loop
Scaffolds
Mental models and One-Pagers
Quantity over quality
Where to find answers
Learn in short bursts
50. The one thing that keeps you
from learning or trying
something new.
Fear of Failure
51. The one thing that keeps you
from learning or trying
something new.
Fear of Failure
(No Stakes Learning, Fast-Feedback Loops, and “Quantity over
Quality” ELIMINATE THIS FEAR.)
52. No Stakes Learning
learning without consequence of failure
Fast-Feedback Loops
instant feedback to know if you did it right
53. Inspect
Element
Feature
(you can type in HTML
and CSS changes here
and see instant changes
in browser without fear of
failure. If you messed up
or don’t like it just reload
the page.)
No Stakes Learning and Fast-Feedback Loops
54. There’s a story...
of a pottery class where they
were split into two groups. The
two groups would learn on their
own and then come back
together for a gallery at the end
of the semester and receive a
grade. The only difference was
that...
Paraphrased from “The First 20 Hours” **
55. The Quantity Group1
2
would be graded solely on how many pieces of
pottery they created
would be graded on the quality of the best piece of
pottery they made.
The Quality Group
56. When it came to showcase day...
the teachers were surprised when they found
that the group that was graded on quantity
consistently had the better looking pieces of
pottery than the group judged on one piece’s
quality.
57. When it came to showcase day...
the teachers were surprised when they found
that the group that was graded on quantity
consistently had the better looking pieces of
pottery than the group judged on one piece’s
quality.
...AND A LOT MORE OF THEM!
58. Quantity over Quality
Don’t try to create a perfect site in the
beginning. Instead focus on building sites
over and over. In time your process is
refined. The learning is in the process. The
more times you repeat the process of making
a site the more the concepts sink in.
59. Scaffolds & Frameworks
Improves learning efficiency by allowing you
to focus on essentials and unveil more
difficult concepts as you go
60. Bootstrap
Scaffolds & Frameworks
Acts like training wheels. Allows you to
get up and running faster.
Allows you to learn essentials of HTML
and CSS first without worrying about
unnecessary advanced concepts.
You see how code’s written by the
world’s best front-end coders.
As you introduce more complex topics
and strip away Bootstrap you’ll be
surprised at how much you’ve learned
so fast.
61. Mental Models and One-Pagers
Identify techniques and processes that
continue to appear and put them on one-
pagers.
62. Mental Models and One-Pagers
A CSS rule is
something you use
constantly when
building websites. I
made a one-pager of
the syntax to refer to
when writing rules.
63. Mental Models and One-Pagers
A CSS rule is
something you use
constantly when
building websites. I
made a one-pager of it’
s syntax to refer to
when writing rules.
You can even combine a bunch of these into a big one-
pager as your cheat sheet when creating sites.
64. Want to try something new or can’t figure out what’s wrong with your
code? Google and Stack Overflow are your friends.
Where to find answers
65. Learn in short bursts
Limit your learning to 1 hour each day. This
will keep you excited and keep you from
getting burned out. Also promotes optimal
attention and retention.
66. During that hour go as fast as you
can. Don’t try to remember
everything. Again, the learning is
in the process and the repetition.
Not in the “studying for a test”
approach.
Learn in short bursts
67. During that hour go as fast as you
can. Don’t try to remember
everything. Again, the learning is
in the process and the repetition.
Not in the “studying for a test”
approach.
Learn in short bursts
EXTRA CREDIT: Use e.ggtimer.com to practice in 3
bursts of 20 minutes with a 5 minute break.
69. Learn To Build Beautiful Websites In 1 Month
by Ryan Bonhardt (yep that’s me)
70. This is the course I wish I had when I was
learning HTML and CSS.
71. ...and people seem to like it!
This is the course I wish I had when I was
learning HTML and CSS.
72. “Brilliant! This
course saved me!!!”
...and people seem to like it!
“What a course! This
course was absolutely
terrific!”
“Bonus
lectures are
simply
brilliant”
“This is better than
Codecademy!”
“….it’s obvious Ryan
knows what he’s
talking about”
“Best course
ever!”
“I would rank this course in
the top three of all courses I’ve
taken…”
This is the course I wish I had when I was
learning HTML and CSS.
“ ”
73. 1 week 2 weeks
have your
first site up your second
site up
1 month
Multiple sites. You are
a website building pro
You get off the ground and building
your first site in less than a week.
74. A 12 year-old
student made this
as his first website
with HTML and CSS
in less than
12 hours!
75. A 12 year-old
student made this
as his first website
with HTML and CSS
in less than
12 hours!
Pretty incredible!
76. In the beginning you might feel the urge to
stop and figure out everything going on
behind scenes.
77. In the beginning you might feel the urge to
stop and figure out everything going on
behind scenes.
DON’T DO THIS
78. It’s a common feeling in the beginning to
be uneasy when you jump in over your
head because we’re so used to studying
and learning everything before we start.
That’s what we’ve always done in school.
79. From the start of the course on, it is obvious that Ryan knows what he's
talking about. However, it feels at first like this course, due to it's quick
intended time-frame for doing, is going to just be a shotgun blast of
random things.
It turns out that this isn't true. I really feel like I learned a lot about how to
build a responsive web page from a short course here.
Take this student for example...
80. use w3schools and CSS-Tricks as
added references if you are
confused.
Along the way...
81. use w3schools and CSS-Tricks as
added references if you are
confused.
That’s fine! Sometimes things just don’t click the first
time, or when explained a certain way. Another source
is not only ok, but recommended.
Along the way...
82. Continue to repeat the process of
building sites of your own - quantity over
quality.
Afterwards...
For added practice check out
Codecademy’s track where you build
AirBnB’s home-page.
83. Continue to repeat the process of
building sites of your own - quantity over
quality.
Afterwards...
For added practice check out
Codecademy’s track where you build
AirBnB’s home-page.
You’ll see you already have the knowledge to build awesome
websites just like the pros!
85. What is HTML?
HTML stands for Hypertext Markup
Language. The best way to explain it is that,
for the most part, it tells the browser what
is included in a webpage.
86. Hyper Text Markup Language
Tells the browser what is included in pageHTML
89. What is CSS?
Cascading Style Sheets (CSS) describes the look and
formatting of a document written in a markup
language. In other words, it tells the browser how to
style the HTML and ultimately determines what the
page will look like.
90. Cascading Style Sheets
Determines the look and design of the pageCSS
(These two sites have almost the same HTML, but different
CSS.)
94. Make sure you have your essential tools
Don’t have them? Click on and download them now. Go ahead… I’ll wait
95. Open up Sublime
And click File >
New File.
You should see a
blank screen like
to the right --->
96. Type this:
Let’s give it a title and a header
<html>
<head>
<title>My First Site</title>
</head>
<body>
<h1>Hello! This is my first site.</h1>
</body>
</html>
97. Now click File > Save and save it as
“hello.html”
Your document should look like below
98. Now right click in the document and select
“Open in Browser”
See the same as below?
Title
Header