구축하기 좋은 5가지 HTML 및 CSS 프로젝트(코데펜 미리 보기 포함)

반응형

코딩은 재미있고 신나는 연습이지만 학습 여정의 진도를 어떻게 측정하나요?

여기 당신의 기술을 시험하기 위해 만들 수 있는 멋진 아이디어들이 있습니다.

1. 설문조사 양식

설문 조사 양식은 매우 인기 있는 첫 번째 프로젝트이며 HTML 양식 검증에 대한 당신의 기술을 테스트하는 좋은 방법입니다. 또한 설문 양식을 만들면 서로 다른 양식 요소(라디오, 확인란, 텍스트 영역 등)를 모두 하나의 형식으로 테스트할 수 있습니다.

 

다음과 같은 간단한 형태로 시작할 수 있습니다.

그런 다음 이 설문 조사 양식과 같이 스타일과 응답성이 뛰어난 양식으로 이동합니다.

2. 헌정 페이지
   헌정 페이지는 HTML과 CSS에 대한 기본적인 기술만을 요구하기 때문에 초보자로서 만들 수 있는 가장 간단한 웹 페이지 중 하나이다.

당신은 CSS에서 이미지, 링크, 단락을 추가하고 CSS를 사용하여 페이지를 아름답게 만드는 것과 같은 다양한 개념으로 실험할 수 있습니다. 다음은 간단한 응답형 헌정 페이지의 예입니다.

 

..이것은 Michael Schneider의 활기찬 헌정 페이지의 한 예입니다.

3. 랜딩 페이지

랜딩 페이지를 만드는 것은 즐거운 과정입니다. 상상의 나래를 펼친다. 또한 HTML과 CSS에서 페이지 콘텐츠 배치, 바닥글, 칼럼과 섹션 작성, 컬러 팔레트 및 리스트 작성 등의 여러 기술을 테스트 할 수 있습니다.

브래드 트래 논쟁의 비디오 랜딩 페이지처럼 간단한 것부터 시작할 수 있습니다.

그런 다음 이 제품 소개 페이지와 같이 더 복잡한 페이지를 작성하는 기술에 도전하십시오.

 

4. 기술 문서

자바스크립트가 없어도 HTML과 CSS만으로 기술문서화 페이지를 만들 수 있습니다. 당신은 창조할 자유가 있습니다.

기술 문서를 작성하기 위해 이 샘플 freeCodeCamp를 사용할 수 있습니다.

CSS를 사용하면 Markus Lising의 페이지와 같은 세련된 문서 페이지를 만들 수 있습니다.

또는 이 설명서와 같은 애니메이션으로 페이지에 재미를 더하기로 결정할 수 있습니다.

 

5. 개인 포트폴리오

더 많은 기술을 쌓거나 더 많은 기술을 배워야만 포트폴리오를 만들고 싶은 유혹이 있다. 좋은 소식이네요, 앞으로는 일정 시간 기다릴 필요가 없어요. 지금은 HTML과 CSS만으로 가능합니다.

의심이 가신다면, 여기 놀라운 포트폴리오가 하나 더 있는데...

크레딧: 티아고 페레이라

크레딧: Aaron Cuddeback

 

신용: 토마스 베스

결론

공부하면서 프로젝트를 만드는 것은 지식과 기술을 습득하는 데 도움을 주고, 또한 건너뛸 수도 있는 다른 것들을 배우는 데 도움을 줍니다. HTML과 CSS로 시작하며 진행했던 프로젝트들입니다. 그들이 나를 도와준 것처럼 그것들을 짓는 것이 당신에게 도움이 되었기를 바랍니다.

해피 코딩!

둘째로, 내가 참고하지 않은 모든 펜들은 내 것이다.

 

                                                      Babi 
                                                      ```