All comments

Gwenaël Magnenat•1,290
@gmagnenatSubmitted 6 months ago
What are you most proud of, and what would you do differently next time?
I like the way this solution looks and how I could expend the structure with a few elements to simulate a real world scenario.

My idea was :
- Profile are linked to users in a database
- Testimonials come from a database
- User can have different ring color on their profile image based on a role or a member status
What challenges did you encounter, and how did you overcome them?
I found a few inconsistent elements in the design like different spacing between similar components or elements present only on some of the cards. I spent quite some time trying to deal with these various values but at the end after some exchange on the discord, I decided to chose the values and keep them consistant between the cards.

The ring on the profile image is only present on 2 images but I decided to add one on all images.
What specific areas of your project would you like help with?
Any feedback is welcome !
Testimonials grid section (SCSS/BEM/GRID)
1
Patricio Zarauz•140
@PatricioZarauzPosted 4 months ago
Great work on completing the challenge and being almost pixel perfect with the design!!

It was really cool that you used the lightness sass method to determine what the font color should be depending on the background! Also good job on creating multiple partials.

There are some minor code improvements I would suggest:

I believe that the card-styles mixin It's unnecessary since all you do is call the color-scheme mixin, just use that one instead.

For the first card, there is no need to use the before pseudo-element, you could just add the background-image property directly to the card class. Also use background-position to position the element where you want.

You could have used the grid-area-template property to design your grid and then use the grid-area property in each card with it's name to make it easier to read and design multiple layouts.

Once again, great job!
0
Lena•230
@lenanle333Submitted 8 months ago
What are you most proud of, and what would you do differently next time?
I'm proud of being able to complete the challenge very closely to the original design all while adding a bit of my own spin to it. I also utilized the mixin feature Sass provides to create reusable cards, that way I can keep my code a lot cleaner.
What challenges did you encounter, and how did you overcome them?
At first I was having trouble getting the top border of each card to look like the original design. The border radius was all weird and wasn't aligning properly. I overcame this by adding a hidden overflow to the card itself. I also had to touch up on some grid properties because it had been awhile since I've used them. I mainly read online documentation to help me solve all of these issues.
What specific areas of your project would you like help with?
Would love any feedback. How do you feel about the animation I added to the desktop view? Is it too extra for a simple page like this?
Responsive Page with Sass and Simple Animation
1
Patricio Zarauz•140
@PatricioZarauzPosted 5 months ago
Congrats on completing the challenge, it's really close to the original design!!

I've found some key areas where you can improve and simplify the code.

The main idea of this challenge is to use css-grid only on the cards section, so on the mobile view, you should use display: grid on the section tag.

You should avoid using setting the width and height to each grid item, for this you could use grid-auto-column: minmax(auto, $desired-max-width); and grid-auto-row: 1fr; where the grid is defined. By doing this, you fix the overflow issue you have on smaller desktop-views and also you guarantee that each grid item has the correct-size.

You could simplify your grid-template-area by doing the following:

grid-template-area: ". two ." "one two four" "one three four" ". three .";

This will make your grid template more readable, as well as you could simplify each card, by removing the grid-row property and replacing it with grid-area: one for the first card and so on.

Other than that, the code and site look great! PS. loved the card animation on hover!!
Marked as helpful
1
Eugen•200
@psdesignroSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
I used SASS for the first time, even if I consider this project is too small to check all its benefits. I will consider using it in my following projects to practice it more.
What challenges did you encounter, and how did you overcome them?
At some point I got stuck, because none of my styling updates were being applied to the HTML, even if everithing was setup correctly. After hours of researching and test I found the issue, and I would be thankfull if someone can confirm this: it seems like (by mistake) I edited manualy the compiled .css file instead of the .scss, and from that point, all my new styling were not applied.

I learnt it the hard way, but I will be more carefull in the future
What specific areas of your project would you like help with?
As it is my first time I used SASS, maybe there are some improvements I can make in the .scss file
Responsive Product Card Preview
1
Patricio Zarauz•140
@PatricioZarauzPosted 5 months ago
Great work on completing the challenge!!

There are 2 main suggestions that I have for you to improve your code.

In order to use the 2 images provided, you could have used the picture tag and use the source tag, so you can specify which image you want to use, regarding of the display size, article

You could have used background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0); for the hover selector, instead of having defined a custom color, this is helpful so you can reuse it in various buttons.

