SlideShare une entreprise Scribd logo
1  sur  101
Télécharger pour lire hors ligne
How To Teach Yourself HTML And CSS This Month
Step
WHY?
1
You have to have a
Step 1
Or you won’t go till the end.
Step
WHY?
1
should YOU learn HTML and CSS?
Be able to
build things
online
test a business idea
Be able to build things online...
test a business idea
Be able to build things online...
start a blog
test a business idea
Be able to build things online...
create websites
start a blog
You could hire
someone, but...
You could hire
someone, but...
You’ll pay TOO MUCH
because you don’t know
HTML & CSS to measure
the estimate
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 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
And you could use the numerous
free website-creation tools
which
are FREE
and EASY TO USE
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
DON’Tbe LIMITED
There are 2 types of people:
creators1
- the 1% that creates
the internet
There are 2 types of people:
consumers2
the 99% that
simply consumes it
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.
DON’Tbe DEPENDENT
CREATOR
be a
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
BUT...I want to make web applications with Ruby,
PHP, Javascript, Python, etc.
BUT...I want to make web applications with Ruby,
PHP, Javascript, Python, etc.
...do I need to know HTML and CSS for that????
A web application allows users to interact
with it and perform actions.
Every web application has a...
FRONT-END BACK-END
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.
FRONT-END BACK-END
HTML
CSS
JAVASCRIPT
PYTHON
RUBY
PHP
SQL
These 2 are REQUIRED These are 4 of multiple
choices
WHEN DEVELOPING WEB
APPLICATIONS YOU MUST
KNOW HTML AND CSS.
WITHOUT THEM YOU WILL NOT
HAVE A SITE.
BUT it takes to long to learn it!
FOR-EV-ERRRRR
I don’t know where to START
It looks TOO HARD to learn
I TRIED BEFORE and learned nothing so I stopped
I’ll NEVER be able to learn it
How To Teach Yourself HTML And CSS This Month
Step 2
trying to learn
every little bit
before you
start to build
something.
THIS IS THE OLD SCHOOL WAY OF LEARNING
THIS IS THE WRONG WAY TO LEARN
loooooooonnnnnngggggg
You’ll end up...
learning 80% of stuff you’ll barely use
you’ll get burnt out
it’ll take you a month before you even
get your first site up
The traditional
education way doesn’
t work
(...or you would already know HTML and CSS and you
wouldn’t be reading this)
A new way...
A hybrid skill acquisition
model. It’s like learning but
add ninja mind tricks
+ learning = skill acquisition
Want to learn more? These are your bibles...
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
start learning through
PROJECT-BASED LEARNING
Step 3
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
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.
Get your essential tools
Sublime
Text Editor
This is where you write
your code and tell the
computer what your site
will look like.
Google Chrome
Web browser
This is where you see what
your code has created.
This is your feedback loop.
identify the
building blocks
The Pareto Principle: for many events, 80% of the effects
come from 20% of the causes
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)
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.
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
The one thing that keeps you
from learning or trying
something new.
Fear of Failure
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.)
No Stakes Learning
learning without consequence of failure
Fast-Feedback Loops
instant feedback to know if you did it right
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
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” **
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
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.
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!
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.
Scaffolds & Frameworks
Improves learning efficiency by allowing you
to focus on essentials and unveil more
difficult concepts as you go
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.
Mental Models and One-Pagers
Identify techniques and processes that
continue to appear and put them on one-
pagers.
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.
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.
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
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.
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
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.
What I SUGGEST
Step 4
Learn To Build Beautiful Websites In 1 Month
by Ryan Bonhardt (yep that’s me)
This is the course I wish I had when I was
learning HTML and CSS.
...and people seem to like it!
This is the course I wish I had when I was
learning HTML and CSS.
“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.
“ ”
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.
A 12 year-old
student made this
as his first website
with HTML and CSS
in less than
12 hours!
A 12 year-old
student made this
as his first website
with HTML and CSS
in less than
12 hours!
Pretty incredible!
In the beginning you might feel the urge to
stop and figure out everything going on
behind scenes.
In the beginning you might feel the urge to
stop and figure out everything going on
behind scenes.
DON’T DO THIS
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.
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...
use w3schools and CSS-Tricks as
added references if you are
confused.
Along the way...
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...
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.
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!
Step 5
Learn some
HTML and CSS
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.
Hyper Text Markup Language
Tells the browser what is included in pageHTML
...looks complex right?
NOT if you break it down
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.
Cascading Style Sheets
Determines the look and design of the pageCSS
(These two sites have almost the same HTML, but different
CSS.)
Once again it looks confusing…
Once again it looks confusing…
but NOT if you break it
down and identify the
patterns.
Step 6
Let’s build our first
website together
Make sure you have your essential tools
Don’t have them? Click on and download them now. Go ahead… I’ll wait
Open up Sublime
And click File >
New File.
You should see a
blank screen like
to the right --->
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>
Now click File > Save and save it as
“hello.html”
Your document should look like below
Now right click in the document and select
“Open in Browser”
See the same as below?
Title
Header
Congratulations!
You have made your first, albeit simple, web page
Head over to MASSIVE Academy and keep learning
Thanks For Reading
Ryan Bonhardt
@RyanBonhardt
www.massiveacademy.us

