Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro section with dropdown navigation

#sass/scss
Lahiru Shiran• 100

@lahirusb97

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


please check my code and give me a feedback i will do the same for your project don't forget to comment your project link

Community feedback

P
Harm Intemann• 590

@ghintema

Posted

Hi Lahiru,

I reviewed your solution and would like to give you some feedback. What rises most my curiosity is this: Why building two different <nav></nav> areas in html?? You have one for desktop and an extra-one for the slidebar. Don't you think it would have been better using only one for both devices?

When sliding the viewport from small to large to x-large, you put the extra available space in the center of the design, seperating the two main columns. I personally think it's better to keep the layout and item-distances constant and put extra white-space left and right of the design instead. What do you think about the idea? Furthermore, the different adaptions from mobile to desktop (for example change of picture, letter-sizing, layout-changes...) aren't really synchronized. For example at viewport=900px you see the mobile-one-column-layout in combination with the large desktop-picture. You could think that both of these things aren't really an issue, as you usually don't slide your viewports and you only use one fix device at a time. But things really get irritating (if not annoying) when you start zooming in and out of the page. That's when you notice all these things. My proposal: Make one complete change from mobile to tablet to desktop, once there is enough space available.

I hope this feedback helps you! That's really all I want to do! If you have further questions on my comment, don't hesitate to ask them. And here is my solution to this challenge. Fell free to test and comment it as well. :) Cheers, Harm

https://www.frontendmentor.io/solutions/introsectionwithdropdownnavigation-fully-css-no-js-qPsLKPlTKg

Marked as helpful

0

@Enmanuel-Otero-Montano

Posted

Hello Lahiru! Congratulations for your solution.

A bit of design is lost with a screen width less than 325px, I know that today there are few cell phones with those measurements, but just in case I recommend that you design for screens up to 315px at least. The "learn more" button is placed below the logos from 900px wide to 1300px approximately, you must fix that. On the other hand, I see that in the HTML you have two ul with the "features" class and I understand that one is for mobile and the other for desktop, that is not correct, you must implement only one and with CSS you adjust it according to the width of the screen.

I leave you the link to my solution as you requested, although it is made with Angular.

Solution

Cheers!🦾🦾🦾

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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