Skip to content
OverviewSolutions
67
Comments
73

Wendy

@wendyhamel2,090 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Kamran Kiani•2,760
    @kaamiik
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the customized components and effective state management during form submissions. Next time, I would integrate a dedicated form library like React Hook Form or Formik early in the project and refine the architecture to enhance scalability and maintainability.

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

    The main challenges centered around state management and styling unstyled components from react-aria and managing dynamic state updates. I addressed these by leveraging Tailwind CSS for custom styling and refining the component state logic through iterative testing.

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

    I'm looking for input on further optimization of state management and performance, ways to boost accessibility compliance, and strategies to improve project scalability.

    Feel free to share any additional thoughts or suggestions!

    Mortgage Repayment Calculator using React Tailwind

    #accessibility#react#tailwind-css#vite
    2
    Wendy•2,090
    @wendyhamel

    Hi there @kaamiik!

    Nice solution again here. The code looks good, it works smoothly and matches the design.

    I found a few small things you that could improve your solution. The border of the 'Mortgage Type' radio select dots is lime on a selected option in the design and the dots in your solution look a bit off center. The last issue I found is that if you click the 'clear all', the validation message of the 'Mortgage Type' shows up.

    I like the dotted outline you added on focus. It makes the focussed element stand out better than the focussed state from the design.

    Happy coding!

    Marked as helpful
  • P
    Sam Hooker•780
    @35degrees
    What are you most proud of, and what would you do differently next time?

    I made some missteps at the start and some bad component architecture but I was able to do some research and restructure the components. I'm proud that I solved the currency conversion from numbers without installing a library and that I passed props across multiple components including functions. I would do more architecture testing up front instead of jumping in.

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

    Lots of changes to get the components and props to work together. A good change in one components broke something in another component a couple of times but I worked through these issues.

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

    Passing props and using functions as props.

    Svelte Tailwind Product cart

    #svelte#tailwind-css
    3
    Wendy•2,090
    @wendyhamel

    Hi,

    I like the add item animation in the cart. It is subtile and intuitive!

    Your design looks good, but it doesn't quite match the design on desktop size. Your card images are rectangular and in the design they are square. Your layout could use some padding on the top and bottom on all screen sizes so users know they reached the end of the page. Now you try to scroll down because it looks like there may be some more content below.

    You could improve the semantics of your project if you use HTML elements like <section> and <article>. It helps browsers organising the accessibility tree. Screen readers can walk trough your project better so their users can navigate and process the information. see MDN docs

    I can't help you with advise about passing props and using functions as props in react unfortunately. I do not work with react.

    Happy coding!

  • Wendy•2,090
    @wendyhamel

    Hi, nice work on the mobile styling of this challange!

    The responsiveness could use some more of your attention though. If you get to the in between sizes the layout breaks.

    To explain your problem with the .item and get the .item-score to align-self: flex-end the align does set the .item-score to end. It's just that it pushes it down when the flex direction is row (this is default) and not to the right.

    The text-align: end fixed your problem on it's own.

    Happy coding!

  • P
    Kamran Kiani•2,760
    @kaamiik
    What are you most proud of, and what would you do differently next time?

    This challenge was one of the most difficult I’ve faced so far. The project involved multiple pages, each containing unique information. I put in my best effort to build the site using tools like Tailwind CSS, Sass, and Astro. I should also mention that I followed Kevin Powell’s course on Scrimba during this challenge, which taught me many valuable tips and techniques.

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

    Navigation in the header is always a challenge. The styles needed to adapt for mobile, tablet, and desktop views, which added complexity to the code. Additionally, some functionality had to be handled with JavaScript, and Accessibility considerations were crucial.

    Apart from the homepage, all other pages featured a tab system to dynamically update the information based on user interaction, whether by mouse click or keyboard arrow navigation. Implementing this was challenging in CSS, JavaScript and Accessibility.

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

    I’d love to learn about alternative approaches to building this website. The project includes a data.json file, and I used Astro to develop it. I’m curious if there’s a more efficient way to manage the project with less code. For instance, I currently have four separate pages in the pages folder. Would it be better to use a single page and handle everything dynamically with the data.json file?

    I also made an effort to prioritize accessibility in my project, but there’s always room for improvement. If you notice any issues or have suggestions to enhance accessibility, I’d really appreciate your feedback.

    Space Tourism Website using Sass, Tailwind and Astro

    #accessibility#astro#sass/scss#tailwind-css
    1
    Wendy•2,090
    @wendyhamel

    Hi! This project takes a lot of time to complete. Nice work finishing it.

    The approach you took with four pages is better than a single page in my opinion. This way you have the right url’s to go with the pages without any workarounds.

    For your accessibility, I read about the tab system and I get your idea there. However, if I try to navigate your site with voiceover, it does not work the way I think it should. I am not able to get it to read the texts aloud. Just the links. Screenreaders use semantic HTML and the DOM order to make Roters. These are helpful for navigating through the content of a site with a screenreader. On your site, the voiceover does not have any rotors available. Apart from the screenreader; When I try to navigate through the site using the tab key, it steps to the texts, which are not parts of your site you can interact with. Navigating through a site with the tab key should only tab between elements a user can interact with, such as links and buttons.

    I am also exploring the improvements for accessibility, so I hope this helps us both in our research to improve.

    Happy Coding!

    Marked as helpful
  • Wendy•2,090
    @wendyhamel

    Very nice work!

    Nice use of the semantic <article> element. Did you know about the <details> element? This is a nice one to use for the FAQ for better semantic html.

    The image and the text of the tabs in the features section take different time to show. The images lag behind a bit.

    The fonts of your headings are a bit bolder than the design, but I do like the overall site. Your responsive solutions look good on small and large screens!

    Happy coding!

  • P
    Kamran Kiani•2,760
    @kaamiik
    What are you most proud of, and what would you do differently next time?

    The CSS structure, organized with SASS and the CUBE CSS methodology, worked very well and kept the code clean and modular. Using Astro components also improved the code structure, making it more readable. Next time, I might try a framework like Tailwind CSS to streamline styling even further and to make styling faster and more consistent.

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

    One main challenge was setting up the CSS Grid layout, especially achieving an overlapping effect between the header and main sections. This required a careful setup of grid rows and columns, particularly in the desktop view. Experimenting with different grid configurations helped achieve a result close to the design. For animations, I kept them straightforward—one for site load and another for the image slider transition. Keeping these animations simple made them manageable to implement effectively.

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

    Feedback on CSS structure and animations would be very helpful. Suggestions on improving the CSS organization or refining the animations would be useful, especially if there are ways to make them more effective without extra complexity. Also, any recommendations for improving HTML, JavaScript, or accessibility would be appreciated, as these adjustments could enhance the code’s overall quality and accessibility.

    Room Homepage Master using Astro, Sass and cube css

    #accessibility#astro#cube-css#sass/scss
    1
    Wendy•2,090
    @wendyhamel

    Nice job here!

    Nice solution for the layout with the grid. You could figure out some stages in between the mobile layout and the desktop layout. The sections and images are a bit largeon the higher end before your breakpoint, this pushes the content out of view.

    There is some room for more semantic use of html elements instead of the div's. Article is a nice option for the sections with information. This also improves accessibility.

    The animations are a bit jarring for my taste. The images are large and they have to move over a large empty space but is's mostly because the previous content does not animate out.

    I use Alpine.js in my projects, combined with Tailwind.css. It helps with these transitions. It makes coding them a lot easier.

    Happy Coding!

    Marked as helpful
View more comments