How I got into software engineering - Junior Edition
davidpattaguan
Hi guys! I'm David, currently working as a software engineer specializing in web development. This is my very first blog and the content written is all about my roadmap to becoming a software engineer.
Disclaimer: I'm sharing tips that worked for me. This may or may not be applicable to you. Please DM me your feedbacks about this blog, it would help me produce better content in the future. Also, I'm aware of some typography and grammatical errors xD
The journey began way back july 2021, several months before our internship. Before graduation, I was a student without any specialization more of a jack of all trades kind of guy. I've tried several paths like cybersecurity, Mobile Development, Multimedia (Photo Editing and Video Editing) and all sorts of things. However, creating apps using web technologies is what piqued my interest.
But, why? - Basically, I wanted to see my designs come to life.
On that same day I assesed my skills and with reached to one of my seniors. He laid a basic roadmap for me and urged me to before attempting new things, I should concentrate on what i really like, and that is what I did.
Here are my web dev skills before the journey started.
- HTML (basic tags + syntax)
- CSS (Vanilla and Bootstrap)
- PHP and SQL
- Basic Laravel
- Basic Terminal
I've started researching and binged watch a lot of youtube tutorials and read a lot of resources. While you're reading this, you probably think that i was stucked on the 'tutorial hell'. Actually, you're right! Lol.
What is 'Tutorial Hell'? a state of being stuck in a cycle of constantly consuming programming tutorials without being able to apply the knowledge in the real world and build real apps. Source: Linkedin Pulse.
Roadmap Breakdown
Month of July - November 2021
<div>
<h1>Hello World</h1>
</div>
Here are my recommendations for learning the fundamentals. There are both free and paid items on this list. Since I learn best visually, the majority of the learning resources are videos.
Free Resources
- Roadmaps.sh - where I based off my initial roadmap Fullstack Roadmap (UPDATED)
- FreeCodeCamp - Search for Web Dev Basics.
- Brad Traversy Build a Responsive Website | HTML, CSS Grid, Flexbox & More
- Net Ninja HTML & CSS Crash Course Tutorial
Paid Resources
- Udemy Colt Steel The Web Developer Bootcamp 2023
- Udemy Angela Yu The Complete 2023 Web Development Bootcamp
Very helpful documentation:
- MDN Resources for Developers,by Developers
- CSS Tricks (Very helpful for learning about grids/flexbox) CSS Tricks
- OG W3Schools W3Schools HTML CSS and JS
Content Creators
- Fireship
- Brad Traversy
Summary
I started with the free courses before deciding that I wanted a more structured learning environment, so I invested in some paid stuff. There are numerous free materials available online. However, I found that using this approach helped me learn. I made a sizable payment, which pushed me to be more accountable but...
Technical Learnings:
- I followed along with a lot of tutorials and consistently built the projects.
- Worked out my CSS layouting skills (i was so bad at it).
- Became more comfortable in building static websites.
- Learned basic terminal commands.
- Understood how git and github works.
- Started using figma for prototypes.
- Understood the concepts of HTML, CSS, Javascript.
- Promises, Async and Await.
- Also built my own unique mini projects.
- ...and finally escaped the 'Tutorial Hell'! Sort of..
Life lessons:
- Consistency is the key! Learning atleast a concept a day is better than none.
- In tech, learning never stops.
- Use social media to your advantage. Connect with other people, Stay updated with the latest trends.
- Coding is a test of patience. If you're really into this, be ready to invest a LOT of time.
- Don't be afraid to ask questions to your seniors (Do your part before asking as well). They might have encountered the same issues you're working on that may take your time to solve yourself.
Month of November 2021 - May 2022
<div>
{posts.map((post)=>{
return(
<PostItem key={post.id} data={post}>
)})}
</div>
The React and Nodejs
Journey begins here. Looking back, I attempted speed running react but failed miserably. With this, I actually took a break for 2 weeks xD.
I ultimately made the choice to start learning javascript. BUT, boy oh boy, Javascript is such a huge pain in the a**... at first!
I just wanted to stay with my HTML and CSS knowledge. However, I was aware that I will go nowhere if I'll keep sticking with my comfort zone. But as soon as i did my own projects i slowly but surely got the gist of it.
Friendly Advice: Don't Skip Javascript! Make sure you can build something with it without tutorials. That's the best learning experience for this. You can somewhat transition from frameworks to frameworks if you understand JS fundamentals.
I started learning react when I was somewhat comfortable with vanilla javascript. Everything from my failed first attempt made sense to me and it all clicked. After creating some projects with React, I chose to learn Express JS as my first backend framework given that it is based off from javascript so that the learning curve will be easier. I built APIs with it and learned a lot about fundamental concepts of backend programming. I eventually learned MERN stack, MongoDB ,ExpressJs, React and NodeJs -- This stack eventually became my bread and butter and today, I still use this stack to create fullstack projects.
Here's my top resources for learning react and nodejs.
Free Resources
- Net Ninja -From all the videos I've watch this is where i really understood the basics (content might not be updated now) - Full React Tutorial.
- Academind - Supplementary Course for Learning React React Crash Course for Beginners
- Javascript Mastery - Supplementary Course (Updated) React JS Full Course
- Brad Traversy (Updated) MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More
- Dave Gray MERN Stack Project | Fullstack Tutorial
- Patterns.dev Improve how you architect webapps
Paid Resources
- Udemy Stephen Grider Modern React with Redux [2023 Update]
- Udemy Angela Yu The Complete 2023 Web Development Bootcamp
Very helpful documentation
- ReactJs Dev React New Docs
- ReactJs Legacy React Legacy Docs
Content Creators
- Fireship
- Brad Traversy
- Dave Gray
- Code with Antonio
- Joshtriedcoding
Technical Learnings:
Frontend
- Experimented and utilized several APIs using ReactJs.
- Understood how react works under the hood - Class-based and Functional Components,HOC,Hooks.
- Created custom Hooks.
- React Router for Routing.
- Auth Guard (For protecting routes).
- Fetch API, Axios, React Query.
- Context API, Redux, Redux toolkit for state management.
- CSS Frameworks such as Material Ui and Tailwind.
- How to handle asynchronous requests with react (custom data, error, and loading states).
- Input data validation using Yup.
- Different Folder Structures.
- Creating Reusable Components.
- Handling forms with custom implemetation, formik and react hook form.
- Datatables and client side filtering.
- Custom animations.
Backend
- Became more aware of the concepts related to backend development - ( Client and Server, Request and Response, REST, SOAP, HTTP METHODS, etc)
- Created a basic CRUD backend from scratch
- Using Postman for testing backend routes
- Cookies, Localstorage, Session Storage and Token Rotation (Access Token and Refresh Token)
- User Roles, Authorization and Authentication
- Oauth login flows
- Rate Limiting
- Input Validation using JOI
- Middlewares
- Mailer
- NoSql and little bit of SQL
- Routing (Creating API routes)
- Serverside Filtering
- File Uploading
- MVC architecture
- Error Handling
Life lessons:
- Learning Web Development and Programming in general could be daunting especially for beginners.
- ONE STEP AT A TIME. Learning everything all at once can cause burnout.
- The best teacher is experience. Try to Learn by doing and building stuff on your own.
- Be mindful if you're about to enter the tutorial hell. Practice to read documentation to avoid this one.
- Only use AI as a supporting tool not a replacement for your mind.
- Networking. Connect with other people especially on social media networking sites -- Twitter and LinkedIn are great sources of connections.
- We are forever juniors!
That's it! 🎉🎉🎉
With these skills, I was offered a job in the company that I had my internship with. I did create this opportunity because I know I worked really hard for it. The patience and delayed gratification paid off. As a junior developer, I was able to deliver and ship products with several clients. HOWEVER, I admit that I made a lot of mistakes and wrong decisions along the way that led to errors and mistakes. But, I took it as a challenge because I believe that's the point where real learning begins. I continued researching and never stopped learning everyday to improve my craft to grow as a developer and a professsional in my field.
Starting a tech career nowadays is hard and the competition is getting tougher. At the end of the day, It's about how you work towards your goal. I will not get into deeper details about what I do at work but I still do web development and continuous upskilling. I'm currently learning Typescript, Fullstack Dev using NextJS, Payment Gateways, SEO, Cybersecurity and concepts related to AI. I also want to start learning more about infrastrature and DevOps in the future.