Skip to content
OverviewSolutions
17
Comments
56

Vicktor

@Victor-Nyagudi920 points

Learning something new every day.

Latest solutions

View more solutions

Latest comments

  • P
    Anjelica•160
    @Anjie-MF
    What are you most proud of, and what would you do differently next time?

    Honestly? I’m proud that I didn’t give up. There were so many points this week where I wanted to scrap the whole thing and switch to Flexbox (which would’ve been way easier). But I stuck with CSS Grid even when it made me want to throw my laptop out the window.

    I’m also proud that I learned to trust the grid system. Once I stopped trying to force it and started thinking in rows, columns, and spans, everything started to make more sense. That mindset shift is something I’ll carry into future projects.I’d definitely start with a 12-column grid right away. I originally used 5 columns without knowing why, which just made layout math harder. I also over-nested elements (like wrapping cards inside .content-wrapper), which caused a ton of alignment issues. Next time, I’ll start simpler and avoid adding complexity unless it’s needed.

    And I’d double-check my syntax early—I lost hours to one space in 1 fr (repeat(5, 1 fr) instead of 1fr). Brutal.

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

    Broken layouts with no clear error – I realized that invalid CSS (like repeat(5)) doesn’t throw errors, it just silently fails. I had to dig into DevTools to understand what was going on under the hood.

    Misaligned card widths – The cards weren’t lining up because of mixed grid contexts. Removing the nested .content-wrapper and placing all cards in one unified 12-column grid finally solved it.

    Column stretching – I learned how even small content differences can stretch grid tracks. I used min-width: 0, removed floats, and inspected grid overlays.

    Temptation to quit – This was real. But I asked for help (including Stack Overflow, LinkedIn, and Discord), and that made all the difference.

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

    The mobile layout! I think I got the @media (max-width: 600px) logic right, and I’m stacking cards the way I want, but I’d love a fresh set of eyes to double-check that:

    My grid-column values are clear and consistent

    I’m not overcomplicating the stacking order

    My padding/margins are responsive-friendly

    If anyone spots any refactor opportunities or smarter ways to handle breakpoints, I’d love to hear them!

    fourCardFeature_figmaChallenge

    2
    Vicktor•920
    @Victor-Nyagudi

    This is a great attempt, Anjelica. Not giving up and delivering something is a victory, so keep pushing!

    There are a couple of things you can improve in your solution.

    • I see the calculator card is the only card with rounded corners. You forgot to add a border-radius to .supervisor, .karma, and .team.
    .calculator {
    border-top: 5px solid #44d3d2;
    border-radius: 8px; // <- This is missing in the other cards
    grid-column: 9 / span 4;
    grid-row: 2/4;
}

    You can leverage CSS Variables to avoid repeating the border radius value.

    It also makes it easier to change the values across all cards if you decide to do so without copying/pasting all the time.

    Here's what your CSS could look like with CSS variables.

    // 1. Declare the CSS variable with a meaningful name.
// You can put this at the top of the CSS file so you can access
// it from anywhere in the file.

:root {
    --card-border-radius: 8px;
}

// 2. Use the variable in multiple places.

.supervisor {
    // Other style rules go here.
    border-radius: var(--card-border-radius); // <- This will be 8px
}

.karma {
    // Other styles.
    border-radius: var(--card-border-radius); // <- This also will be 8px
}

// You can reuse the CSS variable '--card-border-radius' as many
// times as you need in other areas.
    • The icons in each card are aligned to the right instead of the left.

    I see from the code you've given the images a style of justify-self: end;. Removing this style rule aligns them to the left, which is consistent with the design.

    Since the images are also purely decorative, their alt attribute should be an empty string so screen readers don't read them out.

    • The box shadow is also a bit dark. You can play around with its color and adjust the opacity to bring it closer to the design.

    There are a couple of other things I could highlight, but work on those for now, and when you get better in the future, revisit this solution and explore what you could've done differently.

    All the best in your front end journey!

    Marked as helpful
  • Vicktor•920
    @Victor-Nyagudi

    Hi, Fernando.

    Nice attempt on this one. I'm glad you used the BEM naming convention.

    I noticed you queried the DOM for all the questions and then added a click event listener on each one in your JavaScript.

    This works for a small solution like this one but is not the best for performance. In order to save on performance, you could attach an event listener to .card and get where the user clicks on using e.target.

    If the area the user clicked on is a question, you can then reveal the answer.

    Here's an example of what the code could look like:

    const card = document.querySelector('.card');

// This is an alternative way of responding to click events. 

// You can still use 
// card.addEventListener('click', (e => { code in the function goes here e.g. console.log(e.target); }))

card.onclick = function(e) {
   console.log(e.target); // <- Log to the console what was clicked on

   if (e.target.classList.contains('card__question')) {

      // e.target.chidren[1] gets the answer. Try logging it to the console to see what it returns

      e.target.children[1].classList.toggle('inactive');
   }
}

    This isn't the whole solution, but you can build on it to improve your JavaScript.

    Hope this helps.

    All the best with future solutions.

    Marked as helpful
  • Vicktor•920
    @Victor-Nyagudi

    Hello, John.

    Your solution is very impressive! Nice work.

    I noticed the countries' images are different sizes. You could potentially wrap them inside a <span> and give it a min-height and min-width and set these dimensions according to the smallest country's image.

    You could also do the same with the max-width and max-height and set them according to the smallest image's dimensions.

    This way, all the images grow to a fixed maximum point and shrink to a fixed minimum point.

    Try it, and let me know how it goes.

    All the best with future solutions.

    Marked as helpful
  • Vicktor•920
    @Victor-Nyagudi

    Hi, Deeem.

    You can also use display: grid, however, I'm curious why you don't want to use flexbox.

    Is it giving you issues?

    Before grid and flexbox, front-end developers relied on float and clear to position items inside a container. It wasn't always the best, but it got the job done.

    Read more about float and clear here.

    Hope this helps.

  • Vicktor•920
    @Victor-Nyagudi

    Hi

    Good attempt on this one.

    Different people organize their CSS in different ways.

    Some like to have all the text-related styling grouped together while others prefer to organize their styling in alphabetical order.

    A lot of it depends on what works for you. In a team, there'll probably be a pattern to follow, so this also varies depending on whom you're working with.

    I'd recommend using the BEM naming convention for your classes. It stands for Block Element Modifier, and I find it very helpful in organizing my classes.

    Hope this helps.

    All the best with your other solutions.

  • Vicktor•920
    @Victor-Nyagudi

    Hi, Pedro.

    You only need to have one HTML file, and that's index.html.

    If you want to style the HTML differently for different screen sizes, you can use media queries.

    These let you add breakpoints e.g. 992px and up, so you can add styling only for a certain screen size and smaller/bigger.

    If you want to use different images on different screen sizes e.g. mobile and desktop, you can use the <picture> element.

    It lets you determine at what breakpoint you want to change the current image to a different one.

    Read more about the picture element here.

    Hope this helps.

    Good luck with your other solutions.

    Marked as helpful
View more comments