Submitted about 3 years ago

Landing Page, Html, Sass, JS

MetisT• 275

@greatmetis

Preview site View code

This is a solution for...

Loopstudios landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted about 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)! 😁

MetisT• 275

@greatmetis

Posted about 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😊

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted about 3 years ago

@greatmetis

Hey, no problem! 👍 Glad to help! 😄

Rishabh Pagaria• 30

@Rishabh-Pagaria

Posted about 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

MetisT• 275

@greatmetis

Posted about 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.

Rishabh Pagaria• 30

@Rishabh-Pagaria

Posted about 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

MetisT• 275

@greatmetis

Posted about 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 😊

Please log in to post a comment

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