@alex931d
What are you most proud of, and what would you do differently next time?
Made with:
What specific areas of your project would you like help with?
As always, if you notice anything... 👇👇
love the animations great job!
What are you most proud of, and what would you do differently next time?
Made with:
localStorage, so the editor will still have your files when you return to it after closing itWhat 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.
Nice project! Keep up the great work!
@iameenahmed
Submitted
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.
Hello great job on the design! But i have noticed a few bugs :)
Anyway hope it helps have a great day👍🏻
@Islandstone89
Submitted
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:
.flow > * + * utility class:is and :hasAnd some I haven't used too much yet:
.container utility class that sets a max-width, padding-inline and margin-inline: auto.gap Custom Property for cohesive spacing - I just invested in Frontend Mentor Pro, and the Figma file gives you everything you need!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 :)
great project! keep up the great work and greetings from denmark!
Marked as helpful
@hirashabeer
Submitted
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.
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!👍🏻
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:
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 👇👇
Nice solution 👍🏻 But i noticed a few things on mobil view
Other then that great solution!👍🏻
Marked as helpful
@pikapikamart
Submitted
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!!!
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 :)
@UzomaFidelis
Submitted
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
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
What are you most proud of, and what would you do differently next time?
Made with:
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 🙌
Hello great solution and nice html too however i have a few tips for you to improve :)
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 :)
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
@Hvbiba
Submitted
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
@kolapowariz
Submitted
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
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 :)
@momorocks111
Submitted
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?
To get the exact size and font weights you will need the premium subscription to get the figma and sketch designs hope it helps:)
