Skip to content
OverviewSolutions
4
Comments
4
P
Sherrisa Classon
@Sherrisa

All comments

  • Sherrisa Classon•80
    @SherrisaPosted about 2 months ago

    Great work, your project shows so much attention to detail!

    The only thing that stands out to me is that your solution title is taking on the stone600 color of the body. It looks like this is because the title, Simple Omelette Recipe, is missing a text-stone900 class.

    Also, the Figma file shows the max-width of the container for tablet as 616px and 736px for desktop, but I don't see this in your code. This may be why your solution is narrower and longer than the design in the image above.

    Marked as helpful
    0
  • Sherrisa Classon•80
    @SherrisaPosted about 2 months ago

    Nice work!

    It looks like the padding needs a few slight adjustments. I believe the padding between the links is 16px or 1rem if your body font-size is set to 16px and the padding on the card is 40px or 2.5rem.

    Your background also looks slightly darker. If you change that value to the grey 800, it should match perfectly.

    Are you working with the Figma files? It makes it much easier to figure out the exact values for the CSS properties if you use the Figma files. Here is a great article on working with the Figma files: https://www.frontendmentor.io/articles/figma-for-developers-how-to-work-with-a-design-file-m6CZKZ1rC1.

    0
  • clickglue•460
    @clickglueSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy to learn how to better analyze and prepare before I start coding. Also, CSS start to become more predictable if you structure it properly and do less trial-and-error.

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

    Using flex is a challenge. Also, I'm not sure if I understand the concepts of 'responsive' correctly.

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

    How to implement responsive designs.

    Blog preview

    3
    Sherrisa Classon•80
    @SherrisaPosted about 2 months ago

    Great job! You're project is nicely organized, and your code is easy to read.

    For this project, I designed for desktop first and then wrote a media query to adjust the card width and font sizes for mobile. When I examined the Figma files, these were the only values that I saw were different on desktop and mobile. I chose the screenwidth of 576 based on the breakpoints used in Bootstrap.

    Here is my code.

    @media (width < 576px) {
  body {
    font-size: 14px;
  }
  .card {
    width: 327px;
  }
  .card-category,
  .card-publishdate,
  .card-author {
    font-size: 12px;
  }

  .card-title {
    font-size: 20px;
  }
}

    Here is the link to my repository: https://github.com/Sherrisa/blog-preview-card

    1
  • jvondungen•140
    @jvondungenSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud that I figured out how to use Github, create a webpage and get the thing to look something like the sample. Next time I would start with the mobile view and work from there using either Flexbox or Grid (still learning both).

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

    I had a lot of difficulty learning how to push files to Github and even get it to work in the first place. Somehow I figured things out with some querying on the web. Also had a lot of trouble getting the spacing to work. I managed this mostly through trial and error, which was very time consuming. Finally had difficulty getting the page to be responsive. I used @media queries, which improved, but didn't totally get it to be responsive. (some sizes didn't look right).

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

    Learning how to get it to be responsive.

    CSS Styles

    2
    Sherrisa Classon•80
    @SherrisaPosted about 2 months ago

    Have you tried examining the file in Figma? You can select specific elements and see the exact dimensions. Using Figma would reduce your trial-and-error time. This is a great article on working with design files in Figma: Figma for developers: How to work with a design file.

    Also, you could simplify your code by working with either margin or padding on your heading and paragraph elements rather than using both.

    Marked as helpful
    0