Skip to content
OverviewSolutions
17
Comments
7
P
John Davidson
@John-Davidson-8

All comments

  • John Davidson•210
    @John-Davidson-8Posted 3 months ago

    Hello @SirTebz,

    Fellow newbie here on FEM. Your solution looks amazing, congratulations. I too have completed this project using CSS Grid. One thing I did notice was in your CSS you use grid-column: 3 / 4; grid-row: 1 / 2;

    I learned a trick when completing this project to shorten the code to one line eliminating grid-row and column property. It is to use the grid area property which combines them on to one line like this:

    grid-area: 1 / 3 / 2 / 4;

    Below is the explanation from ChatGPT.

    Explanation: The grid-area property follows the syntax grid-area: row-start / column-start / row-end / column-end;. grid-column: 3 / 4 corresponds to column-start: 3 and column-end: 4. grid-row: 1 / 2 corresponds to row-start: 1 and row-end: 2. Thus, grid-area: 1 / 3 / 2 / 4 combines both properties into one line.

    Hope that helps for next Grid project, anything to write less code. On to the next project for me.

    All the best

    John

    0
  • Carson Haskell•120
    @Carson-HaskellSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Getting the CSS grid to actually work, even if I am unhappy with it.

    What challenges did you encounter, and how did you overcome them?

    Getting CSS grid to work. Honestly, for some reason, CSS grid is so hard for me to wrap my head around. After going through all the reading material, I actually felt like I had a solid grasp of it, finally! But then I went to actually do it, and it was not so easy. Getting the initial layout was pretty simple, actually. It was figuring how to make it responsive. I knew that I should do it without using media queries, but I could not figure it out, so I just resorted to using media queries.

    What specific areas of your project would you like help with?

    CSS Grid, haha. I'm sure someone better than me would like at my code and see so many dumb decisions. And, I know there is a way to do it without media queries but I couldn't figure it out.

    Responsive Four Card Feature

    1
    John Davidson•210
    @John-Davidson-8Posted 3 months ago

    Hi Carson,

    Fellow newbie here.

    Your project looks great. For me also it is a steep learning curve moving into CSS Grid. I could read as much theory all day long, but when it came to actually building a project with Grid, it was difficult.

    It is strange how projects can be completed in various different ways. The way I used Grid is different I think to the way you have done so. Our html is very similar, however, the CSS is varies, yet the outcome of how it looks on the browser is good. I will paste my css below:

        display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 7.813rem 7.813rem 7.813rem 7.813rem 7.813rem;
    gap: 1.875rem;
  }
  .card img {
    margin-top: 2.5rem;
  }
  .card-yellow {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
  }
  .card-aqua {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }
  .card-red {
    grid-column: 2 / 3;
    grid-row: 1 /3;
  }
  .card-blue {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
  }```

As you can see I am also learning how to read other folks code and give feedback,  I find this very difficult when my own code has so many holes in it!!

Anyway I hope this helps in some small way, as your code has helped me.
    Marked as helpful
    1
  • John Davidson•210
    @John-Davidson-8Posted 3 months ago

    Hi Sheikh-Mussadiq,

    I really liked your solution to this Frontend Mentor project. A new thing I learnt when working on this project was the "visually hidden" attribute. I saw Kevin Powell using this while building this very project on Youtube.

    On the card the original price of $169.99 is crossed out. I used the strikethrough element <s></s> and I see you used the delete <del> element. This is great for visibility, however, a screen reader can not pick this up — that the original price was $169 and the current price is $149. Kevin in the video shows how to place a span surrounding each price, and within the span element, a class called "visually-hidden." The first with "current price" typed in it, and the second surrounding the original price stating "original price." This is where the CSS comes into play to hide the extra text with the "visually hidden" attribute, which looks like this:

    .visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;

    This hides extra text from view. I hope you find this helpful and I will link Kevin's Youtube video below also, as he explains it a lot better than I can.

    https://www.youtube.com/watch?v=B2WL6KkqhLQ&t=133s

    Marked as helpful
    0
  • Emal•110
    @syeero7Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy with the result, next time I would improve the HTML structure

    Recipe Page

    1
    John Davidson•210
    @John-Davidson-8Posted 3 months ago

    Hi Emal,

    Fellow newbie here, congratulation on completing the project it looks amazing. I like the way you used the "first of type" property. I have yet to use that.

    John

    1
  • John Davidson•210
    @John-Davidson-8Posted 3 months ago

    Hi Murilo,

    Fellow newbie here. Congratulations for completing this challenge, it looks fantastic. As you know when following the learning paths we must give feedback on other folks code! This is something I struggle with, as everyone else's code looks better than mine.

    One thing I did notice is that you use px for font-size and line-height. I once did this and the moderators on the Discord group kindly suggested I use em's or rem's. Here is a fantastic article by Grace Snow, one of the helpful folks on Discord explain why in this article.

    https://fedmentor.dev/posts/font-size-px/

    Hope this helps.

    John

    0
  • John Davidson•210
    @John-Davidson-8Posted 3 months ago

    Hi TheSilentM

    Fellow newbie here,

    congratulations on completing the challenge, it looks amazing.

    I completed this challenge a number of months ago, and I have had a bit of a break and now back to coding. A couple of things I did notice that folks on the Frontend Mentor Discord group advised me to implement was never to use pixels (px) for font size. It is advised to use rem's instead. I will link a useful article by Grace Snow who is one of the moderators in the Discord group on why to use only rem's for font-size

    https://fedmentor.dev/posts/font-size-px/

    I tend to use rem's for all my padding, margins, font-sizes, etc. I use a px to rem converter, I will link below to it.

    https://nekocalc.com/px-to-rem-converter

    I hope this is helpful, and hope to see you continuing on your frontend journey.

    John

    0
  • Kunwarpreet Singh•50
    @kunwar91Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    this was a quick one, but I am proud that I did not have to google for syntax or css props

    What challenges did you encounter, and how did you overcome them?

    Understanding the Figma images was new to me

    What specific areas of your project would you like help with?

    NA

    Responsive QR code component

    2
    John Davidson•210
    @John-Davidson-8Posted 5 months ago

    Excellent job, looks amazing.

    0