todo app frontend mentor

프론트 엔드 멘토 - TODO 앱

환영!

이 프론트 엔드 코딩 챌린지를 확인해 주셔서 감사합니다.

프론트 엔드 멘토 과제를 통해 실제 워크 플로우에서 기술을 향상시킬 수 있습니다.

이 도전을하려면 HTML, CSS 및 JavaScript를 잘 이해해야합니다.

도전

당신의 도전은이 TODO 앱을 구축하고 가능한 한 디자인에 가깝게 보이게하는 것입니다.

원하는 도구를 사용하여 도전을 완료하는 데 도움이됩니다. 따라서 연습하고 싶은 것이 있다면 자유롭게 가십시오.

사용자는 다음을 수행 할 수 있어야합니다.

• 장치의 화면 크기에 따라 앱의 최적 레이아웃보기
• 페이지의 모든 대화식 요소는 호버 상태를 참조하십시오.
• 목록에 새로운 Todos를 추가하십시오
• 마크 토도스는 완전한 것으로 표시됩니다
• 목록에서 Todos를 삭제하십시오
• All/Active/Complete Todos에 의한 필터
• 완성 된 모든 토도를 지우십시오
• 빛과 어두운 모드 토글
• 보너스 : 드래그 앤 드롭 목록에서 항목을 재정렬

도전에 대한 지원을 원하십니까? 슬랙 커뮤니티에 가입하고 #help 채널에서 질문하십시오.

모든 것을 찾을 수있는 곳

귀하의 임무는 /design 폴더 내부의 디자인으로 프로젝트를 구축하는 것입니다. 모바일과 데스크탑 버전의 디자인을 찾을 수 있습니다.

디자인은 JPG 정적 형식입니다. 이것은 font-size , padding 및 margin 과 같은 스타일에 최상의 판단을 사용해야한다는 것을 의미합니다. 이것은 간격과 크기의 차이를 인식하도록 눈을 훈련시키는 데 도움이 될 것입니다.

디자인 파일을 원하는 경우 (스케치 및 피그마 버전을 제공) 디자인을보다 자세히 검사하려면 프로 멤버로 구독 할 수 있습니다.

/images 폴더에서 필요한 모든 자산을 찾을 수 있습니다. 자산은 이미 최적화되어 있습니다.

색상 팔레트 및 글꼴과 같은 정보가 포함 된 style-guide.md 파일도 있습니다.

프로젝트 구축

편안한 워크 플로우를 자유롭게 사용하십시오. 아래는 제안 된 과정이지만 다음과 같은 단계를 수행 할 필요는 없습니다.

1. 프로젝트를 Github의 공개 저장소로 초기화하십시오. 도움이 필요한 경우 코드를 커뮤니티와 쉽게 공유 할 수 있습니다. 이 작업을 수행하는 방법을 잘 모르면이 시도 Git 리소스를 읽으십시오.
2. 코드를 URL에 게시하도록 저장소를 구성하십시오. 이는 REPO URL과 프로젝트의 URL을 공유 할 수 있으므로 도전 중에 도움이 필요한 경우에도 유용합니다. 이 작업을 수행하는 방법에는 여러 가지가 있지만 Vercel을 사용하는 것이 좋습니다. 아래의 Vercel을 사용하여 프로젝트를 배포하는 것에 대한 자세한 정보가 있습니다.
3. 디자인을 살펴보고 프로젝트를 해결하는 방법을 계획하십시오. 이 단계는 재사용 가능한 스타일을 만들기 위해 만들 수있는 CSS 클래스를 미리 생각하는 데 도움이됩니다.
4. 스타일을 추가하기 전에 HTML로 콘텐츠를 구조화하십시오. 먼저 HTML을 작성하면 잘 구조화 된 콘텐츠를 만드는 데주의를 집중할 수 있습니다.
5. font-family 및 font-size 와 같은 일반적인 컨텐츠 스타일을 포함하여 프로젝트의 기본 스타일을 작성하십시오.
6. 페이지 상단에 스타일을 추가하고 작업하십시오. 당신이 일하고있는 지역을 완성한 것이 행복하면 다음 섹션으로 만 이동하십시오.

프로젝트 배포

위에서 언급했듯이 프로젝트를 무료로 호스팅하는 방법에는 여러 가지가 있습니다. Vercel은 놀라운 서비스이며 설정하기가 매우 간단하므로 사용하는 것이 좋습니다. Vercel을 사용하려면 시작하기 위해 따라야 할 몇 가지 단계가 있습니다.

1. Vercel에 가입하고 온 보딩 흐름을 통해 Github 통합을 위해 Vercel을 사용하여 Github 계정을 연결하도록하십시오.
2. "Git Repository"버튼을 사용하여 "Git Repository"버튼을 사용하여 "Project Import"페이지에서 Vercel에 프로젝트를 연결하고 배포하려는 프로젝트를 선택하십시오.
3. 연결되면 git push 할 때마다 Vercel은 새 배포를 생성하고 배포 URL이 대시 보드에 표시됩니다. 또한 URL을 사용하여 각 배포에 대한 이메일도 받게됩니다.

솔루션 공유

솔루션을 공유 할 수있는 여러 곳이 있습니다.

1. 다른 사용자가 사이트에서 솔루션을 볼 수 있도록 플랫폼에 제출하십시오. 다음은 "솔루션 제출에 대한 완전한 안내서"가 있습니다.
2. 슬랙 커뮤니티의 #완성 프로젝트 채널에서 솔루션 페이지를 공유하십시오.
3. 트윗에서 @frontendmentor를 트윗하고 @frontendmentor를 언급하십시오. 우리는 당신이 만든 것을 살펴보고 그것을 공유하는 데 도움을주고 싶습니다.

피드백 제공

피드백은 항상 환영합니다. 따라서이 도전에 도움이된다면 HI [Frontendmentor [DOT] IO로 이메일을 보내주십시오.

이 도전은 완전히 무료입니다. 연습에 유용한 사람과 공유하십시오.

재미있는 건물 되세요!

커뮤니티 후원자

커뮤니티 스폰서들에게 큰 감사합니다!

• 0에서 마스터로의는 웹 개발의 모든 것들에 대한 놀라운 학습 리소스입니다. Andrei Neagoie가 이끄는이 과정은 실제로 고품질의 콘텐츠이며 광범위한 주문형 기술을 다룹니다.
• Diversify Tech는 기술 분야의 저조한 사람들에게 놀라운 자료입니다. 이 사이트에는 새로운 기회를 원하는 사람을위한 작업 목록이 있습니다. 리소스 섹션은 또한 다이빙을위한 유용한 링크로 가득합니다!
• Triplebyte는 새로운 역할을 찾고 있다면 정말 좋은 제품입니다. 기밀 퀴즈를받을 수있는 무료 서비스입니다. 귀하의 결과에 따라 회사는 빈 역할을 위해 귀하를 투과시킬 것입니다!