Advice for Junior Developers: 2024 and beyond
After 7 years of questions about my portfolio site, I'm sharing how I built it (HTML/CSS/JS/GSAP) and offering a comprehensive guide for aspiring developers in 2024. From learning paths to tech stacks, open source contributions to interview prep—everything you need to kickstart your web dev career.
Embarking on a journey in the world of web development overwhelming, especially for those taking their first steps in the professional landscape. Many of you wrote to me with questions related to my 7 year old portfolio website, which inspired me to write this article.
In response to this recurring interest, I've decided to compile a comprehensive guide that not only unravels the mysteries behind my portfolio website but also shares valuable insights for developers who are commencing their professional journey in 2024. This blog post is tailored for individuals currently in college or recent graduates, offering a panoramic view of the intricate web of technologies that define our digital landscape. Whether you're eager to decode the architecture of my portfolio site or seeking guidance on kickstarting your web development career, this post is crafted with you in mind.
Tech Stack for Portfolio site
To begin this article, I would like to answer the most asked question: How the portfolio website was built, what was the ideation and so on. With respect to tech stack, I have written a comprehensive article documenting my role as a co-designer, art-director and frontend developer for this site on this blog back in 2017. If you'd like to know more please check the article out.
To create my portfolio site, I used plain HTML, CSS, JS, and SVG. Although I used jQuery to build the site, I would strongly recommend using vanilla JavaScript instead. If you're thinking about switching from jQuery to vanilla JS, You Don't Need jQuery is a good place to start. Also, building this in a static website generator would be much more recommended. Gatsby would be an ideal choice if you are looking to build something like this in 2024.
GSAP and ScrollMagic were used for animations. For performance reasons, I hand-coded all of the animations. Check out iHateTomatoes YouTube channel for video tutorials on GSAP and ScrollMagic.
If you are looking to build any animations in 2024, I would recommend using Interface Observer API and Scroll Trigger GSAP plugin instead of Scrollmagic. If you wish to build animations and export a JS file without worrying too much about how to hand-code animations, Rive can be helpful.
Thoughts on expensive bootcamps and courses
While some may consider "expensive" as a relative term in economics, I would recommend all the new developers to first try learning code via Youtube and free sources; get their hands dirty in writing basic code and then jump to paid courses. While the intent is just to give a broad level information, and not defame anyone, here is a video which talks about the reasons one should not invest in expensive bootcamps. Here's a reddit thread if you want to get a higher level understanding of what I really mean.
Git
Every time we make a change to codebase, we might need to store in somewhere; be it in our local laptops with folder names like V1, V2, or use a version control system which has many advantages. While SVN was an older way to control code version, almost the entire industry has shifted to Git.
More or less the entire industry has shifted to git as the official version control to manage code versions and it is an essential skill to have when looking for developer jobs. One of the best ways to showcase a developer portfolio these days is to either contribute to open-source projects or open-source one's personal projects. Github is my preferred choice because I love the website's UI/UX.
Thoughts on Open-source
Unless you are contributing something substantial to the project, please do not create a Pull Request and spam the project. There have been many cases where in a Youtuber has mentioned how easy it is to contribute to project; but these videos are created with an intention to show how easily it is to "add" our contrubutions to project. The main intention is often not to make marginal textual or grammatical changes in Readme files. But, I have seen many juniors mentioning that they worked in open-source projects just to realise that they have done nothing but add a change which does not add any value to the project.
If you are contributing to project, please ask yourself this question before creating a Pull Request: "Will my PR create any impact or change in terms of performance, experience or security of the application?". If you wish to create documentation, you can work on writing entire documentation sections for projects which lack the documentation.
RIP HTML/CSS/JS
I might get a lot of backlash for saying this, but if you wish to become a front-end developer who only deals with HTML/CSS/JS, you would have a hard time finding a job in 2024 and beyond. Frontend architecture has changed dramatically in the last couple of years and knowing a framework like React, Vue or Angular has become quintessential for getting a job as a frontend developer.
There have been numerous tasks and blog posts on this topic, I would recommend learning HTML, CSS & JS before getting onboarded on a framework. I have seen a lot of developers being "good framework developers" but have very limited skills with respect to HTML, CSS & JavaScript.
Priorities, Path and Tech Stack
Although a single page animated website would look best when it comes to showcasing talent and skills, a lot of job these days involve in building large scale web applications which require a specialised skill-set.
Frontend V/s Backend V/s Full stack. Java V/s Node. Most of you know Frontend code mostly deals with building the user interfaces, Backend deals with building APIs, Interacting with databases, storing/retrieving data and sometimes dev-ops too. If you wish to focus on infrastructure instead, DevOps is a great field to venture into. Managing infrastructure refers to the oversight, maintenance, and optimisation of physical or digital resources like servers, networks, and cloud systems to ensure reliability, security, and efficiency. So, as a developer one must learn to choose a stack as within a stack there are so many things to learn.
As a developer grows in their respective stack, they can extend their skills to becoming a Full-stack developer(s) as well. I have seen so many developers who are Full stack but they specialise in a stack (eg. Full stack, Front-end Heavy). If you are already skilled in JavaScript, NodeJS becomes a natural choice for backend development.
Frontend Learning Path 2024
So, a clear path to becoming a frontend rockstar in 2024 would be as follows:-
- Dont learn too many things at once: Although this list may initially appear a little overwhelming, I would advise against concentrating on too many things at once. Just concentrate on learning one item at a time, and then when you feel confident, move on to the next. Keep in mind that this is a lengthy game, not a quick one; it's a marathon, not a sprint.
- Git & Version Control: Learn Git, and then store all of your practice code on Gitlab, Github, or any other Git site you feel comfortable using.
- Core Web Technologies: Learn the fundamentals of JavaScript, HTML, CSS, and SVG. These serve as the foundational elements of everything on the internet.
- Responsive Design: It makes sense to enrol only in courses that cover responsive web design and mobile-first techniques since more people access the internet on mobile devices than desktops. Learn Flexbox and Grid for making layouts that adapt to any screen dimension.
- SEO: Although the algorithms for page ranking (google ranks each page with respect to keywords) change frequently, it is necessary to know the basics of SEO and learn what are some black-hat techniques so that you avoid using them as developer.
- Basics of Networking, Protocols and API fetching: Learn HTTP protocols and what they mean. For instance, 404 would mean that the requested page/resource(like an image) is not found on the server. Also, learn basics of things like making a request from server through fetch API or through use of libraries like axios.
- Learn ES6, and Advance JavaScript concepts like Promises, async/await, dot notations, arrow functions, Object Oriented JS, the concept of "this", event loops, etc.
- JavaScript Framework: Pick up a frontend framework that suits your style. Since React's popularity is nowhere going down, I would recommend React. But, React is kind of library and there are frameworks built on top of React. For instance, Gatsby for generating static websites; Next for Server side rendering and so on. Vue is also gaining popularity. Review reports from state of JS to get a proper understanding of future of technology and what is the best skill/framework to pick (more on the same in follow up section)
- Learn CSS Frameworks: SCSS, Less, Bootstrap or Material UI. Learn some "CSS in JS" frameworks like Styled Components. Learning Tailwind can also be helpful in this stage because it is way more powerful than a UI framework like Material UI or bootstrap.
- State Management: Redux Toolkit, Zustand, or Context API (if you chose React as your library/framework)
- Build Tools: Learn how to configue Vite, Webpack and/or parcel. Also learn what each tool does behind the scenes.
- Testing: Jest, React Testing Library, Playwright for unit testing and cypress for integration tests and unit tests
- Performance: Web Vitals, Lighthouse, Bundle optimisation
- Deployment: Vercel, Netlify, Docker basics
Essential Tools for 2024
- Package Managers: pnpm or yarn (over npm)
- Code Formatting: Prettier + ESLint
- Type Safety: TypeScript is now mandatory
- Component Libraries: Storybook for documentation
- API Testing: Postman or Thunder Client
Test Driven Development (TDD)
With the current trend in technology, the programmers will have to not only write code, but build code based on test cases.
- In what scenarios the code will fail
- In what scenarios the code will pass
- What will be state of application/component given some specific conditions
- How does the code perform when there are exceptions and network errors
State of JS Survey
State of JS is an annual survey that serves as a valuable resource for developers, helping them stay informed about the evolving landscape of JavaScript technologies. The survey captures the current trends, preferences, and opinions of developers working with JavaScript. It covers a wide range of topics, including front-end frameworks, libraries, testing tools, and more.
– Sacha Greif
Getting a job
How to create a perfect resume
- Keep it to 1-2 pages maximum
- Lead with a strong technical skills section
- Include GitHub, LinkedIn links along with live project links
- Quantify achievements (e.g., "Improved load time by 40%")
- Use action verbs: Built, Developed, Optimised, Implemented
Help with Interview
One can prepare themselves for an interview by searching "Interview Questions" on Github, Youtube, etc. There are plenty of resources available. I found a few and here are the links:
sudheerj
sudheerjMake sure you are on a stable connection and have a good pair of headphones if you are interviewing remotely for a company. Also, being honest would add some brownie points to your candidature. Interview panellists often know when a candidate is deceitful or cheating and when they are being truthful. A lot of times, a candidate is selected because of their attitude and not just excellence in their skills.
Resources 📝
Here are some of the resources I highly recommend:
- Free Code Camp is a website which offers full courses on all the technologies for free.
- You'd be surprised how resourceful it is to learn anything new through Youtube. Some of my rockstar developers are: Traversy Media, Chai Aur Code (For Hindi Tutorials); Hitesh Choudhary (For English Tutorials), ezsNippet for Micro-learning: learning as if you were learning through instagram reels/youtube shorts.
- dev.to is one of the largest online communities of software developers. Developers write posts, subscribe to writers and share their views on other developers' posts. Occasionally they have contests too and winner gets digital freebies.
- Smashing Magazine, CSS Tricks and A list Apart are some of the oldest and most reputable web design and development blogs.
- Last but not the least Google's documentation on how to make better websites, web.dev
Generative AI
If you haven't yet used ChatGPT you are missing out on a lot of things. I am not such a big fan of AI generated code yet (may be in next 1-2 years I may be); but I am a big fan of AI Assisted code and AI Assisted text. I have written a few things about AI in my blogpost.
Passion 💪
The best way to learn to code is to write as much code as possible. The more one codes, the more one learns. There are plenty of resources already available for free on the web(Youtube, Freecodecamp, etc). Although, I am not against buying courses, I don't see much value in investing money in starter or basic courses, rather in advance or intermediate courses.
I wouldn't focus too much on generic certifications or degrees, unless the employer specifically needs a certification before
- figure out what’s best for you. Front-end/backend/ios/ full-stack etc. This is best phase you can choose something and experiment and mould your career to suit your likings. Remember... passion is everything if you wanna become a great engineer. Not degrees or certifications (although having one makes some difference in hiring process).
I’m a commerce grad. If I can do it... I'm sure you can too. Wish you All the best 👍🏻
Inclusion and Diversity 🏳️🌈👩💻👨🏿
Most of the content written above is written in gender-neutral pronouns for Inclusion. Tech is a very inclusive and welcoming industry and I see that in the coming years, it will stay the same.
Final Thoughts
The landscape of web development continues to evolve rapidly. While the fundamentals remain crucial, staying adaptable and continuously learning is what separates good developers from great ones. Start with the basics, build projects, contribute to open source, and most importantly—enjoy the journey.