Looking for feedback on Technical Documentation Page

Hello everyone!
Thanks a lot for your wonderful feedbacks on my Resturant Landing Page project :innocent:. I have just finished the Technical Documentation Page project and Iโ€™m hoping that you will provide your valuable feedback / suggestions on this too :blush:.

Here is the project link https://codepen.io/joy-dey/full/jOrVZYX

p.s I have added user friendly dark mode :grin:

2 Likes

Hey @iamjoydey. Where is the link to the project???

1 Like

Oops! I forgot to add. :sweat_smile:

1 Like

Very good project @iamjoydey! I like it! But, some suggestions:

  • There is no dark and light mode toggle! Without that, I cannot switch between dark and light mode!
  • Donโ€™t use the @import rules to import Google Fonts. It will reduce the page load time. Add the link tag in the head instead.

Anyway, itโ€™s so cool and I like the way you arranged the layout. I like how you transformed the menu button into a floating button on mobile. I am also wondering how you created that syntax highlighting for the code element (I am planning to do one for mine). Great job!

1 Like

Hey @paulsonstech Thank you a lot for checking out my project. Actually I was trying not to use any javascript on this web design project (as the course only covered html and css) so unfortunately no toggle for dark mode :sweat:
And thanks for the information regarding @import rules. I have updated it.
For the syntax highlighting I actually used span elements :sweat_smile:

1 Like

While doing this project, I remembered your comment on my previous project where you complained regarding the navigation, so I decided to make a floating action button for toggling the menu :innocent:

1 Like

FCC says that you can use JS for completing this project. So, there is no problem in using it. Also, I am wondering how did you make that navigation without JS. I mean, how did you show that nav menu when clicking on that button on mobile without any JS???

1 Like

Wow! That is so cool of you!

1 Like

I used checkbox for opening and closing the menu, as its the same as toggling active class with javascript

1 Like

Hey @iamjoydey!

Again, what a great job! You really know how to create amazing deigns, congrats! :partying_face: :partying_face:

The only thing that I would change is the scroll bar, I would put it only in the main element and in the menu, I did this inserting this lines in the end of your CSS:

main{
  margin-top: 70px;
  overflow: scroll;
  height: 1vh; /*??????*/
}

Hi, what is webkit? Iโ€™ve never used it in my code and never bothered to learn it. But I am curious.

1 Like

@miriam098 itโ€™s a vendor prefix