I am most proud of creating the grid layout since I don't use grid very often.
What challenges did you encounter, and how did you overcome them?I had some trouble getting the svg import to show up. I found that for styled-components I needed to interpolate the svg import to get it to work. Then the svg wasn't working on my live site and I found that I needed the svg to be in the public folder for it to work.
Hi!
It looks really good!
Thankyou so much for the challenge section writeup! I also had the svg import not showing up on live site and after moving it to the public folder it worked for me.
It's responsive on every screen size, I love the personal touch you made on tablet size grid layout.
I don't have any helpful feedback, but I learned a lot from your code. For example, using max-width: percentage on the testimonials grid section div so it does not stretch too far out.
Hello,
Congrats on completing the project!
You might want to update your solution site link from https://bricard-dev.github.io/ftm_four-card-feature-section-master/ to https://bricard-dev.github.io/ftm_four-card-feature-section/.
Your code looks well structured and easy to follow, and matches the design very well.
I like how you used ::before to style the top border colors. I used border-top to style but your way matches the design better.
The layout looks good on mobile and desktop and is responsive.
I can't think of any improvements. Really well done!
biggest challenge was to fit the font-size depending on the viewport
What specific areas of your project would you like help with?understand better how to fit dinamically the content depending on viewport size
Hello,
Good work on finishing the project!
I have the figma design file, and I believe the width, height of the product-card is fixed, and so are the font-sizes.
You could use percentage to configure the width and height. In the desktop design, the product image and the content are split into half. So you could do something like
(Desktop version)
.product-card {
display: flex;
flex-direction: row;
width: 600px;
height: 450px;
}
.product-img {
width: 50%; /* 300px of the 600px width */
height: 100%; /* Full height of the card */
}
.product-content {
width: 50%; /* 300px of the 600px width */
height: 100%; /* Full height of the card */
display: flex;
flex-direction: column;
}
This ensures the image and the content will be split equally in width and height.
In your index.css, you defined if screen width is >= 1024 px, display the desktop version:
@media (min-width: 1024px) {
.grid-container {
display: flex;
border-radius: 10px;
font-size: clamp(1rem, 1rem + 0.8vw, 3rem);
}
}
But in your product-card.tsx, you had a different min-width here
<picture>
<source media="(min-width: 768px)" srcSet={imagePerfumDesktop} />
<img src={imagePerfumMobile} alt="perfum image" />
</picture>
So between 768 and 1024px, the page will be in mobile design, but the picture will be in desktop format. You could update these values to make the display more consistent.
The body font seems different than the design, I think you missed an import in index.css. You only imported Fraunces but not Montserrat.
Another minor thing that is different than the deisng is your ribbon text "PERFUME".
You could use text-transformation: uppercase or just change the text.
Completing the project using vite+React!!
What challenges did you encounter, and how did you overcome them?Hello!
In recipe.css, you have multiple @media screen and (max-width: 768px) blocks
, I suggest grouping them together into a block for easier maintenance.
The background color, paddings and gaps looks a bit different than the design, but that's understandable because of not having the Figma design file. Other than that I think it looks very close to the original design.
You use semantic HTML tags and the component is responsive on laptop and on mobile.
Good job on finishing the project!
Added transition first time;
What challenges did you encounter, and how did you overcome them?It was pretty easy.
What specific areas of your project would you like help with?Bootstrap + React
Hello, good work finishing the project!
I love the personal touch on fonts. Something I think that could be helpful, is using vars in your css file. We can have a root class that stores all the reusable variables such as color, and spacing. For example:
:root {
--grey900: #141414;
--grey800: #1f1f1f;
--grey700: #333333;
--green: #c4f82a;
}
.card {
background-color: var(--grey800)
}
It will make updating colors, spacing easier in the future, as you only need to edit the color var stored in :root. You can read more here.
You could also improve the solution by adding responsive web design.
I don't have any experiences using Bootstrap so I can't help you on that specific area :(
I had a difficult time getting the name "Greg Hopper" & the avatar picture side by side. I overcame that problem by adding a display of inline-block & vertical aligining it to the middle on "Greg Hopper".
Hello!
Great work on finishing the challenge!
There are some minor differences from the design:
Category background color is off, you could refer back to the Figma design system to get the RGB value
The author section is not aligned with the content, I see you have some paddings in the author section, maybe that could affect the alignment. I suggest using chrome dev tools by clicking on inspect, click on the div you want to inspect, and computed, you will see the margins, padding, and div size highlighted, makes it easier to figure out what is off.
Also look into responsive web design, the dimensions of the blog preview card should change as the screen max width gets smaller, to give a better experience viewing using a phone. In the Figma design, you could inspect the width, height, font size changes.
Hello, congrats on finishing the project! This looks great!
I can't access the Github repo, so maybe you could update the link?
There are some small differences compared to the figma design. For example, the padding at the bottom looks a bit off. The QR code card component looks a bit bigger than the design. But I think overall it looks really similar so kudos to you!
