Submitted 12 months ago

Responsive Project Tracking Homepage with Navigation Toggle Button

bem, vite

Tharun Raj•1,330

@Code-Beaker

A solution to the Project tracking intro component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of completing my 9th Junior project!

Built-with:

HTML
CSS
JS
Vite

This one seemed easy when looking at the design files. But actually, it is a little confusing when it comes to making the image responsive. I gave the image a position: absolute;. This made it harder to make it responsive. So, I had to make it a position: relative; on mobile phones.

In this project, I used CSS grid and flex to achieve the result along with ::after, ::before pseudo-elements. I have locally hosted the fonts with woff, woff2 formats to improve the site's performance.

Getting the navigation bar responsive was easy by using an addEventListener on the toggle button and a classList.toggle() on the menu.

Overall, I really enjoyed making this. Really interesting and helped me improve my CSS grid and flex skills! 🎉

What challenges did you encounter, and how did you overcome them?

I had difficulties making the image responsive. Mainly because of position: absolute property. Then I had to change it to relative on mobile phones so that it doesn't break. It might not look that close to the design.

What specific areas of your project would you like help with?

I would like to know how it looks on your devices and how I can improve my solution.

Note: I have used Vite to bundle my source files using npm run build. So the code might have readability issues. To view the original code, please follow this link.

Any suggestions are welcome! 😊

Code

Please log in to post a comment

Community feedback

P
Rupali•880
@rupali317
Posted 12 months ago
Hello @Code-Beaker

Congrats on completing your 9th Junior project. Keep up the good work.

I checked on my mobile and it looks great.

However, when I used my MacOS, Chrome with a screen resolution of 1680 X 1050 to test your site, I noticed that your content occupies the top 50% of my screen and the rest of the bottom 50% is just white space. I wanted to share the screenshot but I am unable to do so via this comment box. I hope I described what I saw on my MacOS.

To fix the above issue, perhaps you can add the following styles to your main tag:
```
main {
  display: flex;
  min-height: 100vh;
}
```
The above will at least ensure that the content is vertically center aligned in a bigger screen.

Another feedback is you can consider adding a "skip to main content" link to enhance your accessibility. There are keyboard users, who would want to access the main content of your site without having to go through all the navigation links in your header via TAB key. This "skip to main content" link will only appear on pressing the TAB key.

Let me know if the above suggestions help improve your solution.
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord