Use of Css grid i think it could be better
What challenges did you encounter, and how did you overcome them?using grid but i read documentation
What specific areas of your project would you like help with?Css grid
Hi Kevin!
Looks good, but I think there are a few spots we could improve upon:
Scaling the website from a desktop ratio to a mobile ratio causes the card proportions to stretch. This is most evident around the 700px range. At the very least, using max-width on the cards will prevent them from stretching too far, while still allowing them to be responsive. I would also recommend checking your breakpoints, and let the grid switch to a single column sooner, so as to prevent the cards from distorting when running out of horizontal space.
The svg images are being distorted based on the width of the card. Setting a consistent width should prevent this:
img {
height: auto;
width: 4rem;
align-self: end;
}
It appears that a slight cyan border was applied to all of the cards, I'm not sure if this was a design decision or not. Should it be, I think coordinating the border colors with the top border colors on each card would bring some cohesion to the styling.
Lastly, I would advise adjusting the font-weight across most of the text to lighten it up a bit. The text in the style guide is actually quite a light font weight, something I didn't notice until returning to my project for some cleanup.
I hope you find this helpful, and have a great day!
I am proud of how I had well-organized semantic HTML, used mobile-first design, and lastly, used good use of media queries and BEM to keep everything nicely organizedd.
What challenges did you encounter, and how did you overcome them?Using the different images for different screen sizes. Using the picture HTML element helped with this. Also, learning flexbox basics was a bit of a challenge at first, but I eventually got the hang of it.
What specific areas of your project would you like help with?Maybe on my CSS if there are any recommendations? This project was fairly simple so not too many specific areas.
Hi Dolapobj!
Looks good, and the site looks perfect for mobile! Good job with using Scss as well, I didn't use it for much more than color variables lol.
The only difference I saw was the sizing of the desktop card. I really struggled with this part of the challenge myself - the easiest way I could find to format it was to style just the aspects that don't affect layout, such as colors and fonts, and then style the layout for each screen width separately. I didn't do this the first time around, and the mobile styling ended up really messing with my desktop layout.
Here's some relevant parts of my css:
/* universal styling */
...
/* layout styling */
@media (max-width: 48rem) {
/* Structures the layout of the mobile card*/
.product-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
}
@media (min-width: 48rem) {
/* structures the layout of the desktop card*/
.product-card {
max-width: 580px;
flex-direction: row;
}
.product-info {
width: 90%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
Also, don't forget to add hover styling to your buttons!
.product-button {
...
background-color: $dark-cyan;
color: $white;
transition: 0.2s opacity;
}
.product-button:hover {
opacity: 0.85;
cursor: pointer;
}
Sorry for the wall of text lol - Hope this helps and have a great day!
Getting the media queries to work right without having to remove the image from the main div.
What challenges did you encounter, and how did you overcome them?Getting the image to extend to the edges when viewed on mobile screen.
I used the div I had contained the image in and the body to remove margin and padding and add width.
What specific areas of your project would you like help with?Bullet point sizing and spacing
Hi Jesse!
As you mentioned bullet point sizing and spacing -
padding-left can be used on the list element to add some space between the li bullet and the li content. To shrink the bullet itself, you can use font-size. I'll place some examples below:
li {
...
padding-left: 1rem;
...
}
ul > li::marker {
...
font-size: 0.8rem;
}
Hope this helps, and have a great day!
I'm most proud of being able to finish the challenge faster than the previous ones.
What challenges did you encounter, and how did you overcome them?A challenge I encountered was the trying to layout the buttons evenly within the container.
What specific areas of your project would you like help with?Any specific design modifications.
Hi Andee-K!
Your project looks great, and the links work well either tabbing or hovering!
You mentioned design modifications, so I'll give you a tip with the links. You can use css to make the cursor change into a pointer while hovering over an element! Also, I used the transition property to make the background color smoothly change (opacity to change the color). That's more of a subjective choice though lol
li {
...
background-color: #2E4F4F;
transition: 0.2s all;
}
li:hover {
opacity: 80%;
cursor: pointer;
}
li:has(a:focus) {
opacity: 80%;
}
I'll drop some links below regarding the above. Hope this is of help, have a great day!
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Card using flexbox hope to learn how to use CSS grid
What challenges did you encounter, and how did you overcome them?Doing the card using flexbox, so i searched some some references.
What specific areas of your project would you like help with?Use CSS grid
Hi Felipe!
For a card like this, I think flexbox was the right call! It suits itself well to simple layouts such as the one in this project, and also allows for easy scaling.
The only difference I could find was a couple of elements styled differently than the reference images. The learning tag and author tag could use some bolding, and perhaps a bit more vertical spacing between the elements would be nice. Since we are using flexbox, you can use gap, similarly to how you used it in the card profile element to separate the photo and author name.
.card {
...
display: flex;
flex-direction: column;
gap: 16px;
...
}
This lets you easily space all of the elements equally, without having to add margins to each element!
Hope this helps, have a great day! :D
The general form of the card is what i like the most
What challenges did you encounter, and how did you overcome them?The fonts and the size of the boxes
What specific areas of your project would you like help with?The responsive part
Looks good, and the site is responsive! I had no issues with scaling the site to different ratios.
The only differences from the solution I noted were the font choice and missing box shadow, with the font in the design doc being "Outfit" from Google fonts. Some fallback fonts also might be a good option should Google fonts not be available to load.
I really like sites such as https://box-shadow.dev for generating box shadows. It gives you a visual tool so you can see tweaks live, and also provides an export to paste into your css.
All in all looks good, enjoy your day!
