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 + dark mode

P

@KehindeDaniels

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


WOW I added a little extra (dark mode and light mode) I used CSS only for all, as I have not started my JS journey

I had though time with the css selectors, seeing that no JS was involved

One question

when building a responsive bar for both web and mobile, with the aim of the mobile nav to be a slide at the right side of the screen, do you create 2 html structure for both web and mobile, or you use one for both

Actually, i used one, but the tweaking was too much, such that I had to change from flex to fixed. I felt it was over done

Thank you for your suggestion

Community feedback

@Harkanni

Posted

No you don't write separate HTML for web and mobile, that is an archaic practice. and also quite costly.

You use Media queries instead. Media queries contains CSS styles for what happens at a particular viewport.

It's a very fine website.

Marked as helpful

0

P

@KehindeDaniels

Posted

Hi @Harkanni

Thanks for your response

I meant for the header itself, I saw someone write a different html for the header,

Since it's consisting if just logo and links, is it a "cleaner" practice

0

@Efobi-Francis

Posted

@KehindeDaniels in my opinion, using css frameworks such as Tailwind saves you a lot of troubles also you can easily style for desktop and mobile views in a single file using the hidden or display property when needed

Marked as helpful

0
P

@KehindeDaniels

Posted

@Efobi-Francis , I'm just about to pick up tailwindcss, I can't wait to see how it will ease responsive layout...

0

@Efobi-Francis

Posted

Nicely done, the dark mode is cool too

Marked as helpful

0

P

@KehindeDaniels

Posted

Hi,

Thank you for your feedback @Efobi-Francis,

I used only CSS and spent too much time (though I was just trying to master CSS selectors), and it is because I've not started JS learning at all.

1

@Efobi-Francis

Posted

@KehindeDaniels i'm learning using react currently, so i decided to start with this project

1
P

@KehindeDaniels

Posted

@Efobi-Francis that's good, my learning map has not gotten there yet🥲, but soon

By the way, do you advice someone going straight to these frame work (react specifically) instead of JS first

0

@Efobi-Francis

Posted

@KehindeDaniels first you need to understand the core concepts in javascript, then try doing few projects to implement those concepts. after that head over to learning react.

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