Known issue: the menu is not hidden after clicking on the links. You have to close it with the icon.
I could not solve this only with HTML / CSS. Does anyone know if it is possible (with pure HTML / CSS)?
I know that with JS it is possible, but I don’t want to add js until I study it.
I would appreciate your feedback, especially if you find any error or aspect to improve.
I like the fact you are giving the “table of contents” makes it easier to find parts of css.
The class names seem to be readable. One thing that I would improve is make sure that section class name is not the same as id of a element inside it. I.E and .
Checkout BEM if you have not yet read on it: http://getbem.com/introduction/
Regarding your question
With js it is quite easy to do.
Check this out:
// 1. Find the navbar
const navBar = document.querySelector('.nav');
// 2. Run when navbar is clicked
// 3. Find the checked button
const navButton = document.querySelector('.nav-btn');
// 4. Change the hamburger to not checked to close the menu
navButton.checked = false;
Hey @MartaFagundez! Love your project.
I am a complete begginer, so I’m sorry if the next question is stupid in any way.
I really like the cactus and succulents icons you’ve provided. Have you created them yourself? Or is there a place on the internet for this kind of icons? Good job with the product page. Keep up the good work.
Hi @Wallachian! Thanks for your feedback
For the succulent icons, what I did was to download the free vector drawings from Freepik and then I edited them in Illustrator to change the color and add the green circle.
@DawidGaleziewski solution will work, but the navbar will be closed if you click anywhere within it, adding the event listener to the links themselves solves this. Also I do agree with him that BEM is worth checking, it will be specially useful if you learn SASS.
A couple of suggestions:
The way the hamburger button is set makes it only work if you click only the lines themselves, which can be frustrating for the user. After a quick glance at the code I saw you used an approach I didn’t really expect. I don’t really do navbar toggling with CSS, but if I remember correctly, the usual approach was creating a checkbox, setting it’s opacity to 0, then designing the hamburger button on top of it. Just letting you now in case you want to dig further in this, but again, this is just me being picky.
Why not adding smooth scrolling?
If I had to be picky (again), the video looks a bit ‘off’ to me, I think adding some shadow, a bottom border (like a stand maybe) in that green color used through the page would make it blend perfectly. Just my two cents.
But overall, if I were a recruiter, I would probably hire you on the spot seeing the rest of your projects. Keep it up!
Hi @Stahlone! Thank you very much for the time you have invested in your detailed feedback, I appreciate it very much.
I’m glad you liked the design!
When I carry out an FCC project, my goal is to create it as if it were for a real client (within my current possibilities and limitations). With that idea in mind the design is, in my case - at least - 50% of the work.
I know that I could move faster on my certifications if I only focused on the code, but as I see it, doing it as I do prepares me better for the real world of work.
If I later work as a freelance, I will feel more able to define what I can do and how much time / effort it will cost me (therefore, how much I would like to charge ).
If I find work as part of a team, where a designer is in charge of design, then I will find myself better prepared to understand their ideas and eventually be able to have constructive discussions when necessary. Because one thing is the possibilities of a design environment and another quite different what is possible and desirable in a web environment (considering responsiveness, accessibility, etc. ).
With regard to your suggestions, I thank you very much and I will consider them after I finish the technical documentation project, which I am currently working on.
Wow Marta! Your design is very good and clean! Well done!
Regarding the issue of the links, sounds to me that colsing the menu requires listening to a click event anyway, so I’m not sure this is achievable with pure HTML & CSS.
I think it’s possible to make the menu appear and disappear once you click a link by using the :hover CSS pseudoclass. I tried something similar using a tutorial from another website but I have not tested it on a mobile device. I am not sure I understood it myself so I won’t venture to explain, but it can be found online (not sure if we’re allowed to link to other resources apart from FCC).
It’s an awesome design by the way. Love the minimalist and professional look!