I like your code, they are well structured and easy to read, I can see your effort on naming the variables, I also find it challenging to name the variables for the primary colors. I learnt a lot from your code, thank you.
Do you think it is better to use article tag for each card, increase semantics?
Nice code, I see you done some custom class defined in your Tailwind CSS configuration. Do you have any good guideline for it? I am trying to find some good practice to learn.
There is a minor padding issues in your mobile version, there is no left padding.
You may look into adjusting the breakpoint, as I have to expand the window to full width to view the desktop version in my small screen computer.
What are you most proud of, and what would you do differently next time?
The speed at which I completed this. That being said there are still a few issues
What challenges did you encounter, and how did you overcome them?
I had trouble getting the buttons to be responsive. Not sure I found the best solution, feels like a clumsy way to do it. I had to expand the width of every element to 100% that contained the buttons to get them to work correctly.
I think setting the ul width 100% is good, it is simple. As long as the container (the card) is responsive, the ul will be responsive, as it always takes all the width of its container.
I would use text-align to center the text in each li and not set each li and a width to 100%.
https://codepen.io/edpau/pen/wvLYmwv
In my solution for responsive design, I set my card width to 90vw in mobile, and set a max-width with media query (min-width: 400px) to stop the card grow too large. The button's width will grow with the card width.
What are you most proud of, and what would you do differently next time?
While I ended up changing how I was going to style certain elements partway through, I was able to learn a good bit about additional topics like styling the counters on the ol and li elements, and border-collapse on tables.
What challenges did you encounter, and how did you overcome them?
The two trickiest parts for this were probably the table and the counter styling for the ol element.
For the table, I was uncertain how best to approach a vertical layout and considered using flexbox or grid instead, though ended up with a much simpler implementation of a regular table element that I feel is cleaner and works better semantically.
The ol styling ended up with me in a rabbit hole which brought me to the counter-rest and counter-increment properties, which I do think will be very useful to utilize in the future. But then after an entire complex look into that and other potentially redundant styling methods, I looked at the the dev tools one last time and saw ::marker exists. That makes things a lot easier.
What specific areas of your project would you like help with?
Are there any alternative approaches I probably could have used for any parts of this, especially with the ol styling? At this point I'm not too sure if the methods I used are redundant or if they work well, but any pointers are always appreciated!
Nice code, I went to a similar direction as yours on the ol and li element. I was trying to match the Figma design. I read this and found it interesting.
https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/
I experimented on my solution, it ended up over complicated the code and affect the accessibility. But I learned a lot from it. I will keep it simple next time.
Grace-Snow guided me a lot in discord, below is the link if you are interested. I am working on refactoring my code.
https://discord.com/channels/824970620529279006/1277755314283876384
Very good code, I like how you handle the image and content in responsive design, nice and clean. Your class names are well structure and easy to understand.
I used <table> for the Nutrition section, I think it is more semantic in HTML.
What is your opinion on strong tags to make things bold, not span?
What are you most proud of, and what would you do differently next time?
I am very satisfied with the time it took me to complete the challenge.
What challenges did you encounter, and how did you overcome them?
This challenge did not present any problem to me. Obviously, I will be very kind to anyone who can point out to me areas of improvement that I have overlooked.
What specific areas of your project would you like help with?
I would like to know alternative ways to utilize images and also how to consider more responsive approach.
Nice code. I am also looking into ways to utilise images too, I use https://app.imagify.io to optimise my images, what did you use, I see your image size is small.
Your in-line styling in html for the img tag, is for the browser reserve enough space on a page for images, and avoid disruptive layout shifts? Is it a better practice than in writing it in a style sheet?
I used media queries for responsiveness in this challenge, tried to make the job title text truncates with an ellipsis (...) when the screen becomes small. It ensures the job title stays on a single line.
I just learned clamp( ) and inline-size, it is very impressive to see the card and fonts dynamically changed without using multimedia queries. FYI, I learned from below link.
https://www.frontendmentor.io/solutions/landing-page-using-css-flexbox-TZqzM7wgbR
Thank you for sharing your code, it is my first time seeing clamp( ) and inline-size, it is very impressive to see the card and fonts can be changed without using multimedia queries.
Can you share the logic on how you determine on the preferred value of the font-size: clamp(1.2rem, 0.2vw + 1.125rem, 1.4rem); How did you decide to use 0.2vw + 1.125rem?
With regard to the what size of header. I think the choice of <h2> as used in your HTML is appropriate.