Contenu connexe

En vedette

The Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsThe Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsXPLAIN
 
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignThe What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignMotivate Design
 
How To (Really) Get Into Marketing
How To (Really) Get Into MarketingHow To (Really) Get Into Marketing
How To (Really) Get Into MarketingEd Fry
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingVelocity Partners
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next PresentationSOAP Presentations
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersHubSpot
 
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Velocity Partners
 
Why Content Marketing Fails
Why Content Marketing FailsWhy Content Marketing Fails
Why Content Marketing FailsRand Fishkin
 
A-Z Culture Glossary 2017
A-Z Culture Glossary 2017A-Z Culture Glossary 2017
A-Z Culture Glossary 2017sparks & honey
 
All About Beer
All About Beer All About Beer
All About Beer Ethos3
 
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...Empowered Presentations
 
Pixar's 22 Rules to Phenomenal Storytelling
Pixar's 22 Rules to Phenomenal StorytellingPixar's 22 Rules to Phenomenal Storytelling
Pixar's 22 Rules to Phenomenal StorytellingGavin McMahon
 
Healthcare Napkins All
Healthcare Napkins AllHealthcare Napkins All
Healthcare Napkins AllDan Roam
 

En vedette (17)

Design Your Career 2018
Design Your Career 2018Design Your Career 2018
Design Your Career 2018
 
The Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsThe Seven Deadly Social Media Sins
The Seven Deadly Social Media Sins
 
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignThe What If Technique presented by Motivate Design
The What If Technique presented by Motivate Design
 
How To (Really) Get Into Marketing
How To (Really) Get Into MarketingHow To (Really) Get Into Marketing
How To (Really) Get Into Marketing
 
Displaying Data
Displaying DataDisplaying Data
Displaying Data
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B Marketing
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
 
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.
 
How Google Works
How Google WorksHow Google Works
How Google Works
 
Why Content Marketing Fails
Why Content Marketing FailsWhy Content Marketing Fails
Why Content Marketing Fails
 
A-Z Culture Glossary 2017
A-Z Culture Glossary 2017A-Z Culture Glossary 2017
A-Z Culture Glossary 2017
 
All About Beer
All About Beer All About Beer
All About Beer
 
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
 
Pixar's 22 Rules to Phenomenal Storytelling
Pixar's 22 Rules to Phenomenal StorytellingPixar's 22 Rules to Phenomenal Storytelling
Pixar's 22 Rules to Phenomenal Storytelling
 
Healthcare Napkins All
Healthcare Napkins AllHealthcare Napkins All
Healthcare Napkins All
 
You Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedeeYou Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedee
 

Dernier

The relationship between iot and communication technology
The relationship between iot and communication technologyThe relationship between iot and communication technology
The relationship between iot and communication technologyabdulkadirmukarram03
 
Gender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 ProjectGender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 Projectreemakb03
 
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxIT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxSAJITHABANUS
 
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
Engineering Mechanics  Chapter 5  Equilibrium of a Rigid BodyEngineering Mechanics  Chapter 5  Equilibrium of a Rigid Body
Engineering Mechanics Chapter 5 Equilibrium of a Rigid BodyAhmadHajasad2
 
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Amil baba
 
Design of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxDesign of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxYogeshKumarKJMIT
 
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...amrabdallah9
 
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...soginsider
 
How to Write a Good Scientific Paper.pdf
How to Write a Good Scientific Paper.pdfHow to Write a Good Scientific Paper.pdf
How to Write a Good Scientific Paper.pdfRedhwan Qasem Shaddad
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxKISHAN KUMAR
 
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Amil baba
 
nvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxnvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxjasonsedano2
 
Power System electrical and electronics .pptx
Power System electrical and electronics .pptxPower System electrical and electronics .pptx
Power System electrical and electronics .pptxMUKULKUMAR210
 
EPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxEPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxJoseeMusabyimana
 
