What are you most proud of, and what would you do differently next time?
I learned how to navigate through the Figma mockup.
What specific areas of your project would you like help with?
I implemented the typography design system like this to reuse the presets given in the style guide:
%typography-text-preset-1 {
font-family: 'Figtree', sans-serif;
font-size: 1.5rem;
font-weight: 800;
line-height: 1.5;
}
.blog-title {
@extend %typography-text-preset-1;
}
Do you think that's a good approach or is there a better one?
I'm using so called "SCSS placeholders".
@MikDra1
Posted
@MichaHuhn
If you use this styling on most of the elements the best thing to do would be to just rely on inheritance. But if you have this styles specific for only 4-5 elements in you whole design then I think your approach is the best.
Good job and keep going 😁😊😉
Marked as helpful
@francimelink
Posted
Although I don't have experience with Vue JS yet, I can only commend this solution. Regarding best practices, I cannot assess if everything is perfect. However, as far as the HTML code and styles are concerned, I can say, "Good job."
The HTML is well-structured, the elements are semantic, and the class names for each element are clearly indicative of their purpose.
According to the "Design comparison," it is pixel perfect. As for accessibility, everything is fine.
This is definitely a good solution. It's an exemplary reference for me in many aspects.
Best regards,
Franci
Marked as helpful
@MichaHuhn
Posted
@francimelink Thank you!
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
