Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
16
Comments
18
mycrochip
@mycrochip

All comments

  • CoreThread•230
    @CoreThread
    Submitted about 3 years ago

    CSS HTML

    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hello @CoreThread,

    You've put commendable effort into your solution. However, there is room for improvement.

    Firstly, it would be good practice for you to have a certain container class nested within your <section> or any element that acts as a section. This ultimately helps with alignment (like aligning your footer with the main content, if they have this same nested 'container' class or wrapper). Then a styling like the one below could be applied:

    .container {
    width: clamp(320px, 90%, 1240px);
    margin: 0 auto;
    }
    

    Here, we always want a 5% margin on each side while not being smaller than 320px and not exceeding 1240px in width

    I usually do not give such help as below, but explaining how each background image can be placed would seem rather too difficult and defeat its purpose of making things simple.

    Below, is a code snippet from my version of the project submitted a few hours ago. You will still need to study it a bit as classes incorporated in your HTML code might be different.

    The backgrounds have varying background-size properties, hence the headache. One section even has multiple background images.

    :root {
    --clr-primary-1: hsl(322, 100%, 66%);
    --clr-neutral-500: hsl(207, 100%, 98%);
    }
    
    /** Background Image and Color */
    /*** Individual Sections BIC*/
    
    .main,
    .community-stats {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
    }
    
    .main {
        background-image: url(../images/bg-footer-top-mobile.svg);
    }
    
    .community-stats {
        background-image: url(../images/bg-section-top-mobile-1.svg);
    }
    
    .hero-btn,
    .section-btn {
        background-color: var(--clr-primary-1);
        color: var(--clr-neutral-1000);
    }
    
    .grow-together,
    .your-users {
        background-color: var(--clr-neutral-500);
    }
    
    .flowing-conversations {
        background-image: url(../images/bg-section-top-mobile-2.svg), url(../images/bg-section-bottom-mobile-1.svg);
        background-repeat: no-repeat, no-repeat;
        background-size: contain, contain;
        background-position: bottom, top;
    }
    
    .ready-to-build {
        background-image: url(../images/bg-section-bottom-mobile-2.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top;
    }
    
    .communities-formed__tag,
    .messages-sent__tag {
        opacity: 0.7;
    }
    

    Fortunately, the same applies to desktop sizes. Just replace the words 'mobile' with 'desktop' in the background images

  • Lacey E•110
    @laceeder
    Submitted about 3 years ago

    Social Proof Section

    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hello Lacey,

    Trust you're good. Congratulations on completing this project. You've put forward a wonderful solution to the project challenge.

    I have a few feedbacks to help you slightly improve your website's presentation.

    The first and most significant to me, and I believe, to most programmers as well, is that I do not style the 'html' at all. This is because there are bound to be layout issues introduced unknowingly by its child elements (like the body element).

    Remove the margin property on the body element and replace that with padding. They are both white spaces, but their application is different.

    With regards to your concern about the white space around the ratings, this issue was introduced indirectly by the element with content-wrapper class. There should not be a background color on this wrapper.

    Remove the background-color property of the .content-wrapper selector.

    This could be an attempt to prevent the background images from showing through.

    FIX: You could set the background images of the body properly according to the design by giving them a background size property.

    Marked as helpful
  • Yu-An•70
    @yuany2036
    Submitted about 3 years ago

    QR-code-component Using HTML and CSS

    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hello Yu-An,

    I congratulate you on beginning your journey on Frontend mentor. You'll find so much value in this community.

    You've put forward a good solution to the project challenge.

    At first glance, I see you've added styles to your <html> element in your stylesheet. As a personal best practice, and I believe, with most developers as well, I do not add styles to my HTML. I prefer to put such styles in the <body> element and if I need an extra container, I'll just nest another <div> element within the 'body' to surround all the current child elements.

    The first issue was caused by setting

    html {
    display: flex;
    } 
    

    The flex container gives its children fluid dimensions when they are not set. So, the body has a width of less than 100% of the available screen.

    FIX: Replace the html selector with the body selector as follows:

    body {
    display: flex;
    flex-direction: column;
    justify-cotent: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    }
    

    This should fix some layout issues. You'd still need to adjust your card for mobile view.

    With regards to the rounded edges being cut off, the culprit here is still the flex layout. The card container (main) is so fixed to the top of its parent which is the body.

    FIX: Make the card center on the page which will make it move away from the top. This is not centered currently even if you have a justify-content and align-items set to center because these attribute don't know the dimension of your element (i.e how tall or wide it is). So, you can either set a fixed width and height for the 'main' container (which i don't recommend due to overflow issues of child contents) or give a block margin to the container (or block padding to its parent), e.g:

    main {
    margin-top: 20%;
    margin-bottom: 20%;
    }
    
    /*OR*/
    
    main {
    margin-block: 20% 20%;
    }
    
    Marked as helpful
  • Veronica Valdez•130
    @veronicajujuy
    Submitted about 3 years ago

    Clipboard Landing Page

    #accessibility
    2
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hi Veronica,

    Well done on completing this challenge. It looks great and it could be better.

    You could set a max-width on the blocks holding your texts (in the computer section)

    Also, you left me out of your sponsors' list, don't I contribute enough quota 😎 (says Microsoft)

    All the same, you are doing good and with more practice will get the font size/screen ratio

    Happy coding!

    Marked as helpful
  • jake•140
    @jakewebd
    Submitted about 3 years ago

    html and css grid

    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hello Jake, way to go!

    I commend your courage to try out using CSS grids in your projects this early. It's very commendable as this took me a while before I could use it in my projects.

    I however recommend that instead of using a grid layout to map the entire layout of your page, you should only use them for arranging sibling components for now (like the reviews and ratings).

    I checked out your CSS source code and found out that the excess whitespace on your web rendering would most possibly be because of your grid template columns and grid template rows. You set a lot of them (so I felt this was an attempt to lay out the whole page using grids).

    By the way, the accessibility and validation issues counts on your submission are scary 😲. It turns out that a lot of images were used in this project. A simple fix would be to give all your images an "alt" attribute 😉.

    Good luck on your future submissions and happy coding!

    Marked as helpful
  • WandoCode•840
    @Wandole
    Submitted about 3 years ago

    Time tracking app with React and Sass

    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hi WandoCode, A wonderful solution you've got here. I love it!

    With regards to your concern about the extra pixels of the parent element showing beneath the child's, you could remove the bottom border radii on the child element and set the parent to:

    .parent {
        overflow: hidden;
    }
    /*where "X" and "Y" are set to sizes of your choice*/
    .child {
        border-radius: Xpx Ypx 0 0; 
        width: 100%;
        display: block;
    }
    

    While you are at that, you could also fix your HTML validation issue, it's a great way to learn (it's already so commendable that you've got just a single issue ^_~).

    Marked as helpful
  • sarthak gupta•10
    @sarthak2908
    Submitted about 3 years ago

    css flexbox ,

    #cube-css
    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hello Sarthak,

    I visited your repository to view your codes. You have put forward a good solution and I learned a few tricks. I however noticed that your solution screenshot is absent and on viewing your live site, I noticed that the page did not load properly. I have created a pull request in your repo with a simple solution. Let's start from there.

    Hoping to see your page render proper soon. Happy coding!

  • George Stawowczyk•210
    @Jorgus1710
    Submitted about 3 years ago

    Social Proof Section - Mobile first, Responsive, flexbox & grid.

    2
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    👀 Did @mattstuddert just upvote my comment!

    🤩

  • John Idenyi•250
    @JohnIdenyi
    Submitted about 3 years ago

    Manage landing page

    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Nice work John.

    Well done on completing the challenge.

    I only noticed something wrong with the navbar at 779px (a row gap should fix this).

    Great submission nonetheless.

  • Fitrifit Yanto•80
    @fitrifityanto
    Submitted about 3 years ago

    Stats preview card component using HTML, CSS

    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hello Fitrifit,

    Well done on completing the project. You've put forward a beautiful solution to the challenge. I will check out your solution URL to see how you got a perfect filter effect on the image section.

    It's nice seeing that you could come up with such a good solution at this stage. Keep up the good work.

  • George Stawowczyk•210
    @Jorgus1710
    Submitted about 3 years ago

    Social Proof Section - Mobile first, Responsive, flexbox & grid.

    2
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hi again George,

    It's nice seeing that you've also completed this challenge. You've put forward a good implementation of the solution to the project. There is only so much room for improvement.

    I believe you will put to good use my suggestions, that is why I put the following forward:

    • Your project shot would be closer to the "comparison image" if you inspect your page and set device-width to the required pixel (375 or 1440) as you build. (It's already so commendable that you are concerned about pixel-perfection. I too feel strongly about that).

    One thing I do as well but do not strongly recommend is to set body height property to 100vh (i.e full viewport height) for only single non-scrolling pages (or landing pages). From there I can easily see where I need to stretch things out using margins and paddings.

    • I understand your reason for removing the attribution, but it is not necessary to do so. If you feel it would interfere with your layout comparison, you could set the attribute background-color and position: absolute; bottom: 0 (after body{position: relative}) to remove the attribution from the flow.

    • With regards to your code clean-up concern, you could start by editing the provided HTML boilerplate before touching a single line of CSS. Move all internal styles to an external stylesheet). I also noticed that you linked to fonts in your HTML as well as imported fonts into your stylesheet. You should only use stylesheets to import your fonts unless you need to delay the loading or add other functionality to the fonts like 'preconnect')

    • Of all the above, the practice which would most significantly reduce your HTML code and your CSS (most efficiently) is to use components. The following is a copy from the README.md file attached with my solution at GitHub

    <section class="ratings">
      <article class="rating rating--1">
        Rated 5 Stars in Reviews
      </article>
    </section>
    <section class="cards">
      <article class="card card--colton">
        <h2 class="card__name" >Colton Smith</h2>
        <p class="card__status" >Verified Buyer</p>
        <p class="card__text">"We needed the same printed design as the one we had ordered a week prior. 
          Not only did they find the original order, but we also received it in time. 
          Excellent!"</p>
      </article>
    </section>
    

    The following code contains the css used in styling a rating component. I was particularly proud of the pseudo-element section where I used the background-repeat attribute to get duplicate stars and controlled the number of stars using width.

    .ratings,
    .cards {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 3rem;
        gap: 1rem;
    }
    
    .rating {
        color: var(--clr-primary);
        font-size: 1rem;
        font-weight: 700;
        background-color: var(--clr-pale);
        border-radius: 0.5rem;
        padding-block: 3rem 1rem;
        width: 100%;
        margin: auto;
        position: relative;
    }
    
    .rating::after {
        content: "";
        width: 100px;
        height: 20px;
        position: absolute;
        background-image: url(images/icon-star.svg);
        background-repeat: space;
        inset: 1rem 0;
        margin: 0 auto;
    }
    
    • The BEM CSS notation also plays a key role in my use of components. I also built only one rating and one card (testimonial) section fully before copy/pasting and adding only single-unique classes for each replica as in the above.

    I hope this review proves helpful and I look forward to seeing your future solutions.

    EXTRA: Just as you pay good attention to the pixel-perfection, it would be nice to consider fulfilling the accessibility issues showing up in your solutions. This helped me, and in your case, it could also inspire you to use semantic HTML.

    If you feel the need, I recommend that you visit my solution as well.

    Best of luck to you and happy coding!

    Marked as helpful
  • Alexander Hoinville•20
    @ahoin001
    Submitted about 3 years ago

    Responsive 3 Column Card Component

    2
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hello Alexander. Well done completing this challenge. You've put forward a wonderful solution nonetheless.

    With regards to your concern about how many developers here get to put forward pixel-perfect solutions, some of us have access to Figma/Sketch files (through PRO subscription) where it is easier to ship codes and or view dimensions of design elements; however, most of us (that do not have such access) place on a split window, the provided design images mostly scaled to the desired dimension we are working on (this helps to more accurately predict dimensions and spot differences between our developments and the target designs).

    Keep at it. It gets better with time.

    Marked as helpful
  • P
    Dave Quah•650
    @Milleus
    Submitted about 3 years ago

    Single price grid component

    #cube-css#accessibility
    1
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Hello Dave,

    Congratulations on completing this challenge. I love seeing results that are picture-perfect, such as the one you put forward.

    Great job and thanks for the tip.

    #I also copied your max-width for the desktop view in completing my own version of the challenge as well. The solution URL below will be active as soon as I make my submission:

    https://github.com/mycrochip/single-price-grid-component.git

  • Kamasah-Dickson•5,570
    @Kamasah-Dickson
    Submitted about 3 years ago

    Loop-studios-landing-page

    #accessibility#sass/scss
    2
    mycrochip•460
    @mycrochip
    Posted about 3 years ago

    Congratulations Kamasah on completing the challenge. You've put forward a wonderful solution.

    I however noticed that most of the images in the reference had dark linear gradients applied over them to increase the contrast of the layered texts and enhance readability. One could also use mix-blend-mode on the hero image.

    Good job overall.

    Marked as helpful
  • George Stawowczyk•210
    @Jorgus1710
    Submitted over 3 years ago

    Order Summary Component

    1
    mycrochip•460
    @mycrochip
    Posted over 3 years ago

    Hi again, well done in completing this challenge.

    I learned a lot from your feedback on my solution, and your solution to this challenge on GitHub. Thank you for bringing my attention to the mobile-first approach.

    I saw that your .atr was positioned absolutely. I see this as an effort to keep it positioned at the bottom always, right? It however overlaps the card when I resize my window.

    The 'order summary' and 'annual plan' are of the same color, and they should be the dark blue version in the style guide.

    These changes are very minimal; I really appreciate your feedback and felt I should help out on yours too. Happy building!

    Marked as helpful
  • Kylee Bustamante•90
    @kyleebustamante
    Submitted over 3 years ago

    NFT Product Card with CSS Flexbox

    4
    mycrochip•460
    @mycrochip
    Posted over 3 years ago

    Hello Kylee,

    Well done on completing the challenge.

    I have completed the challenge as well. My hack was to use a pseudo-class. I chose to see them as bullets and placed the icons (.bullet) relative to their texts the following way:

    .bullet1::before { content: url("images/icon-ethereum.svg"); position: relative; left: -5px; top: 3px; }

    .bullet2::before { content: url("images/icon-clock.svg"); position: relative; left: -5px; top: 3px; }

    You can see my solution here: https://github.com/mycrochip/nft-preview-card.git

    Marked as helpful
  • Danteie•300
    @Danteie
    Submitted over 3 years ago

    Vanilla JS HTML and CSS

    1
    mycrochip•460
    @mycrochip
    Posted over 3 years ago

    Hello Danteie, Nice work done completing this project.

    You could as well add a letter-spacing to the h1 and p elements

    Marked as helpful
  • El-Dev•160
    @Lateef-dev
    Submitted over 3 years ago

    CSS

    #angular#materialize-css#node#react#vue
    2
    mycrochip•460
    @mycrochip
    Posted over 3 years ago

    You've centered your texts. The only issue is that there is just so much room available for them to take as you have allowed

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