Responsive Web Page with Custom Typography and Adaptive Font Sizes

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

I’m proud of overcoming challenges and learning new things throughout this project. One key challenge was working with custom font families installed locally, rather than using web font services. Initially, I didn't fully understand the purpose of each font file or how to implement them. However, after researching, I was able to grasp it and successfully apply them, thanks to God.

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

Using a custom font family locally on my computer was a key learning experience. For example, the file Figtree-Italic-VariableFont_wght is used when I want to apply the italic style with various font weights. Here's how to include it in the CSS file:

@font-face {
  font-family: "figtree";
  src: url(assets/fonts/Figtree-Italic-VariableFont_wght.ttf) format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

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

HTML File:

• How is the overall structure of the page? Any feedback on its organization?

CSS File:

• I noticed that the first image in the card is displayed differently on desktop and mobile (cropped on mobile devices). To address this, I manually cropped the image and used it specifically for the mobile version, so now I have two images: one for desktop and one for mobile. Is this approach considered professional?

Overall Feedback:

• Is it acceptable to rely solely on ChatGPT for help with this project, or should I explore other resources and websites for a more comprehensive approach?