Skip to content
OverviewSolutions
8
Comments
18
John Rey Faciolan
@juani2

All comments

  • John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello @MomenBaligh,

    Woah... Near-pixel perfect solution on desktop! great!

    But I just noticed, your div.wrapper element is overflowing from its parent footer element thus causing a white space underneath your footer tag. You may try adding an overflow: auto to your <footer> tag. to remove the white space.

    Try also to check the text-alignment on mobile, they are left-aligned 375px viewport.

    Also, you may check the color of the body copy of the cards, you may also try adding contrast to your heading and body copy of your card by changing the color of the body copy to hsl(208, 11%, 55%) and the color of the headings to hsl(192, 100%, 9%).

    2
  • John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello @NitaLewska,

    Wow, great work! Almost the same as the design specs.

    A very subtle UX improvement I can suggest is that you place a max-width on your <p> tag after your <h1> so that it will not extend all over the available space of your viewport width.

    This typography guideline from Google's material design suggests 40 to 60 characters per line.

    It's a very subtle adjustment but can improve your site's reading experience.

    0
  • Abednigo Jabulane Tshabalala•60
    @tshabalalaajSubmitted over 3 years ago

    I had a problem with the two circle on the background any advice you can give on solving this would be appreciated. I have tried using z-index to get the circle at the back and using position absolute, but after doing this the when i include the background color it the circles disappear.

    Profile-card-component-main

    2
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello Abednigo,

    for your concerns on the background. Background position together with viewport unit can be used. Here's a snippet from my solution.

    .profile-card-section {
    
    background-color: hsl(185, 75%, 39%);
    background-image: url('/images/bg-pattern-top.svg'), url('/images/bg-pattern-bottom.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    background-position: top -35vh left -35vh, bottom -35vh right -35vh;
    display: flex;
    align-items: center;
}```

the +/-35vh offsets were derived from trial-and-error while resizing the view-port. It is not a pixel perfect value but the circles will show on mobile, tablet and desktop screens.

Hope this one helps.
    0
  • John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello Syed-Ansar,

    Good work.

    you might wanna try to add negative margins or transform: translateY() in your Ready To Build Your Community card to pull it just above your footer same in the design.

    I observed that your huddle logo was a bit distorted. To minimize the distortion, the simplest method I typically use was to maintain the aspect ratio of the image when resizing. Try setting the width to 200px and height to 31px but these dimensions might be too big for mobile.

    But overall all good work!

    0
  • Isaac Novaes•650
    @isaacnovaesSubmitted over 3 years ago

    Besides completing the challenge, I took the initiative to add not only a few animations, but also an external page, which is the destination to all available site links.

    I challenge you to find a mistake 😏 More than that! I challenge you to find a mistake and leave a comment 😎

    Kidding aside, I really appreciate every feedback. Thanks in advance! 😀

    Mobile first responsive site using HTML, CSS, animations, and SASS 😀

    2
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello Isaac,

    Great Work! I love the smooth animation on the form!

    By the way, you might also try to increase the white space of your major page sections and inside the testimonial cards.

    That way, There will be more breathing room for your page elements giving it an improve reading experience.

    0
  • Luis Gustavo Monteiro•45
    @GustavoMontSubmitted over 3 years ago

    It was a good challenge for me XD. I didn't get used about using background-position and some things about positioning items on screen, and, I don't know why, but I feel I could write less code and have the same result or better. I don't know how can I duplicate the stars, I just used several images to do it and I think that it has a better way to do it. I accept advices, tips and construtive critics, feel free to comment and say what I can get better.

    HTML, CSS

    2
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello GustavoMont,

    Great work!

    About the 5-stars, I also have that same concern when I take this challenge. Actually I uploaded the star svg image and edit it to figma, copy it 4 times. then saved it as a five star image, 😆.

    But at least my HTML and CSS code were not repeated 😅.

    0
  • Cyril•110
    @cjeanneauSubmitted over 3 years ago

    Hello, I started this challenge very well and was thinking that would be done quickly but as usual i made wrong choice and had to redo it. Then I faced few problem to layout everything. For the first time i use the mobile first design (not easy even if im sure it is the best way). Then I had problem with the layout of the first picture. Finally i manage to put everything in place. I will be very grateful for your feedback especially concerning my CSS code. Is is stodgy but i spent so much time to finish my challenge that i'm afraid to break everything by re-arranging it;-) Enjoy coding !

    Clipboard landing page challenge using flex and grid

    2
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello cjeanneau,

    Wow! almost pixel perfect! You might wanna try to adjust the sizing of your background at the header too to match the original design. In my case I used a contain background size and positioned the image on top. (see below snippet):

    body {
    background-image: url("/images/bg-header-mobile.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
}

    I can relate to you, at first I thought this challenge will be easy but I was proven wrong when I observed some minor details that needs to be addressed like the changing font sizes, line-heights, letter-spacings, and margins at different view-ports. It took me 5 attempts before I was able to finish the challenge.

    About your css code, all I can recommend is to place comments on your code explaining what the block or line of code will do in your page.

    But overall, great work! It was near pixel perfect!

    0
  • Nima•30
    @Nima155Submitted over 3 years ago

    The circles are a pain! I have no idea how someone would go about centering them.

    CSS HTML

    1
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello Nima,

    Nice work on the card component. Regarding the circles, you mean the two circles on the upper and bottom corner?

    Well, in my case those two circles took most of my time positioning them for all screen sizes, they were a real challenge for me.

    I looked at your code and observed you implemented those two circles using <img> tag and position them using absolute units. Maybe you can try to position your images using viewport units so that when screen size change, your images will change position relative to viewport.

    you check this snippet from my own solution:

    .profile-card-section {
    background-color: hsl(185, 75%, 39%);
    background-image: url('/images/bg-pattern-top.svg'), url('/images/bg-pattern-bottom.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    background-position: top -35vh left -35vh, bottom -35vh right -35vh;
    display: flex;
    align-items: center;
}

    In my case I implemented those two circles CSS background, and position those images using background-position on CSS the offset values were taken from dozen trials resizing the screen for mobile tablet and desktop view port which is a real pain.

    for my complete solution, you may also look at this link:

    my solution

    Hope this one helps. Thanks.

    2
  • John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Wow looking great.

    You might wanna also try to adjust the font sizes of your headings to improve the contrast of your headings and paragraph elements. :)

    1
  • dariachi85•50
    @dariachi85Submitted over 3 years ago

    Hello! Thant's my first challenge solution! Would be very glad to hear any feedback and suggestions.

    I've created the background with positioning and as for me it doesn't work very well. Hope some of you can share another approach to it. Thanks :)

    Mobile first responsive site using Flexbox and Media Query

    1
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello, we used similar approach with this challenge. I also used positioning with offsets but combined it with view port units. heres a snippet from my solution:

    .profile-card-section {
    background-color: hsl(185, 75%, 39%);
    background-image: url('/images/bg-pattern-top.svg'), url('/images/bg-pattern-bottom.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    background-position: top -35vh left -35vh, bottom -35vh right -35vh;
    display: flex;
    align-items: center;
}

    the top left and bottom right ensures that the two background stays on the opposite corner while the -35vh offsets the background images in all 4 directions.

    the positioning of the background image took most of my time while doing this challenge 😅.

    If you have time, you may check and review my solution too. here's the link: https://www.frontendmentor.io/solutions/vanilla-css-flexbox-dZ5E1TRAu

    0
  • Keshav Arora•180
    @keshavarora2000Submitted over 3 years ago

    I have built this using HTML, CSS, Flexbox, and JS. I will be grateful to have feedback on this one, it will give me some motivation to correct myself and move ahead with great people like you.

    Blogr site using HTML, CSS, Flexbox and JS

    2
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello, Looking Great!

    To further improve reading experience, you may try to add little bit of white spaces on your major page sections. This will visually give more breathing room to your main page sections.

    1
  • John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Great! You can also add a max width for your paragraph elements below "Quick Search", "iCloud Sync", and "Complete History" headings so that it wont grow much wider than the width of your computer screen images.

    Also, reading experience is great when paragraphs does not extend all over the available space.

    You check this beautiful article from Material Design about typography.

    https://material.io/design/typography/understanding-typography.html#readability

    Overall nice work!

    1