Users should be able to:
- See hover and focus states for all interactive elements on the page.
- The card is responsive to different screen sizes.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I learned how to use CSS custom properties (--colorBackground, --colorCard, etc.) to create a more maintainable and flexible styling system. Defining color values in one place allows for easy adjustments across the entire project. Additionally, I gained experience with @font-face to incorporate custom fonts with different weights, improving the typography of my design.
:root{
--colorBackground: hsl(47, 88%, 63%);
--colorCard: hsl(0, 0%, 100%);
--colorParagraph: hsl(0, 0%, 50%);
--colorTitles: hsl(0, 0%, 7%);
}
@font-face {
font-family: 'Figtree';
src: url('./assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
}
The hover and active states applied to .card demonstrate how to add interactive effects, such as scaling and changing box shadows, to enhance user experience.
.card:hover{
transform: scale(0.9);
cursor: pointer;
}
.card:active{
box-shadow: -8px -9px 0 0 var(--colorTitles);
}
Going forward, I plan to:
Improve Font Handling: Explore font formats and loading techniques to enhance performance and compatibility. Refine Responsive Design: Ensure that the card and other components adapt seamlessly to various screen sizes and devices. Leverage Advanced CSS Layouts: Experiment with CSS Grid for more complex and responsive layouts. Enhance User Interactions: Continue to improve interactive elements with animations and transitions for a more dynamic user experience.