Skip to content
OverviewSolutions
2
Comments
7

Lazar Nikolov

@nikolovlazarSkopje, Macedonia260 points

core @codechem Full-stack Dev | UI Designer 🔴 Streaming Web Dev on Twitch 🖋 Blogging about JavaScript and Design

Latest solutions

Latest comments

  • Lazar Nikolov•260
    @nikolovlazar

    Wow this is gorgeous! Superb! Love it! 😍

    The only thing left is to fix the Tablet breakpoint. Try to get creative with the layout. Usually if there are 4 columns on desktop, there should be 2 on tablet and 1 on mobile. Try changing your grid columns to 2 and see what happens.

    Keep up the great work yo! 🙌

  • Lazar Nikolov•260
    @nikolovlazar

    Hi Irfan! 👋

    Your solution looks really good! I noticed the navbar items are not capitalized. You can achieve that by setting text-transform: uppercase; to them. Also, keep an eye on the color. I noticed some of the text you have in your solution is painted with a different color than the design. The colors might look the same, but it affects the overall design of the website. You can use a simple Color Picker to discover even the slightest color differences. As for the "Download extension" section, try adding margin-top to the elements to achieve that effect.

    All in all, good job! Keep up the great work! 🙌

  • Lazar Nikolov•260
    @nikolovlazar

    Iyanu this is just perfect! Everything's nicely executed, responsive and by the design. Great great great job! 🎉

    As for the <p> tag font, I notice that you're using the "Poppins" font, which is only imported at 600 weight. Instead, you should be using the "Open Sans" font, because it has the 400 weight you need. Check out the style-guide.md file under "Body, Call-to-actions". That piece of content is not a heading, so you should use the styling for "Body, Call-to-actions".

    This is so amazing! Keep up the great work Iyanu! 🙌

  • Lazar Nikolov•260
    @nikolovlazar

    Great job Esraa! 🙌

    I could suggest you wrap your content in a "container" div to keep everything tidy. Also, pay attention to the small details, your background is different, you're missing the shadows, and the spacing between the cards is not consistent. Noticing these details will become easier and easier as you code, so don't worry, you're on the right path! For reference, you can research the "Masonry Grid" layout and its responsiveness. It'll give you an idea on how to refactor your solution and make it "top shelf".

    This is awesome Esraa! Keep up the great work!

  • Lazar Nikolov•260
    @nikolovlazar

    Great job Zach!

    The layout looks pretty much pixel perfect! I can notice that you're missing the card shadows. That would be very easy to fix for you, since you're a Pro user and you have the Figma design file.

    On the other hand, the responsiveness is not perfect. There's a point between the Desktop breakpoint and the Mobile breakpoint where the content is bleeding off the edge. This layout is not simple though, it's a complex layout. What you can do is research the Masonry Grid layout and its responsiveness. It'll give you some ideas on how to refactor your solution and make it responsive.

    Keep up the great work man! Cheers 🙌

  • Lazar Nikolov•260
    @nikolovlazar

    Wow this is awesome! 😍

    Great job Mohamed! By the way, I'm looking at your solution from a 27" iMac, and I can suggest you wrap your whole page in a "container", basically set the max width of the website to be 1440px for example. Right now the contents are spread from edge to edge, and there's a lot of spacing between the 4 features below the hero. Wrapping your content into a "container" div will fix that issue 🙌

    Keep up the great work man! This is amazing!

View more comments