All solutions

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

I implemented the popover component of the Headless UI library.

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

It was challenging to change the styling and behavior of the popover component on different screen sizes.

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

I was able to change the layout on the different views (mobile, tablet, and desktop). I am especially proud of the hero section, because the elements are arranged differently on desktop which was tricky.

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

On desktop and tablet, the text-content element inside the hero section is exactly 448.3px wide in the Figma mockup. That's really confusing to me. It took me really long to find a solution on how to structure the hero layout on desktop. I decided to create the following grid layout:

grid-template-columns: 1fr auto 1fr;

The width of the center column is set to 28rem (448px). The hero images are placed in the left and right column and are moved by an offset with transform: translateX();

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

I would like help with the hero section on desktop. It was really challenging to find a solution.

• Why is the text-content element inside the hero section exactly 448.3px wide. What element/constraint is the width based on?
• How did you create the hero section on desktop, do you have any tips?

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

I learned how to create a responsive CSS Grid layout including grid items which are spanning across multiple rows and columns.

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

I wasn't sure which CSS Grid approach I should use. So I tried different approaches like spanning individual grid items across multiple rows/columns with grid-row: 1 / span 2; or grid-column: 1 / 3;.

But in the end I decided to use grid-template-areas, because it's really easy to understand how the grid items are positioned:

.testimonial-list {
  grid-template-areas:
    'one one two five'
    'three four four five';
}
```

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

I learned how to create a responsive layout with CSS Grid.

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

It was a challenge to structure the responsive grid layout and to get its constraints right.

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

border-top creates those curved borders.

How to create such straight borders like in the mockup?

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

I learned how to switch between a column and row layout.

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

The quality of the Figma mockups weren't as professional as in other challenges unfortunately. That's why it was a bit hard for me to understand everything correctly.

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

• I learned how to keep track of every detail in the Figma mockups.
• I made the page responsive by using fluid design and media queries.
• I also learned how to style lists and tables with CSS.

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

It was a challenge to keep track of every detail in the Figma mockups.

It was also tricky to understand the responsive design (how the page adapts on different screen sizes). I overcame this challenge by taking some time to understand the responsive design before I started coding. That helped me to make better decisions during the coding process.

I didn't know how to style the nutrition table when using the semantic table element. That's why I built the table design from scratch. It was way easier for me at first. However, I saw a good solution when giving feedback to someone's submission. From this solution, I learned how to implement the table by using the semantic table element. (I updated my submission.)

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

• I made the card responsive by using a media query and by using fluid design. The card's width automatically adapts to the viewport on mobile screen sizes.
• I used semantic HTML, e.g. nav, ul.
• I implemented proper hover and focus-visible states.
• I also used the q tag to create the quote.

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

First, I centered the card with this code:

display: grid;
place-content: center;

But that caused the card to shrink. However, the card should have a bigger width on desktop (see mockup). That's why I only centered the card vertically with this code:

display: grid;
align-items: center;

and applied a max-width-wrapper class to the card to center it horizontally and to make it responsive. This technique is explained in this YouTube video.

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

I think I found a good approach to center the card and to make it responsive (see above). However, let me know if you know a better solution.

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

I learned how to navigate through the Figma mockup.

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

I implemented the typography design system like this to reuse the presets given in the style guide:

%typography-text-preset-1 {
  font-family: 'Figtree', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
}

.blog-title {
  @extend %typography-text-preset-1;
}

Do you think that's a good approach or is there a better one?

I'm using so called "SCSS placeholders".

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

I set up a Vue project with SCSS from scratch. I implemented the exercise in a Vue component and organized the global SCSS in a specific folder structure.

I've learned how to calculate the inner and outer border-radius and used this technique in this project:

.qr-code-card {
  --padding: var(--spacing-200);
  --inner-border-radius: 10px;
  
  padding: var(--padding);
  border-radius: calc(var(--inner-border-radius) + var(--padding));
  
  img {
    border-radius: var(--inner-border-radius);
  }
}

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

Challenging was to find every detail in the Figma template. However, this exercise was still simpel, so in the end I was able to recreate everything.

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

I didn't understand how to deal with the typography.

I was able to use the design system for the colors and the spacing like so:

html {
  --color-white: hsl(0deg 0% 100%);
  --color-slate-900: hsl(218deg 44% 22%);
  --color-slate-500: hsl(216deg 15% 48%);
  --color-slate-300: hsl(212deg 45% 89%);
}

html {
  --spacing-500: 2.5rem;
  --spacing-300: 1.5rem;
  --spacing-200: 1rem;
}

I just applied the typography related CSS declarations to the individual HTML elements like so:

body {
  font-family: 'Outfit', sans-serif;
}

.heading {
  font-size: 1.375rem;
  line-height: 1.2;
}

p {
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0.2px;  
}

Is it beneficial in this exercise to utilize a design system also for the typography? I don't know how to do that. How would you do it?

In the provided style guide the typography is documented like so:

Text Preset 1: Outfit Bold
22px
120% Line Height
0px Letter Spacing

Text Preset 2: Outfit Regular
15px
140% Line Height
0.2px Letter Spacing