challenged myself and added animation, learned a ton of new knowledge such as DOM manipulation, key difference between transition and animation :D
What specific areas of your project would you like help with?would like to know if there's anything I can improve with js
yes, transition works with width, but the thing I learned from building this is that the one key difference between transition and animation is that transition is "passive", it needs to wait for something to happen first, like state change :hover, or event occurs like click, whereas animation is more "active", it triggers immediately when the element gets rendered, that's why I chose animation over transition in this case.
thanks for the fun fact :D
This was a bit more complex than the previous challenges, but I liked it a lot.
What challenges did you encounter, and how did you overcome them?To style a table, but I looked my options up on the internet.
What specific areas of your project would you like help with?Styling the table and the lists.
.recipe-img { width: 100%; height: 30rem; border-radius: 1.2rem; object-fit: cover; }
this height:30rem is making the img unscalable, I think it's better to remove it
your lists and table looks good, but if you think table element is too confusing to style, then you can just use div and turn it into a flexbox or css grid to build up a table, which is easier to control imo
The progress I am most proud of is that, despite encountering difficulties with this project, I generally knew where to find the answers.
What challenges did you encounter, and how did you overcome them?These are just basic tips, so I won't specifically document them.
What specific areas of your project would you like help with?None but any advice or suggestions are much appreciated.
3 things I think I can help to make it better
.profile { width: 100%; height: 625px; min-width: 375px; max-width: 375px; background-color: var(--darkGrey); border-radius: 15px; text-align: center; }
width:100% ----> means I want it to grow or shrink to have 100% width of the container min-width: 375px. ---> means I don't want it to grow more than 375px max-width:375px. ---> means I don't want it to shrink less than 375px
so it means you want it to have fixed 375px you can just set width: 375px then and get rid of min-width and max-width
.profile__location { color: var(--primary); font-style: normal; font-size: 0.8rem; font-weight: 600; padding: 10px; }
.profile__description { color: var(--white); font-size: 0.8rem; padding: 20px; }
looks like to me you set padding to have space between elements imagine if you had background-color for these elements, it would cause undesired issue it's best practice to use margin instead of padding
.profile__link {
display: inline-block;
width: 300px;
height: 45px;
font-weight: 600;
font-size: 0.875rem;
color: hsl(0, 0%, 100%);
text-decoration: none;
background-color: var(--grey);
margin: 8.5px;
text-align: center;
line-height: 20px;
border-radius: 10px;
padding: 10px;
}
looks like these links don't have their texts vertically centered, so you can either center them by setting them to flexbox, or another approach is that to set line-height:45px (height is currently set to 45px) when line-height has the same value as height the text will be vertically centered (you will need to get rid of padding-top and padding-bottom though if you take this approach)
I am most proud of the structure of my CSS file. By watching some useful YouTube videos I learned some basic funcitonalities I should use and often include in my projects. Now I try to use those all the time. There are no differences that should be made I think.
What challenges did you encounter, and how did you overcome them?The challenge was to decide if I should set the heights of my elements manually or if those will match the reference when I set everything up. I tried to set those manually at first, but then I removed the height setting from some elements and they was the same on the page, so there was the answer for my question.
What specific areas of your project would you like help with?There are none
.category{ font-size: var(--fs-400); font-weight: var(--fw-bold); font-family: var(--ff-body);
background-color: var(--clr-primary);
width: 82px;
padding: 4px 12px;
border-radius: 4px;
}
can set width: fit-content, then its width will only be as much as content needs better than setting it to fixed value imo
will name rel more specific
What challenges did you encounter, and how did you overcome them?nothing new
What specific areas of your project would you like help with?nothing
.text{ display: block;
} .text h1{ display: block; font-size: 22px; margin-left: 16px; margin-right: 16px; text-align: center; font-family: "Outfit", sans-serif; }
because div and h1 they are block element, by default their display is set to block already, no need to specify it.
