All solutions

This project was a lot of fun. I made a custom range slider for the first time that works in Chrome and Firefox (not sure about Safari). One interesting challenge was determining the strength of the password to be generated. The strength will update based on all the options, although the scale is completely arbitrary 😅. Making the 4-bar strength component was made simple thanks to some cool CSS selectors. All I had to do is change the data-value attribute in JavaScript and the CSS takes care of the rest.

.scale {
  &[data-value="1"] :nth-child(1) {
    --color: var(--red);
  }
  &[data-value="2"] :nth-child(-n + 2) {
    --color: var(--orange);
  }
  &[data-value="3"] :nth-child(-n + 3) {
    --color: var(--yellow);
  }
  &[data-value="4"] :nth-child(-n + 4) {
    --color: var(--green);
  }
  ...
}

Let me know if there's any bugs or improvements I could make. Thanks!

This was the perfect project for practicing React and Next.js. I was able to tackle a lot of challenges, including:

• creating reusable components
• filtering search results
• routing with Next
• creating a light and dark theme

There was a surprising amount of CSS required, and my code started to get a bit crazy. I'm again reminded at how important it is to have a good design system. That's something I'll continue to work on.

One challenge I wasn't sure how to address was having different input placeholder text based on the screen size. If you have any feedback on usability or anything else that could be improved, that would be great. Thanks 🙂

Hey everyone 👋

This challenge was a lot of fun, and there was a lot to learn in this seemingly small project. I learned about using JS Date objects to make the timer and some new CSS properties to make the flip animation, such as transform-style and perspective, which are used for the 3D effect. I also used grid and responsive typography to make sure it looked good at any screen size.

I followed Web Dev Simplified's Countdown Timer video, and also looked at Dorian Camilleri's CodePen to see how to make the 3D animations. Definitely check these out, I wouldn't have been able to make this without their help!

Hey everyone,

This was my first Pro challenge, and I loved it! Having the design file was great for matching the styles precisely. I used Sass for this project, and continued learning the CUBE CSS design system. My goal was to use make reusable utility classes wherever possible. When I got to the spacing between different sections, I wasn't quite sure how to handle the inconsistencies across screen sizes, so there's still a lot of hard-coded styles. I'll have to revisit this project when I've figured out a way to make my CSS more dry.

Also, I tried a new JS library called Swiper. I was able to quickly setup a carousel and configure it exactly how I wanted. I'll definitely be using it in future projects.

Would love any feedback you have, thanks! 😊

This challenge was a lot of fun, especially adding the animations to the message bubbles. The animations were made mostly with CSS, but I had to use a little bit of JavaScript to make it possible.

I don't have any specific questions, but any feedback is appreciated. ✌

This project was great practice for creating a responsive layout using Grid and Flexbox. I ended up with a 500+ line CSS file, so next project I'd like to use SCSS to organize my styles better. I'm still building my knowledge of accessibility and semantic HTML, so if there's anywhere I can improve in those areas, I'd love to hear it. For this challenge I used the <article> tag for the first time and a few ARIA attributes.

Would love to hear your feedback, and if you'd like to share your solution that would be great. 🙂

Wow, this one was quite the challenge. I enjoyed writing the CSS for this one, but the JavaScript to make the calculator function was not easy. I got it working as I wanted, but it's definitely not perfect. I'm looking forward to viewing everyone else's solutions.

One of my focuses has been writing semantic HTML, and also accessibility, so if there's anything I could improve in those areas, I'd love to hear it! Any feedback would be much appreciated. 🙂

This project was trickier than I thought it would be. I spent a majority of the time on the HTML and CSS, and making the layout responsive was the hardest part. I'm still learning when to use certain HTML elements and having good HTML structure, so I'd love feedback related to my HTML.

Thanks 🙂

For this project I used CSS Grid to create a responsive layout. I'm still getting the hang of Grid, so I'd love some feedback on my CSS. My current solution uses separate grid properties on each card, but I'd like to know if there's a better way to position the cards on the desktop layout. Thanks!