Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
20
Maxime
@maxime927

All comments

  • Akshita 👩‍💻•340
    @Shanvie
    Submitted over 2 years ago

    Fylo landing page

    #accessibility
    1
    Maxime•430
    @maxime927
    Posted 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
  • Julian Orozco•20
    @camilord-end
    Submitted over 2 years ago

    News homepage using basic CSS, HTML and JS.

    2
    Maxime•430
    @maxime927
    Posted 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
  • P
    roswell•520
    @welpmoz
    Submitted over 2 years ago

    Responsive design: mobile first.

    #emotion#accessibility
    1
    Maxime•430
    @maxime927
    Posted 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
  • Saurabh vishwakarma•20
    @saurabh222132
    Submitted over 2 years ago

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

    #bootstrap
    1
    Maxime•430
    @maxime927
    Posted 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
  • KELVIN D TEACH•120
    @kelvin-0
    Submitted over 2 years ago

    RESPONSIVE NEWS HOMEPAGE USING TAILWIND CSS

    #accessibility#tailwind-css
    1
    Maxime•430
    @maxime927
    Posted 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
  • Nanthagopal Shivanu•270
    @innocentcoder06
    Submitted over 2 years ago

    Frontend Mentor | News homepage

    #sass/scss
    3
    Maxime•430
    @maxime927
    Posted 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
  • 1chgr•70
    @1chgr
    Submitted over 2 years ago

    news-homepage-main

    1
    Maxime•430
    @maxime927
    Posted over 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
  • Emmanuel•40
    @Emmachijioke
    Submitted over 2 years ago

    Responsive News-homepage solution using grid

    1
    Maxime•430
    @maxime927
    Posted over 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

  • Dario Rodrigues•160
    @Unidade
    Submitted over 2 years ago

    Responsive news homepage using Grid and TailwindCSS

    #tailwind-css
    2
    Maxime•430
    @maxime927
    Posted over 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
  • Ha Kyo•40
    @kyo-is-my-nickname
    Submitted over 2 years ago

    build out news website homepage using create-react-app

    #react#sass/scss
    2
    Maxime•430
    @maxime927
    Posted over 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
  • dimorioo•60
    @dimorio
    Submitted over 2 years ago

    News Web

    2
    Maxime•430
    @maxime927
    Posted over 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

  • P
    Peter Ramirez•370
    @peterramirez18
    Submitted over 2 years ago

    responsive News homepage usign react, tailwindcss and vite

    #react#tailwind-css#vite
    2
    Maxime•430
    @maxime927
    Posted over 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
  • Max Lockwood•60
    @Max88-git
    Submitted over 2 years ago

    Product Preview Card Component using Flexbox

    1
    Maxime•430
    @maxime927
    Posted over 2 years ago

    Hi Max, hope you're fine :) Your solution is really great, simple and efficient !

    Concerning the position of the picture for the mobile, it should be better to have a second image for mobile, or in this case, and considering that every picture will be like this, you can add to the .card-img style, the attribute : object-position: 0 -100px; for mobile. it is just about the position of where your image will start with the two axes x an y.

    But i prefere to use the picture tag and precise 2 different sizes for my image like this :

    <picture>
        <source media="(min-width: 1024px)" srcset="images/image-product-desktop.jpg">
        <img src="images/image-product-mobile.jpg" alt="">
    </picture>
    

    Reverse the media query if you prefer the desktop first approach.

    Hope it helps

    Marked as helpful
  • Exileurt•100
    @Exileurt
    Submitted over 2 years ago

    Another Html and CSS

    3
    Maxime•430
    @maxime927
    Posted over 2 years ago

    Hi Exileurt, hope you're fine :)

    • Concerning the burger menu in mobile, you can, of course, use javascript and consider you menu as a fixed block hidden on the right of your screen, or you can use a css tricks by using a <input type="checkbox" /> before the <nav> element and slide the navigation when your menu button as a checkbox is checked : HTML
    <label for="menu">
        <i class="icon-hamburger"></i>
    </label>
    <input id="menu" type="checkbox" />
    <nav>
        ....
    </nav>
    

    Styles

    .wrapper { overflow-x: hidden; } /* to prevent the scrollbar */
    nav { position:fixed; width: 250px; right: -255px; transition: .3s right ease; background-color: white; }
    input:checked + nav { right: 0px; } 
    

    Hope it helps...

    Maxime

    Marked as helpful
  • Sieben•200
    @Siebenlist
    Submitted over 2 years ago

    homepage news with react and tailwindcss

    #react#tailwind-css
    2
    Maxime•430
    @maxime927
    Posted over 2 years ago

    Hi Sieben, how are you ? I have some tips that i hope would helps you :

    • It seams dificult to use grid with this template as I saw on multiple solutions before, why don't you stay with flexbox ? You'll be able to fix each width and space without being too much constrained with the grid structure.

    • For Designers the result is really important, pay attention to spacings and font-size as well, i can advise you to use the chrome extension : PerfectPixel

    For exemple, for the News block :

    • you can use an <ul> tag to list the elements and almost no responsive style for this block as this below : HTML
    <ul>
        <li>
            <a href="#" title="Hydrogen VS Electric Cars"></a>
            <h3>Hydrogen VS Electric Cars</h3>
            <p>Will hydrogen-fueled xars ever catch up to EVs?</p>
        </li>
        ...
    </ul>
    

    and styles

            ul {
              padding: 0; margin: 0; list-style: none;
    
              li {
                position: relative; padding: 27px 0 12px; border-top: 1px solid $dark-grey; margin-top: 18px;
    
                &:first-child { margin-top: 0; border-top: none; }
    
                a {
                  position: absolute; z-index: 2; left: 0; top: 20px; right: 0; bottom: 0;
    
                  &:hover + h3 { color: $orange; }
                }
                h3 { color: $white; font-weight: 800; font-size: 20px; margin-bottom: 8px; }
                p {color:$grey; margin: 0 0; font-size: 15px; line-height: 26px;}
              }
            }
    

    Hope it helps...

    Marked as helpful
  • irinaM•20
    @irinamihai150
    Submitted over 2 years ago

    responsive landing page using grid.

    2
    Maxime•430
    @maxime927
    Posted over 2 years ago

    Hi irinaM hope you're fine, i can give you some tips that could help you :

    concerning your <div class="main-container"> think about replace with justify-content: space-between instead of space-around to fix the block in each sides, after that you'll be ok to adjust the width of each block to stick them on each side.

    Regarding the all project we can see that it doesn't respect the design file but it is always like this at the start so keep going on you progress :)

    Maybe you'll be able to improve your skill by using the chrome extension : PerfectPixel You will compare your work with the design file (png/jpg) and you will make it closer to the Design.

    Hope it helps

    Maxime

    Marked as helpful
  • denis farkas•250
    @denis-farkas
    Submitted over 2 years ago

    Space tourism website solution with React

    #react
    1
    Maxime•430
    @maxime927
    Posted over 2 years ago

    Hi Denis,

    Why do you use rem as unit for everything ? It causes that everything is fixed as print design, it should be better if you use viewport width and height or simple percentage. In my case, i had a mobile first approach as well and i used flexbox and absolute position.

    By fixing that, you should not have anymore your problem with the white background around the container, and a better positioning of your content;

    I can advise you as well to use the google extension : PerfectPixel to compare your integration with a jpg/png of the design, with that, you can assure you that you respect totally the designer's expectation. :)

    For the rest that's cool, keep going ! :)

  • Akshita 👩‍💻•340
    @Shanvie
    Submitted over 2 years ago

    News Homepage submission form.

    #accessibility
    1
    Maxime•430
    @maxime927
    Posted over 2 years ago

    Hi Akshita,

    It seams good for desktop 1440px and mobile 375px but between those sizes it's broken. I can propose you for the fluidity of your webpage to use max-width for your container to let the width depend of your screen size, you should then define width by percentage with a small cross-multiplication.

    Pay attention to the vertical spacings too, it seams good in your screen but, for exemple, for the bloc "News" at the right, if we have a tablet or a small screen (13") there is almost no vertical spacings.

    I can advise you as well to use the google extension : PerfectPixel to compare your integration with a jpg/png of the design, with that, you can assure you that you respect totally the designer's expectation. :) I propose it every time when i see that there are a lot of little mistakes but even if there is nothing it's a must have for me ;)

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub