패스트캠퍼스 FE 부트캠프

패캠 부트캠프 3주차 - HTML/CSS 홈페이지 구현 과제 | 3주차 회고

바닷가쟤 2023. 7. 31. 10:33

3주차 회고

이번주에는 HTML/CSS 과제로 홈페이지 클론 코딩이 있어서 좋아하는 게임인 오버워치 홈페이지를 따라 만들어 보았다.

솔직하게 많은 공부 시간을 내지 못했던 것 같다. 더 열심히 잘 할 수 있었는데 그러지 못해서 조금 아쉽다. 

평균적으로 하루에 순 공부 시간 5시간 정도 했다. (하루는 10시간 하루는 못해서...)

 


HTML/CSS 클론코딩

https://tourmaline-horse-3cf1e4.netlify.app/

 

오버워치 2

디렉터의 관점 - 플래시포인트, 시네마틱 영상과 새로운 영웅의 여명 7월 1일

tourmaline-horse-3cf1e4.netlify.app

이게 내가 만든 사이트다 ..! 아직 반응형 기능을 넣지 못해서 무조건 컴퓨터 데스크탑 전체화면으로 봐야 한다...ㅎㅎ

이렇게 1부터 10까지 만든건 이번이 거의 처음이라고 할 수 있다. (홈페이지는 처음이다)

그래서 만들면서 배웠던 것이 꽤 많았다. 초반에 코딩하던 것과 후반 가서 뭔가를 깨닫고 하는게 달랐다.

 

배운 것

1. html 구조를 짜는 방법과 css 사용에 많이 익숙해졌다.

2. JS도 사용하면서 역시 다른 코드를 막 가져오는 것보다 코드를 가져오더라도 확실하게 이해하고 복붙이 아닌 타자로 쳐서 쓰는게 나은 것 같다(왜냐면 초보니까 막 복붙보다 손으로 코드를 치면서 이해하는게 낫다)

3. 앞으로 JS를 배워가면서 API를 적극 활용해서 개인 미니 프로젝트를 많이 시도해봐야겠다고 생각했다. 여태 강의를 무작정 듣기만 했는데, 배우는 것이 분명히 있겠지만 역시 내 것으로 만들려면 직접 뭔가를 만들고 부딪혀야 하는구나를 다시금 깨닫게 되었다. 

4. 클론 코딩을 할 때 이미지를 가져오는 기본적인 것들을 알게 되었다.

5. 드롭다운 !!!!!  상단바 메뉴 드롭다운을 8번 이상 새로 갈아 엎었었다. 정말 가장 많은 시간을 들인 부분이다. 결국 원하던 대로 기능 구현을 성공했다..ㅎㅎㅎ

 

프로젝트에서 아쉬웠던 점

1. 반응형 X

2. 영웅 섹션 스와이프 부분 전체가 아닌 사진만 넘어가게 변경해야 한다.

3. 전장 섹션 스와이프 부분 전체가 아닌 사진만 넘어가게 변경해야 한다.

4. 유튜브 배경 영상 플레이 제어 버튼

5. 버튼 hover시 기능 통일

6. css 겹치는 common 부분 적극 활용을 못 한 것 같다.

 

앞으로 할 것 

1. 보충강의 - 애플 클론코딩 강의 듣기

2. JS 코테 보충강의 듣기

3. JS 모딥다로 개념 정리

4. 파이썬 추가 강의 조금씩 듣기

5. 블로그 간간히 적기 ...하핳

 

앞으로 JS 공부를 위주로 열심히 바쁘게 살아보자

 


728x90