All solutions

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

Built with. 🔨

• React.
• Vanilla CSS.
• React Router (For testimonial filtering).
• Framer Motion.
• Vite.

Notes. 📌

• The font sizes in the design file were going as low as 11px and 13px, which I think is too small. Instead I used 14px and 16px, making the text easier for users to read. Because of that, my solution is bit larger than the original design, but I think it's better than forcing the user to read very small text.
• I also used a background blend mode on the background image of the first testimonial, so that it’s more subtle and doesn’t interfere with the text that is in front of it.

Features. ✨

• Added two buttons to filter testimonials based on whether they are from a verified graduate or a student.
• Added some view based animations using Framer Motion.
• Used the useReducedMotion hook to make sure that users who have reduced motion setting enabled don't see the animations.

New Things Learned. 🎓

• useSearchParams hook in React Router.
• Using the Framer Motion Library.

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

Would love some overall feedback on any areas where I can improve. Any mistakes I have done, use of HTML semantic elements, feedback on the animations, any thing you would have done differently etc.

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

Built with. 🔨

• React.
• Vanilla CSS.
• Vite.
• BEM Naming Convention.

Features. ✨

• "Your Result" is calculated as the average of summary items ("Reaction", "Memory" etc.).
• The Grade ("Great", "Poor", "Average" etc.) is determined by "Your Result".
• On the initial render, results are fetched from the JSON file.
• Clicking the button randomizes each summary result, which updates "Your Result" and the Grade accordingly.

New Things Learned. 🎓

• Mostly practicing things I learned in React recently, including passing data with props and using state.

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

Would love some overall feedback on any areas where I can improve.

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

Built with. 🔨

• HTML & CSS.
• Vite.

New Things Learned. 🎓

• Understanding the proper use of table, tr, th, and td elements.
• scope attribute of th.
• nth-child() and nth-of-type() CSS selectors.

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

Would love some overall feedback on any areas where I can improve.

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

Built with. 🔨

• HTML.
• Tailwind.
• Vite.

New Things Learned. 🎓

• Using @apply to add utility classes to my custom classes defined inside the styles.css file.

  @layer base {
    *:focus-visible {
      @apply outline-[0.125rem] outline-dotted outline-primary-400 outline-offset-[0.125rem];
    }
  }
  

Ending Notes. 📝

• After my previous project, which was my first Tailwind project, I wanted to do another small component project using Tailwind to become more familiar with it.

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

• The padding between the edges of the container and the content were different in mobile screens and desktop screens. I got the result using a clamp(), so I could skip having a media query only for that value.

  @layer utilities {
    .p-clamped {
      padding: clamp(1.5rem, 5vw, 2.5rem);
    }
  }
  

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

Would love some overall feedback on any areas where I can improve.

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

Built with. 🔨

• HTML.
• Tailwind.
• Vite.

Features. ✨

• The requirements of the project stated that the font sizes need to slightly change with the screen size, but without using media queries. So I used the clamp() function on the font size.

  .text-clamp-100 {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
  }
  

• To make the whole card clickable, I used a pseudo element. I added the pseudo element to the a inside the h2. Then made the card component position: relative. Now when top-0 right-0 bottom-0 left-0 is given to the pseudo element, it will be same size as the card component.
• Added the hover effect to the card component. So when hovered over the card the box-shadow will get slightly bigger.

New Things Learned. 🎓

• It's my first time using Tailwind, so had to learn how to setup a project with it.
• Using the the Tailwind CSS IntelliSense VS Code plugin. It was super helpful since it shows the underlying CSS properties for each utility class.
• How to use the tailwind.config.js file to extend the default theme to include my own custom values.
• Using @layer to include my own classes.
• When using pseudo elements, Tailwind will automatically add content: '' by default so you don’t have to specify it unless you want a different value.

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

Would love some overall feedback on any areas where I can improve.

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

Built with. 🔨

• HTML & CSS.
• Vite.

Features. ✨

• Used a picture element to serve a more optimized hero image for the mobile and tablet screen sizes.
• Included a visually hidden heading to improve accessibility for screen reader users.
• Self-hosted fonts for faster loading.

Ending Notes. 📝

• I used to include both WOFF2 and WOFF font files, but seems like WOFF2 is fully supported by all major browsers, so I am gonna stop including the WOFF file type as a fallback option.
• Changed my head section boilerplate in this project. Did some tweaks to the order I used to place the tags inside the head section. Moving forward will be using that.
• Initially, I used border-radius to create the curved background colors on the page. While this method gave a good result, it was bit hard to get the exact curve given in the design. So later I used an SVG instead.

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

