Not Found
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
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
P

ApplePieGiraffe

@ApplePieGiraffeApplePieGiraffe
Dallas, TX
27,825Points

I'm a part-time front-end developer here at Frontend Mentor. Besides completing challenges and giving back to the wonderful Frontend Mentor community, I enjoy creating and learning about new things, eating pizza, and getting a good night's sleep!

I’m currently learning...

JavaScript, React, Node, and a little bit of 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
    42
    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
    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

    #react#sass/scss
    • HTML
    • CSS
    • JS
    31
    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
    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
    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
    24
    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

  • Solution screenshot
    • HTML
    • CSS
    • JS

    Mobile responsiveSnap Landing Page using HTML, CSS, and JAVASCRIPT

    3
    P
    ApplePieGiraffe27,825 | Posted about 1 month agocommented on Oluwatosin Abigail Ogundeji's "Intro section with dropdown navigation" solution

    Greetings, Oluwatosin Abigail Ogundeji! πŸ‘‹

    Good effort on this challenge! πŸ‘

    Here are a few things I'd like to suggest,

    • Perhaps making the elements that trigger the dropdown menus with more options in the header of the site buttons instead of links (since when they are clicked on, they do not take you anywhere yet, they simply display a menu).
    • As you mentioned, making sure to always wrap li elements in a ul element (not another element like a div, which will give you a warning for having invalid markup).
    • Maybe wrapping each button in the header of the site in a container with its associated popup menu. That will group them together in your code and may make it easier to style. πŸ˜‰
    • Looking into using the aria-controls attribute on those buttons to show what areas/elements of the markup they control or affect. Learn more about that here. πŸ˜€

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    1
  • Solution screenshot
    • HTML
    • CSS

    Four Card Feature Section / React / Sass

    2
    P
    ApplePieGiraffe27,825 | Posted about 1 month agocommented on Jeisson GΓ³mez's "Four card feature section" solution

    Hello there, Jeisson GΓ³mez! πŸ‘‹

    Nice effort on this challenge! πŸ‘ I like what you did with the feature cards in the tablet layout of this challenge! πŸ‘

    A couple of things I suggest are,

    • Using an h1 tag for the main (and most important) heading of the page ("Reliable, efficient delivery, Powered by Technology").
    • Leaving the alt text for the icons in the feature cards empty (so that assistive technologies will skip over them since they aren't very important to the content of the page).
    • Horizontally centering the feature cards in the mobile view of the site.
    • Making sure none of the feature cards overlap each other in the tablet/mobile views of the site (you might want to remove the transforms on some of the feature cards for those layouts). πŸ˜‰

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    2
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Project tracking intro component using #Tailwindcss

    1
    P
    ApplePieGiraffe27,825 | Posted about 1 month agocommented on Headbwoi's "Project tracking intro component" solution

    Hello there, Headbwoi! πŸ‘‹

    Nice effort on this challenge! πŸ‘

    A few things I suggest are,

    • Wrapping the hamburger menu in the mobile view in a button element in order to make it accessible.
    • Using an h1 tag for the main heading of the site ("Powerful Insights Into Your Team")
    • Adding a hover state (such as an underline or change of color or opacity) to the navigation links in the header of the site would be a nice touch! πŸ˜‰
    • Making sure there isn't too much space between the "Schedule a demo" button and "to see a live preview" text in the mobile view of the site.

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    2
  • Solution screenshot
    • HTML
    • CSS

    QR Code Using Flexbox

    2
    P
    ApplePieGiraffe27,825 | Posted about 1 month agocommented on Lul's "QR code component" solution

    Hi, Lul! πŸ‘‹

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

    Overall, your solution looks great! One small thing I'd like to suggest is that you instead of adding margin to the sides of the heading and the paragraph inside the .text container, you simply add some padding to the inside of the .text container to add space between its children and its borders. That way, you won't have to bother with adding the same amount of left and right margin to each child in the .text container and you can just specify the amount of spacing you want inside in one place. πŸ˜‰

    Hope that helps! 😊

    Keep coding (and happy coding, too)! 😁

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Interactive rating component

    2
    P
    ApplePieGiraffe27,825 | Posted about 1 month agocommented on yudiz's "Interactive rating component" solution

    Hi, yudiz! πŸ‘‹

    Great work on this challenge! πŸ‘

    I noticed the card component is centered in the screen on all screen sizes. Rather than add height: 100vw to the main element, I suggest adding min-height: 100vh. That'll ensure that the main element is always at least as high as the viewport and the card component will be in the center of the screen at all times. πŸ˜‰

    Besides that, I think you can improve the semantics of your HTML just a bit by using a p tag for the description of the card component and button tag (rather than an a tag) for the submit button. Using button tags for the options themselves would also be a good idea!

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    1