CSS grid, Flexbox for clipboard landing page
Design comparison
Solution retrospective
Howdy y'all,
I just finished my first junior challenge (also my first time completing a full landing page). To be honest I found this challenge pretty hard, I had to research the specific issues I was encountering and refer to some of the previous submissions for this challenge. One of the big lessons I learned from this challenge was how to use pseudo elements for hover effects. Currently I have that on the links only, but I'll soon add it to the buttons as well. Also, I changed the footer to black because I thought it would look a little cooler 😂.
Please let me know if you find any issues or if you have any feedbacks and comments. Thanks for checking out this solution 👍
Community feedback
- @grace-snowPosted over 3 years ago
Hi,
Overall, this looks great. You just need to fix some important things ☺
you definitely need to address some html points in this as some markup is invalid and other bits not best practice. For example
<button class="btn btn-ios"><a href="#">is invalid. Its a button or a link, not both.- some list items are not in lists
- interactive elements (anchor tags) are not wrapping social icons etc even though they would be clickable
- list items have hover states attached but they should only ever be on interactive elements
- there are no clear focus/focus visible states
I also suggest fixing the indentation to make it clear and consistent in html, as it is hard to read atm.
Good luck with finishing it off
Marked as helpful1@NebiyouErsaboPosted over 3 years ago@grace-snow Awesome feedback as usual 🙌, I will work on the issues you mentioned. Thank you for checking it out!
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