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
Log in with GitHub
OverviewSolutions2Comments14

All comments

  • Francis Luigie Quenano• 330

    @flquenano

    Submitted

    First time using gatsby, still alot to learn specially on animation and transitions. All feedbacks are greatly appreciated.

    -edit Code refactored, SEO and Manifest added. fixed some alignment issues at pricing page.

    Gatsby, Art-direction, Transitions

    3

    Justin Punzalan• 535

    @justAdevTV

    Posted

    @flquenano this is AMAZING! Super clean and I love the animations you added in.

    Suggestions for improvement:

    • Add alt tags for images (it's good for accessibility).
    • The /pricing page has a horizontal scroll starting at screen width ~540 and lower. Removing the horizontal scroll will make it a lot better.

    Again, really nice work. It's hard to find points for improvement at this stage.

    Keep up the great work 🙏

    2
  • Jesus David Villarroel• 100

    @jdvillarroel

    Submitted

    The rating stars look a little off. In addition, I cound not figure out why the page has a vertical scroll. I am just starting with web development, so I am sure my code has a lot of issues. This is my first sito from scratch. Thank you.

    Social Proof Section using HTML and CSS

    1

    Justin Punzalan• 535

    @justAdevTV

    Posted

    @jdvillarroel, this looks GREAT! I wouldn't have even known that it's your first site from scratch. Love that it's responsive too.

    Here are some suggestions for improvement:

    • For class .grid-container, if you add padding-bottom: 0; it should remove the scrolling issue you're experiencing.
    • Here's one way to get the stars vertically centered. Make all the <li> tags in .rates-list display:flex;. Then make .stars-container have a top and bottom margin of auto. From there it should work!

    Again, amazing work! Keep it up 🙏🏼 -Justin P

    1
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    Looks pretty good on my desktop and phone!

    Suggestions for improvement:

    1. At 874 width, the site starts to look a little tight. It wouldn't hurt to add another breakpoint here.
    2. For Buttons, I'd suggest using padding instead of setting the width. Check this out: https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic
    3. My mouse doesn't turn into a "pointer" when I hover over the social buttons. You should add an <a> tag for accessibility too.

    Overall, nice work!

    Keep it up 🙌

    3
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    Nice work 😃

    Everything works really well and it's hard to find a point to improve on haha. I'm really impressed with the keyframes!

    My one suggestion would be to add an effect when the buttons are clicked on.

    Keep up the great work 🙌

    1
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    It looks great! I agree with what @ApplePieGiraffe has to say though.

    Other than that my only suggestion would be to add some sort of hover effect to the button you have there. Stuff like changing the mouse to a pointer. Check these out if you want references:

    • https://www.w3schools.com/cssref/sel_hover.asp
    • https://www.w3schools.com/cssref/pr_class_cursor.asp

    Hope this helps!

    0
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    @joanne it looks good on my phone and desktop. Nice work :D

    Suggestions for improvement:

    • Add a box-shadow for the card. It's an easy point!
    • Use rem or em for fonts instead of px (check this out for why: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px).
    • At 782 width, the text on the bottom, "Challenge by Frontend Mentor. Coded by Joanne.", is off-center. It's also a bit small. We want to be able to read the footer easily so we know what you got to say!

    Again, great work overall 😄

    -Justin P

    0
  • Mustafa• 415

    @Mostafa-T

    Submitted

    Hey,

    Kindly if you have time review my code and tell me if there any comments to improve the CSS or how could i make it more effective.

    All comments are welcome and thank you in advance

    Article Preview component UI

    2

    Justin Punzalan• 535

    @justAdevTV

    Posted

    @Mustafa, it looks pretty good on my desktop. Nice touch with the share button animations!

    Suggestions for improvement:

    • Use rem or em instead of px for fonts.
    • At 772 width, the padding and fonts look a bit off. I don't think it would hurt to add another breakpoint here.
    • Add a box-shadow to the card. If you're trying to get closer to the mockup it's some easy points :)

    Hope this helps, Justin P.

    0
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    I like the footer and hover effect that you added in. It's a nice touch!

    Suggestion/Extra-Challenge:

    • Add a transition for the button hover. It'll really spice it up! Check this out if you want a reference: https://www.w3schools.com/howto/howto_css_transition_hover.asp

    Best, Justin P

    1
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    Andy, this is really cool! The loading mouse effect is a nice touch 😃

    My revision suggestions:

    • Change font-sizing so that it uses rem or em
    • Make it so that invalid URLs don't cause the loading animation to run forever. It breaks when you give it something it can't fetch. Try giving it an invalid URL.

    Great work overall, Justin P

    1
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    Great work overall 👏

    It's responsive and pretty!

    The only thing that sticks out to me is that you have more than one h1 tag on your page. Your main header, "Our Pricing", should be in an h1 tag and the card titles like "Basic" should be in h2 tags.

    I hope you find this useful, Justin P

    0
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    Nice work 😃

    I really like the shadows! My only tip would be that if you really want to get pixel-perfect, check this plugin out: https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

    Best, Justin P

    1
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    @Militus! I'm happy to see you pushing out another GREAT project 😃

    Please message me on slack, I'd love to get connected with you there!

    Because you asked, some suggestions for improvement:

    • Add in the missing social-links on the bottom right of the footer
    • Avoid using percent based sizing for buttons (you did it for "shorten it")
    • Use padding instead of setting width & height for buttons
    • Use em instead of pixels for fonts
    • Fill in alt tags for images (easy accessibility points)

    Overall amazing work. I can't wait to see what else you push out.

    Hoping to hear back from you 😃

    1
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    Hey @joshysmart,

    Great solution overall! The filters work on my browser btw.

    Also, I agree with @davidomarf's comments regarding widths 780-1080 and the clear button.

    I also did this challenge recently! It'd be cool to get your thoughts on my solution if you have time: https://www.frontendmentor.io/solutions/near-perfect-pixels-11-w-nextjs-and-styledcomponents-FYfg1bDZY

    P.S. I didn't bother fixing up the JSON so that the tags aligned with the mockups lol. Do you think one of us should fix it and share it with each other?

    1
  • Justin Punzalan• 535

    @justAdevTV

    Posted

    Hey Militus,

    Great work overall! Your live example works well on my desktop and my phone :)

    I see that you used React to make your project too.

    I made mine with NextJS (React SSR) & styled-components instead. I'd love to know your thoughts on my approach if you have time.

    Check it out here: https://www.frontendmentor.io/solutions/near-perfect-pixels-11-w-nextjs-and-styledcomponents-FYfg1bDZY

    1