Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Rating card component

@renanrdsouza

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

@ajduet

Posted

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 helpful

1

@renanrdsouza

Posted

@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
P
Cuong Ly 180

@cuonglyy

Posted

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

@renanrdsouza

Posted

@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 GitHub
Discord logo

Join 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