SimpleStepsCode.com
presents:
The
roadmap
to
do
real
things
with
JavaScript
as
soon
as
possible
Table
of
Contents
What’s this guide all about? .............................................................. 3
How to stop feeling lost and overwhelmed by all the frameworks
that are out there................................................................................ 3
Simple tricks so you won't forget everything you learned ................ 4
How to avoid the mistakes that keep people stuck ........................... 5
Which JavaScript concepts will let you do practical things the
fastest?............................................................................................... 6
How to shortcut the job hunt, and what you need to know............... 8
How your JavaScript will fit into your overall path in front-end web
development ...................................................................................... 9
-‐
2
-‐
SimpleStepsCode.com
What’s
this
guide
all
about?
This
guide
will
give
you
advice
on
how
to
start
doing
things
quickly
with
JavaScript.
First,
we’ll
talk
about
the
mindsets
and
the
approaches
that
will
help
you
stay
on
track
and
avoid
wasting
time.
Next,
we’ll
look
at
a
short
list
of
concepts
that
will
let
you
do
a
large
number
of
practical
things
with
JavaScript.
Finally,
we’ll
look
at
job-‐
related
tips
and
how
JavaScript
fits
into
your
path
as
a
front-‐end
web
developer.
How
to
stop
feeling
lost
and
overwhelmed
by
all
the
frameworks
that
are
out
there
§ First,
block
out
all
the
noise.
People
will
make
it
sound
like
you
need
to
know
everything,
but
that's
not
true.
It
just
seems
that
way
because
everyone
chimes
in
with
their
own
suggestions,
and
that
adds
up.
The
best
way
to
avoid
this
is
to
have
a
clear
map
of
what
to
do.
Here's
a
map
of
what
to
do
to
become
a
front-‐end
web
developer:
https://simplestepscode.com/pdf/simple_steps_roadmap.pdf
-‐
3
-‐
SimpleStepsCode.com
§ Don't
constantly
chase
the
new
framework
of
the
day.
Instead,
practice
plain
JavaScript,
and
you'll
automatically
get
better
at
a
lot
of
the
frameworks
because
so
many
of
them
are
just
prebuilt
pieces
of
JavaScript.
When
the
time
comes
to
start
aiming
for
jobs,
you'll
quickly
pick
up
whichever
framework
is
required
for
the
jobs
you
want
most.
Simple
tricks
so
you
won't
forget
everything
you
learned
§ Learn
in
small
pieces.
Not
only
will
you
remember
things
better,
you'll
also
have
an
easier
experience
finding
time
to
code.
It
can
be
tempting
to
learn
a
lot
at
once,
but
try
to
resist
that.
Trust
me;
you'd
rather
learn
one
thing
at
a
time
and
remember
it
than
learn
ten
things
at
a
time
and
forget
all
of
them.
§ When
you
understand
a
concept,
DON'T
move
forward
just
yet.
Keep
playing
with
the
concept
until
you're
very
comfortable
with
it.
It
will
seem
to
take
a
little
bit
longer
at
-‐
4
-‐
SimpleStepsCode.com
first,
but
you'll
fly
through
the
later
material
because
you
won't
have
to
keep
struggling
and
backtracking
with
earlier
material.
This
technique
is
great
for
keeping
momentum
and
staying
encouraged.
§ When
you're
learning
JavaScript,
let
yourself
have
fun
with
it.
If
you've
learned
a
new
concept,
create
something
interesting,
even
if
it's
something
small!
Experiment,
show
your
friends,
show
the
internet,
or
keep
it
all
to
yourself.
As
long
as
you
make
sure
to
enjoy
yourself,
you'll
have
a
much
easier
time
learning
JavaScript.
How
to
avoid
the
mistakes
that
keep
people
stuck
§ One
mistake
people
make
is
to
follow
a
tutorial
and
then
never
actually
try
building
something
on
their
own.
Tutorials
are
great,
but
it's
important
to
remember
that
they
are
only
a
starting
point.
Too
many
people
follow
a
tutorial,
think
they
know
how
to
do
it,
and
then
get
stuck
when
they
have
to
apply
it
for
real.
The
way
around
this
is
to
try
a
concept
completely
-‐
5
-‐
SimpleStepsCode.com
on
your
own
after
you've
finished
a
tutorial.
That
way,
you'll
learn
the
process
of
thinking
through
a
problem
yourself
instead
of
depending
on
a
guide.
§ Another
mistake
people
make
is
to
jump
into
huge
projects
too
soon.
They'll
say
things
like
"I'll
just
make
a
quick
slideshow,"
without
realizing
that
the
slideshow
actually
involves
functions,
variables,
timing,
animation,
arrays,
DOM
traversal,
and
more.
In
this
case,
the
impatience
of
wanting
to
do
all
of
this
at
once
ends
up
taking
longer
than
it
would
take
to
just
learn
each
concept
properly
first.
The
solution
is
to
learn
things
one
small
step
at
a
time.
Which
JavaScript
concepts
will
let
you
do
practical
things
the
fastest?
Here's
a
list
of
concepts
to
look
up
and
try
out
in
order
to
do
practical
things
with
JavaScript
quickly:
§ variables
-‐
Variables
let
you
store
information
so
you
don't
have
to
keep
typing
it
-‐
6
-‐
SimpleStepsCode.com
§ getElementById
-‐
This
lets
you
access
things
by
their
ids
on
your
page.
§ innerHTML
-‐
This
lets
you
edit
the
HTML
inside
an
element
on
your
page.
§ functions
-‐
A
function
is
a
piece
of
code
that
you
can
run
whenever
you
want
just
by
calling
its
name.
§ if
and
else
–
If
and
else
statements
let
you
put
logic
into
your
code.
(Example:
If
X
is
true,
do
Y.)
§ onclick
-‐
This
lets
you
detect
clicks
so
your
pages
can
respond
however
you
want.
§ style
and
className
-‐
These
let
you
dynamically
change
the
appearance,
position,
and
visibility
of
the
things
on
your
pages.
§ arrays
and
objects
-‐
These
let
you
store
lists
and
groups
of
information
in
a
convenient
way.
§ querySelector
and
querySelectorAll
-‐
These
are
flexible
ways
to
manipulate
the
things
on
your
page.
-‐
7
-‐
SimpleStepsCode.com
How
to
shortcut
the
job
hunt,
and
what
you
need
to
know
§ Just
submitting
resumes
is
the
hardest
way
to
get
a
job.
That's
what
everyone
else
is
doing,
and
that's
why
they're
having
a
hard
time.
§ Job
requirements
are
notoriously
inaccurate.
I've
seen
posts
for
front-‐end
developers
that
required
exclusively
back-‐end
skills.
I've
seen
posts
with
requirements
that
turned
out
to
be
nothing
like
the
actual
job.
§ The
best
thing
to
do
is
find
developers
to
talk
to.
Even
if
their
organizations
aren't
hiring,
you
can
ask
questions
that
will
help
you
appeal
to
other
organizations.
They
might
even
be
able
to
point
you
to
places
that
are
hiring.
The
key
is
to
keep
your
questions
focused
on
what
they
do
rather
than
asking
for
a
job.
That
way,
they'll
open
up
to
you,
and
it
won't
be
weird.
§ To
find
developers
to
talk
to,
one
way
to
start
is
with
a
Google
search
for
"web
development
meetups
in
[your
area]".
If
there
isn't
anything
near
your
area,
then
try
talking
to
developers
-‐
8
-‐
SimpleStepsCode.com
online
whether
it's
through
LinkedIn,
meetup.com,
various
forums
or
groups,
etc.
§ When
you
talk
to
developers,
you'll
want
to
ask
the
right
questions
to
really
figure
out
what
they
do,
what
would
make
a
good
teammate,
and
what
surprises
to
expect.
This
is
one
of
the
most
important
steps,
so
a
full
guide
can
be
found
here:
https://simplestepscode.com/how-‐to-‐get-‐a-‐web-‐
development-‐job-‐in-‐four-‐steps/
§ In
the
meantime,
start
creating
a
portfolio.
If
you
have
good
things
you've
built
that
you
can
point
to,
then
you
don't
need
to
worry
as
much
about
fancy
measures
of
experience.
When
you
have
concrete
things
you've
made,
no
one
can
argue
with
that.
It's
also
a
great
way
to
practice.
How
your
JavaScript
will
fit
into
your
overall
path
in
front-‐end
web
development
§ HTML,
CSS,
and
JavaScript
are
the
main
things
you
need
to
know
for
web
development.
Don't
worry
about
frameworks
until
you've
identified
which
ones
you
see
at
the
places
you
want
to
work
at.
The
great
part
about
JavaScript
is
that
getting
-‐
9
-‐
SimpleStepsCode.com
better
at
it
automatically
makes
you
better
at
a
lot
of
the
frameworks
because
many
of
them
are
built
on
JavaScript.
§ For
the
rest
of
the
front-‐end
web
development
roadmap
to
put
your
JavaScript
learning
into
context,
see
the
following
url:
https://simplestepscode.com/pdf/simple_steps_roadmap.pdf
-‐
10
-‐
SimpleStepsCode.com
