Skip to content
OverviewSolutions
7
Comments
6
Carlos Marte
@carlosmarte23

All comments

  • Ejiro Frances•390
    @Ejiro-Frances
    What are you most proud of, and what would you do differently next time?

    Using sass for the first time was intriguingly, exhaustingly, mentally draining, funnily fun.

    Reading and doing are not the same. I am extremely proud of my perseverance in using technologies I had no idea how to use.

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

    grid rows were not aligning, until i used the auto value for it.

    sass was not sass-ing. The sass styles were not reflecting. I discovered that I linked the wrong css file in my html.

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

    I would love explanations on how to better use grid display.

    Testimonial Grid Section

    #sass/scss
    1
    Carlos Marte•160
    @carlosmarte23

    Hello there! Congratulations on completing your project!

    I've noticed a small issue on the desktop version where scroll bars are appearing. This seems to be due to the container having a top margin set at 7%. To resolve this, consider the following adjustments:

    remove the top and bottom margin and set it to

    margin: 0 auto;

    And to center the container in the middle of the body add this to your body style:

    display: flex;
 flex-direction: column;
 justify-content: center;

    As for your feed back for CSS grid here is how i did it and I found it simpler to understand and implement:

    try to use grid areas instead of manually putting every card on its column/row for example:

    on your grid do this:

        grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "daniel daniel jonathan"
      "jeanette patrick patrick"
      "kira kira kira";

    What this does is first, stablish the amount of columns (3) and rows (2) in this case for the desktop layout. Then the template areas how i see it is like a visual representation of how each element on your grid is going to be placed.

    Then in the style of each "card" assign the grid area that it corresponds into your grid template like this:

    .daniel {
  // ... your styles other styles
  grid-area: daniel;
}

    That will make your "daniel card" two columns wide and be placed on the top left.

    I hope that makes sense :D

    good work and keep coding!

    Marked as helpful
  • Carlos Marte•160
    @carlosmarte23

    Hello!

    Great job with your code! The desktop version follows the design quite well. However, I noticed some issues on the mobile version, especially with the headers—they seem to be cut off at the top. Also, the breakpoint between mobile and desktop views might be set a bit too high, so you may want to revisit that.

    I'd love to give more detailed feedback, but I'm still learning myself. I hope this helps and that you can make some improvements!

    Marked as helpful
  • MrLanter•220
    @MrLanter
    What are you most proud of, and what would you do differently next time?

    I managed to optimize the loading speed of the site by using WEBP for fonts and images.

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

    • The left image for the desktop version should be 100% height but the width did not fit.

    • There was unnecessary scrolling due to attribution. I tried to use position on absolute but for more than 16px for 1rem the texts were stacking.

    I finally solved all these problems

    What specific areas of your project would you like help with?
    • Is the HTML well organized ?
    • Is the semantics correct ?
    • What are the possible improvements ?

    Creating a Responsive, Semantic, and Accessible Page with SCSS

    #accessibility#sass/scss
    2
    Carlos Marte•160
    @carlosmarte23

    Hello!

    You've done a fantastic job with your HTML; it's neatly organized, and the semantics appear to be correctly implemented from what I can tell.

    As for SCSS, I'm still getting the hang of it. This project was my first encounter with it, so I don't have much to say yet, but kudos to you—the site looks amazing.

  • Natali 👻 Grimm•1,190
    @Grimm-N
    What are you most proud of, and what would you do differently next time?

    I finally got around to using something new—like the `` element! Can you believe it? 😂 Thought I'd spice things up a bit and step out of my comfort zone. Gotta keep things fresh, right?

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

    So at first, I tried to align the text of the last block using a ``. Spoiler alert: it looked terrible! 😅 Thankfully, I wasn't happy with the result, so I decided to go a different route. Sometimes, bad ideas lead to better solutions!

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

    I’d love to get some tips on optimizing and simplifying my code. I’m all about that minimalism and structure, so I want to bring my code to a perfect state — clean and easy to read!

    Recipe Page: Crafted with Flexbox and Grid, adaptable to any screen

    1
    Carlos Marte•160
    @carlosmarte23

    Good job!

  • Nguyễn Trung Kiên•40
    @zeuxi141
    What specific areas of your project would you like help with?

    I learned a lot from everyone’s feedback in the previous challenge and tried to do better in this one. I have switched most of the size units from px to rem. Does it work well? I hope you can leave some feedback so I can improve even more. Thanks

    Flexbox

    2
    Carlos Marte•160
    @carlosmarte23

    Hello! great work. It appears to be really close to the design on the desktop.

    Here are some tips:

    1- Next time for practice, try to do the layout using Flexbox or Grid.

    2- Try using a separate file for your CSS and link it to the HTML.

    3- Remember to adjust the mobile design as the challenge suggested to have smaller font size that desktop: For this consider doing media query's or using the clamp function with relative sizes like rem.

    For example:

    .responsive-text {
   font-size: clamp(0.875rem, 2.5vw, 1rem);
}

    Other than that, I think you're doing a great job.

    Let's keep learning together!

    Marked as helpful
  • Carlos Marte•160
    @carlosmarte23

    Couldn’t access the code because it’s a private repo, but seeing the preview, I’d suggest trying to stick to the design. Pay attention to the bottom margin under the last paragraph and the weight of the font in the paragraph.

    Marked as helpful