Other than that, great work!
Marked as helpful
1
chelsea-here•160
@chelsea-hereSubmitted 5 months ago
What are you most proud of, and what would you do differently next time?
I'm proud of getting the font percentage decrease to work, while maintaining accessibility using rem's for font-size. Also, proud of using javascript to access the color variable from css and script hover color change effect.
```
// accessing the color variables from my css file
const style = getComputedStyle(document.body);
const yellow = style.getPropertyValue("--primary-color-yellow");

// creating mouseover effect
title.addEventListener("mouseover", function (e) {
  this.style.color = yellow;
});

// now i need a mouseout event listener so its only active during my hover
title.addEventListener("mouseout", function (e) {
  this.style.color = "";
});
```
What challenges did you encounter, and how did you overcome them?
Getting the font to work was the hardest part. I learned how to use clamp to achieve the desired effect.
```
h1 {
  font-size: clamp(1rem, 5.333333vw, 1.5rem);
}
```
What specific areas of your project would you like help with?
Any best practice advice is welcome!
Responsive Preview Card using HTML, CSS, and Javascript
2
Patricio Zarauz•140
@PatricioZarauzPosted 5 months ago
Congrats on completing the challenge and having a pixel perfect solution!!

The only tips I can give you is regarding the author class, where the author div has an unnecessary object-fit attribute and has a display of flex, which is perfect but you added an unnecessary padding-right to the img child, the better solution, would have been to use a gap attribute on the author class.

I repeat, great work and awesome comments!!

PS. if you want a challenge, you can try and add some animations to the hover effect, try doing this with only css.
0
Sardor Akmalovich•190
@akmalov11cSubmitted 7 months ago
Recipe card component using SASS with Responsive
1
Patricio Zarauz•140
@PatricioZarauzPosted 5 months ago
First of all, congrats on completing the challenge, you did an awesome job!!

I have some minor suggestions to make:

Prevent the usage of px for font sizes and margins/paddings, and try using rem, ch or other units that are dynamically scalable, for accessibility reasons. Here's a post that another user from this site recommended me, which goes in further into this topic.

Try using more semantic HTML elements instead of overusing the div element.

Other than that, great project!
0
Lukáš T.•120
@LukasT1Submitted 6 months ago
What are you most proud of, and what would you do differently next time?
I am proud that I used my newly acquired skill with SASS and that i tackled this relatively quickly with no major problems.
What challenges did you encounter, and how did you overcome them?
I really hate that I have no idea what I am doing using git.
What specific areas of your project would you like help with?
Cant think of anything
Responsive Social Media Links
1
Patricio Zarauz•140
@PatricioZarauzPosted 5 months ago
Congrats on completing the challenge and recreating almost a pixel perfect design!! Really liked your use of the transition animation for the on hover effect in the buttons. The only things I can point out for improvements are, the usage of text-align center for the text, since if the screen is small enough and the text adds another line, it's aligned to the left and that looks weird. Then another thing you could look at is adding a effect or animation when the button is pressed.

Once again, great work!!!
0
beowulf1958•1,450
@beowulf1958Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
Proud I was able to redo this using sass, sass partials
What challenges did you encounter, and how did you overcome them?
using sass variables. ended up using regular css variables
What specific areas of your project would you like help with?
nothing so far. I'm pretty happy with it as is
Blog Preveiw mad with Bootstrap and Sass
1
Patricio Zarauz•140
@PatricioZarauzPosted 5 months ago
As a first attempt, it's not bad! There are a couple of styles missing as the rounded corners in all 4 corners of the photo, the card border and making sure that the card has the same padding all over, you can use a layout (flex-box) to achieve this. Also the design it's not responsive nor the font was correctly loaded.

With all the changes mentioned, the design could improve a lot, if you need help with this, hit me up. Keep on the coding and improving!
0
Srishti Chaudhary•170
@itsmesrishtiSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
I'm proud of the fact that I was able to finish it in the time I estimated. I'm proud of using scss. And, I'm proud of making it fully responsive with only a few media queries.
What challenges did you encounter, and how did you overcome them?
How to connect scss file with html and how to use mixins. I googled how to do these things properly and that helped.
What specific areas of your project would you like help with?
I'd like to know how can I make this accessible!
Responsive QR Code Component created using SASS
1
Patricio Zarauz•140
@PatricioZarauzPosted 5 months ago
First off, let me congratulate you on the challenge you did, it's great and looks identical!

After reviewing your code, I have a small number of tips to give so you can have it in mind for a next challenge.

When using colors in your scss, you can define a variable as following: $dark_blue:hsl(218, 44%, 22%); and then use $dark_blue anywhere you want.

Instead of using position absolute for the footer, you could use a grid template, for your layout. Since if the screen is short enough, the footer and the card starts to overlap and it's not readable. In this case it would be better for the user to scroll and see everything correctly.

Regarding your question on how you can make it accessible, you can use the axe DevTools plugin in order to get accessibility recomendations for your page, in your case the only issues are with the footer that you added, that it doesn't meet the minimum contrast requirement.

I insist, you did great job! and I would like to get some tips from you on how you were able to get the exact measurements of everything, since I couldn't :(
Marked as helpful
1

Patricio Zarauz

All comments

Testimonials grid section (SCSS/BEM/GRID)

Responsive Page with Sass and Simple Animation

Responsive Product Card Preview

Responsive Preview Card using HTML, CSS, and Javascript

Recipe card component using SASS with Responsive

Responsive Social Media Links

Blog Preveiw mad with Bootstrap and Sass

Responsive QR Code Component created using SASS