The Web Developer Playbook

THE WEB DEVELOPER PLAYBOOK
The Definitive Guide To Level Up From Newbie to Advanced Web Developer

Even If You Have No Degree, Experience, Or Programming Background
HAHNA KANE LATONICK | INVENT WITH CODE

Table of Contents
INTRODUCTION ............................................................................................................................................. 2
Level 1: HTML ................................................................................................................................................ 4
Level 2: CSS ................................................................................................................................................... 5
Level 3: BOOTSTRAP ..................................................................................................................................... 6
Level 4: PHP................................................................................................................................................... 7
CHECKPOINT ................................................................................................................................................. 8
Level 5: SQL ................................................................................................................................................... 9
Level 6: RUBY .............................................................................................................................................. 10
Level 7: RUBY ON RAILS .............................................................................................................................. 11
CHECKPOINT ............................................................................................................................................... 12
Level 8: JAVASCRIPT .................................................................................................................................... 13
Level 9: JQUERY........................................................................................................................................... 14
Level 10: REACT ........................................................................................................................................... 15
CHECKPOINT ............................................................................................................................................... 16
Level 11: NODE.JS ....................................................................................................................................... 17
Level 12: EXPRESS.JS ................................................................................................................................... 18
CHECKPOINT ............................................................................................................................................... 19
MOVING FORWARD .................................................................................................................................... 20
APPENDIX A: ROADMAP ............................................................................................................................. 21
APPENDIX B: STUDY PLAN ........................................................................................................................... 22
This document contains affiliate links. Please read my disclosure for more information.
INVENT WITH CODE

https://www.inventwithcode.com
All Rights Reserved. Copyright 2017.
INTRODUCTION
When was the last time you felt in control of your career? Perhaps you have been laid off and wish you
had better job security. Perhaps you can’t seem to get a better paying job because you don’t have a
college degree or in-demand skills.
When was the last time you were in control of your schedule? Maybe you’re tired of having to work 9 to
5 or attend pointless meetings throughout the day. Or, you wish you could be your own boss, so that
you no longer have to report to someone else or submit a vacation request for approval.
Have you ever imagined working somewhere else in the world rather than being tied to a cubicle?
What if there was a career out there that…
• didn’t require a college degree,

• doesn’t require a technical background,
• could offer you better job security,
• has high earning potential,
• would allow you to set your own hours,
• could allow you to be your own boss,
• and would enable you to work from anywhere (with an internet connection).
You may think this sounds too good to be true. What career could possibly offer all of these things?
Two words.
Web Development.
According to the Bureau of Labor Statistics, “The employment of web developers is projected to grow 27
percent from 2014 to 2024, much faster than the average for all occupations.” Web developers can start
out earning a salary of $66K to $100K. How would your life be different if you had better pay, better job
prospects, and a better work-life balance?
The only thing that you need to get started as a web developer is a computer, an Internet connection,
and this Web Developer Playbook.
This book is written for people who want to become a web developer and level up their coding, so that
they can earn more and live the life they desire. The Web Developer Playbook is a 12-step process that
will help you begin and advance your career in web development, even if you don’t have a college
degree, experience, or a programming background. This plan will show you exactly what you need to
learn and how to gain these critical skills in twelve months or less.
Learning how to code has changed my life. I remember my first internship that involved coding
automated scripts. At that time, I made $14.75 an hour. After graduating college with a B.S./M.S. in
Computer Engineering, I developed software solutions full-time and earned a salary of $75K. Over my
11-year career, I’ve more than doubled my salary by continuously learning in-demand skills from high-
level web languages to low-level programming languages.
INVENT WITH CODE

