Skip to content
OverviewSolutions
7
Comments
9
DevDaru
@DevvMarko

All comments

  • P
    Michael•180
    @Networksentinel
    What are you most proud of, and what would you do differently next time?

    This project was similar to the one I did before, and I used it as a chance to sharpen my CSS Grid skills even more. Along the way, I also picked up a couple of neat tricks.

    1. Grid layout with grid-template-areas: I used grid-template-areas again to set up the layout. This time, I had to tweak the column sizes a bit to get the spacing just right. Playing with the grid-template-columns helped me balance how much space each section takes up.

    2. Profile pictures with a "fake" border: The profile pictures had a border (or stroke), but it wasn’t part of the actual image. I could’ve used box-sizing: content-box;, but instead, I went with a little trick: I added a box-shadow that mimics a border. It doesn’t mess with the box model and still gives the same look. 😄

    Here’s a code snippet showing both things in action:

    <header class="feature__header">
    <img class="feature__header--img feature__header--stroke-daniel" src="/images/image-daniel.jpg" alt="Profile picture of Daniel">
    <h3>Daniel Clifford</h3>
    <h4>Verified Graduate</h4>
</header>

    .feature__header {
    display: grid;
    gap: 0.25rem 1.0625rem;
    grid-template-areas: 
    "left right1"
    "left right2";
    grid-template-columns: auto 1fr;

    &--img {
        width: 28px;
        height: 28px;
        border-radius: 100%;

        grid-area: left;
    }
    &--stroke-patrick {
        box-shadow: 0px 0px 0px 2px $color-8;
        -webkit-box-shadow: 0px 0px 0px 2px $color-8;
        -moz-box-shadow: 0px 0px 0px 2px $color-8;
    }
    &--stroke-daniel {
        box-shadow: 0px 0px 0px 2px $color-9;
        -webkit-box-shadow: 0px 0px 0px 2px $color-9;
        -moz-box-shadow: 0px 0px 0px 2px $color-9;
    }
}
    What challenges did you encounter, and how did you overcome them?

    One challenge I ran into was getting the Grid items to have the correct size and spacing. It took a bit of experimenting to figure out how to control the ratio of space each item takes up. But honestly, it turned out to be a great way to dig deeper into CSS Grid. In the end, the solution was pretty straightforward — something like:

    grid-template-columns: auto 1fr;
    What specific areas of your project would you like help with?

    If anyone has a moment, I’d love some feedback on two of my files: _feature.scss and _cards.scss (specifically the //INDIVIDUAL CARD STYLES section).

    Is the way I’m using Grid there effective? Would you simplify or improve anything?

    Any tips, tricks, or advice—no matter how small—are very welcome and much appreciated!

    Responsive Grid section using all kinds stuff

    #vite#sass/scss
    2
    DevDaru•100
    @DevvMarko

    Your design is impressive, and I also like your code – it's nice to read. One thing that caught my eye is this:

    -webkit-box-shadow: 40px 60px 50px 0px rgba(72, 85, 106, 0.27);
    -moz-box-shadow: 40px 60px 50px 0px rgba(72, 85, 106, 0.27);

    The -webkit- and -moz- prefixes were useful many years ago, but nowadays you don't need them anymore.

    Marked as helpful
  • P
    Alexander3717•310
    @Alexander3717
    What challenges did you encounter, and how did you overcome them?

    Initially I wasn't sure how to effectively translate the desktop layout into CSS grid but later figured out that a 4x3 grid works well.

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

    If you notice anything off with the page layout (on any screen size ranging up from 320px), please don't hesitate to comment. I'm here to learn how to properly make pages responsive and appreciate any feedback, even if it's critical.

    Feedback on other aspects like semantics, code clarity, or best practices is very welcome too.

    Four card feature section made with CSS Grid

    #sass/scss
    1
    DevDaru•100
    @DevvMarko

    very good design, elements move well depending on the screen size. Good job!

  • DevDaru•100
    @DevvMarko

    Great work!

  • MDoughlin•60
    @MDoughlin
    What are you most proud of, and what would you do differently next time?

    Did it!

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

    Biggest challenge was on the desktop version the space at the top of padding, wasn't able to reduce it

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

    Reducing white space

    Producet Preview Card

    1
    DevDaru•100
    @DevvMarko

    unfortunately there is only a README file to see, and I don't know what the page looks like. If you can share a link or something where your page is to see, I would be very grateful, because I am very curious how you managed the task.

  • P
    Nicolas Guérin•120
    @Nicolas-Guerin888
    What are you most proud of, and what would you do differently next time?

    Je suis fier d'avoir respecter la maquette figma et obtenu un résultat responsive. Mais la prochaine fois, je ferais plus attention dans mes dimensions de cellules car j'ai du revoir une grosse partie de mon code CSS pour obtenir un design responsive.

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

    Le principales défi est de respecter dans les détails la maquette figma (décalage des puces, couleur des puces, responsive design). Il faut procéder par étapes et ne pas avoir peur de revenir en arrière s'il le faut. De la patience et de l'organisation.

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

    J'aimerais pouvoir dimensionner mon texte et mes blocs en unité relatives dès le départ, afin d'obtenir un design flexible et qui s'adapte facilement à tous les écrans. Pour cela il faudrait que je puisse adapter les informations de design de la maquette figma en unité relative.

    Recipe page - HTML & CSS

    1
    DevDaru•100
    @DevvMarko

    good job! one thing i see is that the background of preparation time is still white, it should be hsl(330, 100%, 98%), that's a suggestion ;).

  • DevDaru•100
    @DevvMarko

    Good site! I would like to suggest changing h2 "HTML and CSS Basics". In the code you have this text:

    h2 {
    color: hsl(47, 88%, 63%);
    cursor: pointer;
    font-size: 27px;
}

    change the color to black and add h2:hover. When you hover over the h2 text, the color will change to yellow:

    h2:hover {
    color: hsl(47, 88%, 63%);
}

    this will make site better :)

  • DevDaru•100
    @DevvMarko

    Good work!

  • Carlos Alberto da Silva•310
    @slayer-br
    What are you most proud of, and what would you do differently next time?

    I am most proud of the smooth user interaction, especially the hover effects and responsiveness of the layout. Next time, I would focus more on optimizing performance and accessibility, particularly for keyboard navigation.

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

    One of the challenges was creating a responsive layout that adapts to various screen sizes without affecting the design. I overcame this by using CSS Grid for structure and Flexbox for alignment, which made it easier to manage the layout in different viewports.

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

    I would appreciate feedback on how I can improve accessibility for screen readers and keyboard navigation, as well as suggestions for improving my CSS animations for smoother transitions.

    Responsive blog preview card with semantic HTML, Flexbox, and CSS Grid

    1
    DevDaru•100
    @DevvMarko

    very good wbsite. i am very impressed with that animation, good work!

  • P
    j3dd3rs•90
    @j3dd3rs
    What are you most proud of, and what would you do differently next time?

    I was happy that I managed to apply my knowledge independently than following a tutorial.

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

    I struggled a bit sorting through the flexbox layout. I also am not sure if I did the styling correctly according to what would be recommended practices.

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

    I guess checking if my CSS styling could be better. It is something I am unsure if I did correctly. I got it to look as it should, but I am not sure if it was the most efficient way.

    QR Code Container using Flexbox

    1
    DevDaru•100
    @DevvMarko

    small diference between your solution and design, is that text under qr code should have padding on left and right. on design text is narrower then image. ignoring that very good work!