Skip to content
OverviewSolutions
5
Comments
20

Maxime

@maxime927430 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Maxime•430
    @maxime927Posted over 2 years ago

    Hi Akshita, well done !!!

    It seams very close to the design for desktop and mobile

    Now if I can give you some feedbacks, it will be concerning the tablet size portrait an landscape

    Precisely the CTA in the footer for the landscape tablet (1024px)

    And in each sections in portrait tablet the illustrations are to small, you should adapt these sections with a mix of mobile design structure and tablet/desktop font-size to not have to zoom to read the texts.

    This is really great,

    Hope it helps

    Maxime

    Marked as helpful
    0
  • Maxime•430
    @maxime927Posted over 2 years ago

    Hi Julian, Hope you are fine, I have some tips to help you to improve you progress and this solution:

    • Concerning your question, because there is no indication about the tablet dimension, I would keep the mobile design (until 768px if you have the desktop first approach, until 1023px if you have the mobile first approach) to have the same design for portrait Tablet and add an exception on the main content picture to have the desktop image for 768px.

    • I see some issues about colors, spacings and font-size so I can advise you to use the chrome extension PerfectPixel as well, I advise this extension a lot to help you to compare your solution with the design file and add some adjustments to be the closer to the design.

    Keep going!

    Hope it helps

    Maxime

    Marked as helpful
    0
  • Maxime•430
    @maxime927Posted over 2 years ago

    Hi Roswell, Hope you are fine ! First, congratulations to have done this challenge. I have some tips to help you to improve your progress and this solution:

    • Concerning your blocks and width, consider the max-width of the desktop design as the limite (1110px) and imagine 3 col in that to set the width of each box as a calculation width: calc((100% / 3) * 2); for the main content for exemple

    I can advise you to use the chrome extension PerfectPixel as well, it will help you to compare your solution with the design file (png/jpg) and you'll be able to add some specific adjustments to be closer to the design.

    Just a little thing, you forgot the font-family for the H1 title :)

    Keep going in that way!

    Hope it helps

    Maxime

    Marked as helpful
    0
  • Maxime•430
    @maxime927Posted over 2 years ago

    Hi Saurabh, Hope you are fine !

    First, congratulations to have done this challenge.

    I have some tips to help you to improve your progress and this solution:

    • Concerning spacings, you should pay attention to alignement of content and vertical spacings to let the content breathe

    • Concerning your blocks, you should use the constructor class to wrap your real blocks and don't consider that the <div class="col-4"> , for exemple, is the wrapper, because it causes issues for exemple with you mobile navigation. each time, put a div in the <div class="col-x"> tags

    • I can advise you to use the chrome extension PerfectPixel as well, I advise this extension a lot to help you to compare your solution with the design file and add some adjustments to be the closer to the design.

    • At last but it's a little thing, you forgot the links on the news and the cards at the bottom section :)

    Keep going in that way!

    Hope it helps

    Maxime

    Marked as helpful
    0
  • Maxime•430
    @maxime927Posted over 2 years ago

    Hi Kelvin, how are you ? Congratulations to have finished the challenge :) I have some tips to help you to improve your progress:

    First, I find it great that you respected the alignements of contents!

    • Concerning font-sizes, line-heights, max-width and exacts styles, i advise you to use the chrome extension PerfectPixel to compare your solution with the Design file, you'll see multiple adjustments that you'll be able to fix easily.

    For the rest it is great, keep going !

    I could advise you to maybe test this challenge without any frameworks to master every boxes size and behavior. ;)

    Hope it helps you

    Maxime

    Marked as helpful
    1
  • Maxime•430
    @maxime927Posted over 2 years ago

    Hi Nanthagopal Shivanu ! Hope you are fine :) I have some tips to help you to improve your solution:

    • Concerning the three column section .top, you should put it in justify-content: space-between; and set the with of each element inside with width: calc((100% - 60px) / 3); for the desktop to keep them with the same size and spaced by 30px (this is why i put "60px" because it correspond to the 2 gaps then 60px)

    • You can add some transitions `transition: .3s all ease" to have smooth effects on hover

    Congratulation to have finished this solutions, keep it going.

    Hope it helps

    Maxime

    Marked as helpful
    1
View more comments