All solutions

Hi, everyone! 👋 It feels great to finally submit this solution. I’ve wanted to do this challenge since I started doing Frontend Mentor projects. It was definitely a learning experience (see: README), and hopefully I’ve made up for the lack of effects in my Sunnyside solution. 😆

The parallax effect is only on desktop and tablet. It’s also turned off, along with all animations and page transitions, for those who prefer reduced motion. 👍

Questions:

• This was my first time implementing a “tabbed” interface. I opted to use button elements for the tabs. Is there a better and/or more accessible way to create tab functionality?
• I’m concerned that the image animations on the tabbed Events section are getting messed up if the image doesn’t load before the animation triggers. Is there a way to preload images from picture elements in a way that’s responsive and also works with multiple srcsets? Update: I refactored this section a bit, making some tweaks to the animations and putting all content in the DOM rather than dynamically loaded. The flashing issue is now fixed. Huge thanks to Dave and Christopher for their help on this! 🙏
• How is the form accessibility on the booking page? I don’t believe the second page was included in the report.
• Sadly, I didn't manage to style the AM/PM selector like the design because I used select and option elements. Do you know of a better method that would be both accessible and match the dropdown in the design?
• Not sure how I feel about the menu list being parallax on desktop. Does it look too wonky or have I just been staring at it for too long? 😂

Thanks for taking the time to look at my solution! Feedback is always greatly appreciated. 😄

Hi, everyone! 👋 This one is a bit of a “simpler” solution - meaning I didn’t add many animations or effects. I had lots of ideas for this one, but most ended up getting tossed. Instead the big focus was on Svelte and component-based development.

Questions:

• How would you handle a design like this on large screens (1920px+)? Add a max-width to the entire page and keep it centered? Add another media query? For now I’ve just left it, but letting it expand into oblivion doesn’t look great. 😕 "Solved": Went with max-width.
• I used a local variable in conjunction with a Svelte variable to determine the color of the "underline" in the LinksUnderlined component (yellow/pink). I feel like there’s probably a simpler way to do this in Svelte? Solved: Used the method in this REPL for a cleaner solution.
• Is there a way to “disable” a Svelte transition? In order for the transitions I used for the mobile menu to not fire on page load for 800px+ screens, I added a class to disable animations. This feels like a very janky solution to the problem. 😆
• How’s my Svelte in general? Any input on improvements and best practices?

Hi, everyone! This is my first Svelte project, so I'm sure there's much to be improved upon. Still getting used to component-based structure/development, but so far I like it!

Safari continues to plague me. In this project, the .invalid and focus styles for the input are not showing up in Safari, and I can't figure out why. Any insight into this will be greatly appreciated! The CSS mouse animation also had some serious issues in Safari, so I opted to have the original svg icon be displayed both in Safari and for those who prefer reduced motion. Solved: Turns out my Safari was out of date! 😅 Everything works in 15.4 👍 Well, almost. Keyboard tabbing doesn't seem to pick up the maker logo in the header as a link. The outlines also display oddly on the attribution links when tabbing through them. 🤦‍♀️

The animated mouse is heavily inspired by (read: blatantly stolen from and lightly tinkered with) Ryan Mulligan's CSS Site Scroll Micro Animation. Full list of resources in the README.

Please let me know what you think, especially if you see anything that can be improved upon. Feedback is always welcome! 😄

Hi, everyone! It has definitely been a minute, but after a very long coding break I'm back! 👋 I'm excited to be submitting my first premium challenge solution as a Pro member. Having the design files has been a massive time saver! 😄

Since it's been so long, I decided to stick with plain, old CSS and JS for this project - bit of a "warm up". 😅

While the project was pretty straightforward, I did run into a rather odd bug. In Safari, I noticed the podcast svgs were blurry. After some testing, it seems that svgs that have a filter and are also in an img tag are blurred. If the filtered svgs are inline, they display just fine. The only suggestions I found online were to add -webkit-transform: translate3d(0,0,0) or -webkit-filter: blur(0px);. Unfortunately, neither worked in this case.

Since the grey filter on the podcast svgs in the starter code didn't quite match the color in the design files anyway, I ended up editing the svg files directly to remove the filter and manually change the color to match the design. However, if anyone has a simpler solution to the Safari svg blurring issue, please let me know! Have any of you ever encountered it before?

Hi, everyone! 👋 This project ended up being far more complicated and time-consuming than I anticipated, but was a great learning experience.

The desktop bookmark button interaction is a bit different than the design - it toggles. I wanted to experiment and have a bit of fun. 😄 Check out the README for my full list of “additions” and “deviations” if you’re curious!

Questions:

• How much of a hot mess is my JS? 😅 Up until now I’ve only used it for menu toggling, so this was a challenge. I’m sure there’re a million better and more efficient ways to go about everything I did. Please, let me know!
• The largest challenge was keyboard accessibility, which I’m still having major issues with. The selection modal focus trap works when you open the modal using the “back this project” button, but doesn’t function correctly if you use the “select reward” buttons. It also breaks once one of the radio buttons has been selected, so I think that may be the issue. Does the focus trap have to be reapplied/"refreshed" every time an input is selected? Any insight would be appreciated!

Shoutouts:

• Thank you to Dave, for recommending Google’s free accessibility course on Udacity. 🙌
• Thanks to Grace for helping me out with a Safari animation issue. 🙏
• And special thanks to APG & Tediko for helping me stay sane on the long journey to finish this solution! 😂

More animation practice! 😄 Hopefully the screenshot will be ok this time, as the animation is a bit faster than the stats card solution. The animations are only for the "desktop" layout. I think a similar but vertical, "slide down" animation for mobile would be lost on most users due to the smaller screen height and would also be too much movement for a small screen. Let me know what you think!

prefers-reduced-motion was used to prevent the animations from occuring for those who prefer motion reduced. I also added aria labels to the card links to make them a bit more descriptive, but I'm unsure if this is actually helpful for screenreaders or comes off as redundant. Still learning! 😅

What was originally a break from a larger project turned into a fun animation experiment! I spent an ungodly amount of time messing around with cubic-bezier curves. 😅 Hopefully they don’t mess up the screenshot.🤞 (Edit: Yep, they did. But only a little! 😁) The statistics are only animated on the desktop layout, as I felt it was a bit too much on mobile.

First time implementing prefers-reduced-motion to prevent animations for those who prefer it reduced. It seems to work when I test it, but please let me know if there’s any goofiness.

Also first time using mix-blend-mode, which seemed to work well in combo with opacity to get close (I hope) to the header image design.

Shoutout to @ApplePieGiraffe for inspiring me to play around more with animations.

As always, any and all feedback is greatly appreciated!

Hi, everyone! 👋 Glad to finally be done with this one(I hope)!

Questions:

• When I uploaded my solution to Vercel, I noticed that on desktop the background image on the hero was loading slower and showing up halfway through the animation. I used this handy solution from CSS Tricks to pause the animations until the images were loaded. It seems to have worked for me, but let me know if there’s any weirdness. 🤞 Are there better ways to go about delaying animations until all elements are loaded?
• For accessibility, I again made sure to put the mobile menu button inside the nav, added an aria-label, as well as used the aria-expanded attribute as I did in the Loopstudios solution. Is this the correct way to go about this? Could accessibility be improved? Any insight is appreciated.

“Extras”

• The mobile menu will close if clicking outside the menu or header (as well as by using the menu button, of course).
• I played around with CSS animations on the hero section, with different animations for mobile and desktop.

Thanks for taking the time to look at my solution! Feedback is greatly appreciated. 😄

Hi, everyone! 👋 I really enjoyed this one, probably because I like the design so much. Finally getting more comfortable with grid, and might even be starting to prefer it over flexbox!

