Skip to content
OverviewSolutions
13
Comments
9
P
Stephanie Dennehy
@Stephanie-Dennehy

All comments

  • anthony•170
    @Codingtry123Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    keep the simple project simple. Using container to wrap the element you want to style.

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

    how to position child element away from the parent element. Setting appropriate size for parent and child element. Using margin to distance border of parent element and child element.

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

    how do I choose sizing unit for different types of context and when building website responsively?

    QR code component using html and css flex box

    2
    Stephanie Dennehy•220
    @Stephanie-DennehyPosted 3 months ago

    Hi Anthony,

    I'm not quite sure what you're asking about sizing. Could you provide a little more detail here? You mention responsive designs, so I am guessing you are asking how to make the design smaller on a mobile device. This would be done with media queries to adjust for the larger or smaller breakpoint.

    I was unable to link to your code. I'm getting an error when I try to view the code. But if you can update that, I'd be happy to take a look and offer more feedback!

    0
  • ahsan rasool•10
    @ahsanrasul08Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I was having some issues when trying to position the share icons tray for mobile and Desktop on different locations but after some experiments, i was able to figure out the solution,

    Frontend Mentor - Article preview component

    1
    Stephanie Dennehy•220
    @Stephanie-DennehyPosted 3 months ago

    Hi Ashan,

    Really nice job with this challenge! I love how you were able to add the hover colors to the social icons. It looks really nice.

    I did notice that your h1 is the same size as the rest of your text. You might want to consider increasing the size of that to create a little more contrast and visual hierarchy.

    Also, you can write shorthand CSS properties for your border radius and margin/padding so you can condense that into one line.

    border-radius: 0 0 10px 10px

    It would start in the top, left hand corner and the order would be top left, top right, bottom right, bottom left.

    Best of luck as you continue with these challenges!

    0
  • Stephanie Dennehy•220
    @Stephanie-DennehyPosted 3 months ago

    Really nice job with this challenge! You did a great job of matching the design provided. I thought your code was easy to understand.

    I think the only change I would make is the use of your <strong> tag on the subheading. I personally don't feel like this text needs any emphasis over the larger headline. Probably not a huge deal visually but for anyone with a screen reader, it might infer more importance to this statement.

    Marked as helpful
    0
  • Stephanie Dennehy•220
    @Stephanie-DennehyPosted 4 months ago

    Hi,

    Nice job on this project. Your grid looks great. There are 2 things that I noticed when viewing the live site.

    1. The text on the white cards is very light and hard to read. You might want to check the contrast on these to see if the color combination is accessible.
    2. When looking at the mobile view, cards 3-5 are not the same width as cards 1 and 2.
    0
  • Thiago Lorhan•110
    @ThiagouhSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    for having managed to solve the problem of distributing the location of cards using Grid. I will continue using it for future challenges.

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

    aiming for desktop design, I separated the middle cards into a section with a grid that can distribute the 2 cards in this column, while the others have only 1 card.

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

    any feedback for the solution is welcome!

    Responsive Four Card Feature Section with Tailwindcss

    1
    Stephanie Dennehy•220
    @Stephanie-DennehyPosted 4 months ago

    HI Thiago,

    Nice job with this challenge! I was thinking about completing this challenege using grid, but I opted for flexbox instead. The way you used grid and made the separate columns works really well and I enjoyed looking at your solution.

    The only suggestion I have is to try to go back and combine some of the styles that are reused a lot (on the cards for example) into a custom class. Then you can apply all of the styles with one class to keep the HTML cleaner.

    Here's a link in the Tailwind documentation to show you what I am referring to. https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

    -Stephanie

    Marked as helpful
    1
  • Stephanie Dennehy•220
    @Stephanie-DennehyPosted 4 months ago

    Hi Jidan,

    Nice job overall. A couple things I noticed - there is no H tag on your page to help differentiate the title from the regular text. The description text has a justify setting on it which creates some weird spaces between some of the words.

    Have a great day! Stephanie

    0
  • Divyam Sharma•160
    @Divyamsharma-18Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I loved it that it confused me but I did it.

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

    was kinda hard to edit like 1, 2, 3....n

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

    I learnt about new stuff so not really.

    Recipe-Page-

    1
    Stephanie Dennehy•220
    @Stephanie-DennehyPosted 5 months ago

    Hi Divyam,

    Nice job with this challenge. For the Instructions section, you could also use a span tag within your list items so the bold and regular text will be on the same line.

    Good luck as you continue to keep working through more challenges!

    0
  • Teezee86•100
    @Teezee86Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of the fact that i moved this one with decent time.. Understanding more and more everyday how each css property works.

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

    At first i I had used the wrong measurements causing it to not load road in my broswers.

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

    An understand of BEM please. Or if my mark up is clear.

    Social Links profile card

    1
    Stephanie Dennehy•220
    @Stephanie-DennehyPosted 5 months ago

    Hi Teezee,

    I think it is clear to see what you were doing with the markup. I know you were asking about BEM and I still struggle with some of those conventions myself, but I did find this cheat sheet that I thought showed BEM in a useful way. https://bem-cheat-sheet.9elements.com/

    My only recommendation would be to not include colors in your elements in case you ever needed to go back and change color styles. If you feel the need to include a modifier, "primary" or "secondary" are more reusable in those instances.

    Marked as helpful
    0
  • nekefer•200
    @nekeferSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    The way I set the radius of the QR image. I remember there are some methods to achieve the best radius based on the radius of the parent and the distance between the parent and child boxes.

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

    How to use background-size in the background syntax? I couldn't figure it out.

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

    background syntax. how can I use background-size inside of background without having error.

    qr code component card

    1
    Stephanie Dennehy•220
    @Stephanie-DennehyPosted 5 months ago

    I’m curious why you made the image a background rather than inserting it into the html. I think that would fix the background issues you’re having. You could directly control the image size as an html element.

    0