Skip to content
OverviewSolutions
5
Comments
20
Maxime
@maxime927

All comments

  • Maxime•430
    @maxime927Posted about 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
  • Julian Orozco•20
    @camilord-endSubmitted about 2 years ago

    Since the page was displayed at both 375px and 1440px, where should i set the media query, i did it at 750px but had no clue, should i just keep the mobile desing till the screen was 1440px ? or is there a recommended breakpoint?

    News homepage using basic CSS, HTML and JS.

    2
    Maxime•430
    @maxime927Posted about 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 about 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
  • Saurabh vishwakarma•20
    @saurabh222132Submitted about 2 years ago

    Hello there! This is my first project in the way of learning web development. In this project, I did everything properly for the desktop site but get difficult to make a side-growing navigation bar when it is on a mobile screen. overall it has been a great experience to complete such a challenge and hopes to learn a lot.

    I used HTML , CSS and BOOTSTRAP-5 to complete this awesome challenge

    1
    Maxime•430
    @maxime927Posted about 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 about 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 about 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
  • Maxime•430
    @maxime927Posted about 2 years ago

    Hi ! Hope you're fine ! Congratulations to have finished this challenge :)

    I have some tips to share to you to improve your layout:

    • Concerning you main structure, it should be better to put the max-width on the <div class="container"> to fix the content in the center and set width in percentage of each box in it.

    For exemple

    .pic-container { width: calc((100% - 60px)/ 3 * 2 + 30px); }
.new-container { width: calc((100% - 60px)/ 3); }

.little-cont { width: calc((100% - 60px)/ 3); }
    • In you .last-container, you should align all the content at the top to align every texts ( number - title - description ), because in case of long description in one card, the number and the title will still be aligned.

    Pay attention to spacings, including vertical spacings, it is really important to keep the website look organized and respect the work of the designer. :)

    Hope it helps...

    Maxime

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

    Hi Emmanuel, hope you are fine :) you solution looks well, i can give you some tips to improve your solution :

    • Concerning the images, i should have done the opposite about resizing settings, by putting the main image with a fixed height to keep the same vertical spacings with the title and text under and a fixed width but automatic height to the image in the 3 columns cards in the bottom. In this way, the images in the second section should not be deformed.

    • Concerning your layout : you have a lot of breakpoints, you can easily optimize your solution using only one breakpoint at 1024px to separate mobile and desktop (including tablet in desktop)

    PS : you forgot the hover effects and it is not the right mobile menu :)

    Keep going this way

    Hope it helps...

    Maxime

    1
  • Maxime•430
    @maxime927Posted about 2 years ago

    Oì Dario, tudo bom contigo ? ;) I think i can give you some advices to help you to improve your solution :

    • As you can see, we can divide the design in 3 big columns ( by the three columns of the last section). So, you can divide the structure as two sections :
    <section class="first-section">
    <div class="main-content">…</div>
    <div class="aside">…</div>
</section>
<section class="second-section">
    <ul>
        …
    </ul>
</section>

    In that way, you'll be able to define a specific width to each box in function of the container they all in.

    For exemple : For the three cards at the bottom you'll be able to do this .second-section ul li { width: calc((100% - 60px)/ 3); } "60px" represent 2 times 30px which are the spacing between each column. and by getting the <ul> parent as a flexbox with justify-content: space-between you'll have the good size for your Three cards section ;)

    For the main content .main-content { width: calc((100% - 60px)/ 3 * 2 + 30px); } because the main content takes 2 column i added "* 2" and "+ 30px" to include the column spacing unused because there are only 2 column in this section.

    Parabéns para a tua solução, continua como assim :) Hope it helps...

    Maxime

    Marked as helpful
    1
  • Ha Kyo•40
    @kyo-is-my-nicknameSubmitted about 2 years ago

    I'm not sure my scss code is optimal. I think it quite complicated because the way I do is trying then changing until it work but don't really understand how it worked. I hope to your advice about this problem.

    build out news website homepage using create-react-app

    2
    Maxime•430
    @maxime927Posted about 2 years ago

    Hi Kyo ! Hope you're fine. You're solution is almost close to the result it misses only few optimisations to fix the solution :

    • Since i'm checking every solution about this challenge, display:grid is not a good way to develop this design, it is not enough specific to get the design properly, i advise you to prefer display: flex you'll be able to fix some widths and heights specific to each bloc and adjust some alignements;

    • Usually, the designer and the customer worked hard to come to an agreement so, the closer we well be at the design the better. I advise you to use the chrome extension PerfectPixel to compare your development with a png/jpg file of your design. I always use this to be sure i'm ok with each breakpoints :)

    • Concerning responsive breakpoints : Even if the mobile design is 375px, let your breakpoint reach max-width: 768px, to let the mobile design expend until you'll be able to display the desktop properly for landscape tablet

    • Concerning the three columns section : you can put a fixed width to the image and align it to the top, it will look tidier ;)

    Keep going this way, Hope it helps...

    Maxime

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

    Hi Dimorio, how are you? you did a cool I can give you some tips to improve your solution if you agree with that :

    • The breakpoint : don't let the design become the mobile display under 1440px it is way to early, we can appreciate the desktop design until landscape tablet ( 1024px )

    • The side-container : Let's use the css attribute .side-content:last-child { border-bottom: none; } to avoid the border for the last element of your listing.

    • be carefull about spacings, for exemple, in your box .hero-content you used display:flex and i agree totally with that, don't be afraid to use this again for your div .hero-mess

    for exemple :

    .hero-mess { display: flex; justify-content: space-between; flex-direction: column; }

    And think about put the CTA in a wrapper to not have the button in full width :)

    Keep going, that's great :) Hope that this few lines help you...

    Maxime

    1
  • Maxime•430
    @maxime927Posted about 2 years ago

    Hi Peter, hope you're fine :) I can give you some tips to improve your solution if you agree :

    • Concerning your responsive, it should be better in my opinion to just keep a max-width for the container and let it be fluid to not have a lot of breakpoints between tablet and big screen of laptop.

    • Be careful about font-sizes and spacings, it is very important to save the dimensions of the design to respect the work of the designers, i can advise you to use the chrome extension PerfectPixel With this, you'll be able to compare your solution with a png file of the Design and fix some issues to develop as close as you can.

    Hope it helps...

    Maxime

    Marked as helpful
    0