@LucasNgTg
Submitted
@RanitManik
@LucasNgTg
Submitted
@RanitManik
Posted
To enhance the card design challenge implementation, please address the following points:
Card Shadow on Hover: Ensure that the shadow of the card grows on hover as specified. You can refer to the active state file in your project's design directory for reference.
Unit Choice for Styling:
Use rem
instead of px
for properties like width, height, margin, padding, and font-size to achieve better scalability and responsiveness. For instance, the following CSS demonstrates how to use rem
units effectively:
/* Use rem for Better Scalability */
.container {
font-size: 1rem; /* Equivalent to 16px */
width: 57.4375rem; /* Equivalent to 919px */
height: 31.3125rem; /* Equivalent to 501px */
}
Hope it helps
Marked as helpful
@callaid21
Submitted
@RanitManik
Posted
Here are some suggestions from me:
Specify Image Dimensions:
If you think this comment is helpful you can mark it as helpful
@sergrosu
Submitted
@RanitManik
Posted
Congratulations on completing the challenge! Here is my feedback for you:
Centering the Container: Avoid using position: absolute
for centering elements. Instead, use a more effective method by applying min-height: 100vh;
to the body
and display: grid; place-items: center;
to center the .container
. This ensures better responsiveness and alignment.
body {
min-height: 100vh;
display: grid;
place-items: center;
}
Unit Choice for Styling
rem
instead of px
or em
for properties like width, height, margin, padding, and font-size. This choice ensures better scalability and responsiveness. Detailed information can be found in this article./* Use rem for Better Scalability */
.container {
width: 57.4375rem; /* Equivalent to 919px */
height: 31.3125rem; /* Equivalent to 501px */
font-size: 1rem; /* Equivalent to 16px */
}
If you find this comment helpful please mark it as helpful
Marked as helpful
What challenges did you encounter, and how did you overcome them?
The challenges i encountered was the layout but i was able to overcome it by drawing a rough sketch of the design and it worked out perfectly
@RanitManik
Posted
Congratulations on finishing this challenge! I have reviewed your code and here are a few suggestions for improvement:
Centering the Container
margin
on .container
to center it vertically, a more effective method is to use min-height: 100vh;
on the body
and display: grid; place-items: center;
to center .container
. This approach ensures better responsiveness and alignment.body {
min-height: 100vh;
display: grid;
place-items: center;
}
Wrong use of Buttons
div
element.Card Shadow on Hover
.card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}
I hope you find my feedback helpful. Please mark it as helpful if you do!
Marked as helpful
@aamna-ansari
Submitted
@RanitManik
Posted
Congratulations on finishing this challenge! I have reviewed your code and here are a few suggestions for improvement:
Semantic HTML5 Elements
<main>
, <article>
, and <header>
to improve the structure and readability of your HTML. All content should be contained within landmarks. Every page should minimally have a <main>
element. You can find more information about this here.Font Loading Optimization
@import
in CSS for font loading. Instead, directly link the fonts in the HTML file to enhance website performance. This method is explained in this article. Hereโs an example:<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:[email protected]&family=Lexend+Deca:[email protected]&display=swap">
Unit Choice for Styling
rem
instead of px
for properties like width, height, margin, padding, and font-size. This choice ensures better scalability and responsiveness. Detailed information can be found in this article./* Use rem for Better Scalability */
.container {
width: 57.4375rem; /* Equivalent to 919px */
height: 31.3125rem; /* Equivalent to 501px */
}
Cursor Pointer for Buttons
cursor: pointer;
property for buttons to improve the user experience.button {
cursor: pointer;
}
I hope you find my feedback helpful. Please mark it as helpful if you do!
Marked as helpful
@Dipesh-sapkota1
Submitted
What challenges did you encounter, and how did you overcome them?
Customizing default behavior of form
What specific areas of your project would you like help with?
I want to improve responsiveness of overall site.
@RanitManik
Posted
Your solution looks legitimate. I have reviewed your code, and here are some suggestions from me:
Specify Image Dimensions:
Display User Email:
[email protected]
, which is incorrect.Alt Text for Images:
alt
text for non-decorative images. In this challenge, all images are non-decorative, so you should leave the alt
attribute blank, like this: <img src="./assets/image.jpg" alt="">
. For more information on this best practice, watch this video.Marked as helpful
@eatwanderexplore
Submitted
What are you most proud of, and what would you do differently next time?
Being able to change the size/placement/order of each element is very satisfying.
What challenges did you encounter, and how did you overcome them?
I didn't realize the category tag on the blog preview card was a button at first so I had trouble trying to make the padding match the design. Once I realized it was a button it made it a lot easier.
What specific areas of your project would you like help with?
I'm not sure how to use the figma files to help me with these projects.
@RanitManik
Posted
Congratculations on completing this challenge. Here are couple of suggestions for improvement:
The shadow should grow when hover over the blog card. observe at the active state design closely. To make the shadow grow when hovering over the blog card, you can use the :hover
pseudo-class in CSS. Here's an example:
.blog-card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.blog-card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
This will create a smooth transition effect where the shadow grows when you hover over the card.
would strongly recommend you to explicitly mention the font-size property. It's important to set a base font-size
to ensure consistency across different screen sizes. Hereโs how you can do it:
body {
font-size: 16px; /* Adjust this value as needed */
line-height: 1.6;
font-family: 'YourFontFamily', sans-serif;
}
h1 {
font-size: 2em; /* Example for heading */
}
p {
font-size: 1em; /* Example for paragraph */
}
Adjust the font-size
property according to your design needs to ensure readability on larger screens.
Don't use position properties to center a item like that. Instead use the conventional and more effective one. Using CSS Grid for centering elements is a modern and efficient approach. Here's how you can update your CSS:
body {
min-height: 100vh;
display: grid;
place-items: center;
}
.container {
/* Your container styles */
}
This method ensures that the container is centered both vertically and horizontally within the viewport.
Marked as helpful
@RanitManik
Posted
Congratulations on your first solution! Here is my feedback for you:
Centering the Container: Avoid using position: absolute
for centering elements. Instead, use a more effective method by applying min-height: 100vh;
to the body
and display: grid; place-items: center;
to center the .container
. This ensures better responsiveness and alignment.
body {
min-height: 100vh;
display: grid;
place-items: center;
}
Because you used the position
property, the website overflows on mobile screens as you had to explicitly specify the width and height of the main item. For better reference, you can check out my solution code.
I hope you find these suggestions helpful for improving your site's design and functionality. Feel free to reach out if you have any questions or need further assistance!
Marked as helpful
@AmrGobran
Submitted
@RanitManik
Posted
The font size is immensly big for bigger screens like laptops
Marked as helpful
@Ahmed-l2
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of learning how to properly handle displaying your page with different screen sizes which I was totally unfamiliar with before I had started this project.
What challenges did you encounter, and how did you overcome them?
This project was a bit time consuming because it had a bunch of details that needed attention to get correct. And another challenge was how to get the page to display properly on mobile devices. This was new to me and figuring it out was an accomplishment.
What specific areas of your project would you like help with?
I would appreciate any feedback, especially on the mobile preview of the page.
@RanitManik
Posted
Unit Choice for Styling:
Opt for using rem
instead of px
for properties like width
, height
, margin
, padding
, and font-size
. This choice ensures better scalability and responsiveness, as detailed in this article.
/* Use rem for Better Scalability */
.container {
width: 57.4375rem; /* Equivalent to 919px */
height: 31.3125rem; /* Equivalent to 501px */
}
I hope you find my feedback helpful. Please mark it as helpful if you do.
Marked as helpful
@donatto22
Submitted
@RanitManik
Posted
<div id="social-links">
<button class="link">GitHub</button>
<button class="link">Frontend Mentor</button>
<button class="link">LinkedIn</button>
<button class="link">Twitter</button>
<button class="link">Instagram</button>
</div>
To improve the HTML structure for social links using <ul>, <li>, and <a> tags, here's how you can refactor it:
<ul id="social-links">
<li><a href="">GitHub</a></li>
<li><a href="">Frontend Mentor</a></li>
<li><a href="">LinkedIn</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Instagram</a></li>
</ul>
@Kwasako
Submitted
What are you most proud of, and what would you do differently next time?
Despite having no access to the Figma design I was able to implement the design with a very high accuracy.
What challenges did you encounter, and how did you overcome them?
The challenge I encountered was getting my measurements and font size because I had no access to the Figma design. I overcame it by trying several values and font sizes.
What specific areas of your project would you like help with?
I think I am good
@RanitManik
Posted
Hey there! I noticed a few issues while reviewing your site:
Image Aspect Ratio: You've set explicit width and height for images, which is great for consistency. However, this causes the images to stretch unnaturally. Consider using object-fit: cover;
for images to maintain their aspect ratio while filling the container appropriately.
img {
object-fit: cover;
}
Centering the Container: Instead of using margin-top
on .container
to center it vertically, a more effective method is to use min-height: 100vh;
on body
and display: grid; place-items: center;
to center .container
. This approach ensures better responsiveness and alignment.
body {
min-height: 100vh;
display: grid;
place-items: center;
}
Active State for Links: When hovering over links, the background color changes, but the text color remains unchanged. Ensure that the text color also adjusts in the active state to maintain consistency and improve usability.
a:hover {
background-color: /* your hover color */;
color: /* adjust text color for readability */;
}
I hope you find these suggestions helpful for improving your site's design and functionality. Feel free to reach out if you have any questions or need further assistance!
Marked as helpful