My Journey in Completing 100 Days of Code with JavaScript

Background

Before starting the 100 Days of Code challenge, I had about two years of experience as a full-stack web developer, working primarily with Python and Django on the back-end and jQuery on the front-end. I was comfortable with the fundamentals of HTML, CSS, and JavaScript but hadn‘t delved deeply into modern JavaScript or explored its vast ecosystem of frameworks and libraries.

I had experimented a bit with React and built a simple Node.js API, but lacked substantial projects with these technologies. I wanted to transition into more JavaScript-focused roles and knew that strengthening my skills in this area would be crucial. Taking on the #100DaysOfCode challenge seemed like the perfect way to hold myself accountable to focused daily learning and hands-on practice to achieve this goal.

Why JavaScript?

I chose to concentrate my 100 Days of Code on JavaScript for several compelling reasons:

1. Versatility – JavaScript is an incredibly versatile language. It can be used for front-end web development, back-end development with Node.js, and even mobile app development using frameworks like React Native. Gaining advanced JavaScript skills would empower me to build complete applications and pursue diverse roles.

2. Demand – Year after year, JavaScript tops the charts as the most commonly used programming language. In Stack Overflow‘s 2020 Developer Survey, 69.7% of respondents reported using JavaScript, far surpassing Python at 41.6% and Java at 40.2%[^1]. JavaScript skills are highly sought-after in the job market, so focusing on this language would boost my employability.

3. Active community – JavaScript boasts an immense, vibrant developer community. There are countless open source projects, frameworks, and libraries being actively maintained and evolved. This means access to a wealth of learning resources, tools, and support. Plugging into the JavaScript community would accelerate my growth and allow me to learn from more experienced developers.

Learning Structure

To maximize my progress over the 100 days, I structured my learning around distinct themes:

• Days 1-30: JavaScript fundamentals – I began by deepening my understanding of core JavaScript concepts. This included mastering ES6+ syntax like arrow functions, destructuring, and the spread operator; exploring array methods like map, reduce, and filter; working with objects and classes; and manipulating the DOM. I completed daily coding exercises and small projects to reinforce my learning.

• Days 31-60: Front-end frameworks – With a solid grasp of vanilla JavaScript, I then dove into the world of front-end frameworks. I dedicated most of this time to React, completing tutorials, building small components, and eventually developing a full application. I also explored the basics of Angular and Vue to understand their core concepts and syntax.

• Days 61-80: Back-end with Node.js and Express – In the next phase, I focused on back-end development using Node.js and the Express framework. I learned to set up servers, handle routing and middleware, and interact with databases using MongoDB and Mongoose. I built APIs to power my front-end applications and practiced deploying them to platforms like Heroku.

• Days 81-100: Full-stack MERN projects – Finally, I brought together my skills by building complete applications using the MERN stack (MongoDB, Express, React, Node). This cemented my understanding of how the front-end and back-end work together and allowed me to build more complex, full-featured projects.

Throughout the challenge, I aimed to spend 1-2 hours coding each day, with more time on weekends for deeper learning and project work. I supplemented my hands-on practice with reading articles and tutorials, watching video courses, and engaging with the #100DaysOfCode community on Twitter.

Key Skills Gained

Over the course of the 100 days, I gained proficiency in a wide range of JavaScript topics and tools. Some key areas of growth included:

• ES6+ syntax and features – I became fluent in modern JavaScript syntax and able to leverage powerful features like destructuring, arrow functions, and the spread operator to write cleaner, more concise code.

// Destructuring and spread syntax
const { name, age, ...rest } = user;

• Asynchronous programming – I gained a deep understanding of asynchronous programming in JavaScript, learning to work with callbacks, promises, and async/await syntax to handle tasks like fetching data from APIs.

// Fetching data with async/await
async function getUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  return data;
}

• Front-end frameworks – Through hands-on projects, I became proficient in React, learning to build reusable components, manage state and props, and integrate with APIs. I also gained exposure to Angular and Vue, understanding their core concepts and syntax.

• Back-end development – I learned to build servers and APIs using Node.js and Express, handling routing, middleware, and database integration. I became comfortable with MongoDB and Mongoose for working with data.

• Testing – I incorporated testing into my workflow, learning to write unit tests with Jest and integration tests with tools like Supertest. This helped me catch bugs early and ensure the reliability of my code.

Challenges Faced

The 100 Days of Code journey was not without its challenges. Here are a few of the key obstacles I faced and how I overcame them:

1. New concepts and syntax – As I delved into more advanced JavaScript topics, I sometimes struggled to wrap my head around concepts like closures, promises, and complex data structures. When I got stuck, I would turn to resources like the "You Don‘t Know JS" book series by Kyle Simpson or the MDN Web Docs to gain a deeper understanding. Taking the time to really grasp these fundamentals paid off in the long run.

2. Debugging – Debugging is an inevitable part of the development process, and I certainly ran into my share of tricky bugs, especially when working with asynchronous code or complex React components. I learned to use tools like Chrome DevTools and React Developer Tools to step through my code, identify issues, and test solutions. Developing a methodical debugging process was key to overcoming these challenges.

3. Time management – Balancing daily coding practice with a full-time job and other commitments was not always easy. There were days when I was tempted to skip my coding session or cut it short. To stay on track, I scheduled my coding time in advance, treated it as a non-negotiable appointment, and held myself accountable by tweeting my progress with the #100DaysOfCode hashtag. The support and encouragement of the community helped me stay motivated.

Projects Built

Hands-on projects were the cornerstone of my 100 Days of Code journey. Here are a few of the key projects I built and what I learned from each:

1. Weather app – I built a weather application that allows users to search for a city and view current weather conditions and a 5-day forecast. I used the OpenWeatherMap API to fetch weather data and displayed it dynamically using JavaScript. This project gave me practice working with APIs, handling asynchronous data, and updating the DOM.

2. Task manager – I created a task management application using React. Users can add tasks, mark them as complete, edit task details, and delete tasks. This project solidified my understanding of React components, state management, and handling user input through forms. I also implemented client-side routing using React Router.

3. Blog API – On the back-end, I built a RESTful API for a blog application using Node.js, Express, and MongoDB. The API includes endpoints for creating, reading, updating, and deleting blog posts, as well as user authentication using JSON Web Tokens. This project taught me how to design and implement a robust API with proper security measures.

4. Real-time chat app – Combining my front-end and back-end skills, I built a real-time chat application using the MERN stack (MongoDB, Express, React, Node) and Socket.IO for real-time communication. Users can join different chat rooms, send messages, and see messages update in real-time. This project showcased my ability to integrate multiple technologies and handle real-time data flow.

You can explore all the projects I built during my 100 Days of Code on my GitHub profile.

Helpful Resources

Throughout my 100 Days of Code journey, I relied on a variety of resources to learn new concepts, get unstuck, and deepen my understanding. Here are some of the most valuable:

• freeCodeCamp – freeCodeCamp‘s JavaScript curriculum and project-based certifications were instrumental in my learning. The interactive lessons and coding challenges provided hands-on practice, while the projects helped me apply my skills to real-world scenarios. I earned the JavaScript Algorithms and Data Structures certification during my 100 days.

• Eloquent JavaScript – This book by Marijn Haverbeke was my go-to resource for deepening my understanding of JavaScript fundamentals. It covers topics like functions, data structures, and asynchronous programming in great depth, with clear explanations and illustrative examples.

• Full Stack Open – This free online course from the University of Helsinki provided a comprehensive introduction to modern web development with JavaScript. It covers the MERN stack, testing, and deployment, with a focus on building real-world applications. The projects in this course formed the basis for several of my own projects.

• Traversy Media – Brad Traversy‘s YouTube channel was an invaluable resource for practical, project-based learning. His tutorials on React, Node.js, and full-stack development helped me understand how to structure applications and solve common problems.

• MDN Web Docs – The Mozilla Developer Network‘s web docs were my constant companion throughout the 100 days. Whenever I needed to look up a JavaScript method or syntax, MDN provided clear, detailed documentation with helpful examples.

Growth and Confidence

Completing the 100 Days of Code challenge was truly transformative for me as a developer. At the outset, I lacked confidence in my ability to build complete, functional applications with JavaScript. After dedicating myself to 100 days of focused learning and practice, I now feel empowered to take on complex projects and confident in my skills.

The daily commitment to coding helped me build a strong habit of continuous learning. I now see every bug or challenge as an opportunity to deepen my understanding. I‘m also much more comfortable reading and understanding other people‘s code, which has been invaluable in my work.

Beyond technical skills, the 100 Days of Code also connected me with an incredible community of developers around the world. Through the #100DaysOfCode hashtag, I found encouragement, inspiration, and accountability. I even had the opportunity to collaborate on projects and learn from more experienced developers.

Tips for Others

If you‘re considering taking on the 100 Days of Code challenge, here are my top tips for success:

1. Choose a focus – While any consistent coding practice is valuable, I found it helpful to choose a specific language or technology to focus on. This gives your learning structure and helps you build deep, marketable skills.

2. Set clear goals – Take some time at the outset to define what you want to achieve through the challenge. Set goals for what you‘ll learn and build, and break these down into smaller daily or weekly targets. Having a roadmap will help you stay motivated and on track.

3. Make coding a habit – Treat your daily coding practice as a non-negotiable appointment. Set aside a specific time each day, and show up consistently. The more you code, the easier it becomes to build momentum and make progress.

4. Build projects – Hands-on projects are the best way to apply your learning and gain practical skills. Aim to build a variety of projects that challenge you and showcase your growing abilities. Don‘t be afraid to start small and iterate.

5. Engage with the community – The #100DaysOfCode community is incredibly supportive and inspiring. Share your progress, ask questions, and cheer on others. You‘ll learn a lot from your peers and likely make some valuable connections.

6. Embrace the struggle – Learning to code is not always easy. You‘ll encounter bugs, confusing concepts, and moments of frustration. Embrace these challenges as opportunities to grow. When you get stuck, take a break, research the problem, and keep pushing forward. Persistence is key.

Reflection and Next Steps

Looking back on my 100 Days of Code, I‘m amazed at how much I‘ve grown as a developer. This challenge has not only equipped me with valuable technical skills but has also instilled in me a mindset of continuous learning and growth.

I‘ve come to see that the most successful developers are those who are constantly pushing themselves to learn and take on new challenges. The 100 Days of Code has shown me that with dedication and hard work, it‘s possible to make significant progress in a relatively short time.

Moving forward, I plan to continue building on the foundation I‘ve established. I‘m excited to dive deeper into technologies like TypeScript, GraphQL, and serverless computing. I‘m also eager to contribute more to open source projects and share my knowledge with others through writing and mentorship.

To anyone considering embarking on their own 100 Days of Code journey, I wholeheartedly recommend it. It‘s a challenging but incredibly rewarding experience that will not only level up your skills but also connect you with a vibrant, supportive community. No matter your starting point, dedication and consistent effort will take you further than you might imagine. Happy coding!

[^1]: Stack Overflow Developer Survey 2020. https://insights.stackoverflow.com/survey/2020#most-popular-technologies