Tony Ruiz• 55
@tonyruizo
Submitted
Anna
@Anq92
All comments
- Anna• 130
@Anq92
Posted
Hello!
Very nice solution :)
I have few tips:
- you could make the solution more flexible, so the container would be bigger for desktop sizes and smaller for mobile, use max-width, max-height, media-queries or clamp() method for it
- use relative units instead of px wherever you can, using rems makes websites more accessible for users with different browser setups
For reference you can check my solution here
Marked as helpful
1 - Xhan88• 60
@Xhan88
Submitted
ggg
Anna• 130@Anq92
Posted
Hi!
Nice work with the challenge!
There are few things you can improve:
- use max-height and max-width instead of fixed size of main container Check your solution on mobile devices in browser's dev tools - because the element don't change its size part of it goes outside the screen area. There are few other methods to adjust elements for different screen sizes like media-queries or using clamp() method
- I don't know if it was on purpose, but you missed hover effects. If you don't know how to do it check out pseudo-classes
- There is something weird happening with the background image on desktop screen sizes with use of center/cover. It would be better if you used media-queries and switch between desktop image and mobile image.
For reference you can check my solution here
0 - Mauricio• 50
@mau-rocha
Submitted
Anna• 130@Anq92
Posted
Hello,
Nice work with the challenge!
I have few tips:
- use headings <h> in your html, it's important for SEO
- it's good to use rem units also for fonts, margins, etc., because some people might have different setup for font sizes in their browsers and in such case the proportion of some elements will be different, which might not look very good
- it would be better if you used also relative width for main container, because it doesn't look good on smaller screens when the element's borders hit the edge of the screen
- check your solution on screens with smaller height to width ratio, because on some there might be an overflow and "cancel order" goes outside the main container area
You can check my solution of this challenge here
Good luck with the next challenges!
0 - Rida El fagrouch• 10
@ridaelfagrouch
Submitted
Anna• 130@Anq92
Posted
Good job with your first challange!
I have few tips:
- use semantic html elements, there always has to be <main> tag and <h> tag in your code => semantic html
- use "alt" attribute for images, it's important for accessibility, learn about accessibility here
- use rem units instead of px in your CSS => CSS units
The most important thing is that your solution is not responsive, so it doesn't work properly on smaller screens, check it in your browser's dev tools. You can achieve a responsive behaviour by using max-width or max-height instead of width and height or with media queries In my case I wanted to keep the ratio of the main element in this challenge, so I used clamp() method The decision how to do it is yours :)
You can check my solution here
Good luck with the next challenges!
0 - Hardik Rajak• 20
@HardikRajak
Submitted
Your feedback is always welcome. Please provide your views on this solution and feel free to point out any mistakes or improvements that I can make. I just had a few doubts, please answer if you know:-
- how could I add that background shadow?
- how could I make the whole component small to match it the same(I took the same dimensions as instructed).
Anna• 130@Anq92
Posted
Hello!
According to your questions:
- For bg shadow you use box-shadow property box-shadow
- Resizing elements for smaller screens can be done in a flexible way e.g. with clamp() function. You can resize containers, as well as fonts. clamp method You can also use media-queries to switch between different screen sizes media queries
Other things:
-
it's good to use semantic elements like <header> <main> <footer> in your html semantic elements
-
it's better to use rem units than px in CSS => rem units
-
you missed hover effects in your solution, use pseudo-classes for it pseudo-classes
-
don't use fixed dimensions like you did for margin-top in .box selector, because it doesn't look good for smaller screens, use flexbox instead and place the element in the center of the screen. guide to flexbox
Keep good work and good luck with the next challenges!
Marked as helpful
1
