The Self-Taught WebDev Roadmap
A 2022 guide to landing your first Software Developer role
Prologue
It was the year 2021. The earth was warming, the seas rising, and one particular James was becoming increasingly unhappy in his work environment. He wanted a change, he wanted to leave the industry that he had spent years working and qualifying to partake in; unwilling to return to university, he contemplated a lawn mowing business.
James managed to infiltrate the world of Software Engineering. He quit his job to begin an uncertain journey, fraught with peril and self-teaching. And after six short months of youtube tutorials and google searching, he found himself in a remote Full Stack Developer role; and you can too. Welcome Reader, to the definitive guide to landing your first Software Engineering job.
Introduction
I am James, and in my self-teaching journey I made a lot of mistakes and wasted a lot of time. So while this guide may not be an exact replica of each and every step I took, it’s a level up, a version better. It’s the guide I wish I had, and I hope it helps you achieve what I have achieved, and even more.
If anything at any point confuses you or you want to know more, just search it while including Freecodecamp in the search. You’ll find a plethora of resources until your heart’s content, and your queries are quelled.
Speaking of, if your current programming knowledge is equivalent to my ability to talk to bears, then you’ll be looking to learn your first language. I’d recommend you start off with this certificate:
It says 300hrs it’s realistically much less. It’s a very important first step and I would recommend focusing solely on this until completion. Then you get this cool certificate!
Now onwards.
What You’ll Need To Know
In my career-transition, I scoured all the job boards. All of them. And after looking at more job postings than the world has sheep, this is my take on the most required and up-and-coming tech you’ll need to know (& links to get you started). I’d recommend plowing through them in the listed order, and when you finish a tutorial, make something out of it; keep the backbone, gut the project, and go off and create your own monstrosity. When you get to the end of the list, you’re ready to head hunt the head hunters and land a whale of a role.
Front-End Essentials:
- HTML & CSS; there is not software engineer on the face of the planet, or on Mars, that isn’t familiar with HTML & CSS (Build a portfolio webpage). Added benefits include learning Google Fonts and Font Awesome Icons!
- React; React is a JavaScript framework that is great for dynamic webpages (Learn the basics of React and CSS by building a Covid-19 data display App).
- Next.js; The React framework of the future. A truly valuable asset to add to your arsenal of skills, especially if you add Stripe, Hooks & LocalStorage to the mix (Build an E-commerce store + TailwindCSS).
- TailwindCSS; out with the old CSS and in with the new. This CSS framework is by an absolute mile, the latest and greatest styling innovation (Check out their amazing documentation and dive right in). I’d recommend incorporating it in every project.
- Vite; the new means and methodology for creating and initializing your portfolio projects. It takes two seconds to setup, and you’re ready to go.
- Consuming API endpoints; to build a dynamic front-end, you’ll need to know how to consume an API full of information (Svelte Movie Dashboard App).
- Cloud Hosting; YOUR PROJECTS MUST BE LIVE!!! Learn how to host a front-end project in the video associated with the first point.
Back-End Essentials:
- Node.js (or Django); the foundation of back-end knowledge begins at the most humblest of origins. With Node.js + Express + RESTful protocols, you can architect any server configuration or API of your wildest dreams (Learn the basics & Build a REST API).
- Authentication Systems (OAuth || JWT || API_KEYS); you can’t build a back-end and not making it exclusive. (JWT Full Stack Tutorial & Firebase Auth Project coming soon!).
- NoSQL Databases; A NoSQL is a non-referential database that does not use Structured Query Language (SQL). This could be a simple self-implemented JSON database that you could use to make your own authentication system. Or it could be Firebase’s Firestore or MongoDB (MongoDB tutorial).
- SQL Databases; These bad-boi’s use Structured Query Language. My favorite is PostgreSQL as you can have JSON and Array fields above and beyond the tradition string, boolean, and numerical fields. (Learn how to tastefully integrate PostreSQL in a Python Data Science project).
- CRON Jobs; The backbone of repeated tasks, learning how to implement a CRON job system in your back-end server for all your job handling needs.
- Cloud Hosting; YOUR PROJECTS MUST BE LIVE!!! (Learn how to host a back-end API with this tutorial).
Nice to haves:
- Paas; product as a service allows you to incorporate backend-isk features like data persistence and user authentication without building the code yourself. Firebase is an excellent example of a provider of such services.
- Python; it’s always good to know a second language, and this one you’ll be able to pickup in a day if you already know JavaScript by following along with my Data Science tutorial (Link coming soon!).
- Cloud services; It’s great to know
Now That You Are Wise
Congratulations! If you’re here, you’ve likely completed either the front-end learning map, back-end learning map or both. This is a significant milestone and you’re now at the point where we can start putting together your professional portfolio.
A portfolio is critical to your ability to enter the industry. Irrespective as to whether you’re self-taught or not, it’s going to be the primary means of convincing prospective employers that you’re credible; you can code the code. To land an actual job, credibility will get you 50% of the way. The latter 50% is your soft-skills, but we’ll touch on that later.
I should also mention at this point, this is where you will likely begin to come across the biggest barriers to your success; self-doubt, imposter syndrome & tutorial hell. Never fear, I’ve got you covered.
BURN THIS INTO YOUR BRAIN; LET THIS BE YOUR GOSPEL
“You are a beginner. Your knowledge is limited. You will not remember how to do most things, and will find yourself googling and searching constantly. This. Is. Normal. The secret to being an effective programmer is not how much you can remember, but instead how well you squirrel away golden nuggets of information. The best developer is the one that knows where to find the guide on how to do a particular task with the best implementation”.
So don’t focus on how much you can remember, instead focus on building your arsenal of guides and resources and aim for familiarity. “I’ve seen this before, I know where to find an excellent implementation”. The rest will come with time.
As for tutorial hell, this is a false construct created by software engineers to make you feel bad for following tutorials. A good tutorial is the ultimate knowledge nugget. And this is how you should set out on your journey to complete the projects to fill your portfolio. Pick a tutorial that covers a number of technologies that you’re less familiar with, code along, and then finally, ADAPT the project. Keep the backbone, the auth system, the database configuration, the frontend layout. But gut the content. Change the purpose. Adapt the logic. Make it look different. Add an API_KEY. Make it your own! (And then don’t forget to catalog it in your Github page). Pin it to the top.
For your portfolio webpage, it’s going to be structured into four major parts. The first section, is going to be an About You section. In 2–3 lines, you should describe yourself, your pursuits, and your endeavours. Following, a section on your Work Experience and Education. Again, a sentence per point. Clear, concise, and to the point. And finally, a tiled layout of your 3–4 projects to show prospective employers. These projects should collectively contain all of the technology spoken to above. Clicking on a project should take you to a blog page that summarises the Github Readme.md file that comprehensively details the inner workings and purpose of said project. It should also include a link to the Github code and a live hosted version of the project. At the bottom of your webpage, a link to your Github and LinkedIn page. Your page must be responsive above all else.
Full Stack Project Recommendations:
- An E-Commerce Store in Next.js + Stripe + TailwindCSS
- A Full SEN Stack Project (Svelte, Express, Node.js)
- A Data Science Project with PostgreSQL & Python (and a simple Node.js full stack webpage to summarize your findings).
- A Node.js + HTML + CSS + Firebase Full Stack Poll App
Additional Front-End Project Recommendations:
- A Data Visualisation Website (that consumes a data API and presents metrics that the user can interact with, for example a Covid Stats Website).
- A In-Browser Game (that the user can interact with, that saves to LocalStorage).
Additional Back-End Project Recommendations:
- A Web Scraper Server (that stores data provides it as an API).
- An Evil Review Bot (That creates randomized workouts).
- A CRON Job Server (Completes a task at a given interval).
- Something Serverless -_-
Tutorials for the backbone of all of these will be coming out soon on my YouTube channel if you’re curious. Feel free to send me a message as to which project tutorials you’d like to see first, and I’ll make it happen.
The portfolio that got me hired (it’s average — you can do better):
Professional Image
Now you’ve done the work, you’ve reached the final stretch. All you have to do now is make sure your professional image is spectacular. And asides your portfolio webpage, there are two sites that will get you across the finish line; LinkedIn and Github.
Github
The recipe for success on your Github page is 4 part:
- Regular contributions — From the minute you start working on your projects, you need to make a minimum of 1 commit per day. I don’t care if it’s just adding a commented line, make the commit. Check out the Github GUI if you’re afraid of Git in the terminal.
- Six Pinned Project — These should be your primary projects, the three or four we have spoken of above, plus any additional knowledge nuggets you may have found along the way.
- Readme.md File — These files need to be immaculate. A text explanation or the purpose and intention behind the project, problems you encountered, how you fixed them, and everything in-between. Each should also contain an abstract at the beginning that summarises the project and the technology! The format should be: Abstract, Introduction to the problem, why you want to fix it, how you’re going to fix it *tech used*, any issues you encountered along the way, overall reflection, link to live project).
- A friendly and professional picture and bio stating the same as your portfolio does above; your personality, pursuits & endeavours, and a link to your portfolio webpage and LinkedIn.
- As above, a friendly yet professional image is paramount, and same goes for your bio (links to Github page and web portfolio also).
- Your title should state “Full Stack Developer”, or whatever it is that you’re aiming to become.
- You cover photo should be something visually aesthetic, that is also special to you. Think of it as a wall-paper for your page.
- You need to fill out your prior work experience and provide some detail on how any of the roles you have helped historically have developed your communication, team working, self-management and problem solving skills.
- You need to complete the education section as above.
- You need to add your list of tech skills to the skills section — if you can, try complete the quizzes they have to gain a badge for that skill.
- You need to add any certificates you have to the license and certifications section — for example I completed the FreeCodeCamp.org JavaScript Algorithms and Data Structures certificate.
- Links to your main active projects and portfolio.
Landing A Job | Job Applications
The secret to apply for jobs is consistency and efficiency. You need to be consistently putting in great applications and ensure that your application process is efficient.
Resume
All you need to know is right here:
Cover Letter
For the cover letter, I recommend making a google document equivalent. This allows you to easily copy the document, change a couple of bits and pieces and it makes the whole process highly efficient. And yes, it is definitely worth taking a bit longer on your cover letter to make it more relevant to each individual employer.
Communication
In a world where hundreds of other applicants can probably code just as well as you, have a portfolio of projects, perhaps even more university experience, communication is your single biggest weapon. As far as coding ability goes, employers just want to know that you can code. The person who gets the job however, is the one who they want to work with the most. It’s absolutely critical that you’re polite in success AND REJECTION. You cannot hand out enough “Thank you for this opportunity” and “I hope you’re having a nice week”. Friendly sentences, even a smiley face emoji makes a significant difference in displaying your personal affect. If you’re friendly, warm, and maybe a bit of fun, that’s how you’ll land your job. The other critical piece here is that you have to be able to receive feedback. It doesn’t matter how critical or how incorrect/unjustified you might feel it is; be appreciative. Say thank you. Be open minded to their words, acknowledge them, take them on board. You’re an inexperienced developer and you’re going to be receiving a lot of feedback so it’s vital that you’re humble and you take it like a champ!
I cannot emphasize enough, every email and message should have some form of positivity. I like the template:
Hi <name>,I hope you're having a great start to the week :)I wanted to say thank you for your time today. I greatly appreciate the opportunity to get to ......Cheers,
<Your_name>
EVERY. SINGLE. TIME. you apply for a job, be it on LinkedIn or any other job board, you need to message someone from the company (on LinkedIn). Find their CTO, or a Hiring Manager, or even the CEO on LinkedIn, and befriend them adding the following note:
Hi <Name>, I hope you're having a nice week :) I stumbled across your job posting for a <Insert job posting title> and as a seasoned Full Stack React developer, I feel I would be great for the role. I'd love to connect and chat about the opportunity. Cheers,
James
People love the initiative. That’s it. Some people won’t respond, but some will, and some will give you time for a call. This is critical, as while it’s just a chat, it’s essentially a free interview that only you get where you get to show off your personality and build some rapport and attachment. It might even land you the job.
Job Boards
As for job boards, there’s a good few many. There big ones, such as:
- Indeed
These are great for seeing what’s out there and what tech is relevant and current. However, it is often the lesser used job boards that will find you the path to success. Some examples are the jobs posted on:
- StackOverflow
- Indiehackers
- AngelList
The Last Step
Be patient. Be persistent. Grow. If you experience a rejection, take your worst project, and replace it with a new project that’s better than the rest. And when you land your job, you’ll know so much that you’ll hit the ground running and you’ll never look back.
