All solutions

What are you most proud of, and what would you do differently next time?

I've used form actions instead of handle submit. Something I would do differently would be to consume an API endpoint using the form actions.

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

Getting the formula correctly was a bit of a pain especially when testing back and forth. How I went about this was to check online for other mortgage calculators and use them for validation.

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

I had a challenge in adding some animations into the mobile navigation once we clicked the hamburger menu. These are concepts I'll learn.

I've had this problem where once the reply has been posted, the UI needs to remove the reply form so that it doesn't show up after sending the reply. Spent so much time trying to fix it. Probably there is something I'm missing.

I learnt a ton of things especially working with the new next js and server actions, I had a rough time with 'use client' and 'use server'. Also had to refresh my knowledge on event stop propagation and prevent default.

Having used react, the leaflet documentation for react wasn't as extensive as I expected but I stuck with it till the end. Where I happened to get a bit lost was getting the user's IP address once the app loads and then displaying that location on the map. I had to go around this by some global state management -Jotai. I've learned new concepts like using swr and solidified my knowledge in conditionally displaying data.

I challenged myself to build the backend for the URL shortener using a lightweight express js framework. The backend repo also uses background job scheduling using Agenda this is because by using Prisma there is no way to add time series collections to your MongoDB database. So by using collections, it would take a long to update each record --updating the count of click -- once the user redirects. Surprisingly, the front end was harder than I expected, this is my second solid js application and I struggled with saving the results to localStorage as well as reactivity concepts. The styling was at most challenging in the CTA section and statistics cards. What was challenging in CTA was having the background color at the same time with the background images; keeping in mind that the background color would be a mix blend mode color which I couldn't get right.

<div>
   <Toaster />
   <div
    id="header-container"
    style={{width: "min(80%, 1440px)", margin: "0 auto"}}
   >
    <Navbar />
    <Hero />
   </div>
   <main class="bg-very-light-gray">
    <div
     id="main-container"
     class="flex flex-col items-center pb-[20vmin]"
     style={{width: "min(80%, 1440px)", margin: "0 auto"}}
    >
     <FormSection />
     <StatisticsCard />
    </div>
   </main>
   <section id="cta-section" class="">
    <div id="cta-wrapper" class="bg-[#3b3054f0]">
     <div
      id="cta-container"
      style={{width: "min(80%, 1440px)", margin: "0 auto"}}
     >
      <CTA />
     </div>
    </div>
   </section>
   <footer class="bg-very-dark-violet">
    <div
     id="footer-container"
     class="flex flex-col items-center"
     style={{width: "min(80%, 1440px)", margin: "0 auto"}}
    >
     <Footer />
    </div>
   </footer>
  </div>

In the Statistics cards styling the horizontal lines led me to using some styling hacks as seen below

#card-1::before {
  content: "-";
  position: absolute;
  font-size: 10px;
  top: 30%;
  left: -5rem;
  width: 5rem;
  height: 12px;
  @apply bg-cyan text-cyan;
}

#card-2::before {
  content: "-";
  position: absolute;
  font-size: 10px;
  top: 10%;
  left: -5rem;
  width: 5rem;
  height: 12px;
  @apply bg-cyan text-cyan;
}

Any feedback on how I would have gone about differently on the styling would be supportive.

My main aim was to test my knowledge in solid JS. Having come from react background it felt like everything had its equivalent and much more out of the box. I relied almost entirely from the solid js docs

Really took me a while to finish this challenge. I've used the details and summary which can be a pain in styling them.

Starting with the mobile will save you a lot as in desktop you're left with styling the desktop images. I feel my skills have gone to a next level. I even added a few animations to play around with.

It looked small but quite challenging.

I would like to know how to draw that triangle thing below the pop up menu.

I am happy with my solution, something I would improve or tweak a little, I'll appreciate.

Two things I would need some feedback on:

• How is my use of semantic html? Did I really get it right or I over-used the <h3> tags inside the profile-details ?
• I added extras* -- some css transitions for animations, one for the card itself and the anchor tags. How could I make them better and stand out?

Also, I did struggle with the two svg images in the background image, if there's an easier way than what I used here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position I will appreciate

I was able to use grid and it was quite handy in laying out a responsive design.

I would appreciate any feedback. Much appreciated.

It was my first time using grid and I got this slight challenge in my desktop design

• When one sets the main as grid and reverses the grid row order right to left as I have done below

display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; direction: rtl;

What happens is that the fullstops(.) in my text go to the begining. As you will see in my live site. I had also set text-align for the h1 and p to text-align: left.

• This is not part of the challenge but what are some of the resources that beginners in css animations can start with? A bit of animation would make my solution livelier than it currently is.

I would appreciate any feedback. It's been great learning.

I faced these challenges while doing the nft preview challenge:

• Being able to change the nft image color to cyan while hovering on it. Well on this part, I was able to change it's opacity but changing its color was a different thing.
• being able to add a rounded colored radius around the avatar. One can achieve a border radius around the image by setting it to 50%, how can one also add a colored border radius ?

I appreciate any feedback, Thank you.

These challenges seem to always have something quite new under their sleeves.

When a user submits the without selecting a rating, the button still submits but I don't want it to submit when there is nothing selected. How can I modify these changes in my js?

I generally felt quite comfortable with it. I might have gotten somewhere wrong but so far so good, I think it's accurate.

Is there a way I could add the hover states using js and css? I kind of blanked out at that point and would use some insights. The method I've used was to add classes to the days and expenses. The challenge with this is that it becomes pretty complex to now add hover states to the bars.

data.map(item => i
// days =  item.day
// expense = item.amount
// add class to days and set width to div also created for expenses
)

The desktop/mobile images were a bit challenging to change for the card but I wrapped it around a media query and set display: none for the desktop image.

I generally felt it was an easy project—my first project on front-end mentors. I feel a bit unsure about using <article>, which particular cases do use semantics tags such as main and article are strongly recommended over traditional divs.

In my CSS, I just did what worked. There are best practices I might not have adhered to and I'm willing to learn through the next challenges.