Hi! It took me longer than I thought. It took me a while to figure out why justify-content wasn't working as expected. It finally worked when I put the height and the width on .card instead of on .container.
Please give feedback on the quality of my codes and the class names and whatever else you can think. It tried to make it as clean as I can and use the DRY method.
Thanks.
Charissa
Good work Charissa,
"It took me longer than I thought." That happen to me too, a much longer on my first solution. On second one, things got easier/faster.
To my beginner eye your code looks great, well organized, easy to read effective code.
Few minor things got my attention, In style.css; line 25, do you need 'border: none;' declaration?
I would consider pseudo classes first- and last-of-type to cards border radius declarations, so you can stack more cards later if you need to. And I think code is a little bit more readable this way. ''' .card:first-of-type { border-radius: 1rem 0 0 1rem; } .card:last-of-type { border-radius: 0 1rem 1rem 0; } '''
I would make sure that the layout looks good in middle screen sizes, like tablets. Now on 768PX view-port "Learn more" buttons come out of their containers. It might help to just set break-point 768 PX and then make sure that the mobile layout looks good until break-point.
Like mentioned before, good work, in any case, and especially for the first solution.
Best wishes Janne
I would be very happy if you could help me with the parts I need to improve. Thank you for your feedback.
Hi Taha, Good work.
You captured design well. Your code is short, effective and easy to read.
Few minor details, I would,
focus more about responsiveness to make sure that the page looks the way I want also between breaking points, for example in tablets.
change class naming convention, more general, "font-700" to "main-weight". If the design is adjusted later, you don't need to change the HTML, just a value in CSS.
keep styling altogether away from HTML, by naming classes about what they are. For example"main-heading. "card-heading" and then style them in CSS, example:
.content,
.rate,
.name {
font-weight: 700;
}
Like mentioned before, these are just minor details. For my eye goof quality code. Keep on coding, you are getting good at this.
Best wishes Janne