**My HNG Internship Journey: Stage 0 — Building a Responsive Profile Card**

Coding under deadlines, embracing challenges, and why Scrimba made this easy!

The Task: A Responsive Profile Card

For Stage 0 of the HNG Internship, I was tasked with building a responsive profile card using HTML, CSS, and vanilla JavaScript. The requirements were specific:

Required Elements (with data-testid attributes):

• Profile picture (responsive, aspect ratio maintained)
• Full name, job title, short bio (50–100 words)
• Current location, professional email
• Social media links (LinkedIn, GitHub, etc.)
• Dynamically updating UTC time

Acceptance Criteria:

✅ Clean, visually appealing UI/UX

✅ Mobile-responsive design

✅ All elements tagged for testing

✅ UTC time updates on page refresh

See my live demo here: Profile Card Demo

---

Execution & Challenges

While the task seemed straightforward, here’s where things got interesting:

1. Dynamic UTC Time:
   
   Displaying real-time UTC required JavaScript’s Date() object. The catch? Ensuring it updates only on refresh (not live) to meet the task’s criteria.

2. Responsive Image Quirk:
   
   Maintaining aspect ratio while adjusting width/height took trial and error. CSS’s object-fit: contain saved the day!

3. Testing-Ready Structure:
   
   Adding data-testid attributes to every element forced me to think like a tester—valuable for future collaboration.

---

Why This Felt Effortless (Shoutout to Scrimba!)

I owe my smooth execution to Scrimba. Their project-based courses on HTML, CSS, and JS helped me:

• Master responsive design principles
• Write clean, modular JavaScript
• Debug efficiently (no more endless console.log loops!)

This task felt like a Scrimba coding challenge—structured, practical, and confidence-boosting.

---

The Time Crunch

All HNG tasks come with strict deadlines. Stage 0 had a 48-hour window, pushing me to prioritize efficiency without compromising quality. It’s a taste of real-world dev work!

---

What’s Next?

Stage 1 is around the corner, and I’ll share updates here. Follow my journey across platforms:

• X (Twitter): @Toptech5419
• LinkedIn: Toptech5419
• Medium: medium/toptech5419
• GitHub Repo: myHNGInternship-journey

---

Final Thoughts

Stage 0 was a fantastic warm-up. If you’re learning to code, I highly recommend platforms like Scrimba for hands-on practice. Stay tuned for Stage 1—things are about to get even spicier! 🔥

Questions or feedback? Drop a comment below!