Throughout my career, I have mentored, recruited, interviewed, and hired dozens of developers. Many
people have asked me how do they get started learning to code, what languages should they learn, and
how to take their coding skills to the next level. This book lays out the exact roadmap for you to follow,
so that you know what to focus on now, what to learn next, and where to go from here once you’ve
completed the Playbook.
Each of the 12 steps in this book has been written with a purpose. You can read the book from end to
end to get an overview of the web development journey you’re about to set on; however, ensure that
you take the necessary actions within each chapter before completing the next coding level. This will
allow you to properly build upon your skills while strategically preparing yourself for opportunities
without any missing pieces.
My mentoring approach has helped many people land their dream jobs, including college dropouts who
are now earning six figures as developers. Some are now freelance developers on the side to earn extra
money while others are lead developers at startups. This Playbook will enable you to achieve your own
career and lifestyle aspirations through implementing the action points in this simple step-by-step guide.
You now have a choice. You can either doubt yourself and continue settling for less than you what you
deserve. Or, you can take massive action and code your way to the life you always wanted for yourself
and your family. You can skim through this book as if it’s just another blueprint or you can use it as a
workbook where you fully commit yourself to taking action. The choice is yours.
You already know that the time is now to launch a career in web development. Start saying YES to
yourself by reading on and completing the first level of the Playbook.
INVENT WITH CODE

Level 1: HTML
HTML stands for Hyper Text Markup Language, which is the most widely used language for creating and
structuring web pages (HTML documents). It was created in 1991 and has evolved over the years to
HTML5, which is the latest HTML version since 2012.
Why Should You Learn HTML?
HTML provides the fundamental building blocks for developing web sites.
What does it even mean for it to be a Hyper Text Markup Language?
Hypertext refers to the way in which web pages are linked together. Thus, the link shown on a webpage
is called Hypertext. The intention was to link web pages together to share information between people.
It’s also a markup language meaning you use HTML to simply "mark up" a text document with tags that
define the structure of the web content like headings, paragraphs, lists, etc. Web browsers then read
the HTML file and uses the tags to determine how to display the web page.
What’s so fancy about HTML5?
The new standard incorporates features like animation, video playback and drag-and-drop features.
Previous HTML versions relied on third-party browser plug-ins, such as Adobe Flash, for the same
capability. HTML5 is designed to be backward compatible with existing web browsers, so that older
browsers can still render the web page.
Get Inspired!
Check out 48 Excellent HTML5 demos!
Ready to learn HTML?
Get started today for free and complete Level 1!
Already know HTML?
Awesome! Let’s move onto Level 2, which is learning CSS!!
INVENT WITH CODE

Level 2: CSS
Cascading Style Sheets (CSS) is a simple design language that simplifies the process of formatting web
pages. It debuted in 1996 and its latest version, CSS3, was released in 1999.
CSS allows you to control the look and feel of a web site, such as font color, font style, layout,
background appearance, and even how the site looks on different devices and screen sizes.
In the past, developers had to modify the appearance of each web page individually. With CSS,
developers can update the formatting across multiple web pages at the same time.
Why Should You Learn CSS?
• CSS allows you to control the presentation of websites using superior styles and attributes.
• Develop your code more efficiently, saving you time, because you can create one CSS file and
reuse it to format your HTML pages all at once.
• Furthermore, you’re able to maintain your code more easily since any updates to the CSS file
will be reflected across your site.
• Since your websites now require less code, they are able load much faster.
Get Inspired!
Check out 218 CSS demos!
Ready to learn CSS?
Already know CSS?
Awesome! Let’s move onto Level 3, which is learning Bootstrap!!
INVENT WITH CODE

Level 3: BOOTSTRAP
Created by developers at Twitter, Bootstrap is the most popular front-end framework that allows for
rapid and responsive web development. It is an open-source framework that uses HTML, CSS and
JavaScript.
Why Should You Learn Bootstrap?
Rather than code a web page from complete scratch, Bootstrap lets you use ready-made coding blocks
to quickly develop a site. Also, Bootstrap's responsive CSS allows your site to easily adjust to desktops,
tablets, and mobile devices, so that your site is more readable and accessible.
Get Inspired!
Check out 30 Must See Websites With Bootstrap!
Ready to learn Bootstrap?
Already know Bootstrap?
Awesome! Let’s move onto Level 4, which is learning PHP!!
INVENT WITH CODE

Level 4: PHP
“PHP: Hypertext Preprocessor” (PHP) is a powerful server scripting language, developed in 1994, for
making dynamic and interactive Web pages. It is used to manage dynamic content, databases, session
tracking, even build entire e-commerce sites.
Why Should You Learn PHP?
PHP adds functionality and interactivity to your website. For example, PHP can perform file handling,
form handling, database management, web cookie management, and page permissions. Also, learning
PHP will gently introduce you to back-end development.
Get Inspired!
Check out 22 PHP demos!
Ready to learn PHP?
Already know PHP?
Awesome! Let’s move onto Level 5, which is learning SQL!!
INVENT WITH CODE

CHECKPOINT
At this point you have learned:
• HTML to structure your web content,

• CSS to stylize your web page,
• Bootstrap for rapid and responsive web development, and
• PHP to add back-end support for making dynamic and interactive web sites
By learning HTML, CSS, and Bootstrap, you have been introduced to front-end development, which
refers to the part of the web that users see and interact with.
You have also been introduced to back-end development through PHP where the back-end works to
support the frontend. An example of a back-end operation is the web application communicating with a
server to update a database stored on a server. PHP ensures these communications work seamlessly.
What can you now do with these new coding skills?
o Build a personal website

o Customize a Tumblr blog
o Setup a WordPress website
o Create WordPress themes and plugins
o Create custom email templates
o Become a webmaster/web admin for local small businesses or nonprofits
o Become a junior web developer
These activities will not only give you the opportunity to practice your skills and gain experience, but you
can also begin making money using your new superpowers.
INVENT WITH CODE

Level 5: SQL
With PHP, you can connect to and manipulate databases. MySQL is the most popular database system
used with PHP. It is one of the many flavors of SQL (Structured Query Language), which is a computer
language for storing, manipulating and retrieving data stored in a database.
MySQL runs on a server and can be used for applications of any size. It is also very fast, reliable, and easy
to use. It is the de-facto standard database system for web sites with large volumes of data and end-
users like Facebook, Twitter, and Wikipedia.
What is a database anyway?
A database is a collection of information that is organized so that it can be easily accessed, managed and
updated, usually in the form of a table with columns and rows.
Why Should You Learn SQL?
SQL is widely popular because it allows users to store, modify, and access data easily while also
describing how information is related to each other. Many businesses use large databases, so knowing
SQL will give you a competitive advantage.
Get Inspired!
SQL dominates the top 5 most popular databases used in industry.
Ready to learn MySQL?
Already know MySQL?
Awesome! Let’s move onto Level 6, which is learning Ruby!!
INVENT WITH CODE

Level 6: RUBY
Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has
an elegant syntax that is natural to read and easy to write. Ruby can be leveraged to make dynamic
websites. Companies like Twitter, Soundcloud, Goodreads, and Kickstarter got their products off the
ground with Ruby.
Why Should You Learn Ruby?
Learning Ruby will allow you to learn the fundamentals of programming as well as object-oriented
programming. By mastering key programming concepts, it’ll become easier for you to learn any other
computer language. As you level up as a web developer, learning additional languages are inevitable, so
it’s best to have a strong programming foundation in place. Moreover, you will be better positioned to
learn popular web development frameworks that are specifically implemented in Ruby.
Get Inspired!
Here are 14 different ways to have fun with Ruby.
Ready to learn Ruby?
Already know Ruby?
Awesome! Let’s move onto Level 7, which is learning Ruby on Rails!!
INVENT WITH CODE

