React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none.
What specific areas of your project would you like help with?Any feedback is welcome!
I would like to see how others implemented the radio buttons while maintaining full keyboard functionality.
Also, I would like to understand better why the colors I copy from the style guide file different from those that they appear in the Figma design. It's a bit annoying, but I am sure it is my ignorance in the usage of the tools. Please help :-)
I kindly request some help in achieving full fluid/responsive layout without any kind of query (being @container or @media).
I would like to see the minimal skeleton necessary (without negative margins, relative positioning) what maintains the current design, but as we move from 320px to 2000px of viewport's width, the elements position themselves and preserve their maximum design's width.
Thank you!
I would like help in two areas:
The hero image/s without using the translate function. I still did NOT find a way to replicate the design responsively. I managed to offset it a bit with position: relative
and a negative value
but it's not as fluid as I wanted.
The image background in the footer blended with some color: I used an overlay with a fill color, but can we also use gradients?
The contrast ratio of the colors provided in the design it often does NOT pass WCAG 2 AA requirements. I have a problem with this and I think that maybe I am not understanding how to read the design documents.
Thank you for any help.
I would like more help in understanding better the style guides.
What do you guys suggest to place the image? Is it better to use only the picture
tag and forget 15+ years old browser?
React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none.
What specific areas of your project would you like help with?Any feedback is welcome!
Congratulations on your solution. I liked because it was readable, even though I am not familiar with Tailwind, I could "deduce" the meaning of the class names.
Obviously this challenge is a component, so I doubt it would exist on its own, hence I am not sure it's too important to make a comment on the use of "landmark" elements.
Thank you for sharing this solution, I learned a bit more about Next.js
I am proud to have managed to complete the project alone.
What challenges did you encounter, and how did you overcome them?I had difficulty with the footer background image and in the first section of the page, but with a little research I was able to resolve it.
What specific areas of your project would you like help with?I would like help with the top of the page, I believe there may be a better way to do this section! Any feedback is welcome
Awesome! You got the solution using very minimal and clean CSS!
Congratulations to you.
I very much liked your usage of flex.
Congratulations on completing this challenge! It's always hard to get to the end of any project, and you did it!
On the accessibility front, I recommend using at least one main landmark element, like a main
tag, as well as a header
which you can then visually hide.
I liked your usage of the grid-area
. Any reason why you used ordinal numbers for the grid-area
(first, second, third, etc.) and cardinal number for the class names of the cards (card1, card2, card3, etc.)?
Very well done!
Congratulations on completing this challenge.
You used semantic HTML.
It is accessible even though I would not skip heading levels and use h2
for the cards' titles. I liked the structure of your code and the usage of float: right
to position to the icons, cool idea.
The only issue I found is with the screen widths between 700px and 1200px: the translationY value causes two of the feature cards to be staggered incorrectly.
Congratulations on your solution!
I liked your usage of the picture
element and the naming convention for the CSS classes.
Thank you for the ideas.
I'm finally getting the hang of using CSS's ability to do variables, pseudo-selectors, and nested rules.
What challenges did you encounter, and how did you overcome them?I had some issues getting the image and article sections to visually look like the design file. This was my first mobile-first approach project.
What specific areas of your project would you like help with?Would love feedback on my CSS and how I could optimize it or clean it up.
Well done Jennifer! Congratulations on competing another challenge!
As you requested, I took a look at opportunities in your CSS and what came to mind was in the table
element: have you considering using the th
tag so you don't need to resort to pseudo-selectors? Even though the table is oriented differently, "Calories", "Fat", "Protein", and "Carbohydrates" are still acting as headers.
When I looked at the instruction steps, I noticed that maybe some left padding is needed. Likewise, I am curious about the counter-reset
usage: I thought there was no need in this case, but in case you know more I'd very interested to learn :)
I really liked your exploration and usage of the nested rules in CSS! It reminded me that I should do more of it :-P
Ah, the hr
element appears a bit thicker than the design. It's not an easy element to style, but you could try by assigning an overall border of 1px
to it, and then eliminate either the top or the bottom:
hr { border: 1px solid var(--clr-stone-600); border-bottom: none; }
Again, awesome work and continue with more challenges!