@cansurer-at
Posted
I think it is pretty good!
Looking to hire developers?
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.
@cansurer-at
Posted
I think it is pretty good!
@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:
Header:
position: absolute
on .header__inner
. This div could be deleted and its padding-top
can be added to header__logo
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
.
For .card
, again, no need to use grid. Apply margin: 0 auto;
to .card__inner
to center the contents.
Hope this helps :-)
@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.
@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.
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