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

Loopstudios landing page using Tailwind CSS JIT

argel omnes 1,800

@argelomnes

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Not really specific to this project but a general one. I feel like I don't comment my code as much as I should. How do you decide when at what to comment on yours?

I tried to use as much Tailwind generated classes vs writing my own for this challenge. If you've used it, how much custom CSS do you still write? And do you still prefer writing your own?

Thanks!

Community feedback

aaalyssie 85

@alyssie

Posted

The screenshot is almost pixel perfect. Awesome!

0

argel omnes 1,800

@argelomnes

Posted

@caluyaalyssamae Thanks!

0

@AgataLiberska

Posted

Hi @argelomnes! I personally only comment when I learn something new to be able to go back to it and understand it easily, but I'm not a pro and would love to hear what others do, too :)

Your solution looks great, the only thing I noticed is that the heading overflows the container on smaller mobiles.

I also have a question about keyboard accessibility - when I tab through this page in desktop size, I go through the image links first and then to the 'see all' link. I get how that comes from the markup but I wonder if that would be an issue with UX etc? Or am I looking into this too much? :) Genuinely curious about this!

0

argel omnes 1,800

@argelomnes

Posted

Hey @AgataLiberska,

Do you mean the "Immersive experiences..." right side? Thanks for catching.

keyboard accessibility: to be clear, before the image links, you first tabbed through logo and nav links first, right? I'm not really sure if tabbing to 'see all' last would be an issue with UX. I'll look into it. But since it's the last item in the mobile design, I can only assume that the designer wanted the users to first check those samples. And if then click the button if they wanted to see more.

0

@AgataLiberska

Posted

@argelomnes yes and yes, all the link focus styles in the top navigation and in the footer are there and everything is working :) I feel like this order makes more sense for screen reader users but for sighted users who use keyboard instead of a mouse. But yeah I guess that it is more of a design issue :)

0

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