@Sahitya2006Submitted over 2 years ago
Order summary component card HTML AND CSS #Likes and comments welcome
Hamza-Noah
@Hamza-NoahAll comments
- @Hamza-NoahPosted over 2 years ago
Hey,
let me give you feedback on the things I see you need to edit:
1- I see that you have not added the curve background to the body so make sure you add it and customise it in different screen sizes until you make it identical to the design on all screens
2- there is this content --> at the bottom of the page so make sure next time you do not have any content that doesn't proper the project
3- I have checked the HTML code and there is a comment that has no benefit to the project I mean it doesn't describe anything so why you did keep it make sure you remove it and only use comments when you need them
4- for the footer there isn't any need to use the footer in this small tiny project
5- and most importantly do not use an internal stylesheet you should create another file and put all the CSS code in it make sure always to isolate the CSS code in a specific file to make the project structure organized and structured correctly
I hope those tips will help you make this project and all the next projects created and structured in the right way!
Good Job
0 - @kjdeepakSubmitted over 2 years ago
Open for feedback.
@Hamza-NoahPosted over 2 years agoHey this looks nice you just need to do simple edits on the design
increase the size of the card until you make it identical to the design increase the border radius on the left side of the card
try to increase the padding between the numbers and the text below it increase the line-height of the paragraphHope this will help
Marked as helpful0 - @Sh0lexSubmitted over 2 years ago
An huge improvement in retrospect to my first challenge. Reviews are appreciated.
@Hamza-NoahPosted over 2 years agoHello
here is my feedback on your solution first, increase the padding around the content of the card. second, try to increase the border radius of the image and the card itself. and for the last thing to edit in the design the challenge by front end mentor should be at the bottom of the page.
after that check the report and follow the steps one by one until you have 0 issues. hope that helps
Marked as helpful0 - @rabbanisanSubmitted over 2 years ago@Hamza-NoahPosted over 2 years ago
Hello
let me give you my feedback
The first thing I have noticed is that you have not to use the right background if you could not find it as I guess it exists in the images file to replace this irrelevant background. increase the height and width of the card to make it identical to the design. increase the border radius of the card and use a box shadow for the card to try to make it as close as possible to the design.
finally move to the report and check it one by one and fix all the accessibility issues and the HTML issues until you have a clear report.
hope that helps
Marked as helpful1 - @ndrewpachecoSubmitted over 2 years ago@Hamza-NoahPosted over 2 years ago
Hey first of all, check the report and follow the steps until you have 0 issues. for the design try to decrease the space after the head of the card. decrease the size of the size of 3 days left to make the font bold on ETH and finally decrease the size of the image and write the full name I see you missed the last name
good job
Marked as helpful1 - @tedaussie75Submitted over 2 years ago@Hamza-NoahPosted over 2 years ago
Hey
your design looks great you just need to add some edits to make it pixel perfect first, decrease the padding around the info just a little bit. you need to decrease the line height to make it identical to the design. increase the font size for the numbers and decrease the space between them. and finally, check the report and follow the steps one by one until you make you have zero issues
Marked as helpful0 - @asimsajjad-devSubmitted over 2 years ago
active state is applied check the effect by pressing on image and all other places
@Hamza-NoahPosted over 2 years agoHey
check the report and follow the steps one by one until you have zero accessibility issue
increase the width of the card a little bit and decrease the height of the card until you make it accurate with the design decrease the size of the eth and 3 days make the image centered vertically with the design move the challenge to the bottom of the page outside of the card
0 - @mattmarz1Submitted over 2 years ago@Hamza-NoahPosted over 2 years ago
First of all, you have one accessibility issue in your report check it and follow the steps to remove the issue to get rid of it wrap the HTML content in <main> tag
decrease the height of the card a little bit until you make it identical with the design and for the image use the right color to overlay the color exists in the README file
use the right font size for the numbers
hope this was helpful
good job
Marked as helpful0 - @FelipeFamaSubmitted over 2 years ago@Hamza-NoahPosted over 2 years ago
Hey
try to increase the width of the card to make it identical to the design
increase the horizontal and vertical padding for the info
for the feature below make the text uppercase
and use the right color to overlay on the image
this will make your solution more appropriate to the design
hope this will help
Marked as helpful0 - @LuisRodriguez98Submitted over 2 years ago
Good project, enjoyed it very much. Thanks for the tips.
@Hamza-NoahPosted over 2 years agoIncrease the width and height of the card until you make it identical with the design To get rid of the accessibility/HTML issues shown in your Report:
check the report and follow the steps one by one until you have zero accessibility issues. wrap everything in your body in <main> or use semantic tags or give role=" to the direct children of your <body>
have at least one <h1> in your code Good job!
0 - @TatianarangocSubmitted over 2 years ago
Feedback welcome, I need and want to improve my knowledge
@Hamza-NoahPosted over 2 years agothere is a problem with the sizes you are using. do not use container give the body height of 100vh and centre the card using flexbox do not use margin 300 to centre it check the report in the accessibility issue and follow the steps one by one so until you have 0 accessibility issues
hope this will be helpful
Marked as helpful0 - @IzzyDoesSubmitted over 2 years ago@Hamza-NoahPosted over 2 years ago
To get rid of the accessibility/HTML issues shown in your Report:
wrap everything in your body in <main> or use or give role="" to the direct children of your <body> have at least one <h1> in your code and check the report every time you upload a new solution for any challenge and follow the steps to have 0 accessibility issues
hope this will be helpful
0
