@zeenox-stack
Submitted
@Mohamedkabba444
@zeenox-stack
Submitted
@Mohamedkabba444
Posted
Wow, your design looks amazing! The visuals and layout are top-notch.
However, I noticed that the design isn't fully responsive. To take it to the next level, consider using flexible units for font sizes, margins, and padding:
For example:
font-size: clamp(1.5rem, 3vw, 2.5rem); margin: 2em 3%; padding: 1rem 2% 3rem;
Additionally, using a CSS reset like Andy Bell's Modern CSS Reset can help ensure consistency across browsers.
By incorporating these techniques, you'll:
Your design skills are impressive! With these tweaks, your project will shine on any device.
Resources:
Keep up the fantastic work!
@zololade
Submitted
@Mohamedkabba444
Posted
Excellent work! Your project looks fantastic.
To take your CSS game to the next level, I recommend exploring:
For example, instead of:
button { /* styles */ }
button:hover { /* hover styles */ }
Use nesting:
button { /* styles */
&:hover { /* hover styles */ } }
This approach:
Andy Bell's Modern CSS Reset CSS Nesting tutorial by Kevin Powell
Your attention to detail and coding skills are impressive! With these tips, your projects will become even more efficient and scalable.
Keep up the outstanding work!
@kaveeshagim
Submitted
What are you most proud of, and what would you do differently next time?
I'm very happy with how i managed to place all the components evenly in the card component and designing my blog card similar to the challenge preview
What challenges did you encounter, and how did you overcome them?
After finishing the design, my main card component had too much whitespace at the bottom even though the height of the card was as mentioned in the figma design. After doing some research, i learned how to use css properties like max-height and gap, to place my internal components evenly throughout the card component
What specific areas of your project would you like help with?
Any type of feedback is highly appreciated
@Mohamedkabba444
Posted
Wow, your design looks amazing! The visuals and layout are top-notch.
However, I noticed that the design isn't fully responsive. To take it to the next level, consider using flexible units for font sizes, margins, and padding:
For example:
font-size: clamp(1.5rem, 3vw, 2.5rem); margin: 2em 3%; padding: max(2rem, 3vw, 4rem);
Additionally, using a CSS reset like Andy Bell's Modern CSS Reset can help ensure consistency across browsers.
By incorporating these techniques, you'll:
Your design skills are impressive! With these tweaks, your project will shine on any device.
Resources:
Keep up the fantastic work!
@barka-dev
Submitted
@Mohamedkabba444
Posted
Great job on completing this project! Your coding skills and attention to detail are impressive.
One minor suggestion I have is to consider nesting the hover styles directly within the button CSS block. Instead of:
button { /* styles */ }
button:hover { /* hover styles */ }
You could do:
button { /* styles */ transition: opacity 0.2s ease-in-out;
&:hover { opacity: 0.8; /* other hover styles */ } }
This approach keeps related styles together, making maintenance easier.
Overall, your project looks fantastic! Keep up the excellent work!
Marked as helpful
@varshav1908
Submitted
@Mohamedkabba444
Posted
Great job on your project! Your effort shines through. I noticed you've used multiple CSS media queries. To simplify and optimize your code, consider:
To take your layout skills to the next level:
Resources:
By adopting these strategies, you'll:
Keep up the fantastic work! Looking forward to seeing your next project.
@iamhobv
Submitted
@Mohamedkabba444
Posted
Great job on your design! The layout and visual elements are well-executed. However, I noticed that the design isn't fully responsive. To improve this, consider the following adjustments:
Container and Grid Structure:
Responsive Units:
Example: .card-container { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.card-inner { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }
.card { width: clamp(20rem, 50%, 30rem); padding: 2em; font-size: 1.5rem; }
By implementing these changes, you'll:
Keep up the fantastic design work! Looking forward to seeing your next project.
@Sudhanshu943
Submitted
@Mohamedkabba444
Posted
Great job on completing this project! Your coding skills and attention to detail are impressive.
One suggestion I have is to consider using the <picture> element and <source> tags for images, especially when providing multiple image sizes for different screen sizes. This approach allows for:
For example:
<picture> <source srcset="image-small.jpg" media="(max-width: 768px)"> <source srcset="image-medium.jpg" media="(max-width: 1200px)"> <img src="image-large.jpg" alt="Image description"> </picture>This technique ensures that the browser loads the most suitable image size based on the user's screen size, reducing unnecessary downloads and improving page load times.
Keep up the fantastic work, and looking forward to seeing more projects from you!
Marked as helpful
@LesSyl
Submitted
What specific areas of your project would you like help with?
One thing puzzles me about card designs. Is the card size better set in px (so that there is a fixed size) or is it better in % or em. Thank you for your time and for any guidance on the project.
@Mohamedkabba444
Posted
For card design sizing, it's generally recommended to use a combination of units for flexibility and responsiveness. Here's why:
Fixed size (px):
Relative size (% or em):
Hybrid approach:
Recommended approach:
Example:
Font Size:
clamp()
: font-size: clamp(16px, 4vw, 24px);
(between min, max)min()
, max()
: font-size: max(16px, 4vw);
(at least) or font-size: min(24px, 6vw);
(at most)Height:
Width:
These units and functions enable flexible, responsive designs that adapt to various screen sizes, devices, and orientations.
What are you most proud of, and what would you do differently next time?
I am most proud of learning how to work with Figma design files. I now understand how to extract the required pieces of information to create near or pixel-perfect projects.
What challenges did you encounter, and how did you overcome them?
I didn't encounter a lot of problems however, I did realise I was using html which I believe is depreciated. Once I noticed, I switched it to . Looking back now, I realise that I placed the element outside of the element which may not be best practice however I am still achieving the desired result for now and am satisfied.
What specific areas of your project would you like help with?
I would like tips on where I could have shortened the code size and possibly made better use of Semantic HTML elements.
@Mohamedkabba444
Posted
CSS Reset:
Use a modern CSS reset like:
Flexible Units: Instead of using fixed units (px), opt for:
Example Usage:"
Benefits:
By adopting these best practices, you'll create more maintainable, responsive, and accessible CSS code.
Marked as helpful
@manasmaity506
Submitted
What challenges did you encounter, and how did you overcome them?
These are some challenges I faced
I overcome them by searching online
What specific areas of your project would you like help with?
I want to know how can I make the website mobile friendly?
I feel my codes are messy and I need guideline how to use semantic elements and when I should just go with div?
@Mohamedkabba444
Posted
Mobile-Friendly Tips:
Check out the video link below by Kevin Powell focusing on responsive web design.
https://www.youtube.com/watch?v=x4u1yp3Msao&t=60s&pp=ygUacmVzcG9uc2l2ZSBsYXlvdXQgaHRtbCBjc3M%3D
Code Organization:
Marked as helpful