Junior Web Developers Survival Guide

When I began programming in 2007 or so, it was a different time. The landscape was a lot simpler with just a handful of technologies.

ASP, PHP, JavaScript, CSS, and HTML were the defacto standards back then, however, in 2023 - there is a whole truckload of languages and frameworks to choose from.

How does a junior developer survive in this mammoth of an industry?

In this guide, I will cover some basic but essential tips to help you navigate the web industry and grow into a senior developer one day.

Pick something

Do not get stuck in analysis paralysis or the flavor of the month. Pick a tech stack that is mature and stable. Whether it be Django, Laravel, Asp.net, or even Node - doesn't really matter, just pick one.

How do I know what stack to pick?

There are some key areas to look for:

• Jobs. Monitor the job boards for a month or a few weeks and see the trend of which technologies have a decent amount of jobs. indeed.com is a good place to start.
• Maturity. Has this stack been around for at least 5 years?
• Documentation. Look for books and the docs page on the website. Are these comprehensive enough, and cover all that you need?
• Who is behind this project? how reputable are they? is it backed by a trusted corporation? and so on...
• Community. Is there a wealth of information, questions, and discussion around this stack?

You do not need to pick on popularity, find the tooling that best resonates with your style that meets at least 2-3 of the above points.

Read

Once you have settled on a tech stack. Spend some time reading the official documentation - cover to cover. You don't need to understand it all initially, this is a good practice to condition your brain and build a mental map of all the documentation.

A sort of bookmarking, so that when you run into trouble or need more information later on - you will know where to look.

This will also help you learn how to reference the documentation and API's. Whenever you get stuck - this is the first place to check before stackoverflow or any other resource.

Language essentials

Nearly every programming task you do will use one or more of these constructs:

1. Data types - Arrays, Maps, Integers, Strings, Chars, Booleans, etc...
2. Decision making - IF, ELSE, ELSE IF, Switch
3. Loops - For, While, do while, for each
4. Math - round up / down, absolute value, modulus, add, subtract, multiply, etc...
5. OOP - create classes, instantiate them, inheritance, etc...
6. Functions - create them, how to pass arguments, return types, etc...
7. Modules - how to import and use 3rd party libraries.
8. Strings - find strings in other strings, camel case letters, title case, string replace, reverse a string, convert to lowercase, convert to uppercase, etc...
9. Type casting - Extract numbers from strings, convert a float to an int, etc...
10. Dates and times, how to compare dates, how to get a future date, how to get a past date etc...

Build small programs

For example, if you choose Django, then your language would be Python. Before even touching Django - just focus on Python.

Build some small programs for the terminal to practice with, this will help you grasp all the fundamentals I mentioned above.

Don't jump into a full web app - rather focus on incrementally building something and getting good at the fundamentals.

Some ideas:

1) A simple calculator.
2) A simple terminal todo. Prompt for a todo item, append to an array, and print the array.
3) When is my birthday? Prompt the user to enter their birth date and print the birthday in a human-friendly format including the day of the week. Also, print the number of days between today and their birth date.
4) Print *** stars in various shapes in the terminal.

Keep building and practicing these sorts of programs until you are confident in all 10 points mentioned under the "Language essentials" point above.

Learn the legos of the web - HTML, CSS, JavaScript

Create some: .html files and build common elements you see on the web:

1) Learn how to write divs, sections, spans, asides, and all the essential HTML tags.
2) Layout and position elements on a page using Flexbox, CSS grids, etc...
3) Learn margin, padding, borders, widths, heights, font sizes, etc...
4) How to create forms and buttons.

Once you grasp the essentials, especially layouts, margins, padding, and writing markup. You can now start thinking about JavaScript and attempt the following:

1) Similar to "Language essentials", get a good overview of JavaScript (not TypeScript for now). One important concept to read up on - is the event loop, you may not initially fully understand this, but it's good to at least read up on it so that you have that reference in the back of your mind.
2) Add an "onClick" event handler - when a button is clicked, just show an "alert" with some message.
3) When a form is submitted, respond to the "onSubmit" event and capture the filled-in fields. Try to add some basic validation and print to the console.
4) Build a basic browser app - like the todo terminal app, a gallery, or a simple game.

