1. How to use grid to layout a design
What challenges did you encounter, and how did you overcome them?Opacity setting of the font color seems not working for me. Just don't know why?
What specific areas of your project would you like help with?Opacity setting of the font color seems not working for me. Just don't know why?
It is an interesting question. I'm not sure, but I found that the color defined by the variable cannot be used together with the opacity. You should define opacity separately.
h3 {
color: var(--color-primary-white);
opacity: 0.1;
font-size: 0.77rem;
font-weight: var(--font-weight-regular);
}
I did this challenge myself.
What challenges did you encounter, and how did you overcome them?Colored lines in cards, they were rounded, but I managed to solve this little problem.
What specific areas of your project would you like help with?Any help and feedback is useful.
I liked the way you split the <h1> element into two parts
I am really proud to myself the I am able to finish this challenge and overcomes the challenges
What challenges did you encounter, and how did you overcome them?The challenges that I encounter was to change the list element color and give them a spacing, I tried to modify it on my own until but I'm not able to get the design that I want. I overcome this challenge by searching in the google on how I can apply the design that like the sample image.
What specific areas of your project would you like help with?I am really glad if someone able to lent me there knowledge on how I am able to split the Nutrition other than by making it inline-block.
There are some other solutions. I used the old fashioned table:
<table class="w-full text-charcoalDark">
<tbody class="divide-y-2 divide-grey"> /* class makes the lines between rows */
<tr>
<td class="w-[50%] py-3 pl-8">Calories</td>
<td class="text-primary font-bold">277kcal</td>
</tr>
You could use flexbox, here I used your code with tailwind properties:
<section class="flex flex-col divide-y-2 divide-grey">
<p class="flex pl-8 py-3">
<span class="w-[50%]">Carbs</span>
<span class="text-primary font-bold">0g</span>
</p>
for working on this platform it is such an honor
What challenges did you encounter, and how did you overcome them?the blog preview card
What specific areas of your project would you like help with?image inside div ratio how i could fit the size
I use this setup and it usually gives the expected result The images are enclosed in a div (for example img_container) .img-container { width: 100%; border-radius: 15px; overflow: hidden; /* it hides the corners / } img { width: 100%; / image fills the container div, it takes on the largest possible size / dispaly: block; / remove default margin-bottom / object-fit: cover; / keeps aspect ratio */ } Always write something in the alt tag, everyone always complains about it. :-)
There is a typo in line 59 (style.css) font-weight: 1rem; instead of font-weight: 400; You can easily find such errors in the browser inspector
for working on this platform it is such an honor
What challenges did you encounter, and how did you overcome them?the blog preview card
What specific areas of your project would you like help with?image inside div ratio how i could fit the size
I use this setup and it usually gives the expected result The images are enclosed in a div (for example img_container)
.img-container {
width: 100%;
border-radius: 15px;
overflow: hidden; /* it hides the corners */
}
img {
width: 100%; /* image fills the container div, it takes on the largest possible size */
dispaly: block; /* remove default margin-bottom */
object-fit: cover; /* keeps aspect ratio */
}
Always write something in the alt tag, everyone always complains about it. :-)
There is a typo in line 59 (style.css) font-weight: 1rem; instead of font-weight: 400; You can easily find such errors in the browser inspector
I'm proud that i did it by myself, and i use a few CSS properties that i learned i while ago!
What challenges did you encounter, and how did you overcome them?I didn't have any challenges with the coding part, but the challenge for me was to choose a color palette and setting spaces that i really like.
What specific areas of your project would you like help with?Any feedback to improve this solution in any way is more than welcome!
My favorite color is green, so I like your solution, even if it's not pixel accurate, as you often see in job offers. ;-)
I have not yet used the title attribute in the anchor tag. I looked it up, it's an interesting possibility
I was a bit more comfortable with the layout of this project. No need for Bootstrap.
What challenges did you encounter, and how did you overcome them?Making it responsive (without Bootstrap) Media Queries?
What specific areas of your project would you like help with?Making it responsive.
I'm just a beginner, not sure if my fixes are the best. I wouldn't put a margin so that the entire background is yellow. I would set min-width:327px on the card instead of width or use media query:
@media (min-width: 475px) { .card { width: 327px; } }
This was my first project and i didn't get stuck...finished with ease that i feel proud of...
What challenges did you encounter, and how did you overcome them?It was easy to start as the first project...not complex
What specific areas of your project would you like help with?Need help how to avoid typing same codes for multiple elements
If you think in terms of design, you can have several classes on one div. Each class contains a set of properties. for example class="flex"
.flex { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--gap); }
Hi Malvin!
Thank you for your comments and links (I didn't know the first one). I had tried flex on body, but it didn't work. Maybe because I left out the width and height..., it makes sense. I checked it. You don't need the width, it works without it, you only need the height.
15px was part of the task in style-guide.md.
