Dear All, I would be grateful for any kind of recommendation and feedback.
I have thought that the column with the greatest value could be formatted in Javascript and be dynamic although could not figure it out how.
Thank you Bence
Thank you very much for your valuable feedback, I really appreciate it.
Please i need your review and feedback so that i can know where i can improve on. Thanks
You have forgotten to close the "wrapper" div at the bottom, therefore it also includes the text at the bottom, "coded by ....". You should give padding for the wrapper that restricts the line width for both the title and the description below so that it will have the with as in the image.
Great job, I really like the box-shadow. :)
I would declare a fixed width to the card.
Declaring the card width in percent is using the width of its parent. In this case, the parent of the div class ="card" is the body the width of the body which is the viewport. It causes in this case distortion in different screen sizes.
.card {
width: 300px
}
I hope I could help you with this.
I've started my web developer journey with this 1st project, please review and let me know below
Good practices wrt HTML - I've used semantic tags as much possible. Is this good enough for SEO and accessibility ?
CSS improvements needed - I have always found CSS is difficult to master but I'm slow & steady with my efforts. Please review & let me know good practices, areas of improvement
The semantic tags are great.
Personally, I would not use that many compound selectors in this quite simple layout, instead, I'd use an H1 for the title and a paragraph for the text. In this case, you can declare quite easily the attributes in CSS.
I would use a fixed width for the card and add a wrapper for the card content within the <section class = "qr-code-image-with-info"> with small padding, to solve the issue with the distortion in smaller screen sizes and to have a consistent margin.
<section class = "qr-code-image-with-info">
<div class = "container">
<figure class = "qr_code_image">
...
<section class = "qr_code_info">
...
</div>
</section>
If you follow in this way you only have to set the width of the image to 100% and by not setting height it would not distort the image either.
You do not have to use flexbox to center the card, you can use
.qr-code-image-with-info {
margin: 30vh auto
}
to center it horizontally and also push it away from the top of the screen.
I hope I could help you with my feedback and please let me know if you have any further questions.
Your feedback is highly appreciated
Great job, semantically totally understandable, I really liked that you paid extra attention to the alternative text for the image.
I am not familiar to React and have never used it (currently only using HTML CSS and vanilla JS) but if I were you I would put a max-width on the "stats-card" so that it stops growing until some screen width.
In horizontal mode, the image does not reach to the bottom of the is a small purple line where the image does not reach until the bottom of the container "stats-card-img-container". You can resolve it by setting the height to 100% in the css selector "stats-card-img-container"
A small detail I have also missed in my project is, to set the correct border radiuses of the "stats-card-img-container" and image mobile and in desktop view. (mobile - top right, top-left of the image etc.)
I hope I could help with my input. :)
