Skip to content
OverviewSolutions
6
Comments
6

Maestro0794

@Maestro079460 points

The only thing I know is that I know nothing

Latest solutions

Latest comments

  • KhutsoJ•100
    @KhutsoJSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    First time making use of custom properties to speed up my workflow. I also used grid template areas to structure the desktop layout of the cards.

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

    I didn't know how to structure the desktop. At first, I used grid and transform: translateY() to position the middle cards, and that worked well but I wanted another solution. I then learnt more about grid-template-areas to position elements in the grid, and this worked well too.

    My second challenge was the colors above the cards. At first I made 4 underlays for the four cards and positioned them behind each card, then I used transform: translateY() to position them slightly higher. It worked well, but this was a convoluted solution. After overthinking for another solution I then figured out that I could simply use border-top to style the cards. Wow.

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

    What improvements can I make to my approach in this challenge? I also struggled with spacing the top and bottom of the page on different screen sizes (especially small screen sizes), is there a better more robust way to do this all in the body of the page?

    Four Card Feature

    2
    Maestro0794•60
    @Maestro0794Posted 4 months ago

    👍

    0
  • Maestro0794•60
    @Maestro0794Posted 4 months ago

    👍

    0
  • P
    Sclata•120
    @SclataSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This is my first attempt at any sort of front-end work, so I'm definitely pleased with the outcome. I did the exercise twice, one with "raw" CSS and HTML, and then I went back and refactored, attempting to apply some best practices with SCSS/BEM (hadn't heard of them prior). I still need to work on naming schemes, logical grouping, SCSS partitioning, and component composition. There's so much to learn with CSS, and I think the most obvious starting point for improvement is relative unit sizing.

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

    The biggest challenges I encountered were:

    1. How scaling and padding impact the look of an image (and their impact on border radii).
    2. Generated content and applying styling to them (specifically list markers in this case).
    3. Using pseudo-selectors to isolate specific exceptions to other rules in the cascade. (for example, dropping a border from only the last table elements)
    4. Implementing media queries for dynamic sizing.
    What specific areas of your project would you like help with?

    I think I made good progress. I learned a lot in this first project, and I'm obviously still working hard to outline a standard approach / best practices. I think I answered my own questions and will focus on implementing more accessibility and relative sizing in upcoming projects, as well as trying my hand at container queries.

    Recipe Page with SCSS/BEM

    1
    Maestro0794•60
    @Maestro0794Posted 4 months ago

    👍

    0
  • Maestro0794•60
    @Maestro0794Posted 4 months ago

    👍

    0
  • Maestro0794•60
    @Maestro0794Posted 4 months ago

    👍

    0
  • DV-AN•100
    @AV-DNSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    It was a really quick challange, i did it all in like, 20 minutes or so xD, just doing to complete the learning path tho.

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

    Didn't see anything at all.

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

    on this one, none.

    QR Code Component

    1
    Maestro0794•60
    @Maestro0794Posted 4 months ago

    👍

    1