Level 7: RUBY ON RAILS
Ruby on Rails (RoR) is an open-source web application framework written in Ruby that is extremely
useful for developing database-backed web applications. Compared to other frameworks, Rails enables
you to develop web applications that are at least ten times faster with fewer lines of code. Companies
like Airbnb, Fab.com, Hulu, and Codecademy, have built their products using the Rails framework.
Why Should You Learn Ruby on Rails?
Ruby on Rails has a high relevance and demand in today's marketplace given how powerful its
framework is. Creating a web application with Rails will allow you to exercise all the coding skills you’ve
gained since Level 1 HTML.
Also, RoR is a full-stack framework which handles everything you need to build a complete web
application. Therefore, learning Rails will give you your first introduction to full-stack development
where you are developing both the front-end and back-end of an application.
Get Inspired!
Here are 6 coolest Ruby on Rails Projects.
Ready to learn Ruby on Rails?
Already know RoR?
Awesome! Let’s move onto Level 8, which is learning JavaScript!!
INVENT WITH CODE

CHECKPOINT
• the building blocks of web development by completing Levels 1- 4

• SQL to provide backend support by storing, modifying, and retrieving information in databases
• Ruby to master key programming concepts and object-oriented programming, and
• Ruby on Rails to rapidly develop web applications
By learning Ruby and Ruby on Rails, you have also been introduced to full-stack development where you
are developing both the front-end and back-end of your site.
o Become a Ruby Developer at a startup

o Become a Back-End Developer at a company
o Become a Quality Assurance Engineer debugging and testing web applications
o Create web apps for small business and non-profits
These activities will not only give you the opportunity to practice your skills and gain experience, but
your new superpowers enable you to earn a higher salary or charge a higher rate for your projects.
INVENT WITH CODE

Level 8: JAVASCRIPT
JavaScript makes websites dynamic, allowing for client-side interactions. It can also change HTML
content, attributes, styles, and elements. The advantage of JavaScript is that it has less server
interaction where you can validate user input and provide immediate feedback to visitors. This results in
less load on your server and less server traffic.
Why Should You Learn JavaScript?
JavaScript has become an essential web technology along with HTML and CSS, as most browsers
implement JavaScript. It has also evolved into a full-stack language, so now JavaScript can be used to
develop both the front-end and back-end of a web application.
Not only that, JavaScript has been extended to support mobile app development, virtual reality
development, and game development. As a result, the demand for JavaScript developers has
skyrocketed.
Get Inspired!
Here are 10 amazing JavaScript Projects.
Ready to learn JavaScript?
Already know JavaScript?
Awesome! Let’s move onto Level 9, which is learning jQuery!!
INVENT WITH CODE

Level 9: JQUERY
Created in 2006, jQuery is a fast and concise JavaScript library that makes it much easier to use
JavaScript on your website. It simplifies a lot of common tasks that require many lines of JavaScript code
to accomplish by wrapping them into methods that you can call with a single line of code.
Why Should You Learn jQuery?
jQuery allows for rapid front-end development and is widely used throughout the industry.
Get Inspired!
Here are 20+ impressive jQuery projects.
Ready to learn jQuery?
Already know jQuery?
Awesome! Let’s move onto Level 10, which is learning React!!
INVENT WITH CODE

Level 10: REACT
React is a front-end JavaScript library developed by Facebook. It is used for building user interfaces and
handling the view layer for web and mobile apps. With ReactJS, we can create reusable user interface
components that present data that changes over time. It also improves the performance and readability
of applications.
Why Should You Learn React?
React is one of the most popular JavaScript libraries used by developers. It can also be used for back-end
development in combination with Node, a framework that runs JavaScript on servers. Furthermore,
React can power native apps using React Native. By being familiar with React, it opens your career
opportunities for front-end, back-end, full-stack, and mobile development.
Get Inspired!
Here are 950+ rocking examples of React in action!
Ready to learn React?
Already know React?
Awesome! Let’s move onto Level 11, which is learning NodeJS!!
INVENT WITH CODE

CHECKPOINT
• the building blocks of web development by completing Levels 1- 4,

• the fundamentals of back-end and full-stack development through Levels 5-7,
• JavaScript to develop interactive web sites with faster performance,
• jQuery for rapid front-end development in JavaScript
• React to leverage a powerful user interface and component system to improve app performance
By learning JavaScript in addition to Ruby on Rails, you will be highly in-demand and almost unstoppable
as a web developer. As a bonus of learning React, you can begin building native-like mobile applications
using React Native. Therefore, you can perform full-stack development and mobile development by
using only JavaScript!
o Become a Front-End JavaScript Developer

o Become a Mobile Developer
o Become a Full-Stack Developer
As a challenge, create a project with a jQuery front-end, but a Rails back-end.
Then upgrade the project to have a React front-end and a Rails back-end.
Your new superpowers make you a highly competitive developer where businesses may do whatever it
takes to hire you. That is a great position to be in!
INVENT WITH CODE

Level 11: NODE.JS
Node.js is a free, open-source JavaScript framework that runs JavaScript on servers. Node.js is a very
efficient back-end language as it uses asynchronous programming, allowing code is run in parallel. This
improves performances and eliminates waiting when server requests are made.
Why Should You Learn NodeJS?
Since NodeJS can share JavaScript between the front-end and back-end, NodeJS reduces the complexity
of your codebase and enables the development of an entire application without languages like PHP.
If you’re already working in JavaScript, learning Node.js could be an important step in becoming a full-
stack developer.
Get Inspired!
Here are 35 surprising Node.js projects!
Ready to learn NodeJS?
Already know NodeJS?
Awesome! Let’s move onto Level 12, which is learning ExpressJS!!
INVENT WITH CODE

Level 12: EXPRESS.JS
Express is a minimal and flexible Node.js web application framework that provides a robust set of
features for developing web and mobile applications. It is an open-source server framework developed
by TJ Holowaychuk and is maintained by the Node.js foundation and numerous open source
contributors.
Why Should You Learn ExpressJS?
Express allows you to reuse and maintain your code more easily, one of the many reasons why it is the
most common NodeJS web application framework. As a result, Express provides for rapid back-end
development and makes it easier to write secure, modular and fast applications.
Get Inspired!
Check out this awesome ExpressJS project!
Ready to learn ExpressJS?
Already know ExpressJS?
Awesome! Read on to learn what to do next!!
INVENT WITH CODE

CHECKPOINT
• the building blocks of web development by completing Levels 1- 4,

• the fundamentals of back-end and full-stack development through Levels 5-7,
• the power of JavaScript and key JS libraries to develop high-quality interactive web apps
• Node.js for back-end development in JavaScript
• Express.js for rapid and efficient back-end development
By learning Node.js and Express.js, you are now a JavaScript full-stack developer!
As a challenge create a JavaScript project with a jQuery or React front-end and a Node.js back-end.
o Become a Back-End JavaScript Developer

o Become a Full-Stack JavaScript Developer
Now that you can develop full-stack applications in both Ruby and JavaScript, you can begin to specialize
in one language or the other.
Also, you may decide to concentrate specifically on front-end development, back-end development, or
full-stack development. Either way, you will have many opportunities at your fingertips regardless of
your decision!
INVENT WITH CODE

MOVING FORWARD
CONGRATULATIONS!
If you completed every level, you now know front-end development, back-end development, and even
full-stack development. You have a plethora of in-demand skills that can unlock amazing career and
lifestyle opportunities for you. You even leverage your web development expertise to branch out into
fields like mobile development, game development and more!
So where do we go from here?
First ask yourself, “What do I want to do with my awesome web development superpowers?”
Do you want to be a professional developer working for a small business, startup, or traditional
enterprise?
Do you want to work for yourself as a professional freelance developer?
Are you an aspiring entrepreneur that wants to launch their own web development business?
You have the power to choose the next chapter of your web development journey.
Three Forks
If you want to become a professional developer that is employed by a company, I've put together a
road-map that walks you through step-by-step how to land your dream job as a web developer.
Or….
If you want to be your own boss and set your own schedule, I've written a guide that walks you through
step-by-step how to become a freelance developer.
Or….
If you want run your own startup and set it up in a way that your company works for you, I've developed
a system that walks you through step-by-step how to start your own web development business.
The choice is yours!
Whatever you choose, the rewards can be huge — from earning an annual six-figure salary, to working
anywhere in the world, or the freedom of earning money while you sleep from an online business.
Don’t worry, you won’t be alone during your new journey. I’ll be right by your side giving you some of
my best advice to help you succeed.
Until then, keep being awesome and I’ll see you on the other side!
INVENT WITH CODE