The Sass architecture is probably a bit overkill for a project this size, but I wanted to practice something more akin to 7-1 architecture. I also didn't implement mix-ins to this project, but plan on doing so in the next.

Also, this solution uses 62.5% font-size. I’m aware of the issues with it and will try out other methods in future projects. 👍

I really tried to stick to just 750px and 1200px for my main media queries. I was very tempted to add a third to switch a little earlier to the vertically-styled cards and the horizontal overlap style for the “interactive VR” section, since neither work at 750px. Ultimately, I figured it was a bit too much. Thoughts?

I added a subtle image zoom on hover to the “Our Creations” cards using ::before pseudo elements. Is there a better and/or simpler way to go about this?

I’m trying to implement better accessibility practices, so for this project I made sure to put the mobile menu button inside the nav and also added the aria-expanded attribute. Is this the correct way to go about this? Any suggestions on accessibility and how to improve it are very welcome!

Any and all feedback is greatly appreciated! Thanks for taking the time to look at my solution. 😄

Hi, everyone - it's been a few months! Getting more comfortable with Grid and still working on my Sass architecture. As always, please let me know if you see anything that can be improved upon. Feedback is greatly appreciated! 😄

I really enjoyed this one, and what took me the longest was figuring out how I wanted everything to respond. Hopefully stacking and hiding the mobile menu icons instead of switching the src isn’t a horrible coding sin - I wanted to use inline svg so that I could create hover and focus effects. Feedback is very appreciated - let me know what you think, and if you see anything that could be done better!

Finally getting into the JS projects! For this one, I'm curious - what's the best practice for the share menu when it comes to accessibility? Would love to hear anyone's thoughts on this and any other feedback you might have.

I originally set out to use way more grid, but in nearly every instance had to switch over to flex because of how I wanted "overflow" items to be aligned. I used some fairly minimal Sass architecture for this project - please let me know if you think it can be improved upon, as well as my continued attempts at BEM! As always, any and all feedback is greatly appreciated.

Also, shoutout to @ApplePieGiraffe for the Live Sass recommendation - so much simpler!

Played around with min() for the typography, logo, and some margins. Seems pretty useful, and I'd love to explore max() and clamp() in the future. My personal challenge for this one was to try and not use any media queries. However, I couldn't find a way around them for the form. If any of you know of a better way, or have any other feedback, please let me know!

This one took me far longer than I originally thought it would, and I definitely should have used Sass - next time! Also first time experimenting with inline svg, which I enjoyed.

If anyone knows of an easier way to get the top mobile background image to match the design other than my weird linear-gradient and positioning nonsense (used for phone screens only, not the tablet resize), please let me know! I feel like there’s probably an obvious answer, but I’ve been staring at the issue too long to see it.

On the same note, has anyone managed a “pixel-perfect” solution of the desktop four icon features section without using a ton of micro-adjustments? I tried to do it as simply as I could, but trying to get it to match perfectly made me feel like I was slowly going mad.

If you see anything else or have any other suggestions, please let me know!

First time using Grid, so I'm sure my code is a bit of a mess (not to mention the abundance of media queries). Feedback is very welcome!

This was much trickier than I thought it would be! If you have any suggestions or know of an easier way to handle the images (outside of JS), please let me know!

Feedback is always welcome and appreciated!

Feedback is always welcome and appreciated!

Feedback is welcome! Let me know if you see anything I could improve upon.

Originally I completed this as desktop-first, but upon suggestion went back and converted it to mobile-first - something which I've never done. Hopefully there's no goofiness, but please let me know if you find anything!

Has anyone managed to implement a meter or progress element? I tried my hardest, but couldn't quite get the styling right for either and had some major cross-browser compatibility issues. Firefox was the only one I could get to display somewhat close to the design.

Edit: For clarity - because I couldn't get either meter or progress elements to work, I ended up just going the plain old div route. 😅 Just wondering if it's possible!

While I don't have any specific questions about this challenge, feedback is very welcome!