Submitted 6 months ago

Responsive Project Tracking Homepage with Navigation Toggle Button

Tharun Raj•1,330

@Code-Beaker

Preview site View code

This is a solution for...Project tracking intro component

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

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! 😊

Community feedback

Rupali•780
@rupali317Posted 6 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
1
Tharun Raj•1,330
@Code-BeakerPosted 6 months ago
Hi there @rupali317!

Thank you for reviewing my solution and sharing your valuable feedback. I will try my best to fix the height issue and add the "skip to main content" link! This is actually the first time I'm attempting to create this link. I don't know if it's going to work as expected. It would be really helpful if you could review my code and
0
Rupali•780
@rupali317Posted 6 months ago
@Code-Beaker It is my pleasure. If you need inspiration on how to do the "skip to main content", you can refer to my solution for another challenge. Also refer to the live URL for the challenge. When you press on TAB key, you will notice the "skip to main content" showing up
1

Please log in to post a comment

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