ApplePieGiraffe

Pro
@ApplePieGiraffe
Orlando, FL
15,945Points

I'm a newbie to front-end development at the moment, but learning everything about it seems so exciting and engaging I'm sure I won't be for much longer!

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 Loopstudios landing page coding challenge
    • HTML
    • CSS
    • JS

    Loopstudios Landing Page With React

    P
    ApplePieGiraffe15,945Submitted

    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
    ApplePieGiraffe15,945Submitted

    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
    ApplePieGiraffe15,945Submitted

    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
    ApplePieGiraffe15,945Submitted

    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
    ApplePieGiraffe15,945Submitted

    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
  • Desktop design screenshot for the Profile card component coding challenge
    • HTML
    • CSS

    Card Component With 3D Animation

    P
    ApplePieGiraffe15,945Submitted

    Hello, everybody! πŸ‘‹

    This was a fun, simple challenge which I enjoyed! I added a cool little (and surprisingly simple) 3d hover effect to the card component (thanks to Dev Ed, once again). πŸ˜†

    And for those tricky background SVGs? I ended up using a combination viewport width and height units and percentages to have the SVGs subtly change their position when the screen is resized. IDK if they match the design exactly but they look okay! πŸ˜‚

    Feedback is welcome and appreciated, of course! 😊

    Happy coding! 😁

    View Solution

Latest Comments

  • ApplePieGiraffe has commented on MasterKrab's "Crowdfunding product page | Pug, Scss & Vanilla JS" solution

    2

    Hey, MasterKrab! πŸ‘‹

    Nice work on yet another challenge! πŸ‘ Your solution looks good and works pretty well! πŸ‘

    One small quirk I noticed is that it's actually possible for two options in the "Back this project" modal to be selected at a time (rather than just one) if the user opens the modal, selects an option, closes the modal, and chooses another option directly from the home page. You might want to look into that to make sure only one option can be selected at a time. πŸ˜‰

    Also, I suggest adding cursor: pointer to the "Continue" buttons in the modal. πŸ™‚

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe has commented on adluders's "Built with HTML, CSS and JS" solution

    1

    Hey, adluders! πŸ‘‹

    Nice effort on this challenge! πŸ‘

    A few things I'd like to suggest are,

    • Adding object-fit: cover to the image to ensure that is cropped and doesn't distort when the size of the card component changes.
    • Making sure the mobile social media popup doesn't appear in the desktop layout when the screen size changes from mobile to desktop (I think it would actually be better if you simply had a single social media popup and simply applied different styles to it on the desktop and mobile layouts).
    • I think a little more padding around the profile information in the mobile layout of the card component would be a good idea. πŸ™‚

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe has commented on Chris Conner's "React with Styled Components" solution

    1

    Hey there, Chris Conner! πŸ‘‹

    Nice job on this multi-page challenge! πŸ‘ Things in the desktop layout look pretty good! πŸ‘

    I'd like to suggest,

    • Adding a max-width to the header of the page to prevent it from growing wider than the rest of the design on extra-large screens.
    • Turning the navigation links and the social media icons in the footer of the page into links using the anchor tag.

    And of course, as you mentioned, the next steps you could take towards improving your solution would be to make it responsive for tablet/mobile screens! πŸ˜‰

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe has commented on Elise Rousseau's "use of display flex for the layout of elements" solution

    2

    Greetings, Elise Rousseau! πŸ‘‹

    It's nice to see you complete another challenge so soon! πŸ˜€ Well done on this one! πŸ‘

    A few things I suggest are,

    • Getting rid of the extra white space beneath the footer at the bottom of the page (there seems to be some overflow happening down there). In the mobile layout, the background of the footer doesn't seem to extend all the way to the bottom of the page, meaning some of the elements in the footer aren't visible.
    • Turning the social media icons in the footer of the page into links by wrapping each of them in an anchor tag.
    • Adding some left/right padding to the email input element in the footer of the page.
    • Adding a hover state to the buttons on the page would be a nice touch! πŸ˜‰

    Hope those pointers help. πŸ™‚

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe has commented on Dave's "Updated Toggle Switch" solution

    2

    Hi, Dave! πŸ‘‹

    Redoing a challenge can be pretty interesting, don't you think? (I sometimes get surprised at how I have little to no idea what I was thinking when I look at code that I wrote a few months ago.) πŸ˜† Anyway, good job! πŸ‘

    I think the dark circle that you added around the toggle-switch for the focused state is good, but if you're working on making the toggle-switch more accessible, perhaps a slightly more obvious focused state (such as a larger outline around the entire toggle-switch) would make the focused toggle-switch easier to see. But IDKβ€”that's just my thought. πŸ˜…

    I'm not super familiar with screenreaders (and even WAI-ARIA and stuff), so I'll just let @grace-snow or someone comment on that if they happen to take a look. πŸ˜„

    Anyhow, as usualβ€”keep coding (and happy coding, too)! 😁