Design comparison
Solution retrospective
It was my first, I am pround to finish it
What challenges did you encounter, and how did you overcome them?Make a website responsive, and I still strogling. I have to study more about it
What specific areas of your project would you like help with?helpping to make a website responsive.
Community feedback
- @dvdgdPosted 7 months ago
Hello there! Congratulations on completing your first challenge. 🎉
I noticed it was finished a couple of months ago, and I'm pleased to be the first to provide feedback.
I'll consider your previous comments and the areas where you seek assistance as valid. Please don't hesitate to ask if you require further clarification. This also presents a wonderful opportunity to revisit this challenge and enhance it with the experience you've gained since then.
Before jumping into responsiveness, please correct the color of 'Preparation Time' to
color: hsl(332, 51%, 32%);
. This will improve the readability of the title.Regarding responsiveness, we have a few things to be mindful of:
-
We should allow our content to shrink and grow based on the content but also be able to control the max and min width and height of elements.
- Example:
.card { max-width: 375px; /* The maximum width that a .card could have is 375px, but the card still able to have a 360px. */ width: 100%; /* By setting the width with 100%, we ensure our .card will always occupy all available space on the screen, in that case 375px */ }
- Example:
-
As we know our contents could grow and shrink based on the width, we essentially want the same thing to happen with our height. By setting a fixed height, we ended up getting contents overflowing the limits of the parent. So, in most parts, we'd want to set a height of 100%, so the height of the .card will increase based on the wrapping of the content (a text as an example).
I found these two great documentation resources to know a little bit more about the max-width and width properties:
I also have a few things about your HTML and CSS:
-
We should avoid using divs as much as possible in our code since it is generic HTML and doesn't have much accessibility for screen readers.
- Instead of using a
<div>
to represent and create the card style, you could use an<article>
tag. - Prefer to use
<section>
when dealing with the same article but in different sections, like 'Preparation Time', 'Ingredients', and 'Instructions'.
- Instead of using a
-
About your CSS, prefer to use classes and specify selectors to style, as it maintains great readability (example:
article.card { ...your_css_code }
) and also prevents having the same id on the page.- By using the CSS specifier, you could have generic styling for sections inside the article and could style the sections specifically based on the needs, as an example, change the
background-color
of the 'Preparation Time' section. - Using more selectors, you could remove the last border of the table by using the
:not
selector combined with:last-child
. Example:
or you could usesection.recipe table tbody tr:not(:last-child) { border-bottom: 1px solid var(--light-grey-color); }
:last-child
to remove the border:section.recipe table tbody tr:last-child { border-bottom: none; }
- By using the CSS specifier, you could have generic styling for sections inside the article and could style the sections specifically based on the needs, as an example, change the
And you can learn more about semantic HTML and CSS selectors here:
- Semantic HTML:
- CSS Selectors:
I hope this feedback helps you to improve your skills further. Keep up and happy coding!
Marked as helpful0@DepaulaeduardoPosted 7 months ago@dvdgd thank you Very much for your commentary.
I am going through of each project that I have done and try to apply what you have said.
If I may, I am working at the moment on the First JS project. https://www.frontendmentor.io/learning-paths/javascript-fundamentals-oR7g6-mTZ-/steps/66269ddb2f40450f913ad82f/challenge/start. I got the lógic but I could not start, I am stuck. I need a North to start. Could you help me?
0@dvdgdPosted 6 months ago@Depaulaeduardo Hey, sorry for the delay, I was making a JS challenge too.
Yes, of course I can help you with that, can we connect through the discord? Send me a message in my Linkedin Profile so we can take it up from that. See you later!
0@DepaulaeduardoPosted 6 months ago@dvdgd, Não tenho premium no Linkedin, por isso não consegui mandar mensagem. Esse é o meu usuário no discord eduardodeadepaula, pode me adicionar?
0 -
Please log in to post a comment
Log in with GitHubJoin 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