Learn SQL basics

Install MySQL or some other SQL-compliant database and practice some basic queries:

1) Create a table.
2) Insert data into the table.
3) Update the data in the table.
4) Delete data from the table.
5) Learn how to SELECT data.
6) Normalize - learn how to split data across multiple tables.
7) Learn SELECTs with JOINs.

Patience

Before I continue; I just wanted to take a moment to say that - we have covered a lot already and it can be overwhelming.

The good news is that you don't have to be a master in everything, you will never stop learning as a developer and will continue to learn and grow every day for the rest of your career.

Learn a few concepts at a time and practice these by writing code. As you understand something, and feel confident - move on to the next. If you don't understand - then read more on that particular subject, and watch a few YouTube videos.

Repeat, try again, and build incrementally. Just be careful not to get caught in "tutorial hell", acquiring knowledge is important but knowledge without practice is useless.

Design Patterns, Principles, and other software engineering concepts

At this stage you don't have to deep dive and try and implement these, you will come back to them when you get a bit more experience later on in your career.

However, to know they exist and build that mental map I keep speaking of - it's important to just spend a couple of hours reading up on these concepts.

Here is a good resource to get started: https://refactoring.guru/

Some essentials I would suggest:
1) MVC.
2) Solid.
3) Coupling and loose coupling.
4) Singletons.
5) Adapters.
6) Circuit breaker.

You are ready

By now - you know the basics of your tech stack, and the programming languages involved. You know how to create a basic HTML page, style it, and add a bit of dynamicness. You further also have a basic grasp of SQL and design patterns.

You now have all the essential building blocks to start building for the web.

The next step is to read your framework's documentation cover to cover. You don't need to understand everything but the goal is to build that metal map I mentioned earlier.

MVC/MVT

Learn how to go from routes down the layer and back up again to return a response to the browser.

So for example, create a route:
/users

Firstly find where routes are defined. In Django, this is a file called "urls.py".

Just FYI, before we continue. Let me clear up some confusion with Django, Django is not exactly MVC-based - it's MVT-based.

Model-View-Template, the difference is "View" - which in Django refers to a "Controller" and "Template" refers to the actual HTML template.

Whereas in MVC, "View" is the html template. Besides this minor difference, the core concepts of MVC and MVT are the same.

Coming back to our route, now that you have declared a route - you need to respond to a request when the user visits that route.

To do so you will create a function in "views.py" (Controller). In this function - you can then return the HTML template (which for now is just static HTML).

Now that you understand the request cycle, you need to add a "models.py" which will talk to your database server and fetch data.

I won't go through the whole process - you can learn more by going through the framework docs.

The real world

Once you get into the workforce, you will quickly realize it's not the same as Twitter or the web world. Here are some key differences and tips to help you:

1) Latest and greatest - often, companies are one or more versions behind. You may not be able to use the latest version of a language or framework.
2) Don't bother senior developers with every little thing. Try to research, and experiment on your own for a period of time before approaching a senior. This will help you develop your problem-solving skillset, however, be cognizant of the time and deadlines. In a commercial environment - you often cannot sit too long on one ticket. So find a good balance, and you may need to put in a few extra hours of your personal time earlier on in your career to allow for this.
3) Read other developers' code, pull requests, and internal company documentation. This will give you great insights on how to structure your code. Allocate 10-15 minutes daily for this.
4) Sharpen your soft skills. Good communication is essential - don't go off and build something if you don't fully understand the big picture. You will just waste time. Ensure you speak to all stakeholders upfront first and write down as many notes as possible, review that, ask questions, and then start writing code.
5) Simple is always better. Writing less code to achieve the same outcome is usually better. I say usually because sometimes it's necessary to be verbose for performance or for readability purposes, however, don't write long complicated, unnecessary functions or code just because it's fancy and makes you look good. "Cognitive Complexity" - read up on this concept.

Conclusion

The goal is to learn and build on your skillset each day, incrementally in a systematic way. Don't follow hype trains. It's nice to learn about new technologies and what the community is doing but don't let this distract you.

Focus, on mastering the tech stack you have selected - focus on fundamentals that add value to your application and end users, not fanciness.

Hopefully, this guide will be of good use to you and will help you become a better developer. Happy coding!