ApplePieGiraffe

Pro
@ApplePieGiraffeApplePieGiraffe
Kampala, UG
21,140Points

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

React, mostly. And a bunch of other cool things that work with React like Next.js and styled-components!

Latest Solutions

  • Desktop design screenshot for the Invoice app coding challenge
    • HTML
    • CSS
    • JS

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

    P
    ApplePieGiraffe21,140Submitted

    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.

    View Solution
  • Desktop design screenshot for the Loopstudios landing page coding challenge
    • HTML
    • CSS
    • JS

    Loopstudios Landing Page With React

    P
    ApplePieGiraffe21,140Submitted

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

    View Solution
  • Desktop design screenshot for the Officelite coming soon site coding challenge
    • HTML
    • CSS
    • JS

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

    P
    ApplePieGiraffe21,140Submitted

    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.

    View Solution
  • Desktop design screenshot for the Pod request access landing page coding challenge
    • HTML
    • CSS
    • JS

    Landing Page With Intro Animation | Svelte, GSAP

    P
    ApplePieGiraffe21,140Submitted

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

    View Solution
  • Desktop design screenshot for the Todo app coding challenge
    • HTML
    • CSS
    • JS

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

    P
    ApplePieGiraffe21,140Submitted

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

    View Solution
  • Desktop design screenshot for the Bookmark landing page coding challenge
    • HTML
    • CSS
    • JS

    Landing Page With CSS Animations, Vanilla JS Effects

    P
    ApplePieGiraffe21,140Submitted

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

    View Solution

Latest Comments

  • ApplePieGiraffe has commented on tediko's "Countdown timer - Mobile first, Flexbox, Sass, JS, backface-visibility" solution

    1

    Hey there, tediko! πŸ‘‹

    You've done another fantastic job on a challenge! πŸ‘ You nailed the card-flipping animation for this one (and I'll have to bookmark this and check out it when I come around to this challenge)! 🀩 I like the spinning animation you added to the social media icons, too! πŸ˜€

    It looks like you've put a lot of thought into other details like accessibility and stuff for this challenge (which is great), so all I can say is, really... keep coding (and happy coding, too)! πŸ˜‚

  • ApplePieGiraffe has commented on Bonrey's "CSS Chat App. Built with: Tailwind | SASS | CSS @keyframes." solution

    1

    Hello there, Bonrey! πŸ‘‹

    Just came to say great job on this challenge! πŸ‘ Your solution looks really good and the animations that you added are very fun! πŸ˜€

    And thank you for trying out all of those CSS frameworks and coming to a conclusion for me! πŸ˜‚ Seeing your small CSS framework journey and hearing your thoughts has been interesting. I think I'll follow your lead and keep at it with good ol' CSS for now! πŸ‘

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe has commented on Clint Maxwell's "Responsive page using CSS Grid and Flexbox" solution

    0

    Hey, Clint Maxwell! πŸ‘‹

    Well done on this challenge! πŸ‘

    A few things I suggest are,

    • Looking into using viewport units to position the background images in this challenge (since that'll give you a chance to position them so that they do not move around so much when the size of the screen changes).
    • Perhaps adding the alt attribute to the background pattern image if you want to put that in your HTML (but leaving the alt text empty, since it's a decorative image). That'll clear up and error or two on your solution report! πŸ™‚

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe has commented on Said Alejandro Rosas Vera's "Social Proof Section using SASS" solution

    2

    Hello, Said Alejandro Rosas Vera! πŸ‘‹

    Nice work on this challenge! πŸ™Œ It's good to hear that you're proud of what you've done! πŸ˜€

    I suggest,

    • Using CSS background images to add and position the background images in this challenge. You can add the background images to the <body> and simply set background-position to something like top right, bottom left.
    • Adding a max-width to the container holding the star icons (so that the stars don't get too spaced out and look distant from each other at certain screen widths).
    • Leaving the alt text for the star icons empty so that screen readers don't read every single one of them out loud (which is unnecessary and perhaps a little annoying). πŸ˜…

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe has commented on jorsuap's "3-column-preview-card-component-main" solution

    0

    Hello, jorsuap! πŸ‘‹

    Congratulations on completing your second Frontend Mentor challenge! πŸŽ‰ Good work on this one! πŸ‘ The card component looks pretty good and is responsive! πŸ™Œ

    This is a small thing, but you might want to consider using anchor tags (instead of elements) for the "Learn More" elements in this challenge (since they seem like they might take the user somewhere when clicked). πŸ˜‰

    Keep coding (and happy coding, too)! 😁