Design comparison
Solution retrospective
Hey! I am Reza π I just recently started to learn web-development and would like to get every little help out there. So if you have the time, feel free to look over my project/projects and give me some advice to get better as fast as possible.
Project #6: Some questions for this "Huddle-Landing" project:
- How can I color-overlay my icon-images?
- Is my "Index.html" well structured?
- Did I center everything right, or was there a easier way?
- What did I do completely wrong, and just have luck within this project?
- What would you do different?
I appreciate itβοΈ
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi, Reza! π
First, I recommend removing JavaScript files from the repository. This website does not use JavaScript and also those files make me feel confused. Also, remove the
starter.html
file since it is not used.For the social media icons hover effect, I recommend using inline SVG instead of
<img>
. Then, you can target thepath
and set thefill
value tocurrentColor
. Doing that will make the icon inherit the color of the anchor tag. As a result, you can doa:hover
and then change thecolor
value to change the color of the icon.Make all the background images as the background image of the
<body>
. Those are decorative images so it is not a problem to make them as background images.Also, I only expect one media query to switch the mobile layout to the desktop layout. I recommend simplifying the styling. Make the default styling the mobile layout. Do not wrap the styling with a media query. Then, use only a
min-width
media query to style the desktop layout.I hope this helps. Happy coding!
Marked as helpful0@rezajaberPosted almost 2 years ago@vanzasetia of course, aou are right. Thank you for your useful tips :)
0@vanzasetiaPosted almost 2 years ago@rezajaber No problem! I am glad I could help.
0 - @amalkarimPosted almost 2 years ago
- To color overlay icon-images, you could use CSS filter.
filter
changes<img>
color based on its various properties. For example, try this:
.container-footer img:hover { filter: invert(1); }
Read more about CSS filter in this css-tricks article.
- To see whether your
index.html
well structured, you could check Accessibility report tab and HTML validation report tab in this page. They will evaluate your page and give necessary recommendations about your solution page structure.
Hope this helps
0@rezajaberPosted almost 2 years ago@amalkarim thank you for the tips, espacially the one with the html-structure :) I just skipped it :)
0 - To color overlay icon-images, you could use CSS filter.
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