All solutions

Hey, everybody! 👋

This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

I'm quite happy with the result! 😊

Any feedback on both the design and code is welcome and appreciated! 😃

Happy coding! 😁

EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

Hello, everybody! 👋

I finally completed another challenge! 🎉 I know it's been a while, but I'm happy to submit another solution after taking a little break. 😆

This was a short, simple challenge that I created with Svelte. Svelte is such a joy to use and it worked out really well with GSAP (which I used to add the animations to the site). I also used ScrollTrigger and smooth-scrollbar to enhance the animation and scrolling experience just a bit! 😀

And for a tiny surprise—scroll past the hero section and back again to toggle the avatars of some of your favorite Frontend Mentors! 😆

Of course, feedback is welcome and appreciated! 😊 Do let me know of any issues you find (since I'm afraid I'm bound to have missed something somewhere)! 😅

Oh, yes, and click on the giraffe for the attribution. 😉

Happy coding! 😁

Hello, everybody! 👋

This is my 30th solution on Frontend Mentor! 🎉 (And my first Guru level challenge submission.) 😎 This was definitely a tricky challenge, but I got to learn and try out many new things! 😀

I used React and Next.js to build the site, styled-components to style it, Formik (and Yup) to handle the forms in this challenge, and Framer Motion to add some page transitions and animations. 😄

There were quite a few things I had to learn in order to complete this challenge, and I'm not sure if I did them all correctly. 😥 Looking back, there are a few things I wish I would have differently, but it's a learning experience! 🙂

If anyone could share some resources on how to manage and organize larger projects like this, I'd really appreciate it! 👍 Lots of resources that I find only focus on specific things (like creating a popup or using certain features of a tool) and not so much how to approach and think about an entire app. 🙃

If you'd like to learn more about my project, see the README in my Git repo (where I also list a few quirks in my solution).

Feedback welcome and appreciated! 😊

Happy coding! 😁

BTW, click on the sidebar avatar for the attribution.

Hello, everyone! 👋

This is my first challenge with React and as usual, I learned a lot! 😆

At first, I was pretty confused about how to organize the files in my project and I'm still unsure if my React is very clean in some places (since I just began learning React). My Sass turned out to be, well, kind of messy (and I'll keep in mind to use a better file structure next time because I simply created separate files for my components for this project). 😅

On the bright side, I created this pretty sweet hover effect for the cards in the "Creations" section from scratch, and I quite like it. 😊

Any feedback (especially on React) is welcome and appreciated! 😀

Happy coding! 😄

Yeah, kind-of-almost pixel-perfect—some of the text is slightly misaligned and the progress bar in the hero image is rotated the opposite way in my solution, for some reason. 😅

Anyway, this was such a beautiful design and I learned a lot from creating it! I ended up having to use Sapper and to learn about things like routing and server-side rendering—which spun around my head a little, but I'm hanging in there! 😄

I added some pretty micro-interactions to the buttons and the form as an extra touch! 😉

Of course, feedback is both welcome and appreciated. 😊

And as usual, keep on coding (and happy coding, too)! 😁

BTW, one quirk I'm aware of is that the countdown timer resets when you go back-and-forth between the home and signup pages.

Hey, everybody! 👋

This was a fun little challenge! I used Svelte again and it makes things so much easier—component-scoped styles are like the greatest invention since sliced bread! 😂

I added an intro animation (for the tablet/desktop layout of the site) with GSAP and the little attribution popup. I also just went with the browser form validation for this one. 😀

Feedback welcome and appreciated, of course! 😊

Happy coding! 😁

Hey, everybody! 👋

This was an awesome challenge that I enjoyed and in which I learned a lot! I used Svelte.js for the first time and it was pretty amazing. Svelte's features made it a lot easier to create a todo app like this and it was a lot of fun to learn! 👍

