odin sign up form

Odin 프로젝트 - 가입 양식 솔루션

이것은 프로젝트에 대한 솔루션입니다 : ODIN 프로젝트의 가입 양식. Odin 프로젝트는 온라인으로 온라인으로 채취 할 수있는 무료 오픈 소스 코딩 커리큘럼을 제공합니다.

프로젝트 : 계산기는 중간 HTML 및 CSS 과정의 두 프로젝트 중 하나입니다. 코스 섹션 중간 HTML 개념 , 중간 CSS 개념 및 양식 에 포함 된 컨텐츠를 연습 할 수있는 기회를 제공합니다.

목차

• 개요
  • 스크린 샷
  • 모래밭
• 내 과정
  • 구축
  • 내가 배운 것
  • 지속적인 개발
  • 유용한 리소스
• 작가
• 감사의 말

개요

스크린 샷

모래밭

• Github 저장소
• 라이브 사이트

내 과정

빌드

• 시맨틱 HTML5 마크 업
• CSS 사용자 정의 속성
• CSS Flexbox

내가 배운 것

이 솔루션에서 이전에 프로젝트에서 사용하지 않은 세 가지 사항은 다음과 같습니다.

• HTML5 입력 유형
• 스타일링 형태
• 시스템 글꼴 스택

코스 섹션을 다루는 다른 기능은 중간 HTML 개념 , 중간 CSS 개념 및 양식 및 내 솔루션에 사용한 양식을 다루고 있습니다.

• CSS 재설정
• 상대 단위
• 자체 주최 글꼴
• 텍스트 스타일
• 배경 이미지
• 상자 그림자
• 의사 급
• 맞춤 속성

지속적인 개발

솔루션의 경우이 프로젝트까지 전체 스택 JavaScript 학습 경로 커리큘럼에서 다루어진 HTML 및 CSS 기능 만 사용했습니다.

CSS 그리드는이 프로젝트 후에 다음 섹션에서 다루어집니다. 이 프로젝트의 디자인 파일의 레이아웃은 레이아웃 첫 디자인 및 CSS 그리드의 좋은 후보입니다.

반응 형 디자인은 커리큘럼의 후반에까지 다루어지지 않습니다. CSS Flexbox를 사용하지만 미디어 쿼리는 사용하지 않은 도구를 사용하여 가능한 한 솔루션을 반응 시켰습니다.

웹 접근성은 커리큘럼에서 훨씬 나중에 다루어집니다. 프론트 엔드 멘토 과제 작업을하면서 접근성에 대해 배운 것을 사용했습니다.

비밀번호 필드가 서로 일치하는지 확인하려면 JavaScript가 필요합니다. 양식 검증에 JavaScript를 사용하는 것은 향후 수업에서 다루어집니다. 내 솔루션은 이메일 주소에 대해서만 클라이언트 사이트 유효성 검사를 사용합니다. 설계 파일에 표시되지 않았으므로 필요한 양식 필드가 없습니다.

양식에는 백엔드가 없으며 제출 된 데이터를 어디서나 보내지 않습니다.

유용한 리소스

• 이 글꼴 스택은 Kevin Powell의 사이트 성능을 향상시킵니다.이 비디오는 시스템 UI 글꼴 스택에 대한 좋은 소개를 제공합니다.

작가

온라인으로 나를 찾으십시오 :

• Mastodon- @sabineemden

감사의 말

시스템 글꼴 스택 외에도이 솔루션은 Joël Carrouché의 글꼴 Norse Bold를 사용합니다. 글꼴은 개인 및 상업용 용도로 무료이며 유니 코드 지원을 제공하는 완전한 룬 알파벳을 포함합니다.

이 솔루션은 또한 Josh Comeau의 CSS 재설정 및 거의 흑백 색 구성표를 사용합니다.