Frontend Challenge v24.07.24, CSS Art: Recreation에 대한 제출물입니다.

영감

저는 뉴욕 레크리에이션 크리켓 리그(NYRCL)의 반응형 랜딩 페이지를 만드는 데 영감을 받았습니다. 모든 기기에서 멋지게 보이도록 하면서 시각적으로 매력적이고 대화형으로 만드는 것이 아이디어였습니다.

데모

여기에서 프로젝트의 라이브 데모를 확인할 수 있습니다: NYRCL 랜딩 페이지

내 GitHub 저장소에서 프로젝트 코드를 찾을 수 있습니다: frontend-challenge

여행

이 프로젝트는 현대적인 웹 디자인 방식을 적용할 수 있는 환상적인 기회였습니다. 여정의 몇 가지 주요 측면은 다음과 같습니다.

1. 기획 및 디자인:

   • 저는 페이지 구조의 개요를 설명하고 레크리에이션 크리켓 리그의 생동감 넘치는 정신을 반영하는 색상 구성표를 선택하는 것부터 시작했습니다.

2. 개발:

   • HTML을 사용하여 콘텐츠를 구성하고 CSS를 사용하여 스타일을 지정하고 반응성을 보장하며 JavaScript를 사용하여 상호작용을 수행했습니다.
   • CSS에는 다양한 화면 크기를 처리하는 미디어 쿼리가 포함되어 있어 여러 기기에서 일관된 경험을 보장합니다.
   • JavaScript를 사용하여 호버 효과와 원활한 전환을 추가하여 사용자 참여를 향상했습니다.

3. 도전과 학습:

   • 도전과제 중 하나는 페이지가 완벽하게 반응하는지 확인하는 것이었습니다. 이를 달성하기 위해 Flexbox와 미디어 쿼리를 사용하는 방법에 대해 많은 것을 배웠습니다.
   • 또 다른 과제는 CSS 속성을 주의 깊게 조정해야 하는 부드러운 애니메이션과 전환을 만드는 것이었습니다.

4. 결과:

   • 저는 페이지를 생생하고 매력적으로 만드는 반응형 디자인과 대화형 요소가 특히 자랑스럽습니다.

5. 다음 단계:

   • 등록 양식, 동적 콘텐츠 로딩 등 대화형 요소를 더 추가할 계획입니다.

결론

이 챌린지에 참여한 것은 보람있는 경험이었으며 이러한 학습 내용을 향후 프로젝트에 적용하기를 기대합니다. 이런 환상적인 기회를 마련해 주셔서 감사합니다!