As I embarked on my coding journey, my first coding project was a significant milestone that helped me apply the concepts I had learned and solidify my understanding of front-end development. In this post, I’ll share what I built, the challenges I faced, and the invaluable lessons I learned along the way.
The Project: Building a Personal Portfolio Website
For my first project, I decided to create a personal portfolio website to showcase my skills, projects, and journey into coding. The goal was to present myself as a budding front-end developer and create a space to share my work with potential employers.
I utilized HTML, CSS, and JavaScript, drawing inspiration from the projects I completed in my SheCodes, and freeCodeCamp workshops. This project allowed me to blend creativity with technical skills, making it a perfect fit for my interests in front-end development.
Challenges Faced: Problem-Solving Techniques
Despite my excitement, the project was not without its challenges:
- Design Decisions: I initially struggled with choosing the right layout and color scheme. To overcome this, I researched design trends and sought inspiration from other portfolios. I created mood boards to visualize my ideas and refine my vision.
- Responsive Design: Making the website mobile-friendly was a significant hurdle. I learned how to use media queries to adjust styles for different screen sizes. This was a great opportunity to apply the knowledge I gained in my coding studies.
- Debugging: I encountered numerous bugs while implementing interactive features. At times, it felt overwhelming, but I learned to approach debugging methodically. I broke down the code into smaller sections and tested each part to identify the issue, which greatly improved my problem-solving skills.
Tools Used
Throughout the project, I relied on several tools to streamline my workflow:
- Visual Studio Code: My go-to code editor for writing and editing my HTML, CSS, and JavaScript code.
- Git and GitHub: I used Git for version control, enabling me to track changes and collaborate with others easily. Hosting my project on GitHub allowed me to share my work and receive feedback.
- Figma: For initial design mockups, I explored Figma to create wireframes. This tool helped me visualize the layout and structure before diving into coding.
Biggest Takeaways: Lessons Learned
Looking back, my first coding project was a transformative experience. Here are the key lessons I learned:
- Iterative Learning: The importance of iterating on designs and code became clear. I learned that it’s okay to revisit and revise elements until they meet my expectations.
- Seeking Feedback: I realized the value of seeking feedback from peers and mentors. Their insights helped me refine my work and grow as a developer.
- Embracing Challenges: Each challenge I faced was an opportunity to learn and grow. Embracing the struggle made the project more rewarding and taught me resilience.
- Documenting My Journey: Creating a portfolio not only showcased my skills but also served as a personal documentation of my journey in coding. I plan to expand it as I work on more projects and gain new experiences.
As I continue to learn and build more complex projects, I’m excited to see how my skills evolve. For more insight into my coding journey, check out my post How I Balance Full-Time Work and studying Coding.