APPENDIX A: ROADMAP
HTML CSS BOOTSTRAP PHP
RUBY ON
JAVASCRIPT RUBY SQL
RAILS
JQUERY REACT NODE.JS EXPRESS.JS
INVENT WITH CODE

APPENDIX B: STUDY PLAN
12-MONTH 6-MONTH 4-MONTH

JANUARY HTML HTML & CSS HTML/CSS/BOOTSTRAP/PHP/SQL
FEBRUARY CSS BOOTSTRAP RUBY & RUBY ON RAILS
MARCH BOOTSTRAP PHP & SQL JAVASCRIPT/JQUERY/REACT
APRIL PHP RUBY & RUBY ON RAILS NODE.JS & EXPRESS.JS
MAY SQL JAVASCRIPT/JQUERY/REACT
JUNE RUBY NODE.JS & EXPRESS.JS
JULY RUBY ON RAILS
AUGUST JAVASCRIPT
SEPTEMBER JQUERY
OCTOBER REACT
NOVEMBER NODE.JS
DECEMBER EXPRESS.JS
As you follow this study plan, make sure to reference my comprehensive guide that describes what
online courses are available for you to learn web development when you're broke, short on time, on a
budget, or looking to advance your expertise and skill set.
INVENT WITH CODE


The Web Developer Playbook - 02112018 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Web Developer Playbook - 02112018 PDF

Uploaded by

Copyright:

Available Formats

The Definitive Guide To Level Up From Newbie to Advanced Web Developer

HAHNA KANE LATONICK | INVENT WITH CODE

INVENT WITH CODE

What if there was a career out there that…

• didn’t require a college degree,

INVENT WITH CODE

INVENT WITH CODE

Why Should You Learn HTML?

What does it even mean for it to be a Hyper Text Markup Language?

What’s so fancy about HTML5?

Check out 48 Excellent HTML5 demos!

Ready to learn HTML?

Get started today for free and complete Level 1!

Already know HTML?

Awesome! Let’s move onto Level 2, which is learning CSS!!

INVENT WITH CODE

Why Should You Learn CSS?

Check out 218 CSS demos!

Ready to learn CSS?

Get started today for free and complete Level 2!

Already know CSS?

Awesome! Let’s move onto Level 3, which is learning Bootstrap!!

INVENT WITH CODE

Why Should You Learn Bootstrap?

Check out 30 Must See Websites With Bootstrap!

Ready to learn Bootstrap?

Get started today for free and complete Level 3!

Already know Bootstrap?

Awesome! Let’s move onto Level 4, which is learning PHP!!

INVENT WITH CODE

Why Should You Learn PHP?

Check out 22 PHP demos!

Ready to learn PHP?

Get started today for free and complete Level 4!

Already know PHP?

Awesome! Let’s move onto Level 5, which is learning SQL!!

INVENT WITH CODE

At this point you have learned:

• HTML to structure your web content,

What can you now do with these new coding skills?

o Build a personal website

INVENT WITH CODE

What is a database anyway?

Why Should You Learn SQL?

SQL dominates the top 5 most popular databases used in industry.

Ready to learn MySQL?

Get started today for free and complete Level 5!

Already know MySQL?

Awesome! Let’s move onto Level 6, which is learning Ruby!!

INVENT WITH CODE

Why Should You Learn Ruby?

Here are 14 different ways to have fun with Ruby.

Ready to learn Ruby?

Get started today for free and complete Level 6!

Already know Ruby?

Awesome! Let’s move onto Level 7, which is learning Ruby on Rails!!

INVENT WITH CODE

Why Should You Learn Ruby on Rails?

Here are 6 coolest Ruby on Rails Projects.

Ready to learn Ruby on Rails?

Get started today for free and complete Level 7!

Already know RoR?