• I wanted to use overflow-x: hidden on the .main element to hide the horizontal overflow of the green background patterns at the top of the page. However, when I added overflow-x: hidden, a scrollbar appeared in the vertical direction. This was very confusing to me. Turns out, if you set overflow-x to hidden, overflow-y is automatically set to auto. That’s why I was getting a vertical scrollbar even though I was dealing with the horizontal axis using overflow-x: hidden. This was an issue since I wanted the top green patterns’ horizontal overflow to be hidden while allowing the bottom green background patterns’ vertical overflow to be fully visible.
  • The solution was, instead of using overflow-x: hidden, use overflow-x: clip. When clip is used, it allows you to clip the overflowing content in one direction (in my case it was horizontal), while keeping your overflowing content on another direction (vertical for me) still visible.

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

Would love some overall feedback on any areas where I can improve.

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

Built with. 🔨

• HTML & CSS.
• Vite.

Features. ✨

• Converted the JPG images in the middle of the page to WebP format for better performance.
• Self-hosted fonts for faster loading.

Ending Notes 📝

• Nothing completely new was learned but this project gave me some good experience considering this had a fair amount of elements. Up until now most of the projects i have done were component projects or coming soon pages with a far less number of elements than this. So this was a good opportunity to apply and practice the things i have been learning so far.

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

• The hero image at the top was a bit tricky. On mobile layout it’s one image. But on the desktop layout it’s two separate images. To achieve that result i used two `` elements. Both picture elements have the mobile version of the image as the default image. Then, one picture element has the left desktop image as the srcset while the other picture element has the right desktop image as the srcset. Since mobile image is the default for both picture elements, one picture element is hidden on mobile screen using display: none. Only one is visible. When the screen is on desktop sizing, both picture elements will be visible and both will be switched to the image defined in their respective srcsets. Giving the required result.

• On the design file there was an overflow effect on the hero image, i struggled a lot to achieve it, and with some help managed to get it to a working state. But in the end i ended up not using it. I liked the current solution without any overflowing effect on the image.

• There were couple of places where the color contrast wasn't passing the check, but i didn't want to change the colors in the design. As a result, couldn't hit the 100% mark on the lighthouse accessibility test.

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

Would love some overall feedback on any areas where I can improve.

Hello everyone! 👋

Any feedback is greatly appreciated.

Thank you 🙏

Hello everyone! 👋

Any feedback is greatly appreciated.

Thank you 🙏

Hello everyone! 👋

• Started learning React recently so did this one with react. Created a component for the Card, and passed in the data for each card using props.
• Started using Lighthouse. I sometimes get 100% and sometimes it shows 99%. I read that it's not consistent and can give different results for the same code. Also I get some errors when I run it on a browser that has chrome extensions installed. So I try it either on incognito mode or on pageSpeed Insights.
• I used a different font color for the paragraph texts, since the color given in the style-guide did not pass the contrast check. Other than that I tried to match everything to the provided design.

Question

• I wanted to make this a PWA and I added the necessary features to the code. And I passed the PWA check when I ran Lighthouse on the localhost site.
• But when I deployed the site to Vercel, it doesn't pass the PWA. When I checked the Vercel deployment logs I found that Vercel doesn't copy the PWA icon images I had in my icons folder, to the assets folder Vercel creates when deploying the project.
• I tried putting my icons folder in the public directory. But it still doesn't work.
• Everything works well when I try on the locally hosted site. But on Vercel it breaks.

If someone can help me with it I would appreciate it so much. Thanks!

Hello everyone! 👋

Another project using the mobile first approach. Any feedback is appreciated.

Thank you 🙏

Hello everyone! 👋

This is my second challenge using the mobile first approach. Also tried using the BEM naming convention for the first time, though I am not sure how well I named the classes. As always any sort of feedback is greatly appreciated, so I can improve.😊

Two resources I used to read about BEM.

• getbem.com
• bem_by_example

Thank you 🙏

Hello everyone! 👋

This is my first time using the "mobile first" approach. This was the resource I used to get an idea about it.

I would appreciate any advice or feedback you could give on the code. I want to make sure the way I have used the mobile first approach is correct.

Thank you 🙏

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

The colors defined in the style-guide had very poor contrast ratios, so I used a different set of colors.

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

Looking for any sort of feedback. Be it accessibility related, best practices, any code improvements etc.

Hello everyone! 👋

I managed to finish another challenge. Any sort of feedback, including how to improve or optimize my code, is greatly appreciated.😊

Thank you 🙏