social media dashboard with theme switcher

프론트 엔드 멘토 - 테마 스위처가있는 소셜 미디어 대시 보드

환영!

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

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

이 도전을하려면 HTML, CSS 및 약간의 JavaScript에 대한 기본적인 이해가 필요합니다.

도전

당신의 도전은이 소셜 미디어 대시 보드를 구축하고 가능한 한 디자인에 가깝게 보이게하는 것입니다.

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

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

• 장치의 화면 크기에 따라 사이트의 최적 레이아웃보기
• 페이지의 모든 대화식 요소는 호버 상태를 참조하십시오.
• 색상 테마를 선호합니다

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

모든 것을 찾을 수있는 곳

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

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

디자인을보다 자세히 검사하려면 스케치 파일을 원한다면 플랫폼의 챌린지 페이지에서 구입할 수 있습니다.

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

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

프로젝트 구축

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

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

프로젝트 배포

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

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

솔루션 공유

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

1. 다른 사용자가 사이트에서 솔루션을 볼 수 있도록 플랫폼에 제출하십시오. 다른 사용자는 피드백을 제공하여 다음 프로젝트의 코드를 개선하는 데 도움이 될 수 있습니다.
2. 슬랙 커뮤니티의 #완성 프로젝트 채널에서 저장소 및 라이브 URL을 공유하십시오.
3. 트윗에서 @frontendmentor를 트윗하고 @frontendmentor를 언급하십시오. 우리는 당신이 만든 것을 살펴보고 그것을 공유하는 데 도움을주고 싶습니다.

피드백 제공

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

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

재미있는 건물 되세요!