@annaindistressSubmitted 7 months ago
P
Mohammed BAHNINI
@mohammedbahniniAll comments
- @mohammedbahniniPosted 7 months ago
You need just an
overflow-x-hiddenon the body otherwise you did a geat job .0 - @LeandroJr730Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of doing "the buttons" using lists because I didn't know how to use lists properly, so it took a long time but it worked. Next time I will try to focus more on selecting the right classes to change the style atributtes, because this is why I took a long time to do the buttons.
What challenges did you encounter, and how did you overcome them?I had to search a lot about lists and inline-blocks because none of these approaches were working the way I wanted. But after some hard time trying different things it finally worked.
What specific areas of your project would you like help with?My code is probably longer than needed and it could be more organized. Some tips would be gratifying. I also need some help with the @media. When I zoom in my "buttons" don't work properly, but I don't know how to fix it.
@mohammedbahniniPosted 7 months agoHi, first of all, congratulations on completing this challenge, I saw your code source and noticed some notes :
- Instead of fixing body height, you can use max-height
- For naming classes, try to use kebab syntax instead of camel case [kebab-syntax]
- For the mainBox use padding to prevent using translateX for items in the list
- Also for the mainBox you can try flex and just give it row-gap for more precise results
Marked as helpful1 - @annaindistressSubmitted 8 months ago
- @jumiranda5Submitted 10 months ago
- @marcfrancissSubmitted 10 months ago
**What did you find difficult while building the project? I find it difficult to set the cellphone between two divs. Also, setting up the twirly background images.
**Which areas of your code are you unsure of? I'm unsure of the approach to make the correct placement of the cellphone and the twirly background patterns.
**Do you have any questions about best practices? Definitely. Please advise on the correct approach on the said cellphone and twirly background patterns. Thank you!
@mohammedbahniniPosted 10 months agoHi there , I like your solution , but there are some notes :
- For the filled button you could initialize it with a border , then i then hover state just change the bg-color to transparent .
- The curved sections in the bottom not that close to the design file , you can check my solution for that .
Marked as helpful1 - @nsimba15Submitted 10 months ago@mohammedbahniniPosted 10 months ago
Hi , your solution looks great , one thing I've noticed it's a little bit broken for tablet target , otherwise , you did a great job .
Marked as helpful1 - @p-tamSubmitted 10 months ago
The challenge was fun and pretty straight forward.
I would say the most challenging part would be getting the hero section's sizing just right. Otherwise, the colour overlay over the footer image was a neat trick to learn as well.
If you have any feedback regarding sizing and making the hero section responsive - let me know!
@mohammedbahniniPosted 10 months agoGreat solution for this challenge, although I noticed remarks you can improve:
- Use footer tag instead of div with class footer.
- The footer is not like the design for desktop version (I guess you just forgot it).
But I liked the way you combine media-queries and images for the hero section, really good idea.
Have a great journey.
0 - @dodrinSubmitted 10 months ago
Hello, I'm a Junior Full Stack Web Developer with a passion for design and front-end development. I used React and Tailwind CSS to get better at them. I appreciate your feedback!
@mohammedbahniniPosted 10 months agoHi, nice result for this challenge, although I have some points you can improve:
- Don't give a max-width to the body, this solution is not great for larger screens, instead you can create a container class and give it max-width and paddings (left and right only).
- To make the text overlap the image you can use position absolute for the text.
- For see all button, you can use an anchor tag or a button and give it the style.
- Instead using two sections for the grid, you can use one section and put the images in a picture tag (this going to help a lot in term of responsiveness).
Marked as helpful0 - @FluffyKasSubmitted about 1 year ago
Hey guys,
Seemingly a simple newbie challenge but along the way I found a lot of little details that proved to be a bit tricky, like the image placement in the hero area or the decorative numbers. It was a lovely design that I really enjoyed working on.
If you see anything out of place or anything I could improve on, don't hesitate to point out (:
Have a great day!
@mohammedbahniniPosted 10 months agoHi, first of all your solution is great, one thing I've noticed, in larger screens the hero section has a too much space between images and text, otherwise your solution is great, especially with the transition effect on scroll down. You can check my solution and give me your feedback, that would be nice from you.
0 - @Kulyk-VolodymyrSubmitted 11 months ago@mohammedbahniniPosted 10 months ago
The most satisfying result, almost perfect.
1 - @codingbearySubmitted over 1 year ago
Please let me know what should I improve :)
@mohammedbahniniPosted over 1 year agoFor the calculate button you need to add a
z-indexto apply the hover effect all over the button , right now its only applying the top half of the button , otherwise the result is great .Marked as helpful1 - @RoanMacmillanSubmitted over 1 year ago
Hey 👋
My first guru project, let me know what you think.
Still feel like there is quite a bit to improve on, especially refactoring the checkout component as it became a bit too long, but for now happy with it as I spent quite a bit longer on this than anticipated.
Any feedback is appreciated!
@mohammedbahniniPosted over 1 year agoHi there , i didn't see your code , but the result is pixel perfect , i have nothing to add .
1
