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

CREATORbe 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

CSSJAVASCRIPT

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

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 LEARNloooooooonnnnnngggggg

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 throughPROJECT-BASED LEARNING

Step 3

choose a lovable projectYou 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 Learninglearning without consequence of failure

Fast-Feedback Loopsinstant feedback to know if you did it right

Inspect ElementFeature(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 QualityDon’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 & FrameworksImproves 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-PagersIdentify 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 burstsLimit 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 LanguageTells 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 SheetsDetermines 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