Design comparison
Solution retrospective
Hi there, 👋 it's been a long time since I uploaded something here. I was learning some new things, like frameworks and how to use them.
In this challenge, I use Vue.js to create a simple static page. Since I'm new to this, I wanted to start with something easy. Any feedback on how to improve my code and general good practices for the use of frameworks is appreciated. Thanks! 🤗
Community feedback
- @EidenRainPosted 11 months ago
Great work! I've got some feedback.
Vue.js has a neat style guide, that helps with being on the same page when working in team, but is also best practice in general. One example of a 'Strongly Recommended' rule would be 'Single-instance component names'. Components that will only be used once on the page should be prefixed. For example, 'TheHeader' or 'TheFooter'. Maybe you can find some other useful rules in the style guide, like the 'Use multi-word component names'!
Two more apparent things I noticed:
- You've seen that there are a few buttons on the page looking nearly the same, and created a component. Great! But the component should be more flexible. It's currently called 'ButtonPink' and it's used two times. But there is one more Button on the page! The white on in the upper right corner. That one is hard-coded inside the 'Header.vue'. I think it makes sense to have a single Button component, called something like 'BaseButton' or 'AppButton' (Following the 'Base component names' rule in the style guide). Either it will accept props like 'backgroundColor' and 'textColor', or an even better way is to have a prop called something like 'variant' or 'type' and managing the 'style type' inside the button component. This way, if you want to change all buttons across the page, you only have to change it in one spot! Let yourself be inspired by component libraries like Vuetify or Naive Ui!
- You are using tailwind colors like 'bg-[#00252e]'. I think a better practice would be to define these colors inside the tailwind.config and use them! This way the names a more descriptive.
A tiny, small thing I noticed is the hover state of the social media icons. When hovering inside them, but not exactly above the SVG, the border gets pink, but the SVG doesn't! This can be a common use case. Using tailwind you can apply a 'group' to the parent element and the 'group-modifier' to the child element and voilà, the SVG changes its colors, while only hovering above the parent.
Marked as helpful0@VickyAzolaPosted 11 months agoThank you. I had no idea that 'group' existed! I have had that problem with various projects. I will be using it from now on and trying to implement your other suggestions for my next challenge. @EidenRain
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
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