프런트 엔드 개발자를위한 연습 프로젝트
게시 됨: 2020-12-17다른 기술과 마찬가지로 프런트 엔드 개발에는 많은 작업이 필요합니다. 이 큰 작업을 처리 할 수있는 다양한 방법이 있으며, 그중 일부는 다음과 같습니다.
- 대행사에서 프런트 엔드 개발자로 일하십시오.
- 집에서 공부하고 옆에서 프로젝트를 만드십시오.
- 고객을위한 프리랜서로 일하십시오.
각각 고유 한 장점과 단점이 있지만 한 가지는 변하지 않습니다. 다양한 작업을 수행할수록 더 빨리 진행할 수 있습니다.
이 기사에서는 새로운 기술, 접근 방식 및 잠재적으로 "아하!"를 배울 수있는 몇 가지 잠재적 인 프로젝트를 혼자서 또는 혼자서 작업 할 수있는 몇 가지 잠재적 인 프로젝트를 살펴볼 것입니다. 프론트 엔드 경력의 순간.
아래의 모든 작업은 특히 프런트 엔드 위치를 신청하기로 결정할 때 GitHub 프로필에 보관할 수있는 꽤 좋은 저장소입니다.
노트! 아래의 모든 예는 디자이너가 실제 제품을 위해 만든 것입니다. 우리는 당신이 그것들을 잡고, 코딩하고, 당신이 원하는 것은 무엇이든 할 것을 제안하지 않습니다. 이 모든 것은 배포하거나 나중에 판매하지 않고도 작업 할 수있는 UI 요소의 예입니다.
1 – 구성 요소 UI 라이브러리
난이도 : 쉬움-중간.
"쉬움"에 대해 오해하지 마십시오. 여기에있는 다른 프로젝트와 마찬가지로 주니어 및 시니어 개발자 모두 해결하는 문제에 따라 어려움을 겪을 수 있습니다. 복잡한 UI 요소로 구성되지 않고 모든 것이 캡슐화 될 수 있기 때문에 쉽게 확장 할 수 있습니다.
드롭 다운 / 버튼에 초점을 맞춘 다음과 같은 기존 디자인을 선택할 수 있습니다.
출처
또는 Bootstrap 및 Foundation과 같은 더 일반적인 것을 사용할 수 있습니다. 고려해야 할 사항 :
- 잘 정의 된 명명 규칙.
- 구성 요소에 대한 프레젠테이션입니다.
- 수정 자 – 대부분의 사람들은 사소한 요소를 변경하는 것을 좋아하므로 적용 방법을 고려하십시오. 예 – 기본, 보조 색상을 원합니다. 성공, 오류 상태 등
- "플러그 앤 플레이"를 유지하십시오. 귀하의 목표는 다른 개발자가 CSS를 작성하지 않고도 귀하의 코드를 사용할 수 있도록하는 것입니다. 기본 그리드 시스템과도 결합 할 수 있습니다.
그러한 라이브러리의 좋은 아키텍처는 사소한 문제가 아닙니다. 경력 초반에이 작업을 시도하고 몇 년 후에 배운 내용을 비교할 수 있습니다.
2 – 복잡한 애니메이션 UI 구현
난이도 : 어려움
이 작업은 세련된 애니메이션과 성능에 관한 것입니다. 그러나 그 다음에는 그다지 일반적이지 않은 시각 자료도 작성해야합니다. 아래 예를 참조하십시오.
여기에서 전체 애니메이션을 볼 수 있습니다. UI가 다운되면 상호 작용을 추가 할 차례입니다. 모든 애니메이션이 브라우저가 아닌 다른 도구에서 만들어 졌기 때문에 디자인처럼 보이지는 않지만 그것이 원본에 실제로 가까워 질 수 없다는 것을 의미하지는 않습니다. 물론 모션 블러 효과와 이상한 모양 변형은 건너 뛰 겠지만 나머지 대부분은 사용자가 할 수있는 일입니다. 모든 것을 키 프레임하는 데 도움이되는 JS 라이브러리도 있습니다.
이 작업은 화면을 조금 더 짧게 유지하기 위해 두 번만 화면을 바꿀 수 있습니다. 에너지가 없으면 여기에서 모바일보기에서 작업 할 필요가 없습니다.
3 – 게임 UI
난이도 : 어려움
또 다른 까다로운 작업! 대부분의 게임은 웹에서 쉽게 번역 할 수없는 매우 독특한 아트 스타일을 가지고 있습니다. 더 어렵게 만들기 위해 여기에 또 다른 규칙이 있습니다. 이미지 / svgs를 사용하여 UI에서 모양을 얻지 마십시오.
출처 : 스타 크래프트 II
이를 위해 StarCraft 2를 선택했습니다. 보시다시피 여기 저기 구현시 고려해야 할 작은 세부 사항이 많이 있습니다. 실제로, 여기서“자산 없음”규칙이 이것을 어렵게 만듭니다. 모양, 클리핑, 그림자 magix, 그라디언트, 테두리 등으로 작업해야합니다. 물론 초상화와 오른쪽의 해양 이미지가 필요합니다.
좀 더 사실적으로 만들기 위해 오른쪽 상단 세로 테두리를 다음 이미지의 상단 행 중 하나로 바꿀 수 있습니다.
출처 : 스타 크래프트 II
작은 화면과 모바일에서도 멋지게 보이도록 관리했다면 추가 포인트를 획득 할 수 있습니다! 이것은 매우 "와우!" 이력서에 효과 프로젝트.
4 – 퀴즈 게임
난이도 : 중간
퀴즈 게임은 위의 일부 디자인에 비해 빌드하기가 너무 어렵지 않지만 작동하려면 JS가 작성되어야합니다. 네, 지금까지 우리는 CSS 기반 프로젝트를 가지고있었습니다.이 프로젝트의 경우 대화 형으로 만들어야 사람들이 클릭하고 정답 / 오답 등을 볼 수 있습니다.
Dribbble에서 "Quiz"를 검색하면 수많은 예제를 찾을 수 있지만 하나를 고르기가 어렵다면 다음을 수행 할 수 있습니다.
출처
보시다시피 두 개의 화면 만 있으므로 위의 디자인을 기반으로 나머지 화면을 만들어야합니다.
퀴즈의 특징 :
- 정답 세기
- N options의 답변
- 클릭 후 정답 / 오답 표시
- 질문 팝업 신고
- 모든 퀴즈로 돌아가서 퀴즈 선택
- 퀴즈 종료 후 최종 점수 표시
원한다면 위에서 언급 한 것보다 더 많은 것을 할 수 있습니다. 이것은 일반적으로 "하루 오후"유형의 프로젝트입니다.
5 – 임의의 사이트를 선택하여 프린터 친화적으로 만듭니다.
난이도 : 쉬움
인쇄 최적화에는 단점이 있습니다. 특히 사이트의 기존 요소를 숨기고, 배경을 정리하고, 타이포그래피를 개선하고, 페이지 나누기로 작업하고, 페이지 형식을 지정할 때.
이 작업을 위해 웹에서 사이트를 선택하고 기사 페이지를 선택한 다음 인쇄 스타일 작업을 시작할 수 있습니다. 주제에 대한 긴 기사가 있으므로 도움이 될만한 것이 많습니다.
사용할 수있는 웹 사이트의 예 :
- 아마존 판매 페이지 – 중요한 정보에만 집중하십시오.
- 코스 판매 페이지 – SitePoint에서.
- 다른 코스 페이지
원하는 다른 사이트를 자유롭게 선택하십시오. 자신을 위해 쉽고 어렵게 만들 수 있습니다. 좋은 인쇄 스타일의 예를 보려면 https://www.smashingmagazine.com/을 살펴보십시오.
6 – 복잡한 잡지 스타일 레이아웃
난이도 : 미친
이것은 어려운 것 외에도 복잡합니다. 그리고 위에서 언급 한 다른 작업에 비해 시간이 더 걸리므로이를 위해 20-30 시간 이상 여유 공간을 확보해야 할 수 있습니다.
출처
위의 디자인은 Slava Kornilov의 The New York Times를 재 설계 한 것입니다. 링크에는 전체 홈페이지를 보여주는 큰 화면을 포함하여 그가 한 모든 디자인이 표시됩니다.
이 프로젝트에서는 구성 요소, 뷰포트 외부로 나가는 비디오 (계속 반응해야 함), 타이포그래피 설정, 겹치는 요소 등과 같은 일부 복잡한 UI 요소의 스타일을 생각해야합니다.
상단의 큰 제목 뒤에있는 배경을 보는 것만으로도 구현에 몇 가지 까다로운 부분이 숨겨집니다.
그는 수많은 요소를 디자인했기 때문에 원하면 여기에서 한두 달 이상을 보낼 수 있고 배울 것이 너무 많을 것입니다. 아래 그림과 같이 백그라운드에서 동영상을 만들 수도 있습니다.
출처
이를 위해 구현할 수있는 다양한 뉴스 기사에 대한 애니메이션도 있습니다. 여기에서 모바일보기도 고려해야합니다.
7 – 대시 보드 및 차트
난이도 : 중간-어려움
대시 보드는 어디에나 있습니다. 그리고 디자이너가 저녁에 무엇을해야할지 모를 때 때로는 다른 것을 디자인합니다. 으니까.
그 덕분에 선택할 수있는 것이 많습니다. 언젠가는 실제 제품을 위해 실제 제품을 만들어야 할 것입니다. 그리고 당신은이 "멋진"인터페이스 중 하나를 얻을 수있을 정도로 운이 좋지 않을 수 있습니다. 이것은 단지 말도 안되는 백만 개의 애니메이션을로드 할 때입니다.
그러한 날을 준비하기 위해 다음과 같은 과제가 있습니다.
다음 디자인을 구현하십시오.
출처
여기서 고려해야 할 사항 – 차트는 실제 여야합니다. 실제 데이터 를 사용해야하며 상단에 표시된 데이터 처럼 보이도록해야합니다. 사용할 수있는 라이브러리가 많이 있으며 대부분 확장 / 수정해야 할 것입니다.
일부 애니메이션을 통합하기로 결정했다면 더 좋을 수 있습니다. 이력서에서는 너무 멋져 보일 것입니다.
결국 :
배우고 더 나은 개발자가되는 가장 좋은 방법 중 하나는 코드 작성과 사이트 구축을 시작하는 것입니다. 매일하세요, 단지 톤만 코딩하세요! 이것은 특히 경력 첫 3-4 년에 도움이됩니다.
이 경험을 바탕으로 더 고위직을 쉽게 채울 수 있습니다. 거기에서 모든 프로젝트에서 얻은 경험과 그 과정에서 발견하고 극복 한 문제와 문제를 사용하여 결정을 내리고 자신의 팀을 효과적으로 이끌 수 있습니다. 그리고 항상 작업하기 어려운 것을 찾으려고 노력하십시오!