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

All comments

  • John Rey Faciolan•220
    @juani2

    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%).

  • John Rey Faciolan•220
    @juani2

    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.

  • John Rey Faciolan•220
    @juani2

    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.
  • John Rey Faciolan•220
    @juani2

    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!

  • John Rey Faciolan•220
    @juani2

    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.

  • John Rey Faciolan•220
    @juani2

    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 😅.

  • John Rey Faciolan•220
    @juani2

    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!

  • John Rey Faciolan•220
    @juani2

    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.

  • John Rey Faciolan•220
    @juani2

    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. :)

  • John Rey Faciolan•220
    @juani2

    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

  • John Rey Faciolan•220
    @juani2

    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.

  • John Rey Faciolan•220
    @juani2

    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!

  • John Rey Faciolan•220
    @juani2

    Wow, Great work!

    Yes! Fluid typography really reduced my media queries for my font sizes and margins, Having two or three breakpoints just for adjusting font-size becomes a pain once project starts to grow.

    If you have time, please check my Clipboard landing page solution, I have placed css comments on my stylesheets especially on responsive typography styles.

    Here's the link: https://www.frontendmentor.io/solutions/responsive-fonts-and-spacing-vanilla-css-using-sass-5YNak8g2h

    Thanks

  • John Rey Faciolan•220
    @juani2

    Hello Abhishek1438,

    Good day!

    that specific topic is what I'm practicing lately.

    Yes you can eliminate media queries in your text size by using css clamp() together with vw units.

    if for example your font size at 375 pixel should be 16px but on desktop it should be 18px, you can do font-size: clamp(16px, 4.26667vw,18px)

    that way your font size will grow from 16px upto 18 px depending on the viewport width.

    I have solutions where I used this method. You may look at my code here:

    Meet Landing Page https://www.frontendmentor.io/solutions/responsive-design-using-clamp-min-and-calc-in-vanilla-css-fz82PaTRT

    Clipboard Landing Page: https://www.frontendmentor.io/solutions/responsive-fonts-and-spacing-vanilla-css-using-sass-5YNak8g2h

    Hope it helps.

    Thanks.

  • Doaa•115
    @dod123-stack

    flexbox

    1
    John Rey Faciolan•220
    @juani2

    Hello dod123-stack,

    Keep on!

    my approach in pushing out the computer image was to place it in a container together with the text on the right, then, I placed a negative margin on the container, not on the image itself.

    Heres a snippet from my solution:

    <div class="page-section-1__main">
                <div class="img-flex-container">
                    <img class="img--fluid" width="752" height="572" src="/images/image-computer.png" alt="Computer Screen" />
                </div>
                <div class="feature-list-1">
                    <div class="feature-1">
                        <h3>Quick Search</h3>
                        <p class="text--caption">Easily search your snippets by content, category, web address, application, and more.</p>
                    </div>
                    <div class="feature-1">
                        <h3>iCloud Sync</h3>
                        <p class="text--caption">Instantly saves and syncs snippets across all your devices.</p>
                    </div>
                    <div class="feature-1">
                        <h3>Complete History</h3>
                        <p class="text--caption">Retrieve any snippets from the first moment you started using the app.</p>
                    </div>
                </div>
            </div>

    and for my styling:

    .page-section-1__main {
        width: 100%;
        margin: unset;
        max-width: 1212px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-left: -32px;
    }

    Also, you can further improve the reading experience of your landing page by placing maximum widths to your paragraphs.

    You can also check my Solution on the link below. I will greatly appreciate your feedback from my solution :)

    https://www.frontendmentor.io/solutions/responsive-fonts-and-spacing-vanilla-css-using-sass-5YNak8g2h

  • John Rey Faciolan•220
    @juani2

    Hello Burani,

    I can really relate with you, I have one challenge in frontendmentor that took me about a week to finish for just one landing page. It took me to me 5th revision until I'm satisfied with my work.

    As for your work, I cannot see the code but based on the preview, your card component seems not to be vertically centered, you can center it by using display: flex: align-items:center; on the parent of your card.

    Also, your headings were not in all caps, you might add a 'text-transform:upper' to your headings too.

    Happy coding.

  • John Rey Faciolan•220
    @juani2

    Hello Beshoy.

    Your doing great!

    About your concern on responsive units, and responsive design in general, I would like to share you this link: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

    it really helped me reduce my media query codes especially when dealing with responsive typography and spacing.

    you can also check my Clipboard Landing Page solution. I've Implemented a responsive font without using media queries. Here's the link:

    https://www.frontendmentor.io/solutions/responsive-fonts-and-spacing-vanilla-css-using-sass-5YNak8g2h

    I hope it helps.. :)

  • John Rey Faciolan•220
    @juani2

    Hi there!

    I can only give give an answer to your first question. For responsive font size without using media query, you can leverage the clamp() function together with vw units.

    say for example you want your font size to scale up relative to viewport from 16px to 24px. You can use:

    font-size: clamp(16px,4.26vw,24px)

    this way your font size will scale starting from 16px (on 375px viewport width) and will grow all the way up-to 24px.

    I used this technique on my Clipboard Landing Page solution. You can check it out here:

    https://www.frontendmentor.io/solutions/responsive-fonts-and-spacing-vanilla-css-using-sass-5YNak8g2h

    hope this helps.