What did you find difficult while building the project?
Setting the images found in images folder to fit into the webpages and change depending on the screen size of the user's device.
Do you have any questions about best practices? The solution I found to deal with the difficulty earlier, was it the best or are there better ways to get it done?
Hello @Singraft, Well done!
Some suggestions to enhance the code further:
.your-container-div {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 600px;
}
This will align the product image (left-side) next to the details (right-side) directly, making the code better and easier and It will also help us in making the component responsive by converting the layout from two columns to one column through media query, like this:
@media(max-width:600px) {
.your-container-div {
grid-template-columns: 1fr;
}
}
<picture> element with <source> tags to make the product image responsive where based on your screen width, the appropriate image will be loaded<picture>
<source
srcset="images/image-product-mobile.jpg"
media="(max-width: 600px)"
/>
<source
srcset="images/image-product-desktop.jpg"
media="(min-width: 601px)"
/>
<img src="images/image-product-desktop.jpg"/>
</picture>
I hope these suggestions are helpful. Best wishes to you!
struggled a lot on the right side ( the description of the product ) . I couldn't adjust them properly and i have used margin a lot . Feedback will be appreciated. Thank you !!!
Hello abiskar100, Well done!
div and apply padding to leave some space around the edges. Then use flexbox and gap property to control the spacing between them, like the follwing:.product-info {
padding : 3rem
display: flex;
flex-direction: column;
gap: 2rem;
}
Don't forget to adjust the numbers because I set them randomly as examples :P
Some suggestions to enhance the code further:
.your-container-div {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 600px;
}
This will align the product image (left-side) next to the details (right-side) directly, making the code better and easier and It will also help us in making the component responsive by converting the layout from two columns to one column through media query, like this:
@media(max-width:600px) {
.your-container-div {
grid-template-columns: 1fr;
}
}
<picture> element with <source> tags to make the product image responsive where based on your screen width, the appropriate image will be loaded<picture>
<source
srcset="images/image-product-mobile.jpg"
media="(max-width: 600px)"
/>
<source
srcset="images/image-product-desktop.jpg"
media="(min-width: 601px)"
/>
<img src="images/image-product-desktop.jpg"/>
</picture>
cursor: pointer to inform the user that this button is clickable.button:hover {
background-color: hsl(212, 21%, 14%);
cursor: pointer;
}
<header>, <main>, <section>, or <article>. They help screenI hope these suggestions are helpful. Best wishes to you!
I did not face any difficulties in its work " Waiting for your comments "
Hello @0xmaxx1, Well done!
Small suggestions to enhance the code further:
<picture> element with <source> tags to make it responsive where based on your screen width, the appropriate image will be loaded instead of the two <img> elements.<picture>
<source
srcset="images/image-product-mobile.jpg"
media="(max-width: 600px)"
/>
<source
srcset="images/image-product-desktop.jpg"
media="(min-width: 601px)"
/>
<img src="images/image-product-desktop.jpg"/>
</picture>
cursor: pointer on the buttons and transition: all 0.3s on the elements with hover effect to apply nice hover effectsI hope these suggestions are helpful. Best wishes to you!
How do you make the avatar picture responsive?
Hello @nemoanderson, well done!
Small suggestions to enhance the code further:
You're using vh unit for the card height which isn't the best practice; as due to the page's height the card's height gets defined and this can distort its design we want. so consider using pixels (px) or rems (rem). Alternatively it might be better not to set a specific height and let the content determine the appropriate height.
The image overlay in the hover effect extends beyond the image's dimensions. You can fix this by using either of:
.image-container {
border-radius: 25px; /* Adjust based on the image border radius */
overflow: hidden;
}
OR
.image-overlay {
border-radius: 25px; /* Adjust based on the image border radius */
}
transition: all 0.3s on the elements with the hover effect to apply a wonderful transition effectI hope these suggestions are helpful. Best wishes to you!
Hello @njabulo-t, good job! just quick notes to enhance the code
.your-container-div /* or body */ {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<main>, <section>, or <article> into your code.Hello @ilyesmkb, good job!
just a quick note I noticed that you've centered the card vertically using margin, which might not consistently maintain the card at the center particularly when the screen size changes
Here's a simple trick to ensure the element remains centered:
.your-container-div /* or body */ {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Hello @Owner-test!
I noticed that you're using a percentage value for the component's width. this approach could distort the appearance of the component, especially when the screen size changes
It's better to use rems or pixels such as max-width: 18rem or max-width: 300px for example!
Best wishes to you!
Hello everyone :) I would like to share with you my solution to the QR code component challenge from Frontend Mentor. It is a simple yet elegant QR code component that I built using SASS and Flexbox. I used SASS to write cleaner and more modular code, and Flexbox to create the layout. I hope you like it and I appreciate any feedback you may have. Thank you for your time and attention.
Hello @HosseinHeydarpour, well done!
I'd like to offer a couple of suggestions:
style tag in your HTML code that might need attention.<main>, <section>, or <article> into your code.Besides these minor points, your work looks excellent!
So a few things mentioned in my previous challenges that I have made use of
Something I had a hard time with
So using what I know I came up with this solution, please let me know if there is anything I can change to improve on this solution
Hello @kylecloete, great work!
<picture> element with <source> tags to make it responsive where based on your screen width, the appropriate image will be loaded instead of the two <img> elements.<picture>
<source
srcset="images/image-product-mobile.jpg"
media="(max-width: 600px)"
/>
<source
srcset="images/image-product-desktop.jpg"
media="(min-width: 601px)"
/>
<img src="images/image-product-desktop.jpg"/>
</picture>
Best wishes to you!
Hello @Muhammadshipon, great work!
Just small note it's better to use the font in the style-guide.md file to make the solution more closer to what's required.
For this QR code component: the font, its weights and size are:
You can do this by opening the font page on Google Fonts and linking it in your HTML head
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
</head>
body {
font-family: "Outfit", sans-serif;
}
What font was used, I tried using "Courier" but it wasn't giving me what I want
Hello @khalid225, good job in your first challange. keep going!
The fonts and colors are always available in the style-guide.md file within the starter files you can download from the Challange hub page
For this QR code component: the font, its weights and size are:
You should link it from Google Fonts and then use it as font-family: "Outfit";
i havent managed to make the page responsive , any help would be appreciated
Hello @Asumpta-1, great work!
Here are some notes for improving the code:
.your-container-div {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 600px;
}
This will align the product image next to the details directly, making the code better and easier and It will also help us in making the component responsive by converting the layout from two columns to one column through media query, like this:
@media(max-width:600px) {
.your-container-div {
grid-template-columns: 1fr;
}
}
<picture> element with <source> tags to make the product image responsive where based on your screen width, the appropriate image will be loaded instead of the two <img> elements.<picture>
<source
srcset="images/image-product-mobile.jpg"
media="(max-width: 600px)"
/>
<source
srcset="images/image-product-desktop.jpg"
media="(min-width: 601px)"
/>
<img src="images/image-product-desktop.jpg"/>
</picture>
Best wishes to you!