Skip to content
OverviewSolutions
1
Comments
16
P
Vishika
@Vishika

All comments

  • Smaylen5•530
    @Smailen5Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm happy to have created components following the shadcn logic, to have practiced with accessibility and to have discovered new aria attributes

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

    Customizing the radio and checkbox inputs was very stimulating, especially making them accessible

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

    All feedback welcome 😃

    Contact form whit React, Typescript and Formik

    1
    Vishika•360
    @VishikaPosted 28 days ago

    Quite a good solution you have here! I really liked the user experience of your validation. And the focus styling you used.

    I think it was also the case for me that customising the checkbox and radio inputs were the most interesting.

    The only accessibility hurdles I had were

    • When tabbing to "General Enquiry" it takes two 'tab' presses to go to "Support Request". I would imagine this is a better experience if it only takes one 'tab' press. Even better, the next tab should go straight to the message input (apparently the standard practice is to only include the first radio option in the tab index).
    • While pressing 'tab' and 'space bar' work, for the radio option navigation, the arrow keys don't. Apparently that's standard practice too.
    • Finally, ideally hitting the 'enter' key should be able to submit the form

    Here is some documentation from w3 that suggests how we should be able to use the keyboard to navigate radio options and another from mozilla mozilla

    0
  • Papi•260
    @Papi84Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    What are you most proud of?

    I’m really proud of how the FAQ Accordion Card turned out in terms of both functionality and design. The interactive nature of the accordion feature enhances user experience, making it easy to access information. I also focused on creating a clean and responsive layout, which I believe successfully aligns with modern web design standards. Additionally, I’m proud of the way I utilized CSS for styling and animations, which added a polished touch to the project.

    What would you do differently next time?

    Next time, I would prioritize better documentation throughout the development process. Although the project is functioning well, I realized that a more detailed README and comments in the code would help others—and myself—understand the thought process and decisions made along the way. I’d also like to explore more advanced JavaScript techniques to enhance the interactivity, such as implementing accessibility features to ensure it’s usable for all users. Lastly, I’d consider incorporating a testing framework to catch bugs early in the development phase.

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

    challenge was ensuring the design was fully responsive across different devices. I encountered issues with layout breaking on smaller screens. To tackle this, I utilized CSS media queries and flexbox to create a more adaptable layout. Testing on various devices and using browser developer tools helped me identify and fix these responsiveness issues.

    Lastly, I faced some difficulties with browser compatibility regarding certain CSS properties. To resolve this, I researched best practices and used CSS feature queries and fallbacks to ensure a consistent experience across different browsers.

    Overall, these challenges were great learning opportunities that improved my problem-solving skills and deepened my understanding of web development.

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

    I would appreciate feedback on a few specific areas of my project:

    Accessibility: I want to ensure that my FAQ Accordion is fully accessible to all users, including those using screen readers. Any guidance on best practices for making interactive elements more accessible would be valuable.

    Performance Optimization: I’m interested in learning how to optimize the performance of my project, especially as it scales. Suggestions on minimizing load times and improving responsiveness would be helpful.

    Testing and Debugging: I’d like to explore effective testing strategies for my code. Any insights into setting up a testing framework, particularly for React components, would be beneficial.

    Styling Techniques: While I’m satisfied with the current design, I’d love feedback on more advanced CSS techniques or methodologies (like BEM or CSS-in-JS) that could improve the maintainability and scalability of my styles.

    Deployment Best Practices: I’m looking for advice on best practices for deploying projects to platforms like Netlify, particularly around setting up continuous integration and automated deployments.

    https://github.com/Papi84/faq-accordion-main-main/blob/main/style.css

    1
    Vishika•360
    @VishikaPosted about 1 month ago

    Nicely done! slick translates

    • Accessibility: I tested all the keyboard navigation and NVDA on your page, and it works great :)
    • Optimization: I would not advise premature optimization, the exceptions being image compression, lazy loading and javascript minification (not really needed for this amount of code).
    • Maintainability: you could load the script using a defer in your script tag rather than listening for a DOMContentLoaded. And while it's great you went to all the effort of commenting each line of code, I'd comment complex methods and non trivial code, and try to give methods descriptive names and single responsibilities.
    • Deployment: If you're looking for continuous deployment to Netlify, you can link your Github account to it, and it will do this for you automatically!
    Marked as helpful
    0
  • Vishika•360
    @VishikaPosted about 1 month ago

    Nice solution, it matches the design quite closely!

    (ignore the following you didn't do this as part of the accessibility learning path) One way you can make this more accessible is by allowing for better keyboard navigation like this

      switch (event.key) {
    case " ":
      checkRating(rating);
      break;
    case "Up":
    case "ArrowUp":
    case "Left":
    case "ArrowLeft":
      checkPreviousRating(rating);
      break;

    case "Down":
    case "ArrowDown":
    case "Right":
    case "ArrowRight":
      checkNextRating(rating);
      break;
    case "Enter":
      submit(event);
      break;
    default:
      break;
  }
    0
  • JJorgeMS13•440
    @JJorgeMS13Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Me encanto poder utilizar vue.js y la proxima vez podria un poco mas de atención a reutilizar mas los estilos.

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

    El poder cambiar de pantalla y lo supere con Vue-router

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

    Me gustaria que me ayudaran hacer mas reutilizable mi codigo hablando de los estilos.

    Reponsive page made with HTML5, CSS, Vue-router and Vue.js

    1
    Vishika•360
    @VishikaPosted about 1 month ago

    Gran trabajo

    Algo que he notado durante las pruebas:

    1. A veces dice "Please select an answer" en una nueva pregunta.
    2. en los elementos de su lista ha utilizado justify-content: space-between;
    3. Las imágenes de su opción a veces se reducen, puede usar `image { flex-shrink: 0; }
    Marked as helpful
    0
  • Matt Cope•350
    @MatthewPCopeSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    There was a lot going on with this one so I took my time with each little thing and really focused on the getting it functioning properly and looking like the design.

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

    The slider was the first challenge, getting it to turn green as it moved, then the checkbox styling with the check icons was a whole other challenge, then getting the strength boxes working correctly was tough too. I just kept at it, did more research and got help from the community as I went along.

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

    I think I'm good on this one, but any feedback is welcome.

    Password Generator Solution

    1
    Vishika•360
    @VishikaPosted 2 months ago

    Nice solution!

    After looking through your code for the strength score, I realise that basing it on the actual generated characters rather than simply the user inputs is how I should have done mine! I also realised I could have used the checkbox image provided like you did rather than generating a polygon clip-path...

    That said, I noticed a couple things with your solution

    1. There is a bug, when you generate a strong password by ticking all the options and have the length at 20, then you lower the length slider to 1 and click generate, the strength bars show 3, and the text shows "too weak"

    2. The #strength-level-text on mobile view (375px) is quite large when "too weak" and perhaps the password is too when the length is maximised ( i used flex-wrap and made the font smaller)

    0
  • ikethedev•260
    @ikethedevSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I wrote this more modular and I believe I did a solid job on naming function descriptive names

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

    A few challenges I faced was writing a function that updated the object in a way that wasn't overly complicated

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

    Still working on pixel perfection!

    tip calculator

    2
    Vishika•360
    @VishikaPosted 3 months ago

    Hey, great work on your solution, I really like your javascript, it was very well organised and easy to read!

    Some tips on your solution:

    • I quite liked how you made the whole output section into a button, I really really at odds with how to get the user to signal input! Although it might be helpful to indicate it can be used as a button with `` and something like:
    .calculated_amount:hover {
    cursor: pointer;
    opacity: 80%; /* or a background / color change */
}
    • I noticed that you had been playing around with the the custom tip inputs width, I had a similar, though different problem, instead of specifying the width at different media queries you can simply have the following:
    .input_btn {
    width: 100%;
    box-sizing: border-box;
}
    • In your media query, update the grid template rows, so you don't get an extra line when you shift to three columns:
    screen and (min-width: 1000px) {
    .tip-buttons {
        grid-template-rows: repeat(2, 1fr);
    }
}
    • Finally your #bill_amount and .party inputs would look better with width: 100%; at certain screen widths :)
    0
  • Vishika•360
    @VishikaPosted 3 months ago

    Excellent job!

    I learned a lot from looking at your code, especially the activity-card__icon, I ended up using abolute positioning and overflow hidden, but yours is a lot more elegant.

    I've no suggestions for improvment :)

    1
  • Vishika•360
    @VishikaPosted 3 months ago

    Good job getting the subscribe button and card "navigation" to work!

    A few style tips:

    • on the desktop version your .left class looks better without the width: 40% and the .left img without the width: 100%
    • for your unordered list you're better off using the icon-list image than the icon-success, like this list-style: url(./assets/images/icon-list.svg);
    0
  • Vishika•360
    @VishikaPosted 4 months ago

    Great job with adding the object-fit: cover and getting the your share box to float above! Adding a psuedo element to it can help give it that speech bubble look

    .boxShare::after {
    content: "";
    height: 1rem;
    width: 1rem;
    background-color: var(--veryDarkGrayishBlue);
    box-shadow: -0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%) rotate(-45deg);

    I also noticed that in mobile view there is some margin missing from a couple elements

    The top of Michelles portrait peeps up from the share box in mobile view because the div is a little bit taller than the boxShare. I got around this by stacking both in the same grid-area, which made the share box exactly as tall as the profile div

    Marked as helpful
    0
  • neven.cebic•510
    @redizorkSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    none

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

    none

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

    none

    Meet Landing Page

    2
    Vishika•360
    @VishikaPosted 4 months ago

    Awesome job, I love scale on hover that you used in the gallery!

    One improvement you could make is to align the hero images in such a way that you partially obscure the left and right sides of them. I did this by increasing the widths on the hero images, positioning them in the grid and then hiding the horizontal overflow. Though with the way you've structured your code, you may have to do it differently or better!

    Marked as helpful
    0
  • wey song•130
    @teuthixSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I got the grids to work and feel like I understand it better. I hope to put this knowledge to use faster next time!

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

    Figuring out how to get the layout for the desktop view. I looked up how to use grid-area and was able to solve the problem.

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

    I'm worried that the way that I got the cards to display in the desktop view is not the best way to do it. Open to any suggestions and help!

    Testimonials Grid

    1
    Vishika•360
    @VishikaPosted 4 months ago

    Fantastic solution! I also used .card:nth-child(n) to target the different cards instead of using class variants of .card i.e .card--black, .card--black-blue etc

    You've specified the grid positions to a very fine level of detail, personally I told certain cards to span, and gave some of them orders to achieve a look. This allowed me to use less CSS and give a couple more interim layouts between the mobile and desktop sizes suggested to make it more responsive

    @media (min-width: calc(720em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial:nth-child(1) {
    grid-column: span 2;
  }

  .testimonial:nth-child(4) {
    grid-column: span 2;
  }

  .testimonial:nth-child(5) {
    grid-row: span 2;
  }

  .testimonial:nth-child(3) {
    order: 1;
  }

  .testimonial:nth-child(4) {
    order: 2;
  }
}

@media (min-width: calc(1080em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .testimonial:nth-child(3) {
    order: 3;
  }
}

@media (min-width: calc(1440em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .testimonial:nth-child(3) {
    order: 1;
  }
}
    0
  • Vishika•360
    @VishikaPosted 5 months ago

    Very impressive use of clamping!

    A couple of tips!

    1. for the card image, you can use margin-left: auto for it's position

    2. you can use grid template areas for the placement of the cards

    .cards {
    display: grid;
    grid-template-areas:
      ". . t t . ."
      "l l t t r r"
      "l l b b r r"
      ". . b b . .";
  }

  .card--1 {
    grid-area: l;
  }

  .card--2 {
    grid-area: t;
  }

  .card--3 {
    grid-area: b;
  }

  .card--4 {
    grid-area: r;
  }
    Marked as helpful
    0