Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/mobile-responsive-card-with-min-svh-qX-vdY4o3z
• Live Site URL: https://blog-preview-card.frontend-mentor-2dx.pages.dev

My process

Built with

• CSS responsive function(min())
• CSS custom properties
• CSS Viewport Units(svh)
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

• font-display: swap 은 먼저 기본 폰트를 보여주고, 폰트를 다운로드 받으면 바꿔서 보여주는 방식
• 100svh 는 모바일 환경에서 최소 100vh 값을 가진다

Useful resources

• https://web.dev/blog/viewport-units - web.dev 에서 모바일을 위한 뷰포트 유닛(vh, svh, lvh, dvh) 설명