I'm proud of the fact that i was able to reproduce the output to the closest
What challenges did you encounter, and how did you overcome them?I had challenges with the width and the background colour
Congrats on completing the challenge, hurray!
Some suggestions
CSS
You have used internal CSS using the styles tag. It works for simple projects but as you do more complex projects it may seem like your code is too cluttering. Using external CSS and using the link tag to connect it to HTML can make your code look more modular.
<fieldset>
You have used this tag as the parent to all other tag in the card. Technically there is nothing wrong and it works, but I believe that it is generally used in form tag. If you want to group things as such you may use other tags like <main>, <section>, <article>.
About centering
I think your code went hay-wire in this matter.
in the class field2:
remove margin-top: 1%; margin-left: 32%;
to position this container in the center of the page there are few techniques there is one:
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
set these styles to your field2 class.
and change this
padding-left: 0px;
to padding:10px; this would be better
for the img:
margin-right: 5px;
margin-left: 7px;
remove both, I think you did this through trial and error and found this to be pleasing.
There may be error in my code too. please correct me if I am wrong. I am too a learner in this matter.
Congrats on completing the challenge!
Responsive
You used a fixed width for the preview card which is good enough for simple projects like these. Complex projects might require media queries. Your code is pretty responsive ig.
Semantics
Your use of elements like figure, article and main are really good choices for semantics of the page. Really good.
Re-usability
I found that your code uses variables and common class names.
centering techniques
you used the display:flex technique to center the all the stuff, pretty neat.
I gotta admit you did a great job. I got to learn a lot reviewing your code, Thanks!
You have done a great job completing this task. Congrats!
Padding:
The container had the padding-top set to 1% and the left and right padding is done by the image width:90% which can change with different screen sizes. This makes the padding inconsistent. I would suggest of giving a padding: 16px 16px 40px 16px for the container since that is what can be inferred from the Figma file.
Semantics
The element of the class container could have been given the <main> instead of a generic <div>. This adds extra meaning for the code and help the users with accessibility features like screen readers.
These are my suggestions feel free to correct me if I am wrong
Just testing my front-end skills...
What challenges did you encounter, and how did you overcome them?It was simple and easy...
What specific areas of your project would you like help with?Feedback and code review is appreciated....
overall review
I am no one to comment on your code, am writing this coz the learning path forces me to.
Your code looks really good, way better than mine.
Semantic HTML
Your solution could be further improved by incorporating semantic HTML elements. For instance, instead of using a generic <div> for the element with the class container, a <main> tag would provide additional context and meaning. Semantic tags like <main>, <header>, and <section> enhance the readability of the code, improve accessibility for screen readers, and help search engines better understand the structure of your webpage.
Responsiveness
Your website demonstrates excellent responsiveness, and the implementation of media queries is commendable.
