Frontend Mentor | DevDaru's profile

Latest comments

@Networksentinel

Submitted about 2 months ago

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.

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.
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

DevDaru•100

@DevvMarko

Posted about 2 months ago

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
Submitted about 2 months ago
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
Posted about 2 months ago
very good design, elements move well depending on the screen size. Good job!
Sun.Dev•40
@SunMasterDev
Submitted 2 months ago
FrontMentor1-QRcode by sun.dev
1
DevDaru•100
@DevvMarko
Posted 2 months ago
Great work!
MDoughlin•60
@MDoughlin
Submitted 2 months ago
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
Posted 2 months ago
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
Submitted 2 months ago
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
Posted 2 months ago
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 ;).
Shanmukha-19•10
@Shanmukha-19
Submitted 3 months ago
Responsive Blog review Card
1
DevDaru•100
@DevvMarko
Posted 3 months ago
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 :)