Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
31
Comments
2205

ApplePieGiraffe

@ApplePieGiraffeFlorida30,525 points

I'm a front-end developer here at Frontend Mentor. Besides coding and giving back to the wonderful Frontend Mentor community, I enjoy playing Minecraft, eating pizza, and getting a good night's sleep!

I’m currently learning...

Everything I can!

Latest solutions

  • Meet Landing Page | Svelte + GSAP | Surprise!

    #svelte#gsap

    ApplePieGiraffe•30,525
    Submitted over 4 years ago

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

    #motion#react#styled-components#next

    ApplePieGiraffe•30,525
    Submitted over 4 years ago

    16 comments
  • Loopstudios Landing Page With React

    #react#sass/scss

    ApplePieGiraffe•30,525
    Submitted over 4 years ago

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


    ApplePieGiraffe•30,525
    Submitted over 4 years ago

    6 comments
  • Landing Page With Intro Animation | Svelte, GSAP


    ApplePieGiraffe•30,525
    Submitted over 4 years ago

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

    #svelte

    ApplePieGiraffe•30,525
    Submitted over 4 years ago

    11 comments
View more solutions

Latest comments

  • P
    Wen•160
    @itsadnwn
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of completing this project despite facing significant technical challenges. Working with unfamiliar CSS classes required extensive research and documentation review, which deepened my understanding of web development fundamentals. The learning process was invaluable - I gained hands-on experience with positioning, responsive design, and SVG manipulation.

    Next time, I'd approach the project more systemically by spending time upfront researching the required technologies and creating a clear implementation plan. I'd also allocate more time for testing across different screen sizes earlier in the development process.

    What challenges did you encounter, and how did you overcome them?

    I encountered several layout and positioning challenges throughout the project. The main issues included SVG elements not positioning correctly, overlapping headers, circular elements losing their shape on tablet views, and alignment problems between the founder's container and image.

    I systematically addressed each issue through targeted solutions: using background-image and background-position for better image control, implementing z-index for proper layering, utilizing position: relative and position: absolute for precise element placement, and applying aspect-ratio to maintain consistent shapes across devices.

    What specific areas of your project would you like help with?

    I'd particularly appreciate guidance on improving responsive design implementation. The transitions between desktop, tablet, and mobile views aren't as smooth as intended, and I struggled to achieve the desired layout consistency across all breakpoints.

    If experienced developers could review my code and provide feedback on best practices for responsive design - particularly around breakpoint management, flexible layouts, and cross-device testing strategies - it would be incredibly helpful for my future projects. Thank you!

    Workit Landing Page Solution with HTML and CSS

    1
    ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted about 1 month ago

    Hey @itsadnwn! 👋

    Nice job on this challenge! 👏

    Just a few small tips for you to improve your solution,

    • Use the a tag instead of the button tag for the "Apply for access" and "Learn more" elements on the page. They may look like buttons, but in a real-world scenario clicking on them will likely take the user to another page, so they are better off as links
    • Use the ul and li tags for the list of features just below the hero section since they are in fact a list. I would do the same for the social media links at the bottom of the page to group them together
    • At around 830px, the phone illustration in the hero section overlaps the text in the section below it. You might want to make the hero section larger to accommodate the change in position of the illustration

    Making layouts responsive takes time and practice! I would recommend checking out a channel like Kevin Powell's if you'd like to learn more about responsive design. He has several great videos on the topic and some code-alongs which might be helpful to watch

    Best of luck and happy coding!! 😄

  • Emmilie Estabillo•5,600
    @emestabillo
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Hey everyone! 👋 It's been a minute! 😊

    I built this project incrementally during the holidays, and took the opportunity to practice Typescript and explore GSAP integration with the app router. To further challenge myself, I used Contentful for managing the project listings and implemented Google Maps on the contact page. It took a little longer than expected to finish, but the process proved to be more valuable than the end result.

    What challenges did you encounter, and how did you overcome them?

    Most of the challenges I encountered were from Typescript. This was the first time I used GSAP with the app router, and I tried to keep the animations on the component files as much as possible, so much so that I was thinking I was creating non-essential files just to support the animation feature. Feedback would be appreciated on that regard, and on any other improvements including accessibility.

    I had to host the fonts since Spartan is not available on Google anymore, and made minor adjustments to the logo to match the design. I also increased the base font to the standard 16px.

    Thanks and looking forward to hearing your thoughts!

    EDIT: From the screenshot, it looks like I followed an outdated design. Will push improvements.

    Arch Studio multi-page site with Next.js, GSAP, and Contentful CMS

    #contentful#gsap#next#typescript
    4
    ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted 7 months ago

    Emmmm!!

    So nice to see you submit another solution! 🎉 I love the sleek but subtle animations in this one!

    Hope you've been doing well and happy coding!

    Marked as helpful
  • Tesla_Ambassador•3,070
    @tesla-ambassador
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I'm mostly proud of the fact that I got to learn how to use the react-hook-form and also completing this project while using TypeScript for the first time with Next.js.

    What challenges did you encounter, and how did you overcome them?

    I explained all these details in my README.md file

    What specific areas of your project would you like help with?

    Mainly accessibility and better coding practices when using Next.js/React.

    Mortgage Calculator using react-hook-form and TypeScript.

    #next#tailwind-css#typescript#accessibility
    2
    ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted 12 months ago

    Broooooo

    I've just seen this!!

    Nice work dude! 😎 Your solution looks great and I loved reading your README 😂 You put a lot of thought into this and that's how you learn the most!

    Keep on grinding my guy and happy coding!! 😁

    EDIT: I'm touching grass these days... whenever I can 😜

  • tediko•6,700
    @tediko
    Submitted about 1 year ago
    What challenges did you encounter, and how did you overcome them?

    Hello! 👋

    MovieDB is a full-stack application written in vanilla JavaScript that serves as an interactive hub for movie and TV series enthusiasts. To provide seamless user authentication and data management I used Supabase backend-as-a-service (BaaS) solution. This integration ensures secure user registration and login process, efficient session management which enables users to build their own collection by bookmarking favorite movies and TV series as well as completing profile with data and custom avatar with all user-specific data securely stored in the database and storage. App fetches data from The Movie Database (TMDb) API to deliver up-to-date and extensive information on films and TV shows. Both API and database operations are handled on Netlify serverless functions backend to reduce the load on the frontend, leading to faster response times and a more responsive user experience. This allows for better management of sensitive data, as environment variables can be securely stored and accessed only on the server side, removing the risk of exposure in client-side code. MovieDB App allows users to explore, search, bookmark, create their own user profile and engage with a vast collection of media content as well as display information about a specific movie/TV series on sub-page.

    With the integration of user authentication I've decided to elevate app functionality and user experience by designing an landing page that serves as the introduction to MovieDB App. This landing page streamlines the user authentication process by providing registration form and login cta button redirecting respectively to register and login sub-page. Moreover showcases selection of popular movie trailers in slider that users can watch in popping lightbox modal that has trapped focus for users that require accessibility features. Additionally, there is a placeholder section with mockup image that contain video within.

    After logging in, the user is redirected to the app which is based on the single page application (SPA) architecture with custom router. For handling bookmark state across SPA I created central state management system - bookmarkManager. This allows components to subscribe to bookmark updates and receive notifications when bookmarks change without the need of fetching it from database. If logged in user navigate to route that doesn't exists router will redirect to 404 page. To improve user experience while fetching data I implemented shimmer effect which is simply visual feedback during data fetching. User can login on test account to explore app without the need to register, but test account is limited when it comes to updating profile with custom informations/avatar.

    🚀App features

    • User Authentication: Users can create an account by providing email and password and then log in to the app using their credentials, providing a secure and personalized experience.
    • Search: Functionality that allows to search for movies or TV series by title.
    • Trending: Dedicated section where users can view a list of currently trending movies or TV series.
    • Latest Trailers: Showcase of popular movie and TV series trailers in a slider. Users can watch them in a lightbox modal.
    • Recommended for You: Personalized feature that suggests movies and TV series based on the titles user have bookmarked.
    • Top rated: A list of the top 100 movies and TV series, ranked based on their overall user ratings.
    • Bookmarks: Personalized space where users can store and manage their bookmarked movies and TV series.
    • Details page: Each movie has a dedicated sub-page that provides users with a detailed informations, list of the actors involved, photos and similar titles recommendations.
    • Random title: Randomly selected movie/tv series displayed within details page.
    • Profile: Customizable account settings. Users can upload a custom avatar or update account information including name, email, and password.
    • 404 page: "Page Not Found" with a little easter egg. Instead of a standard error message, users are greeted with a funny message and a playful image. User need to be logged in.

    💡Here's some new things I used or learned:

    • Sass placeholder selector is special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it’s not included in the CSS output.
    • The try..catch statement is a powerful tool for error handling in JavaScript. By implementing it effectively, you can create more resilient applications that provide a better experience for users.
    • JSDoc comments enhances code readability and maintainability by providing clear documentation directly within the source code.
    • Focus trap is a JavaScript utility designed to manage keyboard focus within a specified element, enhancing web accessibility by preventing focus from escaping outside of interactive components, such as modal dialogs.
    • URLSearchParams is a built-in JavaScript object that provides a convenient way to work with the query string of a URL.
    • Promise.all() allows multiple fetch operations to be executed concurrently, rather than sequentially. This can significantly improve performance, especially when dealing with independent API calls
    • How to build router in vanilla JS - Routers control the application's views based on the URL, without the need for full-page refreshes. While several libraries such as React Router for React offer robust solutions for managing routes in SPAs, you can build your own rudimentary router in Vanilla JavaScript to understand the underlying mechanics.
    • createObjectURL() static method of the URL interface creates a string containing a URL representing the object given in the parameter (Blob in my case).
    • Replacing switch statements with Object literals

    🛠️Build with: (can be found also in my others projects)

    • Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
    • Sass CSS pre-processor is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
    • BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
    • Supabase is an open-source backend-as-a-service platform designed as an alternative to Firebase.
    • Serverless Netlify functions open a world of possibilities for running on-demand, server-side code without having to run a dedicated server.
    • Swiper is a JavaScript library that creates modern touch sliders with hardware-accelerated transitions.

    ❓Questions:

    • Any suggestions on how I can improve are welcome! If you want to learn more about my process - README.

    MovieDB fullstack app - Supabase, Vite, Sass, BEM, Swiper, Serverless

    #accessibility#bem#supabase#vite#sass/scss
    7
    ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted about 1 year ago

    Yoooo @tediko!!

    It's been a while lol but I just noticed this 😆 How have you been?

    Just wanted to drop in to say I love your solution! Everything looks good and works really well! And the 404 page is great hahaha

    I'm glad to hear you learned a lot during this project and it's awesome to see how far you've come! 👏

    As ever keep coding and happy coding too! 😄

  • brenda127s•20
    @brenda127s
    Submitted over 1 year ago

    FAQ accordion using CSS Flexbox and Javascript

    1
    ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted over 1 year ago

    Hey there, brenda127s! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Great job on this project! 👏

    I'd like to suggest using the <details> and <summary> elements for the accordions in this component. Currently, you are using <div>s for those elements, which aren't accessible because they aren't keyboard-focusable or recognized as interactive elements by browsers and screen readers. There are also some issues like some of the answer content getting cut off towards the bottom of the accordions on smaller screens. Using the <details> and <summary> elements will help solve these issues. If you're interested, you can learn more about them here from MDN.

    As for dealing with the icons, if you go with using the <details> and <summary> elements you can check for the open attribute on the <details> element and show/hide the icons based on the state of that attribute.

    Also, don't forget to add some alt text to the <img> elements on your page (but leave the alt text empty if those images are just for decoration and don't need to be noticed by screen readers) and to give the <img> elements unique IDs. 😉

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
  • Schismond•160
    @Schismond
    Submitted almost 2 years ago

    newsletter-sign-up

    1
    ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted almost 2 years ago

    Hey there, Schismond! 👋

    Nice effort on this challenge! 👏

    A few suggestions I have are,

    • Taking another look at the responsiveness of your site. At the moment, things start to look a little broken/get cut off around ~1000px as the screen width decreases. Remember that even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If you’d like to learn more about how building responsive layouts, check out this helpful course
    • Avoiding using px for setting the values of things like font-size and spacings in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text (and ideally, overall layout) of your site by changing the default font-size of their browser. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video

    Don't worry too much about making "pixel-perfect" solutions—it's more important to focus on things like accessibility and responsiveness so that people can use and enjoy the websites you make 😉 As long as your solution looks more or less like the design in the end and it is functional and accessible, that's great 👍

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Mentor of the Week - 3rd Place

