Design comparison
Solution retrospective
In this project I had some difficulties with flex box and grid layout since I'm a new in front-end development, but I think I got a basic solution for this challenge. Any advice for improvements will be gratefully acepted.
Community feedback
- @ajduetPosted over 1 year ago
A good little rule I used to help me make a decision on layouts is which axises am I trying to manage. Now I'm not saying this is a hard and fast rule, but he does help for simple layouts. I use flexbox when I want to mange either vertical or horizontal layouts. Think micro-layouts. I use grid when I need to manage vertical and horizontal layout. Think macro-layout. Again this isn't the final ruling because flexbox and grid aren't mutually exclusive and actually work well together.
Marked as helpful1@renanrdsouzaPosted over 1 year ago@ajduet
Thanks, mate! When I was coding this project I got stuck sometimes because I couldn't choose wich one would be better, then a decided to use both and the final result was ok, but I'll remember your advice.
0 - @cuonglyyPosted over 1 year ago
Hello Renan!
Congrats on finishing this challenge! Here are a couple of suggestions I would recommend:
-
Try to use more semantic HTML elements as it does provide accessibility, and convey the structure of your document. In this case, I would change
<section class="main-content">
to<main class="main-content">
, and<div class="attribution">
to<footer class="attribution">
-
I see that you provided many headers which is a great thing! However, there should be at least one
<h1>
as it defines the main idea of the web page. In this case, I would change<h2 class="result-card-title">
to<h1 class="result-card-title">
since the whole idea of this webpage is to display the user's results!
Otherwise, great job!! Happy coding (-:
2@renanrdsouzaPosted over 1 year ago@cuonglyy Hello Cuong!
First of all, thank you so much for your feedback Cuong. I'll make the changes you sugested and your insights will be useful for upcoming challenges :D
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord