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 Project

DLyons 20

@drding00

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View Challenge

Design Comparison

SolutionDesign

Report

4

Accessibility Issues

3

HTML Issues

View Report

DLyons’s questions for the community

I tried for pixel perfect on this one. Hopefully I've gotten pretty close. My working screen resolution is 1920px so I ended up adding a dark background to the site because the specs stated a max width of 1440px. I think it works pretty well with the overall color scheme.

This should be fully responsive, so absolutely test it on different devices and operating systems if you can (I myself only have access to windows and android).

Any and all feed back is welcome! Thanks for your time!

Community Feedback

@steventoben

Posted

This looks pretty nice, I'm getting black bars on the margins which you mentioned. I would say don't go for pixel perfect. That's not a realistic thing to do, you shouldn't worry too much about sizing and everything. With that said, go ahead and remove the max-width: 1440px property you have set. When you do it looks perfectly fine. There's no need to limit the max width just because the design guide said to. It looks much better imo without the black bars. While on the topic of black, personally I don't like such deep blacks in my design, my text is usually #2f2f4f all the way up to #708090, but that's not really relevant.

The only other thing I'd say is make your animations faster. Feedback animations, such as hovering over a link should be in the ~200-300ms range (just my opinion). You'd be surprised how much of a difference it makes. It makes the webpage feel much cleaner and more responsive.

Buy overall I think this looks great! Good job with the responsiveness, it doesn't seem to have any breaking points so nice work!

2


DLyons 20

@drding00

Posted

@steventoben Thank you for the awesome feedback!

I absolutely hear ya about going full width for the page. I agree with nixing the odd sizing in the project spec but I wanted to follow the directions. I treated it like a client's request. They want 1440px, they'll get 1440px haha. And as for aiming for pixel perfect, again I treated it like I was handed a psd file and was asked to recreate it as is. Which was actually pretty fun to try and pull off. But again I totally get where you're coming from.

I'm honestly not a fan of exactly black either, I usually go for a dark grey. Which I would have used had the design not specified. On that note I've been messing around with slightly offsetting my text colors (without losing contrast), and I dig those colors you mentioned. I'll have to give them a try.

I will definitely tweak those animation times! I'm not married to the timing as it is, just that it didn't feel too long nor did it feel too short when I finished coding it. Thanks for the timing suggestions.

I really appreciate you commenting on my submission Steven, you've given me a lot of food for thought!

0

Please focus on giving high-quality, helpful feedback and answering any questions drding00 might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!