Skip to content
OverviewSolutions
8
Comments
8
P
Will
@willdelorm

All comments

  • P
    Ha Tran•210
    @hatran-hattt
    What are you most proud of, and what would you do differently next time?

    I've learned some CSS properties throughout this challenge

    • Aligning items/tracks along the main(flexbox)/inline(grid) axis

      • justify-content (applies to flexbox/grid containers): aligns items (or tracks) and distributes extra space within the container.
      • justify-items (applies to grid containers): aligns the content of each individual grid item within its cell

        justify-self (applies to grid items): aligns the content of a single grid item within its cell

    • Applying a background image with a color layer

      {
  background-image:
    linear-gradient(to right, rgba(var(--color-bg-footer) ,0.75), rgba(#4D96A9,0.75)), /* Top layer: semi-transparent gradient */
    url('../assets/mobile/image-footer.jpg'); /* Bottom layer: actual image */
  background-repeat: no-repeat;
  background-size: cover; // Scales the image as large as possible without stretching it (clipped)
}

    • Container-type might affect an element's sizing, if a shink-to-fit width occurs, then an explicit width might be needed

      .container {
  container-type: inline-size;
  width: 100%;
}

    • Tip for centering block-level item horizontally: margin: auto;

    Responsive Meet landing page

    #sass/scss#cube-css
    1
    P
    Will•150
    @willdelorm

    Nice job! Your page looks really good at all sizes. Only thing I could see to note was the spacing around the text below your image collage.

    Your file structure for Sass was quite extensive and sent my eyes spiraling. I'm always hesitant to build out a larger file directory for relatively small projects, but I'm definitely going to look at your project closer to see what I can learn from it!

  • P
    Angelo•100
    @anjelotin
    What are you most proud of, and what would you do differently next time?

    I am most proud of making my solution look similar to the challenge. If I were to start all over, I would focus on organizing my code better.

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

    The biggest challenge I encountered was working with the grid-column's behavior. My solution required lots of debugging. I used web tools to see what was causing my boxes to be elongated or stretched. It turned out to be due to the grid-column. It took me a lot longer to realize that.

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

    I appreciate all feedback. I would appreciate some tips on getting more familiar with grid behavior.

    Responsive Testimonial Grid Section with Grid and Flexbox

    1
    P
    Will•150
    @willdelorm

    Nice job using CSS grid to position each card! It's awesome that you made a media query for tablets as well!

    It's important to set a max-width on your projects so your elements don't get super stretched out. I tend to do this on my body element so everything stays pretty.

    There's a lot of repeat color assignments to individual elements within each card. Instead of selecting each element, set the color on the parent element. The child elements will inherit this color assignment, and you'll write less code!

  • P
    miszka•190
    @jakimiszka
    What are you most proud of, and what would you do differently next time?

    huh, have never used grid before, that was a challange!

    four-card solution

    1
    P
    Will•150
    @willdelorm

    Nice job! Your cards look good and, being your first time using it, your execution with CSS grid works great. Works on mobile and desktop!

    Make sure to pay close attention to the design. The text in your header could be more accurate by adjusting the line weight and color.

    Looking at your code, it looks like you used the grid property on your individual cards with 1 column and 1 row. Here, it isn't necessary to use CSS grid since you're not separating content. Consider why you're implementing grids and if that's the best method.

    For CSS classes, it's better for class names to be longer and more readable for other developers who might read your code. Single-letter class names may make sense to you, but they can be unclear to others, especially as your projects get bigger.

    Marked as helpful
  • AJ-Tan•230
    @AJ-Tan
    What are you most proud of, and what would you do differently next time?

    I'm most proud that I was able to implement it using SASS/SCSS, and using the mobile first approach.

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

    Getting the hang of using SASS/SCSS, for the next challenge, I want to use more of the SASS/SCSS features.

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

    Anything, I'm open for improvement!

    Product Preview Card (HTML, SASS)

    #sass/scss
    1
    P
    Will•150
    @willdelorm

    Nice job recreating this project and getting the hang of Sass! Your component looks great and mirrors the design really well. The only visual feedback I noticed is your card is larger overall than the design. In this isolated project, it's not a big deal but it's worth keeping in mind nonetheless.

    If this is your first time using Sass, you did a great job implementing it! Be careful not to optimize too early. A project this small doesn't need 8 scss files and likely could get done with a single file.

    Lastly, you didn't use Sass variables! I find them to be much cleaner to use than regular CSS variables. Definitely recommend making use of them next time.

  • P
    Will•150
    @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!

  • P
    Will•150
    @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.

  • P
    Will•150
    @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
    P
    Will•150
    @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