How accurate was I compared to the design? Is there any issue you see with the way I used flexbox?
Hesam
@hesam-fattahiAll comments
- @dxiDavidSubmitted almost 2 years ago@hesam-fattahiPosted almost 2 years ago
Hey there!π Good job on finishing the challenge .
Here are some tips to improve your code:
-
Your component should be wrapped with
main
element. -
And for other elements like headings and paragraphs, there is no need to wrap them around div.
-
You can use
picture
andsource
for you image, which doesn't need a media query in CSS for changing images. More info on MDN. -
For accessibility reasons, the
img
alt text shouldn't be empty. It should describe the image. -
You might wanna add to the media query's viewport since there are many phones with viewports larger than 375px, therefore the
flex-direction
doesn't change to column and the component won't look good on phones with bigger screens.
If you need further clarification l, I would be happy to help.
Happy coding :)
Marked as helpful0 -
- @isamardzijaSubmitted almost 2 years ago
- Background images aren't blending over eachother properly
- Layout feels wonky, need to rework it in the future
@hesam-fattahiPosted almost 2 years agoHey thereπ Good job!
Β
- For background patterns, Instead of using keyword values for your
background-position
, you can use percentages for the X and Y coordinates. Play with the numbers to get as close as possible to the design. More info on MDN.
Β
- You should also add
background-repeat
and set it tono-repeat
.
Β
- The profile picture, due to accessibility reasons, should have
alt
attribute. It should describe what the image is. More info on W3.
Good luck.
0 - @kleeblattdevSubmitted almost 2 years ago
I did the challenge to get the grip of a responsive design.
@hesam-fattahiPosted almost 2 years agoHey there!π
- For the
border-radius
to work, you must addoverflow: hidden;
to yourarticle
.
Good luck on your future projects.
Marked as helpful0 - For the
- @hesam-fattahiSubmitted almost 2 years ago
This is my first mobile-firstπ± solution.
Any comments are greatly appreciated.
@hesam-fattahiPosted almost 2 years agoThere is a problem when I test it on my phone. The "container" seems to have 0 padding on the right. Does anybody else have this problem?
When I inspect it on the laptop, even with smaller viewports, there is no problem.
0 - @gomes-leonardoSubmitted almost 2 years ago
Guys, I hope you're doing well! In this challenge I couldn't fulfill the background image, someone to help me? Other than that, I completed the challenge
@hesam-fattahiPosted almost 2 years agoHey there π Nice work!
-
For the circles on the background, you can put the two
img
elements outside the card component and use absolute positioning. -
Also, the card component should be a
main
element. Usingdiv
is bad practice.
Happy coding :)
0 -
- @mteusbarbosaSubmitted almost 2 years ago
I had a lot of difficult to implement the responsive layout to this challenge, it works fine on specific 375px and 1440px, but not well between those ranges. Anyone have a good guide about responsive layout to help me?
@hesam-fattahiPosted almost 2 years agoHello there!π Congratulations on finishing this challenge.
- You can make your component responsive only by using grid or flexbox and avoid using media queries.
Using
flex-wrap
andflex
, If you want to use flex. More info: flex-wrap.Using
auto-fit
andminmax()
, If you want to use grid. More info: responsive-grid.- Also in
picture
element, you can usesource
so that you don't have to write anything on CSS and adding media query to change the image.
More info on MDN.
If you need further clarification, feel free to reach out to me.
Keep up the good work.
Marked as helpful1 - @Fathima-NuhaSubmitted almost 2 years ago
I've used the most updated knowledge I have learned so far! More to go! Have used flex, Do update me about places I could have used grid.
- @EduardIonescuSubmitted almost 2 years ago
I wanted a challenge so I remade the whole html using JS.
My question is, for the 'PERFUME' text, which tag should I use? Since I can't use an h2 tag above an h1 tag, so is a 'p' tag fine?
Thanks!