Frontend Mentor
Login with GitHub
OverviewSolutions18Comments216
P

Anna

@brasspetalsAnna
United States
4,615Points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

JavaScript, Svelte, & A11y

Latest Solutions

  • Desktop design screenshot for the Crowdfunding product page coding challenge

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

    • HTML
    • CSS
    • JS
    14
    P
    Anna4,615
    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. 😄 The slider may also be “fuller” than the design, as it’s accurate to the percentage backed. 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 clearly that's 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
    P
    Anna4,615
    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! 😅

  • Desktop design screenshot for the Stats preview card component coding challenge

    Stats Preview Card - SCSS, Grid, CSS Animations

    • HTML
    • CSS
    13
    P
    Anna4,615
    Submitted

    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!

  • Desktop design screenshot for the Easybank landing page coding challenge

    Easybank Landing Page - Grid, CSS Animations, JS, SCSS

    • HTML
    • CSS
    • JS
    12
    P
    Anna4,615
    Submitted

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

  • Desktop design screenshot for the Loopstudios landing page coding challenge

    Loopstudios - SCSS. Grid, Flexbox, JS, CSS animated mobile menu

    • HTML
    • CSS
    • JS
    16
    P
    Anna4,615
    Submitted

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

  • Desktop design screenshot for the Insure landing page coding challenge

    Insure Landing Page - SCSS, Grid, Flexbox, JS

    • HTML
    • CSS
    • JS
    6
    P
    Anna4,615
    Submitted

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

View More Solutions

Latest Comments

    • HTML
    • CSS
    • JS

    Planets - ReactJS, Styled-Components, Framer Motion, Webpack

    21
    P
    Anna4,615 | Posted 7 months agocommented on tediko's "Planets fact site" solution

    Finally getting around to submitting my comment for this. Absolutely awesome job, tediko!!! 🎉🙌 The homepage/intro is absolutely spectacular (one could say, out of this world 😉). Making the orbiting planets into links for the planet pages, and also adding the orbit color change on hover is great! The whole UX is just lovely, and it responds really well.

    Unfortunately I don’t have much constructive feedback on the React front, but I did find some very small design elements that could be tweaked:

    • Saturn is getting a bit cut off in the homepage animation. To fix this, change the Saturn ::before width to about 55px, and then add the following:
    background-size: contain;
background-repeat: no-repeat;
background-position: center;
    • The tab numbers (for overview/internal structure/surface geology) on desktop and larger medium styles are actually a transparent white, rather than a gray. That way when the tabs are selected/active, the color shows through a bit. Switching from the gray to rgba(255, 255, 255, 0.5) should fix it.
    2
    • HTML
    • CSS
    • JS

    HTML, CSS E FLEX BOX

    1
    P
    Anna4,615 | Posted 7 months agocommented on Vinicius da Silva Oliveira's "Sunnyside agency landing page" solution

    Hi, Vinicius! Congrats on submitting your first solution. 🎉

    A lot of it has to do with the fact that you used so many floats. If you add clear: both to your footer, this will at least help keep it on the bottom.

    This was a good effort. I suggest trying out a few newbie challenges next, so you can focus on responsive design and getting a deeper knowledge of flexbox. I think the 3-column preview card component is a great one to start with. 👍

    Happy coding! 😄

    1
    • HTML
    • CSS

    My first Grid Experience !

    4
    P
    Anna4,615 | Posted 7 months agocommented on David Maillard's "Four card feature section" solution

    Hi, David! Congrats on completing another solution! 🎉

    Overall, you did a good job, and it responds very nicely. My only suggestion on that front is to add a max-width to your cards container for mobile styling, as the cards tend to get pretty stretched between about 500px-700px. Having them match closer in width to the heading text would look nicer.

    To clear up your accessibility errors:

    • For “Document should have one main landmark”, use a main element to wrap the content of your page, and apply your position styling (padding, margin, display, etc.) to that rather than directly on the body. This will hopefully also clear up the other “landmark” errors in the report - not entirely sure as I’m not familiar with the new report system yet. 🤞
    • For “Page should contain a level-one heading”, I suggest wrapping both of your headings in the .heading-section in a single h1 tag (rather than an h3 and h2) with a span around “powered by technology” in order to apply the bolder styles. You can control the line break through setting a width or max-width with ch units.

    Hope my suggestions help! Happy coding! 😄

    1
    • HTML
    • CSS
    • JS

    FAQ Accordion with SASS and JS

    2
    P
    Anna4,615 | Posted 7 months agocommented on Nunc's "FAQ accordion card" solution

    Hi, Nunc!

    In order to do this, you'll have to add overflow: hidden to your .main. However, here lies the tricky part (one of many in this challenge) - this will also hide the little box image, so you'll have to find another way of handling that.

    Another alternative (not using overflow) would be to set the illustration of the woman (but not the box) as a background-image. I'm unsure if there's one "right" way to handle the images in this challenge, and forgive me as it's been many months since I did this one. 😅

    1
    • HTML
    • CSS

    Mobile-first and responsive stats preview card component using flexbox

    2
    P
    Anna4,615 | Posted 7 months agocommented on Nafis Arinda Rizky Putra Handoko's "Stats preview card component" solution

    Congrats on submitting your first solution! 🎉

    The coloring for this image was tricky, and you actually don't need to use the filter property at all! With your current setup, simply add mix-blend-mode: multiply to your img, and up the opacity from 0.5 to something around 0.8. 👍

    3
View More Comments