Reconnecting with Front-End Development: Building a Cat Photo App

Introduction:

Hi everyone, Anu here! After a long break from the IT field, I’ve decided to dive back into the programming world. With a background in HTML, CSS, and Bootstrap, my focus is on learning modern front-end technologies. I started with freeCodeCamp’s "Learn HTML by Building a Cat Photo App" project to brush up on my basics. Here’s how it went.

Why freeCodeCamp?

FreeCodeCamp offers a structured and interactive way to learn web development. Their hands-on projects help solidify concepts through practice, which is perfect for someone like me who’s returning to the field after a break.

Revisiting the Basics:

Even though I have prior experience with HTML, CSS, and Bootstrap, I found it essential to start from the ground up to rebuild my confidence and ensure a strong foundation. Here’s a glimpse into my learning process:

HTML Structure:

Revisiting the basic structure of an HTML document reminded me of the importance of well-organized code. It felt like reuniting with an old friend.

Checkbox with Text:

Adding a checkbox with the text "Loving" next to it was a simple yet significant task. Here’s the code I used:

<input type="checkbox" id="loving" name="loving">
<label for="loving">Loving</label>

This helped me recall how important it is to properly associate labels with form elements for accessibility.

Images and Links:

Adding cat images and creating links reinforced my understanding of attributes like src, alt, and href.

Semantic HTML:

Emphasizing semantic HTML elements made me appreciate their role in accessibility and SEO more deeply this time around.

Challenges and Insights:

Rediscovering the basics wasn’t without its challenges. Remembering the correct syntax and best practices took some effort, but it was rewarding to see my skills sharpening. It also highlighted areas where I could improve and learn more.

Conclusion:

Building the Cat Photo App was a fun and effective way to brush up on my HTML skills. FreeCodeCamp’s project-based approach made the learning process engaging and practical. I’m excited to continue my journey and tackle more projects.

What’s Next?

Next, I plan to dive into CSS to style my web pages and make them visually appealing. Stay tuned for my updates and feel free to join me on this learning journey!

Your Thoughts?

If you’re also brushing up on your skills or starting fresh, I’d love to hear about your experiences. Share your thoughts and let’s support each other in this journey.