P

ApplePieGiraffe

@ApplePieGiraffeApplePieGiraffe
Dallas, TX
27,345Points

I enjoy creating and learning about new things, eating pizza, and getting a good night's sleep! I also love completing challenges on Frontend Mentor and giving back to its wonderful community!

I’m currently learning...

More about JS, Git, and React. Also considering dipping my toes into back-end development...

Latest Solutions

  • Desktop design screenshot for the Meet landing page coding challenge

    Meet Landing Page | Svelte + GSAP | Surprise!

    #svelte#gsap
    • HTML
    • CSS
    39
    P
    Submitted

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

  • Desktop design screenshot for the Invoice app coding challenge

    Invoice App | React, Next.js, styled-components, Formik, Framer Motion

    #framer-motion#react#styled-components#next
    • HTML
    • CSS
    • JS
    35
    P
    Submitted

    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.

  • Desktop design screenshot for the Loopstudios landing page coding challenge

    Loopstudios Landing Page With React

    • HTML
    • CSS
    • JS
    31
    P
    Submitted

    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! πŸ˜„

  • Desktop design screenshot for the Officelite coming soon site coding challenge

    (Almost) Pixel-perfect Landing Page With Svelte, Sapper

    • HTML
    • CSS
    • JS
    13
    P
    Submitted

    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.

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

    Landing Page With Intro Animation | Svelte, GSAP

    • HTML
    • CSS
    • JS
    21
    P
    Submitted

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

  • Desktop design screenshot for the Todo app coding challenge

    Todo App With Christmas Theme, Local Storage | Svelte, Sortable.js

    • HTML
    • CSS
    • JS
    22
    P
    Submitted

    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 πŸŽ…)! 😁

Latest Comments

    • HTML
    • CSS
    • JS

    Pricing component - HTML, SCSS, JS, Flexbox, Grid, BEM & mobile-first!

    4
    P
    ApplePieGiraffe27,345 | Posted 16 days agocommented on darryncodes's "Interactive pricing component" solution

    Hey there, darryncodes! πŸ‘‹

    Well done on this challenge! πŸ‘I think you did a great job in styling your solution (especially that pesky slider) and overall your solution looks great! πŸ˜€

    I think the reason the price shown in the card component resets to the monthly price when the slider is moved (even after the toggle is set to show the yearly price) is because regardless of whether the yearly pricing is toggled, the function that handles what happens when a change of input occurs always sets the price to show the monthly price. If I understand your code correctly, it should be line 57 in your JS file.

    You should probably set up a conditional statement within the input change handler that checks to see whether yearly pricing is toggled. If it is, it should set the price to the discounted value. If it isn't, it should default to the monthly value.

    Also don't forget to change the "/month" text after the price value to "/year" when the yearly pricing is toggled! πŸ˜‰

    Once again, good job on this challenge! It's especially important that you pushed yourself a bit and learned new things. Glad you enjoyed it! πŸ˜„

    Let me know if you have any further questions! πŸ™‚

    Keep coding (and happy coding, too)! 😁

    1
    • HTML
    • CSS
    • JS

    Todo app created with React, Beautiful DnD and Confetti

    5
    P
    ApplePieGiraffe27,345 | Posted 16 days agocommented on daklo's "Todo app" solution

    Hello there, daklo! πŸ‘‹

    Nice work on this challenge! πŸ™Œ I really like all of the extra features that you added! The confetti animation looks great and the to-do list works very well! πŸ‘

    A small suggestion I have is to add some focus states to the interactive elements on the page. Currently, only some interactive elements are highlighted when they are tabbed to via the keyboard. It's important to let users know which controls are focused or active so that they know what they are doing when using the page with their keyboard. πŸ˜‰

    Also, it might be worth taking a quick look at your solution report to see if you can clear up a few of the errors that are there in order to improve the accessibility and semantics of your solution. πŸ™‚

    Keep coding (and happy coding, too)! 😁

    1
    • HTML
    • CSS

    Order summary card solution HTMS & CSS, Flexbox

    2
    P
    ApplePieGiraffe27,345 | Posted 17 days agocommented on Jana's "Order summary component" solution

    Hello there, Jana! πŸ‘‹

    Wonderful job on this challenge! πŸ™Œ The design of your solution looks great and so does your markup! πŸ‘

    There might be varying answers to your question, but I think I prefer to specify values like margin or padding or font-size separately for each screen size range that I'm building a site for (just because that gives me a little more control over how the site looks at each responsive design stage).

    However, specifying values such as that once, and allowing them to be adjusted by changing the values of em or rem (like with media queries) is also a viable approach.

    Also, I believe you should always specify values such as those in a responsive unit such as em or rem (not px), to ensure that changing the root font-size of the document will cause the rest of the site to scale up/down (which is important for accessibility reasons).

    Hope that helps a bit. πŸ™‚

    Keep coding (and happy coding, too)! 😁

    0
    • HTML
    • CSS

    flex-box

    1
    P
    ApplePieGiraffe27,345 | Posted 17 days agocommented on John Geiger's "3-column preview card component" solution

    Hello there, John Geiger! πŸ‘‹

    Congratulations on completing your first Frontend Mentor challenge! πŸŽ‰ Nice work on this one! πŸ™Œ

    To improve the responsive design of your solution, I suggest adding a max-width to the card component so that it isn't too wide when the layout first changes from desktop to mobile.

    Also, I know the "Learn More" elements in this challenge look a lot like... well, buttons, but I think in the real-world they would more likely function as links (since they seem as if they would take you to another page where you can learn more about the product when clicked). I'd suggest turning those buttons into links (but keeping the same styling of course) to reflect how they might actually be used in a component in a full-fledged site.

    Hope that helps a little. πŸ™‚

    Keep coding (and happy coding, too)! 😁

    0
    • HTML
    • CSS

    Mobile-First Solution using flexbox and no frameworks

    5
    P
    ApplePieGiraffe27,345 | Posted 17 days agocommented on Julian Hartl's "NFT preview card component" solution

    Hi, Julian Hartl! πŸ‘‹

    Nice job on this challenge! πŸ‘ Your solution looks great! πŸ˜€

    A few things I'd like to suggest are,

    • Setting the alt text for the images that are the icons in the card component to an empty string. That's because the purpose of those images are mostly decorative and need not be announced by assistive technology like screen readers. Leaving the alt text to those images empty will ensure that the images are ignored by screen readers so that they can focus on the other, more important content on the page.
    • Adding a heading to the card. Even though the title of the card is a link, you can still wrap the text itself in a heading tag and then wrap that heading element in a link tag. πŸ˜‰
    • Perhaps looking into the BEM methodology to better name and organize your classes. It's a popular way of naming classes that would work great in a component such as that in this challenge. Learn more about BEM here.

    Hope you find those couple of tips helpful. πŸ™‚

    Keep coding (and happy coding, too)! 😁

    0