I got really stuck on getting the share icon to work for both mobile and desktop. I thought of doing two separate components and hiding one but that felt a bit hacky. Maybe I'm overthinking it. Curious to see how other people did it.
The line-height for both .tagline and h1 is set to 25%, which is unusual and might cause readability issues. Consider using a more conventional line height (e.g., 1.2 to 1.5 for headings and 1.5 to 1.8 for paragraphs).
Consolidate Common Styles: Move common styles outside of media queries to avoid redundancy.
Sizing and Margin Reset: The margin: 0% in the universal selector is unusual. It should be margin: 0 to remove all margins.
I’m proud that I completed this project in under an hour and that I’m becoming increasingly comfortable with Flexbox. Additionally, I made a conscious effort to avoid using px units, as suggested by my peers, and instead opted for more responsive units. I’m also really pleased with how the transition effect on the buttons turned out.
What challenges did you encounter, and how did you overcome them?I didn’t encounter any challenges during this project. Everything went smoothly.
What specific areas of your project would you like help with?I would appreciate feedback on my CSS code and any tips for improving it.
To improve maintainability, especially with repeating colors and spacings, you might consider using CSS variables:
.card {
max-width: 24rem;
background-color: var(--white);
padding: 24px;
border-radius: 20px;
border: 1px solid var(--gray-950);
box-shadow: 8px 8px #000000;
transition: box-shadow 0.4s ease-in-out;
}
.card:hover {
box-shadow: 16px 16px #000000;
cursor: pointer;
}
.card:hover .text-preset-1 {
color: var(--yellow);
}
nsive Design:
Your media query for screens smaller than 468px adjusts font sizes well, but consider adding some padding or margin adjustments too for improved readability on small screens. You might also want to make the body or .card-container layout adjust more smoothly for larger screens by using min-width or changing the flex direction at higher breakpoints.
Learn about flex and how to work with it. Also found a better solution to provide a gap between text part with "gap" property, rather than doing margin/padding manipulation.
What challenges did you encounter, and how did you overcome them?Main concern was to understand when and how to use margin/padding on one or another block. Found out there is a more optimal solution as "gap" in flex
Consider using rem or em for consistent scaling across different devices rather than hardcoded pixel values, especially for margin, padding, and font sizes. This will improve responsiveness.
