Design comparison
Solution retrospective
While I'm happy with the result that you see on screen, I'm unhappy with the underlying "code". I think there could have been a much simpler and cleaner way to achieve the same result. I feel that my solution is too "hacky", relying too much on margins and padding to achieve a perfect match against the original.
The main thing I learned/realized during the process is that I need to do much more forward-planning (now that these challenges are becoming larger and more complex). I think I also need to see the Figma design, so that I can work out the dimensions in advance and (hopefully) inform my approach to the solution.
I'd love to hear from anyone on their experiences of having access to the Figma design files!
I'm feeling more confident using semantic markup, but it's such a big subject and tips and pointers would be most welcome! :)
Thanks for taking a look. Have a great day!
Community feedback
- @10highPosted over 2 years ago
I fixed the errors created by the Font Awesome "fonts" for the social media icons by using the SVGs also available from Font Awesome and removing the JS script import from the top of the HTML file. (You can see it commented out in the index file.)
I also added aria-labels to the SVGs nested inside links, which seems to have satisfied the lack of discernible text errors I had previously.
Now no errors, yay!
0 - @10highPosted over 2 years ago
Hm, the report has generated a bunch of errors, most of them seem to be from using Awesome Fonts for the social media icons. If anyone has any experience with this and how I can resolve them, please let me know.
Thanks. :)
0@vinit-churiPosted over 2 years agohey @10high good job completing this challenge
Keep up the good work
Your solution looks great. also good work using the filter method to invert the logo Color, as well as using HTML5 inbuild form validator I came to know about both of this things long after I completed this challenge, I think You must have seen my solution, as my workaround for the inverted color footer logo was to create new inverted color image 😅, I think the accessibility for the <a> tag are due to you not having text in it, you have a icon in it
Marked as helpful0@10highPosted over 2 years ago@vinit-churi Thanks for the feedback :)
Actually, no, it wasn't your solution I saw. It seems not many people do this challenge and it took a lot scrolling to find someone else's solution. But I will be taking a look at yours later. It will be interesting to see a different approach.
Thanks for the tip on the accessibility issues. I'm going to look into it and see if I can solve the problem.
0
Please log in to post a comment
Log in with GitHub
Join 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