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