Hi coders, I hope you're doing well, I've just finished this challenge using a simple library I created myself to help me build up projects in a faster way using some sass. Iv' tested it in two challenges and it's really amazing, I am so proud of the result I came up with, any feedback will be highly appreciated.
mohammed bentalb
@MohammedBentalbAll comments
- @mohammedbahniniSubmitted 9 months ago@MohammedBentalbPosted 9 months ago
It looks great, yet, the
top-right
image in the header is causing anoverflow
when resizing the browser or switching to mobile screens.Marked as helpful0 - @rajjubajraSubmitted 12 months ago
I've implemented the Product Cart functionality using Redux Toolkit for state management and styled it with Tailwind CSS. Please take a look and share your feedback.
@MohammedBentalbPosted 12 months agoHello Bajrard, the website does indeed work smoothly. Yet, sticking to the design would be a huge benefit too since it's the first thing that a user deals with, I recommend :
- fixing container width
(it holds the entire screen , imagine having ultra-wide screen, you need to set a limit*)
- fix elements width
(they also stretch as the container stretch to the edges)
- stop consoling data to the console
Other than that, u may need to start tweaking CSS
Marked as helpful1 - fixing container width
- @ProfessormoodSubmitted 12 months ago
still learning
@MohammedBentalbPosted 12 months agohello Santosh, hope you're doing well.
the design is impressive, yet consider to have a max-width on the container since the layout keeps stretching to the end of screen edges , maybe 1440 would be good
cheers
Marked as helpful0 - @HiQendresaSubmitted 12 months ago@MohammedBentalbPosted 12 months ago
hello Qendresa, I do like how your projects are getting better and better, and closer to the design and some even match great but u need to know that the design is not responsive (centered) on devices that are bigger than 1440px,
(most of your projects)
, most because (as I saw in some projects) mostly because you define the body to be max-width of 1440px and that's unadvisablehere are better ways to handle it :
- set the container
not the body
to a max-width of 1440pxand center it using either grid or flex
(flex is easier)or simply by using margin on elements
(it depends on how the elements are styled )`.
if you happen to be working on a device with a screen < 1440px you can still preview other sizes by devTools , and try extra wide dimensions to see the project's look.
cheers
Marked as helpful0 - set the container
- @faizal789Submitted 12 months ago
how can i improve
@MohammedBentalbPosted 12 months agoHello!!, consider having a look at x-sm screens like galaxy z-flod (270px wide u will see it in dev tools ) other than that it looks cool, well done
0 - @MosesElite69Submitted 12 months ago
1 - I'm not sure if using div within each other was smart, so let me know if there was better option.
2 - I'm not sure how to avoid the QR code from clipping outside the div, so let me know please.
3 - Suggest how to improve as this is my first project :)
@MohammedBentalbPosted 12 months agoHello Elliot, hope you're doing well, as this project isn't that much to show your weaknesses, It's obvious that only the shape matches the design. I'm just an intermediate dev, yet I would encourage you to stick as much as you can to the design and look up for things that u couldn't do/handle (some good ones for CSS and HTML u can look for
Kevin Powell
,web dev simplified
anddevelopedbyed
) (those have some friendly beginning videos)- use section instead of the first div since it has better semantic meaning and because the QR card is the only element there.
- not quite sure what do u mean but u can look up
aspect-ratio
in CSS for images, and try to not define its width in CSS unless u have to and let it depend on the width of the outer container while having a padding in the inside. - try not to lock yourself in tutorial hell and build projects as you are learning not until u think u have learned everything
(take this only as reference
(maybe what I said wouldn't match your way of building things or maybe not perfect enough)
as even I need to keep learning then ) have a good oneMarked as helpful0 - @Big-NaseerSubmitted about 1 year ago
Someone should please help me inspect my code.
@MohammedBentalbPosted about 1 year agoNice work, yet it could be better here are some notes that you may take into consideration:
- Responsiveness: the break point where the layout gets back to its original state can still be made responsive consider adding more break points.
- Container width: in this case not defining the height of the container could be the best choice since (let it for grid) because the height of the cards vary and not stable/unified.
- fonts: the main goal here is to make the layout responsive, but tweaking the fonts a bit would help you have a better view of the items
Marked as helpful1 - @Posedion1920Submitted about 1 year ago
how do you limit paragraphs character width
the picture is buggy or something. i can see the picture in live server but wont show up when i run the html file
@MohammedBentalbPosted about 1 year agoconsider using ch or target your width using a container width or maybe check the usage of clamp() (CSS ) (it's a cool property)
0