Frontend Mentor | Laura Nguyen's profile

Latest comments

Benhemin•180
@Benhemin
Submitted about 1 year ago
What are you most proud of, and what would you do differently next time?
I am most proud of how fast I was able to create a working solution. It is definitely not perfect but I was able to build everything in just a couple hours. Practice is paying off!
What challenges did you encounter, and how did you overcome them?
A challenge I encountered was having different share bubbles for the dynamic screen sizing and how to handle the button interactions.
What specific areas of your project would you like help with?
I still don't fully understand how to dynamically size things so that they 1. still match the design exactly, and 2. seamlessly change size while looking good.
Article Preview Component using SCSS/HTML and Vanilla JS
#sass/scss
1
Laura Nguyen•130
@laura-nguyen
Posted 12 months ago
When it comes to dynamically sizing elements, you can use media queries for mobile and desktop. Within those media queries, you can specify the width, height, and position of the social container. You can use position: relative on a parent element, and then position: absolute: on the social container, and you can adjust the position using top and right.
Rui-Martins23•190
@Rui-Martins23
Submitted 12 months ago
What are you most proud of, and what would you do differently next time?
Proud to have been able to succeed using a mobile-first approach, as it was the my first challenge of this kind.
What challenges did you encounter, and how did you overcome them?
Placing and styling the image correctly inside the container was one of the main challenges.
What specific areas of your project would you like help with?
How would you make the transition of the mobile-image for the desktop-image? I placed both on the HTML structure and then used "display: none" on the media queries in order to hide them... but it didn't feel the best way to do this.
Product Card Challenge with a mobile-first approach
1
Laura Nguyen•130
@laura-nguyen
Posted 12 months ago
Hi! Great job with the styling. For the desktop image to fit in the container, you can do object-fit: cover; the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit. After that, you can adjust the width of the card/component to make sure the image is fully displayed.
Marked as helpful
HamzeKabi•100
@HamzeKabi
Submitted about 1 year ago
What are you most proud of, and what would you do differently next time?
I have a somewhat good understanding of CSS Grid. grid-template-areas is a life saver.
What challenges did you encounter, and how did you overcome them?
Organizing the head part of card(profile image, name and "verified graduate") was a little hard. I wanted to create it using css grid, but I was unsuccessful, I used flexbox twice(flexbox inside flexbox) to create it. I'd like to know how others have created it.
What specific areas of your project would you like help with?
DRY. Reducing redundancies
Testimonials grid section using css grid, flexbox and sassy css
#sass/scss
1
Laura Nguyen•130
@laura-nguyen
Posted 12 months ago
I also used flexbox for the head part of the card and that is okay. I like how you used grid-template-areas as your approach for the desktop layout. I would try to improve on the HTML semantics for readability.
sidr467•420
@sidr467
Submitted about 1 year ago
What are you most proud of, and what would you do differently next time?
I used more Flex in it , but would love to do it with grid.
What challenges did you encounter, and how did you overcome them?
I did not figure out how to center those two cards and other besid them with flex but i did it with custom heights in tailwind
What specific areas of your project would you like help with?
It is still not Responsive in all screen .The cards looks jumbled.
I used Tailwind CSS.
#tailwind-css
1
Laura Nguyen•130
@laura-nguyen
Posted 12 months ago
Good attempt! As you mentioned, the cards do look a bit jumbled on the desktop because they are in four columns instead of three. I recommend using CSS Grid instead of Flexbox to arrange the cards. Grid allows you to define the number of columns more precisely, which helps in creating a more organized layout. Additionally, Grid automatically spaces out the elements evenly, providing a more balanced and visually appealing design compared to Flexbox.
Marked as helpful
DeeSzubert•40
@DeeSzubert
Submitted about 1 year ago
What are you most proud of, and what would you do differently next time?
I did enjoy this task. I was trying to use more complex Sass and classes.
What challenges did you encounter, and how did you overcome them?
It was a nice and easy task. A few times, I had to Google about list markers.
What specific areas of your project would you like help with?
What is the correct way to add the title and description to our list? I'm still learning about accessibility.
Simple Omelette Recipe with Sass
#sass/scss
1
Laura Nguyen•130
@laura-nguyen
Posted 12 months ago
- use young-serif as the font for the headers - it seems like there's some issues with importing the fonts
- make the border radius larger for the card
CecDor•60
@CecDorWEB
Submitted about 1 year ago
What are you most proud of, and what would you do differently next time?
This is my third challenge here, and I'm proud because I needed less time to complete this challenge than the previous challenges. I think I have a better organization and a better reflexion before I start to code.
What challenges did you encounter, and how did you overcome them?
I always have difficulty when I need to write my clamp(). Because I'm having trouble calculating a good average value.
Social links profile main solution with SCSS
#sass/scss
1
Laura Nguyen•130
@laura-nguyen
Posted about 1 year ago
Great work. At first glance I noticed that there's no border radius on the container. The gap/padding should be smaller between the name and the location. The link font-size should be 14px, it appears bigger than the mockup.