@Glorit74
@lij110397
Submitted
What are you most proud of, and what would you do differently next time?
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?
@Glorit74
Posted
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);
}
@al-dell
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Glorit74
Posted
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.
Marked as helpful
@Fafell
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Glorit74
Posted
I liked the way you split the <h1> element into two parts
@EdwardShanahan09
Submitted
What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
@Glorit74
Posted
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
@fhelix09
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Glorit74
Posted
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>
Marked as helpful
@elsayedelbauomy
Submitted
What are you most proud of, and what would you do differently next time?
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
@Glorit74
Posted
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
@elsayedelbauomy
Submitted
What are you most proud of, and what would you do differently next time?
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
@Glorit74
Posted
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
@6xg0d
Submitted
What are you most proud of, and what would you do differently next time?
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!
@Glorit74
Posted
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
@cazaresmr
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Glorit74
Posted
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; } }
Marked as helpful
@diwakharpandyan
Submitted
What are you most proud of, and what would you do differently next time?
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
@Glorit74
Posted
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); }
@Glorit74
Submitted
@Glorit74
Posted
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.
