Valeria Montoya

Latest comments

• 

  Lana Schuster•90

  @lanaschusterSubmitted almost 3 years ago

  

  Time Tracking Dashboard solution: Vue + Scss + Vite

  #vite#vue#sass/scss

  1

  40
  

  P

  Valeria Montoya•400

  @ValeriaMontoyaPosted about 1 month ago

  Hi @lanaschuster 👋🏼

  Your solution looks fantastic overall! However, I noticed a few areas where accessibility could be improved. For instance, adding styles for focus-visible on links would enhance the user experience for those navigating via keyboard.

  Additionally, in the report-presentation-card.vue component, the links for "Daily," "Weekly," and "Monthly" stats are present, but they don't seem to be functional at the moment. This could be the reason I'm unable to see the updated stats. It would be great if the logic to fetch and display the relevant data upon clicking these links could be implemented.

  Keep up the good work, happy coding!

  0
• 

  P

  Harta Shuwanto•140

  @hartashuSubmitted 2 months ago

  What are you most proud of, and what would you do differently next time?

  Still need to learn more and get more experience with JavaScript and form validation.

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

  I use constrain validation API for the form validation.

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

  For validating form in JavaScript, which method is the best practice to use: The Constraint Validation API, without using API, or using FormData constructor? Which one is most recommended to use?

  And also it is a little out of JavaScript topic: How to align list item vertically with the bullet/marker? Mine, the list item is a little lower than the marker (vertically)

  

  Responsive newsletter sign up page with JavaScript Form Validation

  #bem#semantic-ui

  1

  30
  

  P

  Valeria Montoya•400

  @ValeriaMontoyaPosted about 1 month ago

  Hi Harta 👋🏼

  Unfortunately, I don't have enough experience to answer your question about form validation with JavaScript, but I think you should explore different approaches to learn all you can about it.

  To align the list items vertically with the bullet/marker, you can adjust the line-height and padding of the list items. Here's how you can do it:

  • Set a consistent line-height for the list items.
  • Add padding to the list items to align them vertically with the bullet.

  Here's an example of how you can modify the .card__list and .card__item styles to achieve this:

  .card__list {
    list-style-image: url('../assets/images/icon-list.svg');
    padding-left: 24px;
    gap: 10px;
    line-height: 1.5; /* Adjust the line-height */
  }
  
  .card__item {
    color: var(--color-dark-slate-grey);
    padding-left: 1ch;
    padding-top: 2px; /* Adjust the padding-top */
    padding-bottom: 2px; /* Adjust the padding-bottom */
  }
  

  Feel free to adjust the values to achieve the desired alignment. I hope you find this useful! 🫱🏻‍🫲🏻

  0
• 

  P

  Harta Shuwanto•140

  @hartashuSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  Have to learn more about combining JavaScript with HTML and CSS, especially the best practice for naming the class name.

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

  Make the share button to always show up at the top when clicked by setting the z-index.

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

  I think so far so good.

  

  Responsive and Interactive Article Preview Component Page

  #bem#semantic-ui

  1

  10
  

  P

  Valeria Montoya•400

  @ValeriaMontoyaPosted about 2 months ago

  Hi Harta 👋🏼

  Your JavaScript file is concise and functional. Here are some awesome things you should keep implementing in next projects:

  • Readable code with clear variable names.
  • Your code is reusable for similar share button implementations.

  Your solution looks great and works properly 👀

  0
• 

  P

  wraith-wall•250

  @wraith-wallSubmitted 3 months ago

  

  Responsive landing page

  #sass/scss

  1

  10
  

  P

  Valeria Montoya•400

  @ValeriaMontoyaPosted about 2 months ago

  Hi wraith-wall 👋🏼

  Your code is generally well-structured and readable, however, here are some suggestions for improvement:

  • Use more descriptive class names to improve readability and maintainability.
  • Consider breaking down large sections into smaller components for better reusability.

  Your solution looks great btw!

  Marked as helpful

  0
• 

  Akash A Benki•190

  @AAB007209Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud about the Grid layout I learnt about while doing this challenge. Grid layouts are always kind of easy when thought about the design but when it comes to code they become messy during responsiveness.

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

  Grid Layout Responsiveness was little bit tough to come up at first. But later got some help from Kevin Powel the CSS master and was able to do it and understand properly.

  

  Testimonial Grid Section (Responsive)

  2

  41
  

  P

  Valeria Montoya•400

  @ValeriaMontoyaPosted 3 months ago

  Hi Akash A Benki 👋🏼

  Your solution includes semantic HTML. However, there are a few improvements that could be made:

  • <section> could be used to group related content (e.g., all the testimonials could be wrapped in a <section> tag to emphasize the thematic grouping of content).
  • <article> could be considered for each individual testimonial, as each one is a standalone piece of content.

  Overall, your code provides a responsive, readable, and structured layout. I hope you find this helpful 🤓

  Marked as helpful

  0
• 

  Elofatish•380

  @ElofatishSubmitted 3 months ago

  

  four-card-feature-section-master

  1

  30
  

  P

  Valeria Montoya•400

  @ValeriaMontoyaPosted 3 months ago

  Hi @Elofatish 👋🏼

  There are some positive aspects about your solution, but also areas for improvement:

  • You correctly use alt attributes for your images, which is great for accessibility! However, for images like "Supervisor", "team-builder", etc., you might want to make the alt text more descriptive. For example, instead of alt="Supervisor", use something like alt="Icon representing Supervisor tool for monitoring project roadblocks". This helps users with screen readers understand the context.
  • Avoid unnecessary comments like "file css" as it's self-explanatory from the link tag (line 10 of your index.html file).
  • Finally, your implementation looks close to the design but some colors and font sizes can be changed to match the design. For example, you can replace color black for --Very-Dark-Blue: hsl(234, 12%, 34%);

  I hope you find my feedback useful! 🤓

  0