Skip to content
OverviewSolutions
2
Comments
7
Jannie Hansen
@Jawha3

All comments

  • Nazemrap•200
    @NazemrapSubmitted over 2 years ago

    Got some trouble at first, had to delete my first version and rebuild it from scratch.

    • difficulties to organize my self for the media query. Looks like i did it upside down. I should have start with the simplicity layout and go toward the more complex one. (From the phone to the bigger screen for that exercise.)
    • Also, I should get away from the px - i should use more responsive unites measure. But how should i use better Rem or vh, i understand what they do but i don't get, yet, how to use it properly especially for an exercise like that.

    Equalizer landing page, flex.

    2
    Jannie Hansen•110
    @Jawha3Posted over 2 years ago

    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
    1
  • Vanza Setia•27,775
    @vanzasetiaSubmitted over 2 years ago

    Hello Everyone! 👋

    This was, in my opinion, the hardest newbie challenge. There were a lot of decorative images that I needed to take care of. I even ended up doing a revert commit to rewrite the styling. However, It's a nice and fun challenge that really tested my CSS skill, and I'm glad I was able to complete it. 😊

    I don't have any questions. However, feel free to give me any feedback or comments. 😉

    If you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    Equalizer Landing Page | HTML CSS Sass

    3
    Jannie Hansen•110
    @Jawha3Posted over 2 years ago

    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

    2
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted over 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Base Apparel coming soon page.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Base Apparel coming soon page

    8
    Jannie Hansen•110
    @Jawha3Posted over 2 years ago

    Looks great Catherine! I agree with the box-shadow which has already been mentioned.

    0
  • Jannie Hansen•110
    @Jawha3Posted over 2 years ago

    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
    1
  • Jannie Hansen•110
    @Jawha3Posted about 3 years ago

    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
    1
  • HARSH AGARWAL•10
    @harshag3036Submitted about 3 years ago

    I have majorly used the POSITION attribute for positioning various text elements. Please tell whether it is the most correct way or I can use FLOAT or ALIGNMENT for positioning.

    HTML and CSS

    2
    Jannie Hansen•110
    @Jawha3Posted about 3 years ago

    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.

    0
  • Ahmed•105
    @Kirin02Submitted about 3 years ago

    I feel like my code isn't professional at all so any helpfull advice would be appreciated!

    HTML, CSS

    1
    Jannie Hansen•110
    @Jawha3Posted about 3 years ago

    Hello Kirin, I'm no expert at all but what I've been taught and trying to do more of, is use more html sematics and not so many div-tags.

    Also just want to point out that it seems we are not able to actually see the website, only the code - something must have went wrong when you uploaded the solution :)

    EDIT: Oh and also I just noticed you use "px" in your css - that I have been told is best to avoid in most cases and instead use "rem" and "em" where approbiate.

    Marked as helpful
    1