@Nazemrap
Latest solutions
Latest comments
- @Jawha3
Hey Nazemrap - great work getting it done despite the struggles.
I've recently learned myself to definitely use the mobile-first approach as it makes everything so much easier and you will end up with less redundant work.
In terms of using rem, vh, vw - I personally use rem a lot especially for elements that are crucial such as font-size, margins and paddings. I am still learning to use vh and vw properly but from what I understand a vw length is relative to the full width of the browser window and of course a vh would then be the full height of the browser window.
So if you used vw for font-size you could use calc() so the font-size doesn't scale drastically and becomes super small and unreadable. I reccomend checking this out: https://css-tricks.com/fun-viewport-units/ to learn more about it.
I hope that shines some light on your difficulties. :)
Marked as helpful - @vanzasetia@Jawha3
Hey Vanza - it looks really great!
I'm nowhere as experienced as you and would love to get your feedback on my own solution - https://www.frontendmentor.io/solutions/equalizer-landing-page-GVb4iQ1bL
- @catherineisonline@Jawha3
Looks great Catherine! I agree with the box-shadow which has already been mentioned.
- @ejbeloso@Jawha3
Hey @ejbeloso, great effort!
There's a few things that stand out to me when looking at your solution that I think you could work on to at least improve the next solutions you build.
The overall layout itself is pretty much identical to the mockup (design) with the two columns, however the margins are too small which makes it look more off compared to the mockup. When you don't have access to the mockup it can be tricky to get the right margin and whatnot but I'm certain you can train your eyes to get close enough to the design.
There's also a few other things that stood out to me - the font color in the CTA and Footer sections are grey rather than white and the font sizes are slightly off as well - this of course being something you will train your eyes to notice over time.
Looking at the code I'd suggest looking into HTML Semantics to avoid having a million <div> tags.
If you are serious about getting better at frontend I strongly suggest becoming Premium to get access to the mockups - it helped me a great deal.
Keep up the great work!
EDIT: I also just noticed you didn't add the social media links ;)
Marked as helpful - @Mainul-Islam-Nirob@Jawha3
Hello Mainul-Islam, I took a quick look at your solution and a few things stood out to me that might help you in the future.:
I noticed your background picture is cutting off at the 1440px mark. I know the style-guide.md says the design was made in that width - but I do think it would look better with a fullsize background (I believe this can be done by adding "background-size: 100%" to the element.)
You should try and make a seperate folder or at least a seperate file for the css and then link it through your html. It makes it more neat.
What I'm trying to learn myself and suggest you try as well is using "rem" and "em" where approbiate instead of "px".
And lastly I would suggest that you use the index.html file you get from the downloading of the challenge (this may just be me - but when I see something slightly different to the design it bugs me :3)
As I mentioned I only took a quick look so I may have overlooked something. I also want to point out that I'm not an expert on the subject - but have been learning for a little while.
As for the mobile version I think it looks good - the issue is more with the desktop version as your solution is slightly smaller than the design but otherwise I think it looks great :)
Marked as helpful - @harshag3036@Jawha3
Hello harshag3036, I was actually about to start this challenge myself. I think I will be using some CSS grid or flexbox to acheive the card layout. I am far from being an expert on the subject and cannot really comment on what is best practice in this scenario - that said, I do think you could have saved yourself a headache with the positioning had you used grid or flexbox.
