Skip to content
OverviewSolutions
12
Comments
38
Patrick
@PPechmann

All comments

  • Patrick•800
    @PPechmann

    Hi @blndcat,

    very well done on this challenge, I like it 💪🏻

    I do have a small improvement, to get it even closer to the original design:

    You can center the entire content with flexbox. For this you initially have to give the body {min-height: 100vh;} to cover the entire viewport. Then you can center it as follows:

    Display: flex;
align-items: center;
justify-content: center;

    This is not the only wat to center elements, but I do find it the easiest. I highly recommend checking out this small guide on centering, to have a full range of tools you can use anytime.

    Hope this helps!

    Happy coding 🙂

    Patrick

  • Patrick•800
    @PPechmann

    Hi @obhasa12,

    congrats on the challenge!

    I really like your approach and the code looks pretty clean too, well done 💪

    As a small improvement, I suggest centering the card properly with flexbox. For it to work, you need to give the body a min-height: 100vh, to cover the full viewport, and then simply the following (also on the body):

    display: flex;
align-items: center;
justify-content: center;

    Hope this is helpful and I am looking forward to more completed challenges 😉

    Happy coding!

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hey @Damianeks,

    congrats on completing your first challenge, it's looking very good 👍

    There is a much easier way to center the card in this case.

    If you give the body a min-height: 100vh to cover the full viewport and then give the .content-box a width, let's say of 20.6rem (according to the size you are aiming for), the card will be perfectly centered without having to specify the margins for the card, thanks to flexbox.

    The code would look like this:

        margin: 0px;
    padding: 0px;
    background-color: hsl(212, 45%, 89%);
    align-items: center;
    justify-content: center;
    display: flex;
    font-family: "Outfit", "sans-serif";
    min-height: 100vh;
}
.content-box {
    box-sizing: border-box;
    background-color: hsl(0, 0%, 100%);
    padding: 15px 15px;
    border-radius: 20px;
    height: 550px;
    width: 20.6rem;
}

    If you keep this in mind when centering something on the page, it will make your life much easier and the code cleaner.

    If you have any questions, let me know, I'm here to help 😉

    Happy coding 💪

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hi @sneiderDev,

    congrats on completing the challenge, well done!

    To improve the code a bit, I suggest placing the content inside a <main> tag. You can then give the body a min-width: 100vh to cover the full screen and set the background with background-image: url("").

    Depending on how the background displays then, you can adjust it with background-position and make the necessary tweaks.

    I hope this feedback helps!

    Well done again and keep going 💪

    Happy coding 🙂

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hey @lgorvin,

    congrats to completing this challenge! I did it myself and know how difficult this one can get.

    Regarding the dropdown on the side: You can create a div with the entire navigation in it, give it a height of the entire page (I recommend specifying a height and not using 100vh, as the div will end sooner than the end of the page, if you scroll down).

    You then give it a class and toggle it with javascript.

    I still like your approach a lot and am even thinking that the navigation looks very good from the top too!

    Feel free to check my solution to get a better idea of what I am trying to convey.

    Hope this helps!

    Happy coding and happy weekend to you :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hi @Demyttenaere,

    very well done on this challenge, I like it!

    The only little improvements I would suggest, is to apply the eventlistener for the dropdowns, to the Features and Company text too, as users would most likely first click on the text instead of only the arrows.

    You could also add en Eventlistener on the window, for when it resizes to remove all the dropdown classes. This way they will not stay open when changing screen size.

    As a last point, I also suggest to toggle the classes for the dropdowns within the eventlistener functions. If you then click on one dropdown while the other one is open, the previous one closes automatically.

    My solution is not perfect, but you can check it here to see what I mean.

    Hope this little feedback helps!

    Happy coding and happy weekend :)

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hey @kiangopez,

    nice job on this challenge. I also assume you do not have access to the figma file, which gives it even more merit!

    Regarding the dropdowns, they are working fine, I would only make some adjustments:

    • Add an eventlistener for the window when it resizes and remove the dropdown classes when activated. This will ensure that the dropdown doesn't stay open, when changing screen sizes (for example turning the phone to landscape mode).

    • In the eventlisteners for each dropdown, also toggle the classes to be able to close one dropdown, when another one opens.

    My approach is far from perfect, but you can check my code here to get an idea of what I mean.

    Hope this helps!

    Happy coding and happy weekend :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hi @Hicham2012!

    Well done on your first challenge here, good job!

    You could improve the code a bit, by only using one div or main as container element and position everything inside of it. For this challenge, no more divs are needed. This will make it simpler for you to code and more readable for the future, if you work within a team.

    I also suggest getting comfortable with using rem and em units instead of px, as these are scalable and will make everything easier in terms of responsiveness.

    Hope this helps.

    Great job again on the first challenge, can't wait to see more!

    Happy coding and happy weekend :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hi @mukwende2000, congrats on the solution, it's looking really good!

    I see that you are already familiar with media queries. The only thing missing to make your life much easier in terms of responsiveness, is using relative units like rem or em instead of px, as these will adjust automatically, depending on the root font-size you choose. If you for example declare html {font-size: 18px} and then use, let's say 1rem for the paragraphs, that means that the paragraph will have a font-size of 18px. 2rem would be 36px and so on.

    I recommend checking out this little guide to get familiar with these.

    Hope it helps and looking forward to see more of your solutions!

    Happy Coding :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    @Mr-NotSoCreative Looking much better already! I would still add a min-width to the .card , just to make sure it won't resize when lowering the screen size.

  • Patrick•800
    @PPechmann

    Hi @mcarpegna, very nicely done on this challenge, congrats!

    You nailed it regarding the desktop size design.

    To further improve the solution, I recommend also adding media queries for smaller screen sizes, by just changing the flex-direction to column in this case.

    Great job again, keep going :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hey @Mr-NotSoCreative!

    Very well done on this challenge, good job!

    I saw that the screenshot solution is almost perfect, but when opening the website link, the card shrinks a lot on 1440px, due to the min-width: fit-content. I recommend changing it to min-width: 23rem, for example, to better define the dimensions on bigger screen sizes.

    Very nice job again! Hope my short feedback helps :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hey @GuilhermeBSant,

    congrats on your first challenge here, very well done!

    To further improve the design a bit, I suggest giving your body a min-height: 100vh, to cover the entire viewport.

    You can then also set the display: flex and align-items: center and justify-content: center to properly center the entire content. Then, you only need to position the logo absolutely and adjust with top and left for it to be correctly placed.

    I hope this quick feedback helps and look forward to more challenges completed!

    Happy Coding :)

    Patrick

  • Patrick•800
    @PPechmann

    Hola Junior!

    Very well done on your first challenge here on FrontendMentor, good job!

    Regarding the BEM Methodology: You did apply it correctly, although the class names can get a bit confusing, as they seem too long.Try to keep it as short as possible. For example: Instead of .card-componente__descripcion__estadistica and .card-componente__descripcion__resumen, use: card__estadistica and card__resumen. Basically, you should use something__block, for standalone elements and something__block--modifier, for modifiers such as buttons with different stylings, for example. Here you will find a very in detail guide.

    The image: It is already very well positioned, I would only leave it at background-position: center, instead of center top.

    Further adjustments: I would also recomment giving the card-componente__descripcion some padding and lower the font-size, to get it closer to the initial design.

    I hope my quick feedback is helpful and look forward to more of your solutions!

    Happy Coding :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hi Leonel!

    Congrats on your solution on this challenge, very nice job getting those articles positioned correctly!

    To improve it a bit, I suggest centering the entire grid properly. You can easily do this using flexbox display on the body. For it to be able to work, you also need to apply a 100vh height to it.

    The code would look like follows:

    body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

    To get the entire grid width to display nicely on all sizes, I also suggest giving the main section a max-width.

    I recommend getting used to working with em and rem units, as these are relative (not fixed, like px) and will make your code easier to adapt to different screen sizes.

    I hope this helps!

    Happy Coding :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hallo Ron!

    Congrats on completing the challenge, well done!

    Regarding the BEM methodology, it does get a bit confusing with the larger classnames you used for this project. I would have a bit of a hard time, if this was a big project and I had to understand the code. I highly recommend checking out this quick BEM Guide. Basically, you use (card__component), for components and (card--button) for modifiers, for example.

    I also recommend working with an editor for these challenges, such as Visual Studio Code or Atom, as the website is unable to track errors properly from Codepen. You will see, that a lot of HTML and accessiblity issues are showing, when I am 100% sure there aren't as many.

    Lastly, I highly encourage you to get used to working with rem and em units instead of px, as these are scalable and will make your life much easier in terms of responsivess.

    Hope my quick feedback helps, and I am looking forward to more completed challenges from you!

    Best Regards,

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hey Alperen!

    Congrats on the challenge, I really like your approach to this solution!

    Regarding the profile pic, you already positioned it perfectly. A different apporach I used, is to position the image aboslutely to take it out of the html flow and place it exactly where you wish, with the top, right, bottom, left properties.

    Hope this helps for alternative ways of positioning elements in the future.

    Happy Coding :)

    Patrick

  • Patrick•800
    @PPechmann

    Hey Michael!

    Congrats on your first completed challenge, well done!

    Regarding responsiveness, I highly recommend checking this comprehensive guide on media queries. You will need to use media queries, if you wish to adapt any website to all screen sizes.

    Also, I highly recommend you get acquainted with rem and em units instead of pixels, as they are relative units and will make your life much easier when having to use media queries.

    Well done again on finishing your first challenge, looking forward to see more of your solutions.

    Happy Coding :)

    Patrick