Alfonso Manuel Vidrio Lizaola

Latest comments

• 

  Jaegermeisty•50

  @JaegermeistySubmitted 3 days ago

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

  Used a long time on the project. Not that it took long, but took long breaks in between. Made it a confusing project. Of the project itself, I was stunned at the simplicity of the javascript. For some reason I thought this would have advanced javascript but it wasn't. Still something to learn.

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

  They way you checked which radio input was checked was new to me and unknown before this. The solution was much easier than I imagined.

  Also unchecking the radio inputs when reloading the page was totally new and had to be searched up and learned.

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

  I know the color of the box is something of a combination of the dark blue and a lighter color. Didn't get it to work correctly so just have a plain dark blue color.

  

  Interactive Rating Component

  2

  20
  

  Alfonso Manuel Vidrio Lizaola•150

  @AlfonsoVidrioPosted 2 days ago

  I used a background with a linear gradient that might help with the effect you're looking for.

  background: linear-gradient(to bottom, #222933, #181F27);
  

  Marked as helpful

  1
• 

  P

  Aleji0309•90

  @Aleji0309Submitted 8 days ago

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

  I'm most proud of how clean and responsive the accordion component turned out. I managed to keep the code organized and accessible while ensuring smooth toggle transitions and a mobile-first layout. It felt great to build a component that works well across different screen sizes with minimal bugs.

  What I would do differently next time Next time, I’d focus more on accessibility from the beginning — for example, incorporating ARIA attributes and enabling full keyboard navigation. I’d also like to explore writing the logic using a framework like React to practice component-based architecture and state management.

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

  One of the main challenges was managing the toggle logic while keeping the layout from breaking when multiple answers were opened. Initially, I had trouble ensuring only one FAQ could be open at a time. I solved it by resetting all items before toggling the clicked one. It also took some trial and error to get the transitions smooth without breaking the layout, but using max-height and overflow tricks did the job.

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

  I'd love feedback on improving accessibility — especially how to properly use ARIA roles and keyboard interactions for better user experience. I'm also open to suggestions on how to simplify or refactor the toggle logic to make the code more scalable and maintainable in larger projects.

  

  FAQ Accordion Challenge

  1

  10
  

  Alfonso Manuel Vidrio Lizaola•150

  @AlfonsoVidrioPosted 3 days ago

  ​To enhance the user experience when interacting with the accordion, it's advisable to implement smooth transitions rather than abrupt changes. A common practice is to avoid using display: none; to hide elements, as this property doesn't support animations. Instead, consider using max-height combined with overflow: hidden; and the transition property to achieve the desired effect.​

  In the .hidden class, set max-height: 0; to hide the content:

  .hidden {
    /* display: none; */
    max-height: 0;
  }
  

  In the .show class, define a max-height that is sufficient to display the full content:

  .show {
    color: var(--grayish-purple);
    font-size: 1.5rem;
    max-height: 200px;
  }
  

  Additionally, in the container wrapping the content, such as .answer-container, add overflow: hidden; and define a transition to achieve a smoother animation:

  .answer-container {
    line-height: 2.5rem;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  

  These adjustments enable the accordion to expand and collapse its content smoothly.

  0
• 

  Carlos Raúl León•110

  @CarlosLeon0831Submitted over 2 years ago

  

  Responsive product preview card with flexbox and BEM

  #bem

  1

  40
  

  Alfonso Manuel Vidrio Lizaola•150

  @AlfonsoVidrioPosted 26 days ago

  The code looks great, just a couple of things: the alt for the image could be more descriptive, for example, alt="Quick Wireless Charging Desk Organizer - desktop view", to make it clearer. Also, consider using elements like <section> or <article> to group the product info, as it improves accessibility and makes the code cleaner.

  And by the way, great job! I really liked how you changed the design, the product, the colors, and the description. It turned out awesome!

  0
• 

  Daniel Lasauskas•330

  @mazinger086Submitted about 1 month ago

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

  Ufff this was interesting, I'm proud I could do it after a year without coding, what do I do differently next time, try to be more simple with html boxes instead of complicating things with media queries

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

  Lots of them, regarding differences between mobile and desktop and switching among flexbox and grid depending the table I created

  

  Recipe page

  #bem

  1

  20
  

  Alfonso Manuel Vidrio Lizaola•150

  @AlfonsoVidrioPosted 27 days ago

  I really liked how your design turned out. I tried reviewing the code, but it only had a README file. The only recommendation I would have is to add a bit of space between the <li> elements for better readability.

  Marked as helpful

  1
• 

  Peter Baranec•30

  @PeterBaranecSubmitted about 1 year ago

  

  Social links profile

  #sass/scss#bem

  1

  50
  

  Alfonso Manuel Vidrio Lizaola•150

  @AlfonsoVidrioPosted 6 months ago

  I couldn’t access your repository (404 error), but I really liked your solution. It turned out just like the original design. Congratulations!

  0
• 

  Ayhem18•40

  @ayhem18Submitted 8 months ago

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

  1. using the flexbox Layout extensively to make the structure close to the design
  2. finally understanding how flex-grow / shrink / basis behave with respect to justify-content and align-items

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

  1. My main goal was to design this page using flex layout while having a clear understanding of the behavior. I have gone through several resources prior to that and most of them seemed to just throw the attributes at me in isolation without explaining the big picture. I linked the best resource on the flex layout in the repo Readme

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

  1. Mainly feedback on my usage of the flex layout and the responsiveness of the page

  2. I am perfectly aware that several styling details are completely ignored. This was done on purpose. I am currently focusing on building a big picture of CSS and HTML focusing solely on the most important skills (the flex/grid layouts, positioning, the box model....) as I would like to move to JS and NodeJS as soon as possible.

  

  Blog Review Page: FlexBox Layout

  1

  20
  

  Alfonso Manuel Vidrio Lizaola•150

  @AlfonsoVidrioPosted 8 months ago

  You might find it helpful to use semantic HTML tags like <article>, <header>, <section>, and <footer> instead of <div> to improve both the structure and accessibility of your content. For example, you could wrap the main content in an <article>, use <header> for the top part of the blog, <section> for the main content, and <footer> for the author information. This approach can make your HTML more meaningful and easier to work with.

  Consider using CSS variables to define your color values. This practice not only enhances consistency across your stylesheet but also simplifies future updates and maintenance. By declaring color variables in the :root selector, you can ensure that your color scheme is uniform and easily manageable.

  :root {
      --yellow: hsl(47, 88%, 63%);
      --white: hsl(0, 0%, 100%);
      --gray-500: hsl(0, 0%, 42%);
      --gray-950: hsl(0, 0%, 7%);
  
      --font-text: 'Figtree', sans-serif;
  }
  
  /* Example usage */
  body {
      background-color: var(--yellow);
      font-family: var(--font-text);
  }
  

  Marked as helpful

  0