ApplePieGiraffe

Pro
@ApplePieGiraffe
Orlando, FL
16,515Points

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!

All Solutions

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

    Loopstudios Landing Page With React

    P
    ApplePieGiraffe16,515Submitted

    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
    ApplePieGiraffe16,515Submitted

    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
    ApplePieGiraffe16,515Submitted

    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
    ApplePieGiraffe16,515Submitted

    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
    ApplePieGiraffe16,515Submitted

    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
    ApplePieGiraffe16,515Submitted

    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
  • Desktop design screenshot for the Room homepage coding challenge
    • HTML
    • CSS
    • JS

    Room Homepage with CSS Transitions and JS (GSAP) Animations

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    I've given a lot of feedback on this particular challenge, and now it's my turn to give it a go! I hope I did okay! πŸ˜…

    I ended up coding a lot more Sass and JS than I initially expected, but I learned a lot. I decided to put the slider images in my HTML so that I could use the <picture> element for responsive images but stored the text in my JS (feedback on my JS would be appreciated).

    I added some cool transitions to the mobile menu and navigation and created an intro animation (using GSAP) after stumbling upon this YouTube video and remembering Connor Z did the exact same thing (and blew me away when I saw it) when he completed this challenge! πŸ˜†

    More importantly, I tried to ensure that the design scales up and down nicely (which gave me quite a headache because of this behavior of flexbox), but I think I managed to do it okay in the end.

    Of course, feedback is welcome and appreciated! 😊

    Happy coding, everyone! 😁

    View Solution
  • Desktop design screenshot for the Social media dashboard with theme switcher coding challenge
    • HTML
    • CSS
    • JS

    Social Media Dashboard With CSS Grid And Light/Dark Theme Transition

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was an awesome challenge that was a little trickier than I initially thought! πŸ˜…

    This was my first time creating a site with light/dark themes but I'm pretty happy with the result. I added this cool transition that ripples over the cards when the theme is changed! πŸ˜†

    As usual, feedback is welcome and appreciated! 😊

    And as always, happy coding! 😁

    View Solution
  • Desktop design screenshot for the Pricing component with toggle coding challenge
    • HTML
    • CSS
    • JS

    Pricing Component With Toggle And CSS Animations

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was another fun challenge that I quite enjoyed! 😊

    I focused on trying to make my class names understandable and organized and I tried to increase the accessibility of the toggle by sandwiching it between two labels and adding the aria-pressed attribute to it (but IDK if that really helps or just makes things slightly more confusing)! πŸ™ƒ

    I also added a cool little sliding animation to the left and right pricing cards in the desktop layout. 😎

    Feedback is welcome and appreciated!

    Happy coding! 😁

    View Solution
  • Desktop design screenshot for the Project tracking intro component coding challenge
    • HTML
    • CSS
    • JS

    Intro Component With Mobile Navigation And CSS Animations

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was a short, easy challenge that was a lot of fun to code! (Thinking about how to place the image was interesting.) πŸ˜‰

    I added a few CSS animations from Animate.css (as usual) to make the simple mobile navigation and the loading of the page a little cooler! πŸ˜„

    Feedback is welcome and appreciated! 😊

    Happy coding! 😁

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

    Insure Landing Page With Responsive Mobile Navigation

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was a fun challenge from which I learned a lot!

    This was my first time coding a responsive mobile navigation (which turned out to be a little easier than I thought) and I'm quite pleased with the result (that is, if it works for you as well as it did for me πŸ˜†)!

    I also got to practice using CSS grid a little more and think carefully about how I wanted the page to be responsive. 🧐

    Of course, feedback is welcome and appreciated! 😊

    Happy coding! 😁

    View Solution
  • Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge
    • HTML
    • CSS
    • JS

    Simple Testimonials Slider With JS

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was my first challenge in which I actually had to write more than a few lines of JS. πŸ˜† My solution works (as far as I know) but IDK about my JS... I'd love some feedback, of course, to see how I've done. 😊

    I also added a subtle floating animation to the image just to keep things interesting!

    Happy coding! πŸ˜„

    EDIT: An issue I'm aware of is that there's this weird glitch where the background of the buttons on the page flickers or turns transparent when clicked on in Safari (because of a transform I added to their active state, I think). I added one or two properties that seem to take the flickering away, but I'm still unsure of how I can completely solve this glitch (other than, perhaps, getting rid of the transform completely).

    View Solution
  • Desktop design screenshot for the Testimonials grid section coding challenge
    • HTML
    • CSS

    Responsive Testimonial Section Using CSS Grid

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was a nice, simple challenge that I enjoyed and in which I was reminded of the joys of using CSS grid! πŸ˜‚

    I added some subtle hover effects to the testimonial cards to keep things a little interesting. πŸ˜‰

    BTW, if anyone's interested, here's a little cheat sheet for CSS grid that I find is a nice, quick reference.

    As always, feedback is welcome and appreciated! 😊

    Happy coding! 😁

    View Solution
  • Desktop design screenshot for the FAQ accordion card coding challenge
    • HTML
    • CSS
    • JS

    Pure CSS FAQ Accordion Card With Sweet CSS Animations

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

    I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

    I'm quite happy with the result! 😊

    Any feedback on both the design and code is welcome and appreciated! πŸ˜ƒ

    Happy coding! 😁

    EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

    View Solution
  • Desktop design screenshot for the Ping single column coming soon page coding challenge
    • HTML
    • CSS
    • JS

    Coming Soon Page with CSS Animations and CSS-Only Validation

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody!

    This was a nice, simple project that I enjoyed! πŸ˜ƒ

    I once again chose to use CSS-only form validation (and included some validation icons from the last challenge I completed) and added some CSS animations.

    Any feedback on both the design and code is welcome and appreciated! 😊

    Happy coding! 😁

    Oh, and, @zuolizhu, the VS Code extension Live Sass was so much nicer and simpler to work with (compared to NPM and node-sass)! πŸ˜‰

    View Solution
  • Desktop design screenshot for the Intro component with sign-up form coding challenge
    • HTML
    • CSS
    • JS

    Sign-up Page With CSS Animations And CSS-Only Form Validation

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was a fun challenge which I actually quite enjoyed! πŸ˜€

    I was able to match the desktop and mobile designs rather closely and only had to use one media query to make the page responsive (and managed to keep my code from turning into a mess), so I was quite happy with that! πŸ˜„

    I decided to go with CSS-only form validation again, and this time, I let the browser handle the actual error messages and just focused on the validation icons (I added an extra green checkmark to make things look nice).

    And, of course, I added some CSS animations from Animate.css to finish things off! πŸ˜‰

    Once again, feedback on both my design and code is welcome and appreciated! 😊

    Happy coding! 😁

    View Solution
  • Desktop design screenshot for the Base Apparel coming soon page coding challenge
    • HTML
    • CSS
    • JS

    Coming Soon Page With Responsive Images And CSS Grid β€” No JS

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    I have to admit, this was a much trickier challenge than I thought! πŸ€”

    I originally tried to layout this site using flexbox, but eventually switched to CSS grid (which I found to be easier).

    I also decided not to try out any JS for the form validation but use CSS pseudo-classes and combinators to make the error elements appear when the email input is invalid.

    I really wasn't sure about how to make this challenge responsive. πŸ˜₯ Other than follow the designs for the desktop and mobile layouts of the site (which look nice when the screen is exactly 1440x800 or 375x800) I think there's a lot of blank space on other screen sizes and I wasn't sure if I should allow the images to scale a whole lot (because then they might not look so clear).

    Any help or feedback on this would be greatly appreciated! 😌

    Happy coding, everyone! 😁

    View Solution
  • Desktop design screenshot for the Article preview component coding challenge
    • HTML
    • CSS
    • JS

    Tiny Component With Vanilla JS

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody!

    This is my first challenge with JS, and it was fun! πŸ˜ƒ

    The JS was easy, but the CSS took me a little longer to code than I initially thought. πŸ˜…

    Feedback on both the design and code is welcomed and appreciated! 😊

    And as always, happy coding! πŸŽ‰

    View Solution
  • Desktop design screenshot for the Chat app CSS illustration coding challenge
    • HTML
    • CSS

    Chat App CSS Illustration With Messaging Animation

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! πŸ‘‹

    This was a very fun challenge from which I learned to carefully think about how I markup things in HTML and position them in CSS. πŸ€”

    I borrowed some animations from Animate.css and played around with the animation-duration property to create a messaging animation in the phone (which I really think adds some life to the page). πŸŽ‰

    I'm also rather pleased that my code didn't end up too messy or disorganized after attempting a CSS illustration like this. πŸ˜‰

    As always, feedback is on both my solution and my code is both welcome and greatly appreciated! πŸ‘

    Happy coding! πŸ˜„

    View Solution
  • Desktop design screenshot for the Huddle landing page with curved sections coding challenge
    • HTML
    • CSS

    Responsive Huddle Landing Page With Animated Wave SVGs

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody!

    This was a fun project in which I learned a little more about scaling and animating SVGs.

    I spiced up the page a little by animating the wavy SVG backgrounds to slowly move back and forth across the page!

    (Since this was the first time I tried out something like this, my code was slightly messier than I would have liked, but I hope to improve with time. πŸ˜‰)

    Also, I seem to have a bunch of issues with my HTML in my solution report because I used inline SVGs that apparently have lots of duplicate IDs. Is there a better way to use inline SVGs to avoid this problem?

    Any feedback is welcome and much appreciated!

    Happy coding! πŸŽ‰

    View Solution
  • Desktop design screenshot for the Fylo dark theme landing page coding challenge
    • HTML
    • CSS

    Landing Page With Responsive Margins/Padding And Gradient Animations

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody!

    This was an exciting challenge from which I learned a lot! πŸ˜ƒ

    I tried adding to the responsiveness of this site by setting many of the margins/paddings in percentages or vw units and only using min-width in my media queries (for my first time).

    I also learned how to color the link text with a gradient (courtesy of the clip-path property 😁) and made this subtle but awesome gradient-animation-hover-effect on the buttons using pseudo-elements! πŸŽ‰

    Feedback is definitely welcomed and appreciated!

    (Also, if you would suggest any improvements to my actual code that would be cool).

    Happy coding! πŸ‘

    View Solution
  • Desktop design screenshot for the Huddle landing page with alternating feature blocks coding challenge
    • HTML
    • CSS

    Huddle Landing Page With Fluid Typography and CSS Animations

    P
    ApplePieGiraffe16,515Submitted

    Hey, everybody! 😁

    This was a fun project in which I tried my hand at implementing fluid typography (i.e., the size of the text grows larger and smaller with the viewport width) with the CSS function clamp() and included some cool animations from, of courseβ€”Animate.css.

    It's not perfectβ€”but I'm learning a lot and it's great fun! πŸ˜†

    Feedback is welcome and much appreciated! πŸ‘

    View Solution
  • Desktop design screenshot for the Social proof section coding challenge
    • HTML
    • CSS

    Responsive Social Proof Section with Sass and Animate.css

    P
    ApplePieGiraffe16,515Submitted

    Hey!

    This was a fun challenge that I spiced up a little with some CSS animations from Animate.css.

    Feedback definitely appreciated!

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

    Responsive landing page with sweet CSS animations

    P
    ApplePieGiraffe16,515Submitted

    Hey!

    This was a beautiful project that was very fun to make! I used Sass to keep my code clean and tidy (or try to, at least) and Animate.css to add some sweet animations to the hero section.

    Feedback is welcome and appreciated!

    πŸ˜„

    View Solution
  • Desktop design screenshot for the Fylo data storage component coding challenge
    • HTML
    • CSS

    Responsive page with Sass and Animate.css

    P
    ApplePieGiraffe16,515Submitted

    Hey!

    This was a much more difficult challenge than I initially thought! That said, I was eventually able to use absolute positioning and the clip-path property to finish this project.

    I also added an eye-catching animation to the popup box using Animate.css (but it gets a little annoying after a while).

    πŸ˜„

    View Solution
  • Desktop design screenshot for the Fylo landing page with two column layout coding challenge
    • HTML
    • CSS

    Responsive landing page with clip-path and Animate.css!

    P
    ApplePieGiraffe16,515Submitted

    Hey, there!

    Completing this challenge gave me an opportunity to try the clip-path property and the ellipse() function (to make that rounded background for the second feature section). It was fun!

    Once again, I added a few cool animations with Animate.css.

    😁

    View Solution
  • Desktop design screenshot for the Four card feature section coding challenge
    • HTML
    • CSS

    Single page feature section with Sass and Animate.css

    P
    ApplePieGiraffe16,515Submitted

    Hey, there!

    This is my third Frontend Mentor challenge submission. I used to CSS Grid and Flexbox to make a responsive layout for this page. It isn't perfectβ€”but I simply trying to get the hang of it, for now (you might need to resize the page to see any effects)!

    I also used Animate.css to add some cool bouncing effects to the feature cards.

    😁

    View Solution
  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge
    • HTML
    • CSS

    Responsive landing page with CSS animations

    P
    ApplePieGiraffe16,515Submitted

    Hi!

    This is my second Frontend Mentor challenge submission.

    I decided to add some CSS animations to make loading this page a little cooler! This page is also nicely responsive, which I'm quite happy with.

    :)

    View Solution
  • Desktop design screenshot for the Single price grid component coding challenge
    • HTML
    • CSS

    Simple component with HTML and CSS

    P
    ApplePieGiraffe16,515Submitted

    Hey, there!

    This is my first Frontend Mentor challenge submission.

    I completed this challenge using HTML and CSS and added a CSS animation or two to make this small component a little cooler! :)

    View Solution