Benjamin Juarez• 300
@ImBenja
Submitted
P
Guilherme Dias Simões
@gdsimoes
All comments
- P
@gdsimoes
Posted
Your solution looks really good; however, there are some minor inconsistencies with the design:
- The image should have a width of 50% of the entire card.
- The word "CHANEL" is a different color than the rest of the paragraph.
- The button is not aligned with the text above.
If you address these issues, I'm sure your project will be even better!
0 - Munib ahmad• 190
@MunibAhmad-dev
Submitted
What specific areas of your project would you like help with?
For the nutrition section below, I struggled to get it right, and it still isn't that good. Maybe it's because I didn't use a grid. I always use flexbox for everything.
P@gdsimoes
Posted
I don't think Grid would help here. You should have used a table element since this is tabular data. If you need help learning how to style tables I recommend checking out Kevin Powell's video about this topic on YouTube.
Also, have you checked the style guide for the colors? It seems like yours are a bit off.
Marked as helpful
1 - Nikola• 190
@porumbachanov
Submitted
What are you most proud of, and what would you do differently next time?
Nothing in particular, would probably try a smarter way to do the css.
What challenges did you encounter, and how did you overcome them?
It was pretty similar to the Blog preview card.
What specific areas of your project would you like help with?
Maybe a better way to write the responsiveness and css as whole.
P@gdsimoes
Posted
I really enjoyed reviewing your project—it's clear you've put a lot of effort and creativity into it! The overall design is visually appealing, and the functionality seems robust. I do have a few suggestions that could enhance the usability and accessibility of your project even further.
-
Contrast Issue: The contrast in your footer links is currently too low, which may cause accessibility issues for visually impaired users. Consider enhancing the contrast to improve readability.
-
Font Size Units: It's recommended to avoid using pixels for setting font sizes, as this can restrict users who need to adjust font sizes in their browser settings for better readability. Consider using relative units like
emorreminstead. -
Layout Consistency: The spacing between the description and the first button differs from the original design. Adjusting this distance could enhance the visual consistency of your project.
Marked as helpful
1 -
- thebigfatpaanda• 60
@thebigfatpaanda
Submitted
What are you most proud of, and what would you do differently next time?
that is completed the challenge i would try to make the website responsive from the beginning.
What challenges did you encounter, and how did you overcome them?
i faced problems in positioning some of the components and also faced issues in making it responsive
What specific areas of your project would you like help with?
I would like to get help in positioning and responsiveness thankyou.
P@gdsimoes
Posted
Design & Layout:
-
Image Alignment: The main image appears off-center, which affects the visual balance of the page. Consider adjusting the CSS properties like
marginto center the image effectively. -
Card Width: The card is currently too wide.
-
Scrolling Issue: On smaller screens like laptops, it would be better if the entire page fit without needing to scroll. This can be achieved by making sure the card height is equal to the one in the design.
Code Quality:
-
Code Formatting: There are some inconsistencies in your formatting. Tools like
Prettiercan automatically format your code, making it cleaner and more readable. -
Naming Conventions: Using IDs like
div1andimg2can make the code harder to maintain. More descriptive class names would enhance the readability and reusability of your CSS. For example, using.profile-cardinstead of#div1could be more descriptive. -
Use of
<br>: Instead of using<br>tags for adding space, it's better to use CSS properties such asmarginorpadding. This approach is more flexible and keeps your HTML cleaner.
General:
- Your choice of colors and fonts aligns well with the design file, which is a great start! With some adjustments to layout and code structure, your project will be even better.
Marked as helpful
0 -
- P
@gdsimoes
Submitted
What are you most proud of, and what would you do differently next time?
I finished this project a long time ago, so I don't feel particularly proud. Next time I will use Prettier for formatting my code and Josh Comeau's CSS reset instead of the CSS remedy.
What challenges did you encounter, and how did you overcome them?
I don't remember any.
What specific areas of your project would you like help with?
This project for me was mainly about learning the workflow of submitting solutions and so on. I don't think I need any help in this one.
P@gdsimoes
Posted
I don't speak spanish...
0 - Joramir Jr.• 250
@JoramirJr
Submitted
What are you most proud of, and what would you do differently next time?
Well, it was a very simple problem, so I don't think there's much room for improvement. Overall, I'd say that I could keep an eye on accessibility principles, since I'm aware of none of them. I'm not sure if I used the correct HTML semantic tags for the job, so that would, maybe, be something I'd change.
What challenges did you encounter, and how did you overcome them?
None
What specific areas of your project would you like help with?
I used a tag for the bottom text, but I'm not sure if that was a good decision. Also, In order to align the QR code image, I used a wrapping for the job, but probably I could've centered the , in the top section, without using an extra .
P@gdsimoes
Posted
It looks pretty good and if you use the
box-shadowit will look even better!Also, you might consider using a separate CSS file. It won't change the final website but makes for a better developer experience.
2 - Bruno Agazzi• 150
@BrunoAgazzi
Submitted
P@gdsimoes
Posted
Your website looks like the design, but I would like to address a few problems to help you improve it.
I don't know if you are aware, but there is an accessibility report here on Frontend Mentor, and your solution has 13 accessibility issues. So, try to look into that first.
Also, the highlighted day should be today (in my case, a Friday), not Wednesday. To do that, search for the "getDay" function.
When you hover an individual bar, you get the tooltip with the correct amount, but the width of the "bar-container" increases, making the other elements move a little bit. To fix that, you should make the tooltip have the "position" property with the value "absolute." That way, it would not take part in the normal document flow, and your bars would remain static.
Finally, you implemented both the mobile and desktop designs, but as the screen gets larger, the size of your page remains the same. Ideally, it would grow or shrink according to the user's screen.
1 - Lucas Corrêa• 10
@lucasnogueiracorrea
Submitted
P@gdsimoes
Posted
Your solution looks excellent! Just make sure to always look at the accessibility report, and your project will be even better.
Also, if you want to center things, you could make your body element a flexbox. It will also help if you're going to make your website responsive.
And finally, write a README file. It really helps people who run into your project on GitHub.
Marked as helpful
0
