Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo Dark Landing Page - Flexbox, Mobile-First

Anna Leigh 5,135

@brasspetals

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This one took me far longer than I originally thought it would, and I definitely should have used Sass - next time! Also first time experimenting with inline svg, which I enjoyed.

If anyone knows of an easier way to get the top mobile background image to match the design other than my weird linear-gradient and positioning nonsense (used for phone screens only, not the tablet resize), please let me know! I feel like there’s probably an obvious answer, but I’ve been staring at the issue too long to see it.

On the same note, has anyone managed a “pixel-perfect” solution of the desktop four icon features section without using a ton of micro-adjustments? I tried to do it as simply as I could, but trying to get it to match perfectly made me feel like I was slowly going mad.

If you see anything else or have any other suggestions, please let me know!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Wow, Anna! 😍

Amazing, pixel-perfect work! Your attention to detail is great!

I like the hover effects you added to the icons beside the information in the footer of the page.

I suggest,

  • Between 640px and 1200px, the font-size of most of the text on the page becomes very, very large (about twice as large as the regular mobile and desktop layouts). Decreasing that font-size would be a good idea, I think.

I suggest you try using CSS grid for the desktop (and mobile) layout of the features section. It's very easy to set up a few columns and rows, determine which content should be placed in each grid cell, specify a grid-gap between the grid cells, and make your grid layout responsive without any media queries! Tweaking your grid to match that of the design should be no problem, either. 😉

As for those minor accessibility issues, you should be able to get rid of them by adding a <title> element to each of your inline SVGs.

Wonderful work! 🙌

As usual, keep coding (and happy coding, too)! 😁

1

Anna Leigh 5,135

@brasspetals

Posted

@ApplePieGiraffe So funny story - when I first started coding this, I noticed the mobile design file was 750px wide, so that's what I went for - not realizing until I was nearly done with the entire thing that 750px is double 375px, the typical mobile layout design size for these challenges. A ridiculous mistake. I was so upset with myself for not realizing something so obvious sooner. Hence the "tablet" layout is essentially double that of the mobile layout. 😅😂 But you're aboslutely right, it does look pretty goofy when you're resizing between the mobile and desktop versions (although great if you have bad eyesight!). I will go back and re-do the medium styles (if i'm lucky, I can just take everything down by 25% or so).

I definitely need to start using grid more. I think here I was just a bit apprehensive of mixing grid and flexbox, although I know you're typically fine as long as grid isn't nested inside a flex container (or so I believe).

Thank you for the tip about the accessibility issues! I wasn't sure what to do with the link errors. I added the titles and generated a new report - all fixed! 🙏

And thank you, as always, for taking the time to look through everything and leave such great feedback! I really appreciate it. 😊

Edit: Went through and revamped the tablet/medium styles. Thank you again for the suggestion. I really didn't want to have to go back and change it all, but knew you were right and am glad I did!

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@brasspetals

Glad to help and to hear you were able to add those improvements to your solution! 😄

I actually did that same thing you did when completing a challenge just a week or two ago! It is kind of frustrating to realize your pixel-perfect solution is only pixel-perfect for a completely wrong set of dimensions, but it happens, I guess, and we simply need to bounce back!

👍

1
Anna Leigh 5,135

@brasspetals

Posted

@ApplePieGiraffe Glad to hear I'm not the only one! 🤦‍♀️😂 Live and learn. At least it won't happen again!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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