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

Equalizer landing page

#bem#sass/scss

@volod-one

Desktop design screenshot for the Equalizer landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey there! Here I have one more solution. Well, I don't really like to make this accurate positioning for elements cuz it difficult to make really responsive. Maybe pixel-perfect is cool thing but I don't think it is reasonable. Anyways challenge is done.

Let me know how I can impove my solution. Don't be afrait to leave your comment here and see you next time.

Community feedback

Can Surerā€¢ 80

@cansurer-at

Posted

I think it is pretty good!

1
P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey @DevilDoctor27 , looks real good! I wouldn't worry about being pixel-perfect. Getting as close as you can to the design is more achievable, which is what you did here. Great control on the backgrounds and images.

A few thoughts:

  1. Header:

    • I don't see the advantage of using position: absolute on .header__inner. This div could be deleted and its padding-top can be added to header__logo
    • Since there's only one item in it (logo), you could get away without using flex and all its properties, it would still be flushed to the left.
    • I would make the logo an anchor tag to the homepage
  2. Same with flex properties on <div class="content">. This div could also be deleted. After doing so, place the .container under main instead of nesting it under .intro.

  3. For .card , again, no need to use grid. Apply margin: 0 auto; to .card__inner to center the contents.

Hope this helps :-)

1

@volod-one

Posted

@emestabillo Thank you for your feedback. Sorry but my ideology doesn't let me consider numbers 1 and 2 as valuable ideas and let me explain why.

First of all as you can see in most of my projects I use BEM methodology. BEM is good enough for me and it is easy to maintain. In large projects it really helps to reuse some sections without editing styles. And nesting container between component and component__inner one of those things which often happens if we are styling sections. So yes, technically I could remove the container but it is just easier to manage if I want to make my content width smaller or bigger and so on. Next, please check carefully my header: position absolute is not on __inner, it is on parent. It is part of ideology. If you want your header to appear on top of your page while you are scrolling and don't make it affect the styles of your content (like positioning) it is a good thing to do it in this way. Btw, if you will add more elements to the header you don't need to restile them too much because __inner is flex. Also, try to delete the main tag from my content, you will see some magic. My footer is never going to move on top of the page. Well, I realize that I could move my .content styles to the .page then remove .content, it won't affect my layout at all.

I would say all those things above are not necessary on this small project but I am trying to practice my modular seeing of every single element of the page so if I want I can use these elements on other pages and projects.

And about card. It was the last element of my page when I was making it so I kinda little bit tired and didn't consider margin: 0 auto at all. Thank you for pointing it out.

Please let me know where I am wrong and what I should review again about my ideology.

0
P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

The beauty of webdev is there is more than one way to do things, so it's not about being wrong or right :-) Those are merely suggestions you may or may not implement. Keeping code maintainable is very important, and senior devs have told me to try and keep things simple. The more divs you use, the more you have to maintain. It really depends on the design and the scope of the given project.

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