Skip to content
OverviewSolutions
45
Comments
8

Shaun Pour

@ShaunPourMeadowview, Virginia630 points

Gamer and all around nerd with a "minor" obsession with computers and tech here. I've been teaching myself code rather casually for a couple years but it wasn't until the start of 2021 I really started taking it seriously. I hope to eventually become good enough to get a job as a web developer.

I’m currently learning...

SCSS, Materialize, React, and React Native

Latest solutions

View more solutions

Latest comments

  • P
    Stefan Holmgren•220
    @stefan-holmgren
    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
    @ShaunPour

    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.

  • Christian G•930
    @cristianccgg
    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
    @ShaunPour

    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
  • Nikki•160
    @blahaj-girl
    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
    @ShaunPour

    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
  • Leslie Mainah•100
    @machleslie
    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
    @ShaunPour

    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;
}
  • Rimtar10•60
    @Rimtar10
    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
    @ShaunPour

    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%);
}
  • viveknagesh21•60
    @viveknagesh21
    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
    @ShaunPour

    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.

View more comments