Skip to content
OverviewSolutions
41
Comments
8
Shaun Pour
@ShaunPour

All comments

  • Stefan Holmgren•220
    @stefan-holmgrenSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I got the background of the hero section done after loads of trickery.

    Also, the number with the vertical spike was also a challenge, but I think I managed it... there's probably much better solutions, but still - it's there

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

    The hero section background and the number style was complicated.

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

    Not really sure - I think it went ok.

    Meet Landing Page

    1
    Shaun Pour•630
    @ShaunPourPosted 8 months ago

    Honestly, this seems very well done to me. The shifts between different screen sizes work extremely well and make use of the available space. You also don't appear to have excess whitespace for no reason.

    But the thing I have to bring up in particular is that you (either accidentally or intentionally) accounted for 1440p monitors. My main monitor has a resolution of 2560x1440 and this design works just as well on that as at any of the smaller breakpoints which is often not the case. So, great job on that front.

    0
  • Christian G•920
    @cristianccggSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I set up the div and sections of every card properly but had issues with the main layout. When I figured out how to make the main layout everything was almost ready.

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

    This one took me a couple of days. I struggled a lot with setting up the layout at the beginning. After I checked my notes I figured it out and finally made it. I am sure the next project using Grid and Flexbox will be easier.

    Testimonials grid section - html and CSS

    1
    Shaun Pour•630
    @ShaunPourPosted 8 months ago

    There are a couple of small issues I can name right off although one is far less significant. First of all, this layout does not account for the decreased width of the mobile view at all as you have to scroll far over to the right to see all the content. One potential resolution would be to set a max width property on the grid container to ensure that it is always small enough to fit on screen (and remove it inside of your media query for desktop screens if necessary).

    The next few aren't actually design problems and are more along the lines of code organization. I notice your attribution css is still present inside the style element within your html file. In the interest of keeping all your css together, I would recommend moving this css to the styles.css file and removing the styles html element.

    Also, it would help your organization to have the media queries in order by screen size (smallest to largest is my personal preference) so putting the 768px screen size media query above the 1024 one might be worthy of consideration.

    Marked as helpful
    0
  • Nikki•160
    @nicolette-codesSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Using CSS grid for the positioning of the features for the desktop.

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

    Had to read up about CSS grid.

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

    Any input is welcome.

    Four card feature section | HMTL & CSS

    1
    Shaun Pour•630
    @ShaunPourPosted 8 months ago

    This was very well done. I genuinely can't find anything that you could do "better" or improve on so I am reduced to the most pedantic of nitpicks in that the original design of "Reasonable, Efficient Delivery" was ever so slightly darker than your version.

    Besides that, I really do have to praise this design for working well on multiple screen sizes. My main monitor is 1440p and designs are quite often thrown out of whack on that size unless a project specifically accounts for it. Yours doesn't go out of its' way to account for this specific size but still; works just as easily as any of the smaller sizes that are included as part of the official project design.

    Marked as helpful
    1
  • Leslie Mainah•100
    @machleslieSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I did it at a fast pace.

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

    I did not encounter any issues.

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

    I would like to know how to style the ul bullets.

    Recipe page

    1
    Shaun Pour•630
    @ShaunPourPosted 8 months ago

    When it comes to styling the bullets (specific to how to change color that is), I can help with that thanks to the power of googling!

    I've included a code snippet below to give you a basic idea of how to do it but it's important to note that this needs to be applied directly to the li elements. It won't work if you try and apply it to the ordered or unordered list element they are contained within.

    li::marker {
  color: red;
}
    0
  • Rimtar10•60
    @Rimtar10Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    this challenge was really challenging but i'm truly proud that i could've accomplish it

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

    centering the image was a bit challenging but i knew how to do it

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

    ...

    social link with CSS style sheet and HTML5

    1
    Shaun Pour•630
    @ShaunPourPosted 8 months ago

    The active button property is missing. The buttons are supposed to change to the green shade used for the location for the background color with black text and the cursor property set to the value of pointer when moused over.

    You can fix this by setting a new css selector as button (or a class used for all the buttons if you have that) like so:

        cursor: pointer;
    background: hsl(75, 94%, 57%);
    color: hsl(0, 0%, 0%);
}
    0
  • viveknagesh21•60
    @viveknagesh21Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I tried using CSS Grid for centering this time, as for first I used Flexbox. Centering blog card was a breeze!

    I used line-height property, @font-face and even used font-weight.

    What challenges did you encounter, and how did you overcome them?
    1. Small but, I found :hover changing when it wasn't over the text, so I used
        .blog-card h2 {
        width: fit-content;
      }

    2 . Responsiveness for Smaller Screen. I tried using fixed units with calc(), but it worked with relative layout (vw).

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

    Any alternative for responsive design

    @media screen and (max-width: 768px) {
        .blog-card {
          width: 42vw;
        }
      }

    As I had to try different values for this.

    Blog preview card using Flexbox & Grid

    1
    Shaun Pour•630
    @ShaunPourPosted 8 months ago

    This is a very minor nitpick but the version submitted has a good deal more box shadow than what is present in the design so maybe tone down the values for that ever so slightly if you want it to match better.

    Also, as another thing, generally, responsive design works better with min-width rather than max-width.

    0
  • Shaun Pour•630
    @ShaunPourPosted 9 months ago

    This is honestly such a good design that there's very little I can actually criticize but in the interest of finding "something" to nitpick, the text in the original design is slightly bigger and the black color of that text appears blacker. Also, your use of the style element for css makes me die a little inside. While it's unlikely to have any impact on a project this small, generally an external css file linked in the header is how you want to handle that.

    Marked as helpful
    0
  • Shaun Pour•630
    @ShaunPourSubmitted over 2 years ago
    What are you most proud of, and what would you do differently next time?

    I struggled with making the design an exact match and parts of it I left as somewhat unfinished compared to the design. I would probably spend a little more time on redoing the design more precisely for each screen size if I did it again.

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

    There wasn't really anything I'd call a challenge but some sections I did have more trouble getting to match up as precisely as I'd like.

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

    N/A

    Responsive QR Code Component

    2
    Shaun Pour•630
    @ShaunPourPosted over 2 years ago

    Thanks! I was wondering why all these smaller components insist on filling most of the screen.

    0