Skip to content
OverviewSolutions
16
Comments
18
mycrochip
@mycrochip

All comments

  • CoreThread•230
    @CoreThreadSubmitted over 2 years ago

    I was unable to implement the background curve section; could someone please assist me in resolving this problem?

    CSS HTML

    1
    mycrochip•460
    @mycrochipPosted over 2 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

    0
  • Lacey E•110
    @laceederSubmitted over 2 years ago

    I have some white space behind the ratings/heading area. Not sure how to remove that? Feedback is welcome. This was a tough one, I'm still getting used to Grid, but had to end up resorting to Flexbox. Will have to continue practicing with Grid.

    Social Proof Section

    1
    mycrochip•460
    @mycrochipPosted over 2 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
    0
  • Yu-An•70
    @yuany2036Submitted over 2 years ago

    While I was working on this challenge, I came across two issues that I couldn't solve:

    • When making the edges of the "container" (the one that housed the QR code and the text) rounded by using border-radius, I was unable to make it smooth; for some reason there are somewhat jagged edges
    • When zooming in on the browser, the top would become cut-off, and I would be unable to scroll to the top to view the content there

    Please let me know if you know what is causing the problems, thanks!

    QR-code-component Using HTML and CSS

    1
    mycrochip•460
    @mycrochipPosted over 2 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
    1
  • mycrochip•460
    @mycrochipPosted over 2 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
    0
  • jake•140
    @jakewebdSubmitted over 2 years ago

    first time using css grid. would love some feedback on best practices i could have used and some tips etc.

    html and css grid

    1
    mycrochip•460
    @mycrochipPosted over 2 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
    1
  • WandoCode•840
    @WandoleSubmitted over 2 years ago

    I made everything with flexbox but I will definitly recode the style with grid (for the main layout), it should be easier!

    Any idea to hide the border on the cards bottom angles?

    Thanks!

    Time tracking app with React and Sass

    1
    mycrochip•460
    @mycrochipPosted over 2 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
    0
  • mycrochip•460
    @mycrochipPosted over 2 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!

    0
  • George Stawowczyk•210
    @Jorgus1710Submitted over 2 years ago

    I finally decided to apply grid in one of these challenges. I dont think it was entirely nessesary, however it was good practice to implement it. On the other hand I also used flexbox for the same purpose, so it was interesting for me to understand how to achieve a certain layout using two different tools in one project. I'm beginning to understand certain use cases where grid would be more applicable - at least to those who are inclined to use it. Certainly I see now the combination of the two is where the real magic happens. In addition to all of this, I continue to refine my technique and 'instinct' when it comes to CSS properties and how they behave, and misbehave for that matter. Fun project. As usual, I seem to be omitting tags at this time and will fix those up later.

    Any feedback from others who have completed this challenge are welcome.

    Question(s): If anyone can explain to me why the comparison image is shown to be so displaced despite the fact my source site seems to have no such issue, it would be much appreciated. I've struggled tremendously as a beginner to understand how FEM actually sources these images, and why they often look so displaced compared to what is seen on the actual source site. Its annoying and no explanation is ever provided on how to mitigate this issue.

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

    2
    mycrochip•460
    @mycrochipPosted over 2 years ago

    👀 Did @mattstuddert just upvote my comment!

    🤩

    2
  • mycrochip•460
    @mycrochipPosted over 2 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.

    0
  • mycrochip•460
    @mycrochipPosted over 2 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.

    1
  • George Stawowczyk•210
    @Jorgus1710Submitted over 2 years ago

    I finally decided to apply grid in one of these challenges. I dont think it was entirely nessesary, however it was good practice to implement it. On the other hand I also used flexbox for the same purpose, so it was interesting for me to understand how to achieve a certain layout using two different tools in one project. I'm beginning to understand certain use cases where grid would be more applicable - at least to those who are inclined to use it. Certainly I see now the combination of the two is where the real magic happens. In addition to all of this, I continue to refine my technique and 'instinct' when it comes to CSS properties and how they behave, and misbehave for that matter. Fun project. As usual, I seem to be omitting tags at this time and will fix those up later.

    Any feedback from others who have completed this challenge are welcome.

    Question(s): If anyone can explain to me why the comparison image is shown to be so displaced despite the fact my source site seems to have no such issue, it would be much appreciated. I've struggled tremendously as a beginner to understand how FEM actually sources these images, and why they often look so displaced compared to what is seen on the actual source site. Its annoying and no explanation is ever provided on how to mitigate this issue.

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

    2
    mycrochip•460
    @mycrochipPosted over 2 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
    2
  • mycrochip•460
    @mycrochipPosted over 2 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
    1