Laura Nguyen

Latest comments

• 

  Benhemin•180

  @BenheminSubmitted 11 months 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

  10
  

  Laura Nguyen•130

  @laura-nguyenPosted 8 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.

  0
• 

  Rui-Martins23•190

  @Rui-Martins23Submitted 8 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

  10
  

  Laura Nguyen•130

  @laura-nguyenPosted 8 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

  0
• 

  HamzeKabi•100

  @HamzeKabiSubmitted 8 months 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

  20
  

  Laura Nguyen•130

  @laura-nguyenPosted 8 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.

  0
• 

  sidr467•420

  @sidr467Submitted 10 months 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

  20
  

  Laura Nguyen•130

  @laura-nguyenPosted 8 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

  1
• 

  DeeSzubert•40

  @DeeSzubertSubmitted 8 months 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

  61
  

  Laura Nguyen•130

  @laura-nguyenPosted 8 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

  0
• 

  CecDor•60

  @CecDorWEBSubmitted 8 months 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

  30
  

  Laura Nguyen•130

  @laura-nguyenPosted 8 months 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.

  0