Internship Week 7

Week 7 (27/10/2024 - 02/11/2024)

🌟 Introduction

Welcome, everyone! It’s the seventh week of my internship at iBEST Institute. My friend and I have completed the desktop version of the iBEST Institute website using Next.js and Tailwind CSS. The website was initially responsive, as Tailwind CSS uses responsive measurement units like rem, em, vh, vw, etc. However, we want it to look perfect across all devices, so we started refining the responsiveness for mobile, tablet, and desktop views.

---

🚀 Highlights

1. Completed the iBEST Institute website for desktop.
2. Started optimizing the website’s responsiveness by analyzing key breakpoints.
3. Created a custom navbar that appears at the bottom of the screen when the website is viewed on mobile devices.
4. Implemented a grid layout to enhance responsiveness.

---

📚 Learning Experience

1. We made the mistake of designing the desktop view first and then trying to make it responsive for mobile and tablet. We realized it would have been more efficient to start with a mobile-first approach.
2. Gained an understanding of crucial breakpoints for mobile and tablet views.
3. Developed the mobile view, identified the tablet breakpoint, and then designed the tablet view accordingly.

---

💡 Industry Insights

1. Responsive Design: A responsive design adapts to the user’s screen size, ensuring the website looks good on all devices, including desktops, laptops, tablets, and smartphones.
2. Breakpoints: Breakpoints are specific points where a website’s layout changes to accommodate different screen sizes, ensuring an optimal appearance on any device.

---

⚠️ Challenges

1. Determining how to make the website responsive after starting with the desktop view.
2. Adding a custom navbar for mobile view.
3. Implementing a grid layout for mobile view.

---

🎯 Next Week’s Plan

1. Finalize the website’s responsiveness for mobile and tablet views.
2. Deploy the website on free platforms like Render and Netlify, and refine it to make it visually appealing.