Responsive landing page using GRID
Design comparison
Solution retrospective
Thanks Frontend Mentor for this project, I had fun doing it even though i encountered some difficulties.
-
I could not change the position of my grid using 'grid-row: 1/2;
-
When reducing the size of my screen i.e. when I try to make it into a smaller mobile view, i found out that there is still some padding left on the right side of the page.
-
the worst problem I encountered was my inability to get my hamburger to display the nav links using JavaScript which made me completely delete JS.
I would be glad to get feedback from our community on how to better improve on my skills. Thanks in anticipation.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Ozoude, good attempt at this challenge. I had at your CodePen solution, and unfortunately the layout looks fairly broken because the images cannot be loaded; the format of the links are not written properly because you don't have an
image
folder there in your CodePen. What you can do is try to link the image link from the folder in your GitHub repo instead, and then try again.I see in your profile that your other projects are also in CodePen. Since you have a repo already, have you tried having your site hosted elsewhere? You're able to deploy your site via CodePen if you are a member and have a project, but if not, you can use GitHub or Vercel for free. The problem with just uploading a CodePen is that the screenshot will not match since it just takes a screenshot of CodePen and not your work. Most importantly, you're bound to have many many HTML validation and accessibility issues, and that won't give you an accurate picture of what real issues you have in your code. Also, you may not get as many comments and feedback if your site is not easily accessible.
I highly suggest that you check out Matt's article on hosting a site (https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe), and I really do suggest that you look into how to host your site for your next challenge, or even for this one if you can update your solution. Before submitting your solution, remember to check that everything is in working order.
Good luck, and I hope to see a working version of this challenge!
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