Skip to content
Submitted about 1 year ago

intro section with dropdown navigation + dark mode

KehindeDaniels•90
@KehindeDaniels
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro section with dropdown navigation
  • HTML
  • CSS
  • JS
2junior

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

  • Akanni Emmanuel•20
    @HarkanniPosted about 1 year ago

    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
    KehindeDaniels•90
    @KehindeDanielsPosted about 1 year ago

    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•310
    @Efobi-FrancisPosted about 1 year ago

    @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
    KehindeDaniels•90
    @KehindeDanielsPosted about 1 year ago

    @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•310
    @Efobi-FrancisPosted about 1 year ago

    Nicely done, the dark mode is cool too

    Marked as helpful
    0
    KehindeDaniels•90
    @KehindeDanielsPosted about 1 year ago

    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•310
    @Efobi-FrancisPosted about 1 year ago

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

    1
    KehindeDaniels•90
    @KehindeDanielsPosted about 1 year ago

    @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•310
    @Efobi-FrancisPosted about 1 year ago

    @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

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