Skip to content
OverviewSolutions
23
Comments
71
alexander
@alex931d

All comments

  • Koda👹•3,830
    @kodan96Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🦴
    • CSS 🎨
    • JS 🤖
    • modile-first workflow 📲📲
    • animated with GSAP and its ScrollTrigger plugin 📖📖
    • used jQuery for DOM manipulation 📃📃
    • smooth scrolling provided by lenis 🧈🧈
    What specific areas of your project would you like help with?

    As always, if you notice anything... 👇👇

    Animated Coffeeroasters Multipage Website ☕☕ w/ HTML, CSS & JS

    3
    alexander•1,300
    @alex931dPosted 6 months ago

    love the animations great job!

    0
  • Koda👹•3,830
    @kodan96Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🦴
    • CSS 🎨
    • JS 🤖
    • used jQuery and Showdown.js libraries 📚
    • mobile-first workflow 📱📱
    • you can save, edit and update docs 📃📃
    • used prefers-color-scheme to match the site's theme with user preference
    • used localStorage, so the editor will still have your files when you return to it after closing it
    What specific areas of your project would you like help with?

    I took a something-like-React way to dynamically render elements from localStorage into the My Documents section, I wonder if there's an easier way to do it.

    Functional In-browser Markdown Editor 📌📌 w/HTML, CSS & JS

    3
    alexander•1,300
    @alex931dPosted 6 months ago

    Nice project! Keep up the great work!

    1
  • Ameen A.•700
    @iameenahmedSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Moving on to the NextJS :)

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

    This project was really fun to do, It has a lot to tackle, from design hustles to functionality, It helps me, more specifically saying it urges me to learn about state management, and to do so I came across the Zustand, Which is powerful, lightweight, easy to learn, easy to implement and work with. Furthermore, it also helps me to learn about working with Modals.

    Cowdfunding product page using ReactJS & Zustand

    1
    alexander•1,300
    @alex931dPosted 7 months ago

    Hello great job on the design! But i have noticed a few bugs :)

    1. Click outside of modal don’t close it - normally when making a modal it makes alot of sense to be able to close a modal when clickoutside also in your example where on mobil i would have to scroll up to the X button to close and is bad user interface :)
    2. Ability to select two options - when playing around i notice how im able to select mulitple choices when clicking on one of the pledge with reward buttons
    3. Unable to select a new pledge in the pledge modal - when i choose an pledge it would be good user interface to be able to change it in the modal
    4. Pledge with no reward doesn’t work - when i navigate around and choose pledge with no reward the options don’t get selected

    Anyway hope it helps have a great day👍🏻

    0
  • Øystein Håberg•10,730
    @Islandstone89Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy that I managed to get everything just about right! I got to use many different tools, some of which I use on every project:

    • Custom Properties for colors and typography
    • Grid
    • Media Queries
    • Creating space between elements using the .flow > * + * utility class
    • Using modern CSS selectors like :is and :has
    • Selecting and manipulating DOM elements using functions and event listeners

    And some I haven't used too much yet:

    • .container utility class that sets a max-width, padding-inline and margin-inline: auto.
    • Setting up a gap Custom Property for cohesive spacing - I just invested in Frontend Mentor Pro, and the Figma file gives you everything you need!
    • Setting up font sizes using numbers, with 400 as the "base".
    What challenges did you encounter, and how did you overcome them?

    Positioning the background patterns at the top was tricky. I ended up using ::before and ::after pseudo-elements.

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

    I am happy to hear any feedback :)

    Insure Landing Page

    2
    alexander•1,300
    @alex931dPosted 7 months ago

    great project! keep up the great work and greetings from denmark!

    Marked as helpful
    1
  • Hira•130
    @hirashabeerSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    This was my first Junior project🤩. I am proud of everything I have done in this😍. I have completed this in 3days. Obviously I shall try to minimize this time with practice. Secondly I was unable to use the fonts given to me in this project assets. I would try to learn this next time.

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

    I find challenge in displaying the errormsg this distorts the .box layout .I overcome this by justify-content: flex-start; and then given padding to label and errormsg. and so much challenges I faced which I overcame by CHAT GPT and GEMINI.

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

    I tried to not make my code bulky and redundant. I will be happy to listen any techniques to improve my code and besides that I am always open for any type constructive criticism.

    Age-Calculator-App

    1
    alexander•1,300
    @alex931dPosted 7 months ago

    Hello great job on your solution to use the fonts given in FEM callenges you can google the font name on google fonts and select the correct front and click view code and use the @import url(“”) to import the font. Hope it helps!👍🏻

    0
  • Koda👹•3,830
    @kodan96Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I was messing around with GSAP and ScrollTrigger , ended up animating the whole site 🤷‍♂️🤷‍♂️

    Made with:

    • Mobile-first development 📲📲
    • HTML 🔸
    • CSS 🔹
    • JS 🟨
    • used GSAP and its ScrollTrigger with Split-Type to animate 💨💨
    • lenis took care of the smooth scrolling🧈🧈
    What specific areas of your project would you like help with?

    Sadly it doesn't react well to screen-resize, if you have any idea how to fix it, you know what to do 👇👇

    Animated Huddle Landing Page ✅✅ w/HTML, CSS, JS

    1
    alexander•1,300
    @alex931dPosted 7 months ago

    Nice solution 👍🏻 But i noticed a few things on mobil view

    1. The fade in text on the cards doesn’t fade correctly in and end up being on top of the text you may want to position the animation so that doesn’t happen.

    Other then that great solution!👍🏻

    Marked as helpful
    0
  • Raymart Pamplona•16,100
    @pikapikamartSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Hi!! This is my 27th challenge here at FEM and a long overdue one, again.

    It's really nice to do a challenge once again and completing it. There's a lot of things happened this previous months and one main is that I had a job as a dev. That's why I was not active again but I think I could be active again now^^.

    This challenge was again really fun building it and I built it with the new app router. I know i'm late with this new router and that's why I am not really satisfied on how I structured the codebase and if I used those new things correctly.

    For this, I used mysql for the database with drizzle as the ORM. Both are new to me, though I did have experience using mysql with my previous work but only with another ORM and not really natively, that is why I really want to learn it and I found drizzle is really close with how you write it manually and could also inject with sql queries directly!! Really cool!!

    I also added logout button even though there is none inside the mockup, I just thought that how will the user change account.

    For the user's information, I made the email not changeable for now. Maybe will change if I could think a better approach for this.

    The most challenging part on this is finding a database hosting that is free and I really spend lot of time, trying different codes in order to make the connection as limited as possible so that the maximum connections of the hosting that I used won't cause any error. Though this still came up in the end and thankfully I found other hosting with much flexibility while also being free.

    Right now, I don't know if the app produces bugs or not, but visually, when you switch the tabs like from links to profile , if you make your cursor stay on the link while clicking it, you will find a animation bug on the opposite side. This didn't occur when I made the header in a regular component that is called normally in another, this only appeared when I made use of layout that includes this header inside.

    There are lots of improvements that could be done for the app, but I'm just glad that I finished this one out.

    Thanks for checking it out!!!

    Link Sharing App | Next.js | Typescript | Tailwind

    1
    alexander•1,300
    @alex931dPosted 7 months ago

    Woah Great solution the mobil view looks great and i like your error handling 👍🏻 Good job on the solution

    Where did you host your solution? If you mind telling me :)

    0
  • Fidelisuzoma•380
    @UzomaFidelisSubmitted 7 months ago
    What challenges did you encounter, and how did you overcome them?

    My first time working with libraries for animation. Wanted to try out some popular ones. Ran into some issues trying to use react-beautiful-dnd (for drag and drop) functionality together with react-spring (for the animation). Later settled on react-transition-group. It was overkill using a library for animation as this solution has very little in terms of animation (excluding that from the drag and drop library) but it was just for practice. Also found that react strict mode caused the drag and drop functionality provided by the library to malfunction (stop working completely on page refresh) so I had to remove that even while working on it.

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

    Let me know your thoughts on any area of this solution where I could've improved. I would very much appreciate feedback

    To-do app solution with React, react-beautiful-dnd

    1
    alexander•1,300
    @alex931dPosted 7 months ago

    Hello the problem with react-beautiful-dnd is its no longer maintained you can use this https://github.com/hello-pangea/dnd Which is an maintained version of react-beautiful-dnd which works with newer versions of react :)

    Marked as helpful
    0
  • Koda👹•3,830
    @kodan96Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🔸
    • CSS 🔹

    Mobile-first development 📲📲

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

    If you notice any bugs or you have suggestions hit me up with it 🙌

    Clipboard Landing Page 🧷🧷 w/HTML, CSS

    1
    alexander•1,300
    @alex931dPosted 7 months ago

    Hello great solution and nice html too however i have a few tips for you to improve :)

    1. Instead of using “*” to reset your css its recommended to use a reset stylesheet you can find some online and import them just like how you would import fonts :)

    2. better html classnames, i would recommend you learn about css methodologies like BEM or OOP which are the most popular ones to get professional classnames :)

    Other then that great solution :)

    Marked as helpful
    1
  • alexander•1,300
    @alex931dPosted 7 months ago

    Hello, the point with Frontend Mentor is to create a solution that closely resembles the provided design and aims to match it as closely as possible. This practice simulates what you would do in a potential job. However, I have noticed that none of your solutions really match the provided design. :) Anyway have a great day

    Marked as helpful
    0
  • Kolapo Wariz Oladimeji•60
    @kolapowarizSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Proud to solve the challenge. I would try to use Tailwind css next time

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

    I experienced a lot of challenges like how to use react router dom and i overcame it by doing research on them

    Interactive rating component with React

    2
    alexander•1,300
    @alex931dPosted 7 months ago

    Hello great solution but you don’t need react router for this type of project - what i mean by that is it add unnecessary complexity to your compunet you can simple use an if statement in your jsx to see if the submitting is done and switch the html. Hope it helps :)

    0
  • Muhammad Desai•640
    @momorocks111Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    The slider. It was the hardest part of this challenge and since this was my first time working with a range input type, I had no idea what I was doing, but managed to get the functionality for it down.

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

    Ahem WHAT SADISTIC LUNATIC MADE THIS CHALLENGE AND WHO MADE IT JUNIOR?! I wasted hours upon hours trying to figure out how to get the slider colors right and manipulate them using javascript. I watched like 4 videos just for that one part! Not to mention, it also featured a toggle button! Why make this harder! How did I overcome the range input you might ask, Ahem I watched many youtube videos over and over until I managed to get it. The hardest part was getting the color on the slider based on the position of the slider using javascript.

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

    What is the best way to figure out the font size margins and paddings? It's hard to get a perfect 1 to 1 solution without knowing the exact values and only winging it based on if it looks good. Is there a trick I can use to get the perfect font sizes, margins, and paddings?

    Interactive Pricing Component

    1
    alexander•1,300
    @alex931dPosted 7 months ago

    To get the exact size and font weights you will need the premium subscription to get the figma and sketch designs hope it helps:)

    1