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 am most proud to have created a responsive layout.
What challenges did you encounter, and how did you overcome them?A challenge I faced was deciding whether to use CSS Grid or Flexbox to lay out the four cards. Instead, I used flexbox, which worked quite well.
What specific areas of your project would you like help with?Feedback is appreciated.
It is customary to use only one <h1> per page. I found a good solution for this from someone else.
<h1>Reliable, efficient delivery <span>Powered by Technology</span></h1>
Text wrapped in span can be modified.
I liked the idea that you put two cards in one div and that way you could also use flex on desktop.
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'm a newbie so not sure in my comments
You set the font-size on the <html> element in percent. I would set on the <body> in px (this was given by the task). Why 62.5%?
You dont use the desktop image (in line 24) , just the mobile version. You change the source at 800px but the mobile-desktop view is changed at 900px. I would put it in one place.
You defines image height in line 41. If you have width (max-width would be better) and object-fit you dont need height at all.
The price has its own font-family (Fraunces) but you didn't use it
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.
