Design comparison
Community feedback
- @petritnurediniPosted 10 months ago
Congratulations on completing the Social Links Profile project! It's fantastic to see your progress in front-end development. Here are some recommendations and best practices to enhance your work further:
HTML Best Practices:
- Semantic HTML: Good use of semantic elements like
<main>
. To further improve, consider using more descriptive tags for sections of your content, like<article>
for the profile card. - Alt Attributes: Ensure all images have descriptive
alt
attributes. This is not only good for SEO but also essential for accessibility. - Link
href
Attributes: Add actual URLs to your anchor tags, or use#
if the links are placeholders. This makes your HTML more realistic and functional.
CSS Best Practices:
- Consistent Naming Conventions: Maintain consistent naming conventions in CSS. For example, if you're using BEM (Block Element Modifier), keep it consistent throughout your CSS.
- Responsive Design: Continue working on responsive design. Ensure that your layout looks good on all screen sizes. Use media queries to adjust styles as necessary.
- Use of Variables: Great job using CSS variables for colors. This makes maintaining and changing styles much simpler.
General Recommendations:
- Profile Card Design: Consider adding subtle hover effects to the social links for a more interactive user experience.
- Performance Optimization: Optimize images and minify CSS files to improve loading times.
- Accessibility: Ensure your site is accessible. This includes keyboard navigability and proper contrast ratios.
- Cross-Browser Testing: Test your site on different browsers to ensure a consistent look and feel.
Motivation for Future Projects:
- Each project you complete brings you closer to becoming an expert in front-end development. Keep experimenting with different layouts and styles.
- Stay updated with the latest web design trends. This could inspire your next project.
- Collaborate with others or share your work with the community for feedback. Learning from peers is a great way to improve.
You're doing an amazing job. Keep up the great work and continue pushing the boundaries of your creativity and coding skills! 💻🌟
Marked as helpful1@xStephxPosted 10 months ago@petritnuredini thanks for the feedback! I will practice the advices you gave me. If you have any other suggestions or recommendations, feel free to write to me, I'm glad you took the time for feedback!
0 - Semantic HTML: Good use of semantic elements like
- @justinconnellPosted 10 months ago
Great job Steph!
I noticed you making good use of bootsrap and hope you will find my feedback helpful.
I like that you are using 'self hosted' fonts instead of linking to google fonts - this improves privacy.
Your project structure makes sense and is easy to navigate, the code is readable and you make use of good naming.
In terms of improvement, you can start employing more semantic HTML where possible. Also I hope you don't mind me suggesting that you take a look at using TailwindCSS for your next challenge - seems like utility classes are your thing and I think you'll enjoy using TailwindCSS.
Keep going, all the best in your next challenge!
Marked as helpful1@xStephxPosted 10 months ago@justinconnell thank you for feedback! I will use more semantic HTML, and thank you for advice I will use TailwindCSS in future challenges! If you have any other suggestions feel free to text me!
0 - @jabnakarPosted 10 months ago
gg. xD this is wayyy simpler than mine
1@xStephxPosted 10 months ago@funtikar thanks for feedback! Yeah I make it to looks clean code, I saw your code it looks good but you forgot to do hover on social media buttons. If you have some other suggestions feel free to text me!
0 - @mverma45Posted 10 months ago
looks awesome good job.
1 - @iamkishoremahtoPosted 10 months ago
good work
0
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