All solutions

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

• Utilised seachParams, useParamsin NextJS server component. Get and set data via URL.

• Added skeleton for loading state.

• Used shadcn for the UI, they provide customisable, accessible components that we can copy & paste.

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

I implemented React Portal for my custom dialog / modal box and also able to close it when we click the area outside of the dialog. But I'm not sure if it's been used correctly. Next time I'd prefer to use third party library to ensure the correct behaviour of a dialog.

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

Data state management, we usually fetching data in server side and render the UI. However in this challenge, I imported data locally and store in data state in useEffect to simulate fetching data on page load. On the other hand, it has to do everything in client side which basically abandoned the advantages of server side rendering.

Hi everyone, this is my first SASS solution. I also want to know the best practice of updating SASS variables using media query.

Any comment would be appreciated. Thanks for your help!

Hi everyone, this is my solution of Interactive rating component. Please feel free to give me any comment. Thanks for your help!

Hi everyone, this is my solution of "Ping-coming-page". Any comment would be appreciated. Thanks for your help! :D

In this challenge I learned:

• Code seperation in index.js
• onblur event, occurs when an element loses focus.

emailInput.addEventListener("blur", () => {
  validateEmail(emailInput.value);
});

Hi everyone, this is my solution of "Four card feature section". This is my first time of using TypeScript and TailwindCSS. I want to ask a question about setting up the grid layout for desktop version in TailwindCSS. I can only use the original way to apply grid-area in global.css.

/* How to achieve below style in TailwindCSS? */
@media (min-width: 1024px) {
  .home__cards-wrapper {
    grid-template-areas:
      "card1 card2 card4"
      "card1 card3 card4";
    align-items: center;
  }

  .card:nth-of-type(1) {
    grid-area: card1;
  }

  .card:nth-of-type(2) {
    grid-area: card2;
  }

  .card:nth-of-type(3) {
    grid-area: card3;
  }

  .card:nth-of-type(4) {
    grid-area: card4;
  }
}
/* END: Card styles */

How would you set up the grid layout for cards of desktop version with TailwindCSS?

Any comment will be appreciated. Thanks for your help!! :D

Hi everyone, this is my solution of Responsive Space-Tourism-Website using NextJS(App Router). I managed to complete this challenge in one week. I really enjoy the way to handle routes with NextJS (App Router) by just creating a new directory and page.js. Considered a better user experience. I would like to add fade-in animation to components rendering.

Any comment would be appreciated. Thanks for your help!! :D

Hi everyone, this is my solution of Responsive Room-Homepage using [NextJS, CSS Grid, Flexbox]. For me, the most difficult parts are <img srcset="" sizes=""> and the sizing of image slider. I'm happy to complete this challenge.

Any comment would be appreciated. Thank you! :D

Hi everyone, this is my solution for a responsive e-commerce page with NextJS 13, In this challenge, I found that the most difficult part is dealing with the server and client components. It's completely different from how I've been building websites.

Any comment would be appreciated and helped me grow further.

Thanks for your help!!

This is my first project using NextJS and handling external API calls. It was struggle to play around with the structure of NextJS. I'm not sure if my coding structure are correct. Any feedback will be appreciated. Thanks for your help!!

This is my first exercise using React. I tried to keep elements tidy and separated into tiny components. I would love to hear any comment on my page or coding. Thanks for your help.

What I learned:

• CSS Grid and Flexbox. Use grid-template-column: 1fr 1fr 1fr to keep columns or rows in same ratio.
• Responsive image using <picture> to switch imgage source.
• Use the silbling selector (~) to link up the active state of navigation button and the following classes. (When a nav button is activated, the related CSS should be followed)

.nav-menu.active {
transform: translateX(0);
transition: all 200ms ease-in-out;
}

.nav-menu.active ~ .background {
width: 100%;
opacity: 0.5;
}

Hi everyone, this is my first HTML + CSS + Javascript solution of "intro section with dropdown navigation".

In this challenge I learned,

• how to set up a responsive navigation menu and its dropdown menus by using position: absolute; and position: fixed;

• Reinforced learning on click event of jQuery.

I'm also worried about my coding structure. Any feedback would be appreciated. Thanks for your attention.

Hi everyone, this is my solution of "social proof section".

In this challenge I learned,

• Reinforced learning on grid items' positioning

.ratings > div:nth-of-type(1) {
  align-self: start;
}

.ratings > div:nth-of-type(2) {
  align-self: center;
}

.ratings > div:nth-of-type(3) {
  align-self: end;
}

.testimonial > article:nth-of-type(1) {
  margin-block: 0 2rem;
}

.testimonial > article:nth-of-type(2) {
  margin-block: 1rem;
}

.testimonial > article:nth-of-type(3) {
  margin-block: 2rem 0;
}

Any feedback would be appreciated. Thanks for your attention.

Hi everyone, this is my solution of "testimonial-grid-section".

I learned,

• To set a grid layout with different resolution by using grid-template-area.
• To set the default value of grid column by using grid-auto-columns.

Any feedback would be appreciated. Thanks for your time!

Hi everyone, this is my solution of "Huddle landing page". Any feedback is appreciated. Thanks for your help.

• I noticed the width of an img element can be affected by the width of its parent elements, better to wrap it with a div when using flexbox.

<div class="flex">
  <div class="flex_item1">
<img src="" alt="">
  </div>

  <div class="flex_item2">

  </div>
</div>

Hi everyone, this is my solution of "3 column preview card".

• I learned CSS property 'transition'.

transition: background-color 200ms ease-in-out, color 200ms ease-in-out;

• I found that using grid-template-rows: 1fr 1fr 1fr; will share equal amount of width for each item. In this situation, it is better than using flex-direction: row;.

Hi everyone, this is my solution of "results-summary-component".

I found that if i scale down the browser to 90% and the mobile page will not be stretched to view height.

Should i add a media query for mobile version to ensure the page is full height?

@media (max-width: 375px) {
  .card {
    min-height: 100vh;
  }
}

Hi everyone, this is my solution of "stats-preview-card-component".

• I learned how to use mix-blend-model: multiply; property to mix the background colour and image. I was thinking to add an overlay <div> on top with transparent colour. But I found this is a lot more simpler than that.
• I also noticed that flexbox will shrink the image for the text content if I didn't set the flex-shrink: 0;.

I'm a newbie in CSS and trying to build the layout with grid and flex box.