나는 디자인하고, 당신은 짓는다! - 프론트엔드 챌린지 #3

감사

처음 두 번의 도전에서 얼마나 압도적인 반응을 보였습니까! 전에도 말했지만 모든 제출물을 보는 것이 정말 즐겁고 제공된 모든 피드백에 감사드립니다. 챌린지를 해보지 않으셨다면 이 재미있는 챌린지에 참여해 보시기를 강력히 권장합니다! 🤩✨

모두 HTML/CSS/Javascript 수준이 다르다는 것을 알고 있지만 걱정하지 마세요. 다가오는 챌린지에서 다양한 어려움을 혼합하려고 노력할 테니 계속 지켜봐 주세요! 🔔

도전

이전에 1페이저(혹은 1섹션😆) 디자인이 몇 개 있었는데, 모던 인테리어 가구점 홈페이지를 만들어 볼까요?

따라서 이번 챌린지에서는 최신 UI를 터치하여 최소한의 전자 상거래 웹사이트를 만들 것입니다. 디자인에 따라 홈페이지를 제작합니다. 아래의 목표 및/또는 추가 사항을 충족하십시오.

표적:

🎯 대상 : 사용자가 유사한 디자인을 볼 수 있음

🎯 Target : 반응형 디자인

🎯 대상 : 필터제품

🎯 대상 : 여러 쇼케이스(화살표 버튼을 사용하여 탐색)

🎯 Target : 모바일에서 햄버거 메뉴를 선택하면 내비게이션이 보여요 (창의력 발휘)

🎯 대상 : 모바일에서 상품을 좌우로 슬라이드 할 수 있어요.

추가의:

🌟 추가: 필터링에 애니메이션 추가

🌟 추가 : 페이지 스크롤 다운 시 애니메이션 추가

자원:

📃 아이콘 : https://icones.js.org/collection/all

📃 호스팅: https://vercel.com/

⚠ It will defeat the purpose of learning if you just copy and paste someone else's answer 😭!

코딩을 시작하세요!

도전할 준비가 되셨다면,

Dribbble에서 이 디자인을 💖 도와주시고 저를 팔로우하세요! 제발... 😳

더 쉽게 제출할 수 있도록 이 게시물을 즐겨찾기에 추가하십시오.

마우스 오른쪽 버튼을 클릭here하고 새 탭에서 링크 열기를 열어 Figma 디자인을 확인합니다.

즐겁게 코딩하세요! 🤩

돌아와서 제출하세요!

All the images and assets are free to use, and can be exported from the Figma Design.

제출

완료한 후 이 게시물로 돌아와 댓글 섹션에서 다음template을 사용하여 솔루션을 제출하세요. 다른 사람의 답변에 댓글을 달고 찬성표를 던지는 것이 좋습니다!

감사합니다!💘

Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

왜요?

웹 디자인을 연습하거나 도전하고 싶은 사람이 **Figma 디자인*🎨 파일을 얻기 위해 다른 플랫폼(에헴)을 지불하지 않고도 할 수 있도록 이 디자인을 자유롭게 공유합니다.

포트폴리오에서 만든 디자인을 자유롭게 사용할 수 있습니다. 저작권 주장이나 그 어떤 것도 없습니다.

하지만 제 작품이 마음에 드신다면 Dev.to와 😄에서 저를 팔로우하는 것을 환영합니다.

또한 내 자신의 Website을 확인하십시오!

시간과 관심을 가져 주셔서 감사합니다! 즐기시기 바랍니다!