@zeenox-stackSubmitted 7 months ago
Latest comments
- @Mohamedkabba444Posted 7 months ago
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:
- rem and em for relative sizing
- % for proportional sizing
- clamp(), min(), and max() for dynamic sizing
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:
- Improve responsiveness
- Enhance accessibility
- Simplify maintenance
Your design skills are impressive! With these tweaks, your project will shine on any device.
Resources:
- Andy Bell's Modern CSS Reset
- CSS Units tutorial by Kevin Powell
Keep up the fantastic work!
0 - @zololadeSubmitted 7 months ago@Mohamedkabba444Posted 7 months ago
Excellent work! Your project looks fantastic.
To take your CSS game to the next level, I recommend exploring:
- CSS resets: Andy Bell's Modern CSS Reset is a great resource for ensuring cross-browser consistency.
- CSS nesting: Simplify your code by nesting related styles.
For example, instead of:
button { /* styles */ }
button:hover { /* hover styles */ }
Use nesting:
button { /* styles */
&:hover { /* hover styles */ } }
This approach:
- Reduces code duplication
- Improves readability
- Enhances maintainability
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!
0 - @kaveeshagimSubmitted 7 months agoWhat 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
@Mohamedkabba444Posted 7 months agoWow, 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:
- rem and em for relative sizing
- % for proportional sizing
- clamp(), min(), and max() for dynamic sizing
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:
- Improve responsiveness
- Enhance accessibility
- Simplify maintenance
Your design skills are impressive! With these tweaks, your project will shine on any device.
Resources:
- Andy Bell's Modern CSS Reset
- CSS Units tutorial by Kevin Powell
Keep up the fantastic work!
0 - P@barka-devSubmitted 7 months ago@Mohamedkabba444Posted 7 months ago
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 helpful0 - @varshav1908Submitted 9 months ago@Mohamedkabba444Posted 7 months ago
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:
- Mobile-first design approach: Start with small screens and scale up.
- Flexible units: Use min(), max(), and clamp() for width, height, and font sizes.
- CSS reset: Apply Andy Bell's Modern CSS Reset for consistent styling.
To take your layout skills to the next level:
- Explore CSS Grid: Mastering Grid will simplify responsive design.
- Learn from the CSS King, Kevin Powell: His tutorials are invaluable.
Resources:
- Andy Bell's Modern CSS Reset: [link]
- Kevin Powell's CSS Grid tutorials: [link]
By adopting these strategies, you'll:
- Reduce CSS complexity
- Improve responsiveness
- Enhance maintainability
Keep up the fantastic work! Looking forward to seeing your next project.
0 - @iamhobvSubmitted 8 months ago@Mohamedkabba444Posted 7 months ago
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:
- Create a container element for the four cards.
- Inside the container, create a div wrapping the two center cards.
- Set the container to display: flex for flexible layout.
- Set the inner div to display: grid for easy card arrangement.
Responsive Units:
- Use rem, em, clamp(), min(), and max() for setting:
- Width and height
- Font sizes
- Padding and margins
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:
- Achieve a responsive card layout
- Improve flexibility for different screen sizes
- Enhance accessibility with relative units
Keep up the fantastic design work! Looking forward to seeing your next project.
0
