All solutions

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

What I learned

During this project, I've gained insights into managing active states such as hovering and focus. While these aspects might seem complex with other frameworks, dealing with them in Tailwind CSS proved to be straightforward and simplified, resembling a smooth journey.

GitHub

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

LEARNINGS

some of the major learnings while working through this project. Writing is a great way to reinforce our own knowledge.

code snippets, see below:

/* fonts.css */
@font-face {
  font-family:'YoungSerif' ;
  src: url('../assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
}

.title { 
  font-family: 'YoungSerif';
  font-weight: 400;
  font-style: normal;
}

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

CHALLENGES

1. Challenge with HSL Colour in Tailwind CSS Configuration

The colour provided is in HSL (Hue, Saturation, Lightness) format, which is not directly compatible with Tailwind CSS configuration using HEX or RGB.

Solution:

To address this challenge, convert the HSL color to HEX format using Google's default color picker.

Example:

1. Use Google's default color picker or another tool to obtain the HEX equivalent of the HSL color.
2. Update the Tailwind CSS configuration with the HEX color.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: '#XXXXXX', // Replace with your HEX color
      },
    },
  },
};

1. Challenge with Integrating TTF Files for Fonts

I encountered a challenge while working on the project regarding font integration. Instead of using the Google Fonts API, I opted to include TTF files directly.

Solution:

Successfully addressed the font integration challenge by utilizing the @font-face CSS rule. This solution allows for custom font definition directly in the project, providing greater control over the font rendering.

/* fonts.css */
@font-face {
  font-family:'YoungSerif' ;
  src: url('../assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
}

.title { 
  font-family: 'YoungSerif';
  font-weight: 400;
  font-style: normal;
}