Skip to content
OverviewSolutions
4
Comments
4

Will

@willdelormUSA80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Will•80
    @willdelorm

    Nice job! Your project looks pretty close to the original designs, with all the individuals components looking the same.

    You could spend a little more time working out the spacing around your content. There is too much space between the instruction steps and not enough space around the outside of the pages. On mobile devices, there shouldn't be a visible color background.

    The heading in your preparation time block is the the wrong font as well. Paying attention to small details like these will make you a better developer and please your clients!

  • Will•80
    @willdelorm

    Your solution looks pretty good! Organization and sizing look spot on.

    Make sure to check the style guide! The color for the location text as well as specific font weights are mentioned there. It's important, especially when working with clients, to match the style guide as close as possible.

    I also noticed that you are missing the hover/focus styling. Check the active-states.jpg image under the design folder for what it should look like. If you aren't familiar, this is a good example of using pseudo-classes in your code.

  • Will•80
    @willdelorm

    Nice job recreating this card project! It visually looks amazing, so let's look at the code.

    In your HTML file, you used the div element a lot. These days, we have semantic HTML elements to better describe what we're making. Next time, look into using elements like article or section to improve readability for screen readers.

    I noticed that you used a lot of IDs to identify elements in your CSS stylings. You should generally use classes for styling. The main reason for this is that classes can be reused but IDs can only exist in one element. For a component like this card, it's likely that a website will use a card several times.

    Marked as helpful
  • Phillip Cantu•30
    @hereisphil
    What are you most proud of, and what would you do differently next time?

    Honestly, what I learned the most is that I really need to study and practice more on centering and the use of flex box.

    For example my solution contains:

    <body>
  <div class="wrapper">...</div>
</body>

    and I'm uncertain if wrapping the entire page within a <div> element just apply the following CSS:

    /* Center Content */
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

    is considered modern best practices. I'd love feedback on this. Secondly, I didn't apply any media queries for responsiveness because I found the site to be quite responsive already. Perhaps I didn't do enough testing? Please let me know.

    Overall though, I am proud of my solution, especially with the fact that I didn't use ChatGPT at all 😆 I did have to play around a bit with the CSS and I only had to look up box-shadow properties.

    What challenges did you encounter, and how did you overcome them?
    1. Vertical + Horizontal Centering with CSS
    2. CSS Box Shadow properties
    What specific areas of your project would you like help with?

    CSS Please 🙏

    hereisphil QR Code Challenge

    1
    Will•80
    @willdelorm

    Nice job building this project! Your recreation is pretty good, but not pixel-perfect. This project comes with a Figma file, so you can really get in there and find the exact properties and values for everything. Details like the border-radius of your card and img, the extra padding at the bottom of the card, and the box-shadow can be replicated more exactly by checking the Figma.

    Regarding centering your card, using a wrapper div work but you can apply these styles directly to the body! For a project like this, here's how I would style my body element:

    body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

    The body tag sets it height to fit its content by default. Setting a min-height ensures that your card will be centered in the browser.

    Lastly, I also did not use media queries. This project is pretty simple, so it doesn't need major retooling for different screens. I did include a margin of 5% for the card so it wouldn't hit the edge of the screen on tiny devices.

    I appreciate your use of semantic HTML. Seeing you use article and section is a helpful reminder to make more use of elements beyond div. Way to go!

    Marked as helpful