This badge is awarded to the 3rd placed community member on the weekly Wall of Fame.

Fun fact

The Hansen Writing Ball shown in the badge was the first commercially produced typewriter. It was put into production in 1870 with its unique ergonomic design. It was overtaken in the market in 1873 by the Sholes and Glidden typewriter which was the first keyboard to utilise the QWERTY layout we now use today.

Mentor of the Month - 3rd Place

This badge is awarded to the 3rd placed community member on the monthly Wall of Fame.

Fun fact

An abacus is an ancient calculating tool. These days we would typically use a calculator or computer but the abacus is where it all started!

Mentor of the Week - 1st Place

This badge is awarded to the top placed community member on the weekly Wall of Fame.

Mentor of the Month - 1st Place

This badge is awarded to the top placed community member on the monthly Wall of Fame.

Mentor of the Year - 1st Place

This badge is awarded to the top placed community member on the yearly Wall of Fame.

Mentor of the Month - 2nd Place

This badge is awarded to the 2nd placed community member on the monthly Wall of Fame.

Fun fact

The computer in this badge is loosely based on the Commodore PET which was one of the earliest home computers launched in 1977. It came with 4 KB of RAM...that's not a typo!

Mentor of the Year - 2nd Place

This badge is awarded to the 2nd placed community member on the yearly Wall of Fame.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub