ApplePieGiraffe

Pro
@ApplePieGiraffeApplePieGiraffe
Kampala, UG
26,580Points

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, Redux, Svelte, and Python, mostly. πŸ™‚ And some things I really need to dive deeper intoβ€”like JS and Git. πŸ˜…

Latest Solutions

  • Desktop design screenshot for the Meet landing page coding challenge

    Meet Landing Page | Svelte + GSAP | Surprise!

    • HTML
    • CSS
    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

    • HTML
    • CSS
    • JS
    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
    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
    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
    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
    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

    Planets site with Next.js and styled components

    9
    P
    ApplePieGiraffe26,580 | Posted 2 days agocommented on Emmilie Estabillo's "Planets fact site" solution

    Hello, Emmilie Estabillo! πŸ‘‹

    I'm sorry I'm late to this challengeβ€”I only noticed it just now! πŸ˜… That being said, I'm glad I didn't miss because I was looking forward to seeing another solution from you (and my prediction was rightβ€”it's pretty awesome)! πŸ˜€ The design of your solution looks great and is on point (you're rightβ€”it does look fine without a max-width on extra-large screens πŸ˜†) and your code looks really nice, as well! πŸ‘

    Kudos for trying out Next.js! It's an awesome framework that makes using React to build sites sooo much nicer! About mapping more than one route to the same page in Next.jsβ€”I don't remember having done that with only Next.js (yet) but this page from StackOverflow might present a possible solution. πŸ™‚

    I agree that working with Next.js's Image component can be a little tricky! I've gotten pretty annoyed before at the weird way the image is wrapped in two divs with their own styles (and they have inline styles, too, I think, which makes changing them super-difficult). For now, I usually just wrap the Image component in a wrapper of my own (yeah, a third wrapper πŸ€ͺ) and then focus on sizing and positioning that. πŸ€·β€β™‚οΈ

    I really like the animation to the stars that you added with Framer Motion! I wish I could help you with your question, but it's been a while since I last used Framer Motion and I've almost forgotten the basic syntax! πŸ™ƒ One thing I noticed, however, is that the you're animating the background position property, which generally isn't very performant and is causing a tiny bit of lag on my computer, I believe (but I don't have a great laptop at the moment, anyway, so lots of things make it lag πŸ˜…). It might require a bit of extra work, but finding a way to animate the transform property instead to create the animated stars would probably be a good idea, since the transform property is optimized for animations by browsers and animating background-related properties is usually a bit expensive. πŸ™‚

    If I understand your question about styled-components correctly, I think you can do something like this in your styled-components (correct me if I misunderstood):

    const Wrapper = styled.div`
      // styles...
      background: ${(props) => props.name || props.planet && 'var(--color-mercury-main)'};
    `

    Anyways, really great job on this project, once again! πŸ‘ I hope that helps a little! πŸ™‚

    And of courseβ€”keep coding (and happy coding, too)! 😁

    1
    • HTML
    • CSS

    The site was made using mobile first with HTML and CSS tools

    2
    P
    ApplePieGiraffe26,580 | Posted 8 days agocommented on JosuΓ© RamΓ­rez's "Profile card component" solution

    Hi, JosuΓ© RamΓ­rez! πŸ‘‹

    Nice effort on this challenge! πŸ‘

    I'd like to suggest,

    • Using CSS background images to add and position some of the background images in this challenge. Doing so means you won’t have to add those images directly to your HTML (which will keep your markup a little cleaner) and I think it’s easier to manage background images with CSS because you won’t have to worry about things like overflow issues. If you’d like to learn more about CSS background images and how to use them, check out this tutorial from MDN.
    • You can also try playing around with percentages and viewport units to position the background images in this challenge, since that should help to position the background shapes in such a way that they do not move around so much when the page is resized. That's what I did for my solution to this challenge, and it seemed to work out fairly well.
    • Adding a favicon to your site would be a nice touch. πŸ˜‰

    Hope that helps a bit. πŸ™‚

    Keep coding (and happy coding, too)! 😁

    0
    • HTML
    • CSS

    The Profile Card Component challenge completed using just HTML & CSS

    1
    P
    ApplePieGiraffe26,580 | Posted 8 days agocommented on Mgbojikwe Chukwuebuka's "Profile card component" solution

    Hi, Mgbojikwe Chukwuebuka! πŸ‘‹

    Just wanted to sayβ€”great job on this challenge! πŸ‘ The card component looks pretty good and you did a rather nice job of positioning the background images (which can be a little tricky in this challenge)! πŸ‘

    Keep coding (and happy coding, too)! 😁

    0
    • HTML
    • CSS

    Tried out CSS variables for font and colours

    8
    P
    ApplePieGiraffe26,580 | Posted 8 days agocommented on LouiseCW's "3-column preview card component" solution

    Hi there, LouiseCW! πŸ‘‹

    Well done on this challenge! πŸ‘ Your solution looks good and is responsive! πŸ˜€

    One tiny thing I'd like to suggest is that you perhaps use the a heading tag of the same level for all three headings in the card component (since one doesn't seem to be of any more importance than another in this design). πŸ˜‰

    As for styling the buttons, you can simply make set their background-color to transparent when they are hovered over so that the background of each section shows through them and you don't have to mess around with adding individual background-colors to each button upon hover:

    button:hover {
      background-color: transparent;
    }

    Hope that is helpful. πŸ™‚

    Keep coding (and happy coding, too)! 😁

    0
    • HTML
    • CSS

    Responsive static Website develop with only HTML and CSS

    2
    P
    ApplePieGiraffe26,580 | Posted 8 days agocommented on Swan-Yee-Tun's "3-column preview card component" solution

    Hi, Swan-Yee-Tun! πŸ‘‹

    Good effort on this challenge! πŸ‘

    I'd like to suggest switching to a mobile-friendly layout sooner to prevent a horizontal scroll bar from appearing along the bottom of the page when the width of the screen decreases in the desktop layout. Currently, the card component looks pretty good in the desktop layout, but the content inside ends up looking a bit squished as the width of the screen decreases. It's important to make your solution look good on all screen sizes so that as many people as possible can view and enjoy your work. πŸ˜‰

    Hope that small tip helps. πŸ™‚

    Keep coding (and happy coding, too)! 😁

    0