Design comparison
Solution retrospective
In the challenge, I've learnt how to create an open-up menu with the background scrollbar disabled.
And I found it is useful and crucial to analyse the layouts for BOTH big screen and small screen before I write HTML, because this will impact which css attributes I want to use to display the design.
This practice is great! BIG THANKS for the community, and I'm always open to any suggestions.
This is the 5 months since I started my career and I am planning to apply my first (paid/unpaid) front end dev job;)
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hey there, MetisT! π
Good effort on this challenge! π It definitely is very important to look carefully at the mobile and desktop designs of a challenge in order to plan out how you are going to build a website and make it responsive! π
I suggest,
- Taking a look at your solution report and trying to clear up some of the errors that are there. You should add some
alt
text to the images to make your solution more accessible and clear up some of the errors that are there. - Considering using CSS grid to lay out the cards in the "Creations" section. It really seems like a good opportunity to use CSS grid (which is a wonderful, powerful layout tool) and should help you fix some issues such as the cards becoming very large at around 980px.
- Darkening the background of the hero section of the page so that the text content in that section stands out better against the background (as in the original design).
Hope those tips help. π
Best of luck in your job hunt! π
Keep coding (and happy coding, too)! π
1@greatmetisPosted over 3 years ago@ApplePieGiraffe Thank you very much! Your suggestions are really specific and helpful! I have fixed them, and through your thoughts I even found the details I didn't follow the prototype namely background filter for the images in the section of "creations." I also believe the insights you offered are what I need to practice in the future design ;) Thank you again!
Many loves to this communityβ₯οΈ Great to know front end world tooπ
1@ApplePieGiraffePosted over 3 years ago@greatmetis
Hey, no problem! π Glad to help! π
1 - Taking a look at your solution report and trying to clear up some of the errors that are there. You should add some
- @Rishabh-PagariaPosted over 3 years ago
Hey brother I loved it, even your landing page in working good in mobile view. So, I wanted to ask you for help could you suggest how to make my website responsive in mobile view because right now it really sucks as I'm not getting the desired results. If possible do help me out.
Thank You
All The Best
Happy Coding
0@greatmetisPosted over 3 years ago@Rishabh-Pagaria Hello! I'm happy to have a look for your code if you can post it or send the link to me. I will try my best.
For the responsive design, I would suggest you to use/learn Bootstrap which I used for this design.
0@Rishabh-PagariaPosted over 3 years ago@greatmetis I'll surely send you as I complete it, is it possible to connect with you over twitter or any platform ?
Thank You
0@greatmetisPosted over 3 years ago@Rishabh-Pagaria I'm not on twitter and I believe Slack is a great tool to use. Have you joined our Slack community? You can find me in the introductions channel, simply type my name Metis Teng π
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