All solutions

Thank you Maia!

Any feedback for either myself or @maiaflow is appreciated. We didn't catch the bonus challenge to try and do this with no JS. I know how I would have done it but honestly, doing a lot of :checked for the toggle and then using display:none on the child elements doesn't seem like great practice. Also for this, I wanted to focus on my JS specifically.

This was a collab with @maiaflow. It was so much fun working on this project with them. Any feedback is always welcome. They will have the same submission as well.

Maiaflows solution

Feedback is always great but please be kind to my React code if you do.

I recently heard of Codux by Wix, a visual IDE for React components and as soon as I saw this tool, I wanted to build something. I decided to build this Frontend Mentor challenge as my first one using React.

I also learned a bit about TypeScript while using Codux since TypeScript is primarily used with this program.

Give me some things I could have done differently when looking at my React code.

Thank you, everyone.

PS. I know about the accessibility landmark warnings. Codux is challenging.

This project was completed form start to finish in under 1 hour. This was a challenge I saw @maiaflow do with the same component. Thoughts?

Any feedback is always helpful.

This one was actually really fun and easy to implement.

I did notice one thing that I couldn't figure out. The Grayish Blue - hsl(217, 19%, 38%) color I never used. It was not obvious to me where it was being referenced.

I always welcome feedback.

This was my first time using mixins even though I have been using SCSS for some time now. I never needed or thought about them until today. I know I need to do more with SCSS to full unless its powers.

Is there anything else you would have done when using SCSS?

This is my 2nd submission for this component. For the first submission I used SCSS for the first time and for this 2nd submission, I used TailwindCSS for the first time.

Any feedback is great feedback. One thing I didn't like about using only Tailwind was that the HTML markup using many class names was a bit hectic. I do prefer a very clean HTML file so this was a bit painful but I do see the benefits of using Tailwind.

Any feedback is great feedback. I know there were probably easier ways to build the JavaScript on this solution but was happy with this approach. If anyone has a more simplified way of doing it, please share.

Any feedback is great feedback!

One thing I did try using is TailwindCSS for this challenge and had a difficult time setting it up in Visual Studio Code. If anyone has any great examples/tutorials on how to use Tailwind for these challenges, that would be awesome if you could share.

Thank you.

Any feedback would be great. First time submitting in a long while. Took a 9-month break. I personally have a hard time seeing the hovering cyan color but I do know it is there.

One thing that had me think of a creative solution was the hovering transition on the image. The SVG icon had a fill color set in the SVG code. I ended up taking it out and using an HSLA color so I can transition the fill for a smooth fade. You cannot transition opacity.

Solution Images do not match since I took the liberty to make the top header and testimonials sections 100vh. This was to give the header an "above the fold" design and the testimonials a bit more breathing room.

This was a fun solution. I do like taking my time with them. Any feedback is appreciated.

I was quite happy with the JS work for the mobile menu.

The only thing that hung me up the most was the horizontal spacing on the desktop for the "Transform your Brand" section. For whatever reason, I wanted it to have a fluid width but keep the box itself aligned to the right of the box to keep the same spacing on any wider screen sizes.

For the life of me, I could not get it to work. I ended up with a solution I am ok with but not my first design.

I welcome feedback as always.

The generated screenshot doesn't match but I believe it has to do with their original solution image not being in the correct proportions for this project. So please ignore the solution slider as mine is not lined up properly even though it really is.

Super happy with how this came out. This one took a while because I was also pushing myself to learn and use only SCSS for this solution. I may continue on with it but it definitely took me longer than using pure CSS.

I am not sure if there is any feedback I would need but I am always open to it.

Check out my fun form submit design This challenge made me have to flex my JS knowledge a bit more. If you could please check out my JavaScript and give me constructive feedback. I know I repeated myself a lot and I am sure there are ways I could have reduced the amount of code and still get to the same solution.

Feedback is always welcome.

Any feedback is helpful and welcome.

I couldn't get working was because I had my modal set to -20px on the top and after the user submits the form, the top ends up being set back to 0. This way I could have the modal slide down slightly.

I ended up removing the code but I had it when the modal section had the class added from JS that says "modal-open" is when I was resetting the top. Why could I see the animation in the console but it was not triggering at all once the modal appeared?

To date, this was my favorite one. I specifically enjoyed again the mobile-first approach and using gaps with flexbox.

Always open to feedback and improvements, if there are any.

I finally understood the mobile-first workflow approach with this project. I would love if someone who knows that approach really well to look over my code to see if there is anything I could improve upon. Thanks in advance.

Open to feedback. One thing I struggle with is the colors of the not-so-accessible text content from the design. I am colorblind so that is a challenge. Anyone else struggling with this?

Just a heads up, the original design was not centered around the card but rather around the card and the box icon poking outside of the container.

I fixed it in my own version so that the card is centered as how it should be. My screenshot looks off because of this.

Feedback always is helpful in general.

If you have a chance, can you please check out my code to make sure it makes sense to another developer with what's going on? I try to make my markup HTML as simple as possible to understand without overdoing classes.

Had a blast with this challenge. Question for everyone, even though the contrast doesn't pass for accessibility because of the style guide, do you ignore it just for this challenge or would you fix it resulting in it not matching the files?

The transparency on the statistic words was slightly adjusted but still did not pass the contrast test for accessibility. Is it better to be more accessible or try to match the design exactly given the style guide's specifications?