Latest solutions
Body Mass Index calculator built with React, Next.js and Vitest
#next#react#vitestSubmitted 12 months agoI would appreciate feedback on a few specific areas:
-
Accessibility: While I’ve implemented a
VisuallyHidden
component and followed best practices, I’m eager to know if there are any overlooked aspects of accessibility that could be improved, especially in more complex use cases. -
Testing Strategy: I’ve started using Vitest for testing, but I’m interested in learning more about how I can expand my test coverage and improve the effectiveness of my tests. Any advice on advanced testing techniques or best practices would be highly valuable.
-
CSS Optimization: I’ve made some strides in optimizing my CSS, but I’m open to suggestions on how to further refine it, particularly in terms of maintainability and scalability for larger projects.
Feedback in these areas would help me continue to grow and ensure my future projects are even more polished.
-
Simple solution with highly optimized fonts
Submitted about 1 year agoI would love to get some tips on how to improve accessibility.
Simple solution using variable fonts
#accessibilitySubmitted about 1 year agoThe font rendering on Figma was slightly different than the one on the browsers. Can I do something about this?
Simple solution using CSS Flexbox
Submitted about 1 year agoThis project is very simple so I am more interested in some opinions about how I organized my CSS code.
Minimalist solution
Submitted over 1 year agoI feel like my CSS code is too verbose. I would love some suggestions to make my code more concise.
Latest comments
- @ImBenja@gdsimoes
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!
- @MunibAhmad-devWhat 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.
@gdsimoesI 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 - @porumbachanovWhat 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.
@gdsimoesI 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
em
orrem
instead. -
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 -
- @thebigfatpaandaWhat 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.
@gdsimoesDesign & Layout:
-
Image Alignment: The main image appears off-center, which affects the visual balance of the page. Consider adjusting the CSS properties like
margin
to 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
Prettier
can automatically format your code, making it cleaner and more readable. -
Naming Conventions: Using IDs like
div1
andimg2
can make the code harder to maintain. More descriptive class names would enhance the readability and reusability of your CSS. For example, using.profile-card
instead of#div1
could be more descriptive. -
Use of
<br>
: Instead of using<br>
tags for adding space, it's better to use CSS properties such asmargin
orpadding
. 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 -
- @gdsimoesWhat 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.
@gdsimoesI don't speak spanish...
- @JoramirJrWhat 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 .
@gdsimoesIt looks pretty good and if you use the
box-shadow
it 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.