Become A Full-Stack JavaScript Web Developer In 90 Days

If you had to learn web development today, what would that look like? Here’s what you need to know.

This high-level guide assumes no previous programming knowledge and is perfect for somebody looking to switch into tech or software development.

What’s A Stack? Why Is It Full?

First off, what is a full-stack developer? What’s the difference between a frontend developer, backend developer, and a full-stack one?

The frontend is what the user sees. This is responsible for the slick user interface, the colors, the layout, the padding, and how the buttons work. The backend is the “behind-the-scenes” code, like how payments are processed or how logins are stored.

Full-stack developers have the skills required to work on the frontend & backend, meaning they can build entire web applications by themselves.

Alright, but what’s a stack? A stack is a set of technologies used together to make an application. For example, a frontend stack could be HTML, CSS, and JavaScript. A backend stack could be MongoDB, ExpressJS, NodeJS. Together, they make the “full-stack”.

When somebody asks “what’s your tech stack?” – they’re asking what tools you use for your development.

Why JavaScript?

Ah yes – why would you use JavaScript out of all the languages you could choose…

Browsers run JavaScript.

Chrome, Opera, Firefox & Internet Explorer all run JavaScript. It’s what the browser companies agreed on, so it’s what you’re forced to use if you want to make web applications.

For a while JavaScript was only used in the frontend, that is until Node.JS got released in 2009 and boomed in popularity. If you work at a company that was founded before Node.JS, your backend was probably in Java or Python.

With Node.JS, JavaScript could be used in the backend. This means full-stack developers could work in just one language on both the frontend and the backend – improving productivity.

New coders could learn just one language and work on the full-stack. This is why most beginner web developers learn JavaScript.

The Next 3 Months

I will break up the next 3 months into the following topics:

  • How To Build A Website From Scratch (Web Fundamentals)
  • Make Your Website Interactive (Web Applications)
  • Process Data Behind The Scenes (Backend Development)

I am assuming you have time to code (almost) everyday, at least a little bit.


Month 1 – How To Build A Website From Scratch (Web Fundamentals)

This month we’re learning web fundamentals which include HTML, CSS & JavaScript.

HTML

HTML stands for HyperText Markup Language. It’s composed of tags that represent elements of a web page. For example, there is the bold tag that is represented with a b.

See the Pen HTML Bold by Eddy Chung (@rising_block) on CodePen.

Tags are opened with the less than sign (<), the HTML tag keyword (b in this case) and the greater than sign (>).

Then the content is entered, followed by the closing of the tag. Notice the closing tag has a slash (/).

There are a ton of HTML tags – you can create headers, forms, buttons, images, inputs, paragraphs and more.

CSS

CSS stands for cascading style sheets. These style sheets add colors, padding and more to the building blocks of HTML.

Here’s an example where you change all bold elements to the color blue:

See the Pen HTML Bold Blue by Eddy Chung (@rising_block) on CodePen.

The cascading part of CSS refers to the priority order, in case more than one rule is applied to an element. Higher priority CSS rules will override lower priority ones.

JavaScript

JavaScript allows us to start adding some interactivity to our website. Stuff like hiding and showing elements, fancy animations, validating form inputs, and more.

Here’s an example that uses JavaScript to hide and show the bold text:

See the Pen HTML Bold Blue Hide / Show by Eddy Chung (@rising_block) on CodePen.


GIT & GITHUB

Git is a version control system that allows you to “track changes” of your code.

GitHub is a company that hosts your Git repository (a repository is a collection of code). It’s not the only provider, but it’s the most popular. BitBucket is another alternative.

With Git and GitHub together, you can easily share and get feedback on your code.

An example of a code change on GitHub.

Month 2 – Make Your Website Interactive (Web Applications)

Once you’ve built some basic websites with HTML, CSS and JavaScript, it’s time to build more complex projects by learning some JavaScript libraries.

One of the most popular ones today is React. React allows you to build “component-based” user interfaces.

For example, if you design a nice loading spinner, you could turn it into a component. Then reuse that component throughout your application every time something loads.

After you’ve learned React, learn Redux. Redux is a popular state container for JavaScript applications. State containers store the data necessary to run your app.

This could be a users favorites, profile image, comments or anything else. Redux helps you keep everything in one spot and synced across the different screens of your application.

Next up is React Router. This will allow you set the URL (what you type into your browser) for different screens of your app. For example, on Instagram everything after the slash is goes to that user’s feed. Instagram.com/{username}.

There’s also Instagram.com/stores/highlights/{highlight_id}. And a bunch more.

Finish off this month with AJAX. AJAX allows you to update the information on a webpage without forcing a reload of the whole page. This is pretty much required to make a smooth application, otherwise it just feels like you’re loading different webpages.

Month 3 – Process Data Behind The Scenes (Backend Development)

Now let’s move onto backend development. Backend code is not visible to the user. This includes stuff like deciding the correct advertisement to show to the user, based on a bunch of different criteria. Or sending email confirmations and receipts.

Node.JS is the most popular JavaScript backend framework. It’s fast and easy to use.

With Node.JS you can create APIs (application programming interfaces) that will enable the frontend to create, read, update and delete data. This is also known as “CRUD”.

Learn how to save data with SQL databases such as MySQL or PostgresSQL.

Let your users log into your application with authentication.. PassportJS is a popular option.

Remember to write tests so your app doesn’t break. A popular testing framework is Mocha.

Finally deploy your app and share it with the world. Heroku is a good option for beginners and it’s simple to setup.

The Road Ahead

This was high-level overview of how I would learn web development today. It may seem like a lot, but it’s definitely achievable within 3 months.

I wish you the best of luck on your journey and don’t give up! 🙂

If you want to get a nice print-out and summary of this guide to stay on track, type in your email below.

Leave a Comment