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

Responsive site using sass, javascript and mobile-first workflow

@Seun-works

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


Hey, so this is my second attempt at this challenge. I really learned a lot from doing this again and really adopting a mobile-first workflow which made me more productive. Any response would be appreciated.

Community feedback

@tesla-ambassador

Posted

Hey, great challenge, and congrats on giving it a second go.. I haven't seen the first but I believe you have already made major improvements, kudos! I just have a few things to point out;

  1. I think you should increase your left and right margins to make it look a little more like the design, more so on the hero section (the second section after the top section) It's a bit too wide as opposed to the design. It doesn't necessarily have to be exactly like it but it should be close.
  2. When I hovered over your creation section (the one with the images), I noticed that the background would repeat it's self. I think you shouldn't change the background properties when you hover, it's much easier that way (I haven't learned sass yet so I couldn't easily get my head around your styling but by the end of this week I will have learned it and I will be able to help much more!) also the images were a bit stretched out.
  3. The texts don't change color to black when you hover above the creation section. I think in order to fix this, you could place them in a span and set the desired attributes when you hover above their parent container.
  4. For the HTML issues, consider using a <ul> or <ol> tag instead of a <div> tag as a parent container incase you are going to use a <li> tag... This will clear all your HTML invalidations and some of your accessibility issues.
  5. For some of the other accessibility issues, you should use only one main landmark, you can replace the other main landmark with a section or article landmark(s), you should also make sure all your divs, headers, image tags etc are contained within landmarks like (main, section, article, footer etc) Otherwise, this is really solid work, keep up the good work and keep on coding.

Marked as helpful

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