@FluffyKas
Posted
Heyo,
Your solution looks really good. I noticed a few small things you could improve:
- Double-check the hover color on the links and buttons, I'm assuming that green colour isn't in the design originally?
- For small transition animations, like the ones you use in the navbar 0.5s is really long. 0.2s or 0.25s is usually more pleasing to the eye.
Your markup could be more semantic:
- You're using a div where you should be using buttons (the div with arrows). Alt texts for these arrows should also be left blank, instead, you could add an aria-label to the buttons with a helper text like "Left" and "Right". Similar goes for the Shop Now button, you should use a link not a p tag.
- The whole page should be wrapped in a main container instead of a section.
- Your nav links should be living in a <nav>, and the list of links should be a <ul> with links inside wrapped in <li> tags.
- There should be a h1 on every page (kinda like a main page title), in this design it would make sense if the "Discover innovative ways to decorate" would be that one.
- Not every image has to live in a figure. I'd really only add a figure if I wanted to add a caption to my image. There might be other use cases but tbh I personally never had to use it before for anything else than adding caption.
You got the looks right, so well done! It's a good idea though to stop sometimes and think about the function of each element on the webpage you're developing. Getting a semantic markup right is just as important as the looks.
@Asifp6021
Posted
Hello, @FluffyKas thank you for your feedback I really appreciate it. I will improve this project. I just started learning about full-stack web technology. By the next time, I will implement Semantic HTML. And while making the project I didn't pay attention to the hover Effects I applied all those effects by myself. I won't make these mistakes again and I will pay attention to each part of the layout. And please also look out for JavaScript code and tell me if is it good or not. is there any improvement that I can make? thank you once again for taking the time to look at the project and write this detailed feedback It is really helpful for me.
@FluffyKas
Posted
@Asif6021 Tbh with the HTML you have right now it's kinda hard to write simple and good JS.
For starters, there is no need for a separate navbar for mobile and desktop. You should just have one navbar and manipulate it with CSS to look different in mobile and desktop. Changing scale on the navbar is not the best idea, I think. You could just use the toggle method to apply or remove a class that adds display: none on it.
As to the image scroll: I haven't done this challenge so I'm unsure what the best method would be but if I had to start it now, maybe I'd use picture element to take care of the different images sources for mobile and desktop. That way, you'd get rid of the repetition of "right", "right__two", "left", "left__two" classes, etc.
Also, your code only takes care of switching between images, the text stays the same. Looking at the design, there are 3 variations for that too.
If I had to just give one piece of advice, it would be this: focus on getting your HTML markup right, it's gonna make your life easier when writing CSS and JS. Maybe do some simpler challenges first where you can focus on this.
@Asifp6021
Posted
@FluffyKas thank you for the advice I should definitely focus on a small project and practice containerization and semantic HTML. and I will work on the navbar to improve it. thank you for your feedback and for your time.
