⚡️ How to Become a Web Developer

In the last decade, we have seen exponential growth 🚀 from the world wide web 🕸️. This year (2023), there's still no signs of it slowing down. Let's discuss a strategy to help you get started with Web Development efficiently.

Why would you want to become a Web Developer though?

Let's take a look at some of the advantages of choosing to become a Web Developer in 2023.

1. Chance to work from wherever you like :) - Cafe, beach, or while traveling in a van - taste the freedom of working while doing your adventures.
2. Great compensation - Averaging at $82,548 / yr (via Glassdoor - December 2022)
3. Chance for Work-life Balance - Save yourself from hours of commuting and spend your time efficiently.
4. Doesn't require a high school or college diploma.
5. No need to spend thousands of dollars to learn.
6. You can learn in your own phase, in your own free time.
7. No age limit. Web Developers could be as young as 5 years old, up to 90+ years old :)

What does it take to become a Web Developer?

Just like any other skill, it takes time, effort and dedication to become a decent web developer. Let's go through a summary of essential skills that are proven to take you far 🚅

Soft Skills

1. Effective Communication - You will be relaying technical information not only through code but verbally and through written instructions. So it would be ideal that you can communicate these effectively.
2. Humility - You will be learning a lot, so you need to be teachable and acknowledge that there are things you do not know just yet. This is totally OK and is still true even for Senior Developers who have been in the industry for decades.
3. Empathy - This will help you communicate with non-technical people and reduce stress when working on a team.
4. Friendliness - Like who doesn't want to work with a friendly person? Whether a client or a team member, you will be a big asset if you always put a smile on your face 😉
5. Problem Solving - Problems/issues are a part of software development. If you focus your energy towards a solution, it will greatly reduce stress and establish you as a source of relief in the long run.

Technical Skills

There are multiple types of web development. Let's check the 3 major ones and see what technologies/skills are required to know for each. It is best to choose 1 as a start.

1. Frontend Development - This area is focused on the skills necessary to display the nice-looking website that everyone is looking for. You need to know these 4 most basic components by heart.

   • HTML (HyperText Markup Language) 🦴
     • In a human body, you can liken this to the bones. HTML is used to make the structure or foundation of your website.
   • CSS (Cascading Style Sheets) 👑
     • In a human body, you can liken this to clothing and accessories . CSS is used to design and make the website beautiful.
   • JavaScript 💪
     • In a human body, you can liken JavaScript to the brain or muscles. It is mainly used to make your website do some action like responding to a click/tap, showing a pop-up or communicating with a server. Javascript makes your website alive.
   • Client
     • In web development, clients are your favorite browsers like chrome, firefox, edge or safari.
     • As a front-end developer, you should learn what a browser is doing to show you a website.
     • Let's try to break it down with a sample scenario:
       • Scenario: You went to your favorite browser and typed "google.com", you hit enter and after a few seconds, the website shows up. What did the browser do exactly?
         1. The browser fetched the HTML from the server
         2. Based on the HTML, browser may fetch additional data from the server additional JavaScript, CSS and user data.
         3. The Browser compiles the HTML, CSS and JavaScript and renders the website as what you can see.

2. Backend Development - Often called "server side development" or "back office", this type is focused on what happens in the background like database management, server side scripting and processing data so it becomes available for the browser. Here are the major components that may compose a backend system:

   • Web Server 🖥️
     • A server is the one providing or supplying information to browsers regarding a website.
   • Database
     • Data storage facility. This is where we store information regarding users and company information.
   • Server-side Programming Language
     • This is used to create applications that manipulate or serve information used by the website.
     • The popular languages as of the time of writing are PHP, JavaScript, Java, Python, ASP.NET, Ruby, GoLang and more.
     • What I will recommend you to learn as a start though, is JavaScript/Node.js since this language is also used with frontend development which will make you more adept and flexible.

3. Full Stack Development

   • Sometimes coined as the "jack of all trades" in web development - this is simply a developer with the skills of both frontend and backend development.

What type of web development should I pursue?

1. Frontend Development

   • If you have an eye for a pixel-perfect design, this is for you. But it doesn't mean that you have to be a designer as well. In most cases, designs or mock-ups are provided by a designer and the task of a frontend developer is to convert the design into a working website.
   • If you care about user experience(UX) or more of a developer that wants more visuals, then this is for you.

2. Backend Development

   • If you are interested with data processing and OK with less visuals, then this is for you.
   • This type is usually divided into more types. Some of the sub-types can be DevOps, Database Engineer, API Developer, Security Engineer, Network Engineer, Infrastructure Developer, AI, machine learning and more. If these concepts ring the bell, then backend development is for you.

3. Full Stack development

   • If you:
     • are willing to invest more time
     • are ready to absorb more information than usual
     • prefer to work alone
     • are more adventurous
   • then this is for you.

What's a good strategy to get started with Web Development?

It would be nice to hit multiple goals with the same amount of effort. What other goals can you hit while learning?

Understand the Basics

• One might be tempted to try and learn frameworks that seem to speed up development efforts. But frameworks come and go and basics remain the same so it would be best to have a good grasp of the basics like HTML, CSS and JavaScript first, before jumping into the latest frameworks.
• To get a visual of where you're at with your web development journey, there's a great tool built specifically for this case
  • Frontend Roadmap
  • Backend Roadmap
  • I suggest you start with frontend first, before going into backend since learning is more fun with visuals as results.
• There's a Great Curriculum created by the Open-Source community in FreeCodeCamp. Feel free to Register there and get your hands dirty with the basics.

Create a Website Portfolio

• While learning new skills, you can invest your time in trying to produce an output that will be valuable once you start the hiring process like a website portfolio that will surely help you land your first web development job.
• If you already have a good grasp of the basics, you can start to use templates and frameworks. Here are a few suggestions:
  • Gatsby Starter Portfolio
  • Dev Portfolio by RyanFitzgerald
  • DeveloperFolio
  • Dopefolio
  • MasterPortfolio

Practice, Practice, Practice

• When learning a new concept or technique, it will be best to apply it immediately so that you can help your brain speed up the learning process and have some reference that you can check at a later time.
• Create mini projects and include these into your website portfolio. Here are some of the mini projects that companies ask you to create within the interview process
  1. Todo List App
  2. Frontend Product Exercise
  3. Backend-focused Product Exercise
  4. Tech Interview Projects

What are the Best Tools for Web Development?

Here are the most popular tools for local development of a website:

Backend

1. API Tester - Insomnia

Frontend

1. Chrome Dev Tools

   • This will help you a lot when working with your website.
   • To use this, press F12 or Ctrl + Shift + I on Windows, and Fn + F12 or Cmd + Option + I on Mac.
   • Some of the most commonly used "tabs" on this dev tools are:
     1. Console
        • This is used to check if your website has errors.
        • It is also used to print messages essential for debugging.
     2. Elements
        • Very useful to check how your "code" has been translated by the browser.
        • Also used to understand the hierarchy of HTML Elements.
     3. Network
        • This is used to check "ALL" the network activity of your website and all it's details like headers, status, protocol and how much time was spent to talk to the server.
        • You can also use this to throttle the speed of your internet and see how your website reacts if there's limited or no internet connectivity.
     4. Application
        • This is used to debug what's going on with the local storage, session storage, cookies, cache and more.

Backend & Frontend

1. Source Code Management - GIT
2. Browser - Chrome
3. Modern Terminal - Tabby
4. Code Editor - VSCode