Submitted about 1 year ago

Responsive eLearning Landing Page for Mobile, Tablet, and Desktop

Emilee• 150

@EmileeEversole

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Skilled e-learning landing page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

How do you stay organized when it comes to designing pages for mobile, tablet, and desktop? Where do you start? I try to do mobile first, but I have a hard time figuring out what I need to do/undo when it's time to design the layout for tablet or desktop.

This was my favorite project so far! It was also my first premium project - totally worth it!

Community feedback

Jonatas Martins• 100

@jonatasolmartins

Posted about 1 year ago

It's looking amazing, Congratulations!

The way you did using Flex was really hard to do.

You can try using a grid instead and I can guarantee that starting with a mobile layout will be much easier.

I have two good examples of re-styling my layout based on the viewport using grid and media query you can check on my GitHub here and here.

Marked as helpful

Emilee• 150

@EmileeEversole

Posted about 1 year ago

Thanks so much! I kind of went back and forth on using grid and flex when it came to this project. I have more experience using flex and grid still kind of seems intimidating to me, but I think I'll try it out again on my next project. It will certainly be a lot easier after looking at those amazing examples! Thank you!! @jonatasolmartins

Jonatas Martins• 100

@jonatasolmartins

Posted about 1 year ago

I'm happy I could help somehow @EmileeEversole. :)

P. Ricardo• 2,370

@pRicard0

Posted about 1 year ago

Well... I think it's pretty hard to stay organized. Maybe with a Framework is easier for you. Do you already know how to use one?

TailwindCSS kind of forces you to start mobile-first and you have more than enough knowledge to learn. I think you can learn it in less than a week.

Some CSS tips

I think you should use rem for font-size and etc...

Despite that, your project looks great, congratulations!

Marked as helpful

Emilee• 150

@EmileeEversole

Posted about 1 year ago

I actually don't know how to use one, but I'll start looking into it now! I generally prefer to use rem but, for some reason, I'm always hesitant to use it for font. I'll try it out on my next project!

Thank you so so much for your feedback, I appreciate it! @pRicard0

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