Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
P

Anna Leigh

@brasspetalsAnna
United States
5,135Points

"Are you classified as human?" "Negative, I am a meat popsicle."

I’m currently learning...

JavaScript, Svelte, Vue 3

Latest Solutions

  • Desktop design screenshot for the Dine restaurant website coding challenge

    Dine Restaurant - Svelte, Parallax Effect, CSS Animations

    #svelte#accessibility
    • HTML
    • CSS
    • JS
    17
    Submitted

    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. 😄

  • Desktop design screenshot for the Sunnyside agency landing page coding challenge

    Sunnyside Agency Landing Page - Svelte, CSS Grid, Keyframes

    #svelte#accessibility
    • HTML
    • CSS
    • JS
    9
    Submitted

    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?
  • Desktop design screenshot for the Maker pre-launch landing page coding challenge

    Maker Landing Page - Svelte, Intersection Observer, CSS Animations

    #accessibility#svelte
    • HTML
    • CSS
    • JS
    7
    Submitted

    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! 😄

  • Desktop design screenshot for the Pod request access landing page coding challenge

    Pod Request Access Landing Page - CSS Animations, JS

    • HTML
    • CSS
    • JS
    15
    Submitted

    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?

  • Desktop design screenshot for the Crowdfunding product page coding challenge

    Crowdfunding Product Page - SCSS, JS, Grid, CSS Animations

    #sass/scss
    • HTML
    • CSS
    • JS
    14
    Submitted

    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:

  • Desktop design screenshot for the 3-column preview card component coding challenge

    3-Column Preview Card - SCSS, Grid, CSS Animations (Desktop)

    • HTML
    • CSS
    10
    Submitted

    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! 😅

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    Art Gallery Website | Leaflet JS

    5
    P
    Anna Leigh5,135 | Posted 25 days agocommented on Vanza Setia's "Art gallery website" solution

    Hi, Vanza! Another excellent job! 🙌

    To your questions:

    • I think the alt text is fine, especially since the all the location information is in the next section.
    • When it comes to the HTML on the location page, I think using p tags, as you've done here is just fine. You could change the .area__wrapper div to an address element for slight semantic improvement, but I'm not sure it's necessary.

    Hope your exams go/went well! Looking forward to your next solution!

    1
  • Solution screenshot
    • HTML
    • CSS

    My second project on Frotend Mentor

    8
    P
    Anna Leigh5,135 | Posted 25 days agocommented on The Burrito Doggie's "QR code component" solution

    Hi Alyssa! 👋

    It’s so awesome to see you finally submit another solution! Sorry I’m a bit late to comment (been ill, but better now!). You’ve already gotten some great advice from Tesla Ambassador & Shashree. I agree that instead of the two margins on the image, you could simply add margin: 15px to the card, and then add any extra needed margin/padding for the text to the .paras div. Semantically the first paragraph should be some sort of heading (h1, h2, etc.) rather than a p tag, as Shashree already mentioned.

    The only "new" piece of advice I have is typically it's best not to have a set height for elements, letting the content determine height instead. This helps to avoid overflow issues. For example, try adding more text to the second paragraph, and you'll see that the text will soon overflow the card. However, if you remove the height from the card or switch it to min-height, the card will expand with the text.

    Again, great to see you submit another solution and looking forward to the next one! 😄

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Space tourism - with React and Framer Motion

    3
    P
    Anna Leigh5,135 | Posted about 2 months agocommented on Fluffy Kas's "Space tourism multi-page website" solution

    Hi, Fluffy Kas! I’m a bit late to this party, but…

    I struggled with a similar issue in the tabbed section of my Dine solution. Although we used different tools (React & Framer Motion vs. Svelte), hopefully I’ll be able to help a little here.

    The shifting happens worst on initial load on the technology and crew pages, and unfortunately it also occurs to a lesser degree with every tab change on the crew page.

    For the crew page, I believe the text is shifting due to the change in container height caused by the images all being different sizes. Setting a min-height on the container equal to the height of the tallest image should help prevent this. The crew image shifting looks to be caused by the image flex container changing to the the size of the new image before the old one leaves the DOM. Is there a way you could change your animation to have the old one fade out before the new one loads? I apologize, as I’m not familiar with framer motion. Perhaps you can use a setTimeout function to give the old content time to leave the DOM before the new content enters? Again, another option might be to set a min-height and min-width on the image container so the size isn’t shifting with each tab change.

    To prevent the initial flashing, you have to find a method to pre-load your images. For me this resulted in a major refactor, putting all the content in the DOM (rather than dynamically loaded as you have done here), and toggling display: none along with some animations. However, given your img srcsets are pretty simple, you might be able to use preload or do something similar to this method in React.

    Why do tabbed sections have to be such pain? 😭 Your solution overall is fantastic, though - and the animations on the destination page are great! I really like the subtle rotation of the moons (and Mars!). 🙌

    1
  • Solution screenshot
    • HTML
    • CSS

    Mobile-first solution with SCSS && GSAP / ScrollTrigger animations

    9
    P
    Anna Leigh5,135 | Posted about 2 months agocommented on Karol Binkowski's "Clipboard landing page" solution

    Hi, Karol! 👋 Great job on this challenge! The GSAP animations fun, and I can confirm that the prefers-reduced-motion query does work. Your HTML semantics are solid, and overall it responds great. 👍

    The only thing I noticed is that the logos from 400 - 900px get very stretched and pixelated. I suggest removing flex: 1 from .partners__logo and then adding justify-content: center to .partners. You could then play around with your existing gap property on .partners to get the spacing how you want. At the very least this will prevent the logos from getting HUGE on large mobile and tablet screens.

    Again, nice job on this one!

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Responsive landing page using mobile first, sass

    2
    P
    Anna Leigh5,135 | Posted about 2 months agocommented on turtlecrab's "Sunnyside agency landing page" solution

    Hi turtlecrab! You’ve done a great job making an essentially pixel-perfect solution! 🙌

    As for your questions:

    • For the hamburger menu, I would defintely change the .burger div to a button. While the ul is still visible for screenreaders (or it seems to be), the div is not focusable for keyboard users and will only open on click. Using a button will allow the menu to open both on click and when pressing "enter" or "space" if focused. Much more accessible.
    • I think ::before and/or ::after pseudo-elements were definitely the way to go for both the mobile menu menu triangle and the link underlines. Great job. 👍
    • I honestly think it responds great overall, which was definitely not easy for this project. The only thing I noticed is that the egg and glass images start getting cut off from 650px - 767px. Responsiveness is a little easier in this section if you put the images in the DOM (in an img or picture tag) rather than as a background image in an empty div. Another good option might be to make the height of the divs responsive using clamp().
    • I set my max-width even lower than yours. It looks good to me. 👍

    Again, nice job on this one!

    0