I added some transitions to make the actions smoother and a Christmas theme 🎄 (because it's drawing near to that special time of year) and used local storage to store the state of the to-do list and the most recently used theme. 😊

There are a few quirks that I'm aware of—the order of the items in the to-do list isn't saved in local storage if they are changed via drag-and-drop and there is no transition for the "Clear Completed" action because of the way I passed data around in my Svelte files. I almost wish I could redo this challenge and do a few things differently (such as make my code less ugly), but... IDK. 😅

Feedback is welcome and appreciated (I really hope everything works okay)! 😀

Happy coding (and happy holidays, too 🎅)! 😁

Hello, everybody! 👋

This was such a beautiful challenge and I learned so much from making it! I actually wanted to do more, but I felt like it was taking a while and I simply needed to submit my solution. 😅

I tried to focus a little more on making this solution accessible with styled outlines, WAI-ARIA, and dynamic alt text for the changing of the tab images. I was also happy that I got to code more JS in this challenge and think carefully about making my JS DRY. 😀

Some extra touches I added were a Material Design-inspired click effect to the buttons, some simple content animations and transitions (using Animate.css again), and a little popup attribution complete with some sound effects! 🎉

Feedback is welcome and appreciated, of course (it's very helpful)! 😊

And, as always—keep coding (and happy coding, too)! 😁

EDIT: I'm aware that a small quirk in my design is that the attribution popup gets in the way of the social media icons in the footer of the page on certain screen widths—but unfortunately, I'm a little lazy at the moment! 😜

Hello, everybody! 👋

This was a fun, simple challenge which I enjoyed! I added a cool little (and surprisingly simple) 3d hover effect to the card component (thanks to Dev Ed, once again). 😆

And for those tricky background SVGs? I ended up using a combination viewport width and height units and percentages to have the SVGs subtly change their position when the screen is resized. IDK if they match the design exactly but they look okay! 😂

Feedback is welcome and appreciated, of course! 😊

Happy coding! 😁

Hey, everybody! 👋

I've given a lot of feedback on this particular challenge, and now it's my turn to give it a go! I hope I did okay! 😅

I ended up coding a lot more Sass and JS than I initially expected, but I learned a lot. I decided to put the slider images in my HTML so that I could use the <picture> element for responsive images but stored the text in my JS (feedback on my JS would be appreciated).

I added some cool transitions to the mobile menu and navigation and created an intro animation (using GSAP) after stumbling upon this YouTube video and remembering Connor Z did the exact same thing (and blew me away when I saw it) when he completed this challenge! 😆

More importantly, I tried to ensure that the design scales up and down nicely (which gave me quite a headache because of this behavior of flexbox), but I think I managed to do it okay in the end.

Of course, feedback is welcome and appreciated! 😊

Happy coding, everyone! 😁

Hey, everybody! 👋

This was an awesome challenge that was a little trickier than I initially thought! 😅

This was my first time creating a site with light/dark themes but I'm pretty happy with the result. I added this cool transition that ripples over the cards when the theme is changed! 😆

As usual, feedback is welcome and appreciated! 😊

And as always, happy coding! 😁

Hey, everybody! 👋

This was another fun challenge that I quite enjoyed! 😊

I focused on trying to make my class names understandable and organized and I tried to increase the accessibility of the toggle by sandwiching it between two labels and adding the aria-pressed attribute to it (but IDK if that really helps or just makes things slightly more confusing)! 🙃

I also added a cool little sliding animation to the left and right pricing cards in the desktop layout. 😎

Feedback is welcome and appreciated!

Happy coding! 😁

Hey, everybody! 👋

This was a short, easy challenge that was a lot of fun to code! (Thinking about how to place the image was interesting.) 😉

I added a few CSS animations from Animate.css (as usual) to make the simple mobile navigation and the loading of the page a little cooler! 😄

Feedback is welcome and appreciated! 😊

Happy coding! 😁

Hey, everybody! 👋

This was a fun challenge from which I learned a lot!

This was my first time coding a responsive mobile navigation (which turned out to be a little easier than I thought) and I'm quite pleased with the result (that is, if it works for you as well as it did for me 😆)!

I also got to practice using CSS grid a little more and think carefully about how I wanted the page to be responsive. 🧐

Of course, feedback is welcome and appreciated! 😊

Happy coding! 😁

Hey, everybody! 👋

This was my first challenge in which I actually had to write more than a few lines of JS. 😆 My solution works (as far as I know) but IDK about my JS... I'd love some feedback, of course, to see how I've done. 😊

I also added a subtle floating animation to the image just to keep things interesting!

Happy coding! 😄

EDIT: An issue I'm aware of is that there's this weird glitch where the background of the buttons on the page flickers or turns transparent when clicked on in Safari (because of a transform I added to their active state, I think). I added one or two properties that seem to take the flickering away, but I'm still unsure of how I can completely solve this glitch (other than, perhaps, getting rid of the transform completely).

Hey, everybody! 👋

This was a nice, simple challenge that I enjoyed and in which I was reminded of the joys of using CSS grid! 😂

I added some subtle hover effects to the testimonial cards to keep things a little interesting. 😉

BTW, if anyone's interested, here's a little cheat sheet for CSS grid that I find is a nice, quick reference.

As always, feedback is welcome and appreciated! 😊

Happy coding! 😁

Hey, everybody!

This was a nice, simple project that I enjoyed! 😃

I once again chose to use CSS-only form validation (and included some validation icons from the last challenge I completed) and added some CSS animations.

Any feedback on both the design and code is welcome and appreciated! 😊

Happy coding! 😁

Oh, and, @zuolizhu, the VS Code extension Live Sass was so much nicer and simpler to work with (compared to NPM and node-sass)! 😉

Hey, everybody! 👋

This was a fun challenge which I actually quite enjoyed! 😀

I was able to match the desktop and mobile designs rather closely and only had to use one media query to make the page responsive (and managed to keep my code from turning into a mess), so I was quite happy with that! 😄

I decided to go with CSS-only form validation again, and this time, I let the browser handle the actual error messages and just focused on the validation icons (I added an extra green checkmark to make things look nice).

And, of course, I added some CSS animations from Animate.css to finish things off! 😉

Once again, feedback on both my design and code is welcome and appreciated! 😊

Happy coding! 😁

Hey, everybody! 👋

I have to admit, this was a much trickier challenge than I thought! 🤔

I originally tried to layout this site using flexbox, but eventually switched to CSS grid (which I found to be easier).

I also decided not to try out any JS for the form validation but use CSS pseudo-classes and combinators to make the error elements appear when the email input is invalid.

I really wasn't sure about how to make this challenge responsive. 😥 Other than follow the designs for the desktop and mobile layouts of the site (which look nice when the screen is exactly 1440x800 or 375x800) I think there's a lot of blank space on other screen sizes and I wasn't sure if I should allow the images to scale a whole lot (because then they might not look so clear).

Any help or feedback on this would be greatly appreciated! 😌

Happy coding, everyone! 😁

Hey, everybody!

This is my first challenge with JS, and it was fun! 😃

The JS was easy, but the CSS took me a little longer to code than I initially thought. 😅

Feedback on both the design and code is welcomed and appreciated! 😊

And as always, happy coding! 🎉

Hey, everybody! 👋

This was a very fun challenge from which I learned to carefully think about how I markup things in HTML and position them in CSS. 🤔

I borrowed some animations from Animate.css and played around with the animation-duration property to create a messaging animation in the phone (which I really think adds some life to the page). 🎉

I'm also rather pleased that my code didn't end up too messy or disorganized after attempting a CSS illustration like this. 😉

As always, feedback is on both my solution and my code is both welcome and greatly appreciated! 👍

Happy coding! 😄

Hey, everybody!

This was a fun project in which I learned a little more about scaling and animating SVGs.

I spiced up the page a little by animating the wavy SVG backgrounds to slowly move back and forth across the page!

(Since this was the first time I tried out something like this, my code was slightly messier than I would have liked, but I hope to improve with time. 😉)

Also, I seem to have a bunch of issues with my HTML in my solution report because I used inline SVGs that apparently have lots of duplicate IDs. Is there a better way to use inline SVGs to avoid this problem?

Any feedback is welcome and much appreciated!

Happy coding! 🎉

Hey, everybody!

This was an exciting challenge from which I learned a lot! 😃

I tried adding to the responsiveness of this site by setting many of the margins/paddings in percentages or vw units and only using min-width in my media queries (for my first time).

I also learned how to color the link text with a gradient (courtesy of the clip-path property 😁) and made this subtle but awesome gradient-animation-hover-effect on the buttons using pseudo-elements! 🎉

Feedback is definitely welcomed and appreciated!

(Also, if you would suggest any improvements to my actual code that would be cool).

Happy coding! 👍

Hey, everybody! 😁

This was a fun project in which I tried my hand at implementing fluid typography (i.e., the size of the text grows larger and smaller with the viewport width) with the CSS function clamp() and included some cool animations from, of course—Animate.css.

It's not perfect—but I'm learning a lot and it's great fun! 😆

Feedback is welcome and much appreciated! 👍