Landsman converter for power factor improvement
Landsman converter for power factor improvementLandsman converter for power factor improvement
Landsman converter for power factor improvementVijayMuni2
 
Renewable Energy & Entrepreneurship Workshop_21Feb2024.pdf
Renewable Energy & Entrepreneurship Workshop_21Feb2024.pdfRenewable Energy & Entrepreneurship Workshop_21Feb2024.pdf
Renewable Energy & Entrepreneurship Workshop_21Feb2024.pdfodunowoeminence2019
 
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Sean Meyn
 

Dernier (20)

The relationship between iot and communication technology
The relationship between iot and communication technologyThe relationship between iot and communication technology
The relationship between iot and communication technology
 
Gender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 ProjectGender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 Project
 
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxIT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
 
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
Engineering Mechanics  Chapter 5  Equilibrium of a Rigid BodyEngineering Mechanics  Chapter 5  Equilibrium of a Rigid Body
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
 
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
 
Design of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxDesign of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptx
 
計劃趕得上變化
計劃趕得上變化計劃趕得上變化
計劃趕得上變化
 
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
 
Lecture 2 .pdf
Lecture 2                           .pdfLecture 2                           .pdf
Lecture 2 .pdf
 
Présentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdfPrésentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdf
 
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
 
How to Write a Good Scientific Paper.pdf
How to Write a Good Scientific Paper.pdfHow to Write a Good Scientific Paper.pdf
How to Write a Good Scientific Paper.pdf
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptx
 
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
 
nvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxnvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptx
 
Power System electrical and electronics .pptx
Power System electrical and electronics .pptxPower System electrical and electronics .pptx
Power System electrical and electronics .pptx
 
EPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxEPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptx
 
Landsman converter for power factor improvement
Landsman converter for power factor improvementLandsman converter for power factor improvement
Landsman converter for power factor improvement
 
Renewable Energy & Entrepreneurship Workshop_21Feb2024.pdf
Renewable Energy & Entrepreneurship Workshop_21Feb2024.pdfRenewable Energy & Entrepreneurship Workshop_21Feb2024.pdf
Renewable Energy & Entrepreneurship Workshop_21Feb2024.pdf
 
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
 

How To Teach Yourself HTML And CSS This Month

  • 3. Step 1 Or you won’t go till the end.
  • 5. Be able to build things online
  • 6. test a business idea Be able to build things online...
  • 7. test a business idea Be able to build things online... start a blog
  • 8. test a business idea Be able to build things online... create websites start a blog
  • 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.
  • 25. Every web application has a... FRONT-END BACK-END
  • 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.
  • 27. FRONT-END BACK-END HTML CSS JAVASCRIPT PYTHON RUBY PHP SQL These 2 are REQUIRED These are 4 of multiple choices
  • 28. WHEN DEVELOPING WEB APPLICATIONS YOU MUST KNOW HTML AND CSS. WITHOUT THEM YOU WILL NOT HAVE A SITE.
  • 29. BUT it takes to long to learn it! FOR-EV-ERRRRR
  • 30. I don’t know where to START It looks TOO HARD to learn I TRIED BEFORE and learned nothing so I stopped I’ll NEVER be able to learn it
  • 32. Step 2 trying to learn every little bit before you start to build something.
  • 33. THIS IS THE OLD SCHOOL WAY OF LEARNING
  • 34. THIS IS THE WRONG WAY TO LEARN loooooooonnnnnngggggg
  • 35. You’ll end up... learning 80% of stuff you’ll barely use you’ll get burnt out it’ll take you a month before you even get your first site up
  • 36. The traditional education way doesn’ t work (...or you would already know HTML and CSS and you wouldn’t be reading this)
  • 37. A new way... A hybrid skill acquisition model. It’s like learning but add ninja mind tricks + learning = skill acquisition
  • 38. Want to learn more? These are your bibles...
  • 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.
  • 44. Sublime Text Editor This is where you write your code and tell the computer what your site will look like.
  • 45. Google Chrome Web browser This is where you see what your code has created. This is your feedback loop.
  • 46. identify the building blocks The Pareto Principle: for many events, 80% of the effects come from 20% of the causes
  • 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
  • 88. NOT if you break it down
  • 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.)
  • 91. Once again it looks confusing…
  • 92. Once again it looks confusing… but NOT if you break it down and identify the patterns.
  • 93. Step 6 Let’s build our first website together
  • 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
  • 99. Congratulations! You have made your first, albeit simple, web page
  • 100. Head over to MASSIVE Academy and keep learning
  • 101. Thanks For Reading Ryan Bonhardt @RyanBonhardt www.massiveacademy.us