Youtube clone coding 1 모바일 반응형 웹 만들어보기 (html & css) + git, github

 

 

TIL

 

노마드 코더 코코아톡 마지막 과제 제출을 마쳤다.

그동안 과제를 통해 다양한 Html 태그를 사용하면서

각각의 태그를 의미에 맞게 사용하는 법을 익히고

직접 화면 레이아웃을 잡고 css를 적용해보면서 

이제는 어느정도 html과 css를 능숙하게 사용할 수 있게 된 것 같다.

 

특히, 다른 사람들의 코드와 내 코드를 비교해보고 부족했던 점을 깨닫고 더 효율적인 코드를 보면서

다음 과제 때 적용해보려고 노력해보는 과정이 상당히 즐거웠고 또 큰 도움이 되었다고 생각한다.

+ 니코쌤의 코드와도 비교해보는것도...상당한 자극이 되고 확실히 다음 과제를 할 때 더 나은 코드를 작성하려고 노력하게 되면서 실력이 성장함을 느낀다.

 

내일부터 이틀간 있을 마지막 과제도 잘 클리어해서 유종의 미를 거두고 싶다.

 

그리고 지금까지 강의를 듣고 복습한 것을 잘 응용할 수 있는지 확인해보고 싶어서

미리 점찍어뒀던 드림코딩 엘리님의 유튜브 클론에 도전해보려고 한다.

단순히 강의를 듣고 따라치는 코드는 의미가 없다는 것을 알기에

강의를 듣기 전에 먼저 화면을 구현해보려고 했다.

이제 어느정도 틀은 금방금방 짤 수 있게 되었고 플렉스 박스 활용이 자유로워졌다.

헷갈렸던 css 개념은 mdn에 검색해서 찾아보면서 적용해보니까 확실히 내 것이 된 듯한 느낌이 든다.

 

특히, 미디어 쿼리를 사용해 웹을 반응형으로 만들어 보는것도 익숙해진 것 같다. 

세세한 css에 시간을 쏟기보다 반응형 웹 구현과 어느정도 개념을 탑재했는지 알고 싶었는데 목표는 이룬 것 같다.

 

github -https://github.com/wlals4264/youtube-clone.git

GitHub - wlals4264/youtube-clone

 

 

유튜브 클론 코딩 웹페이지

 

유튜브 클론 코딩 모바일 화면

 

 

다음 단계는 자바스크립트를 활용해 좀 더 생기를 넣어주기~!

니코쌤 강의를 통해 자바스크립트에 이제 첫걸음을 내기 시작했는데

1회강을 마치고 다시 듣기 전에 내가 직접 스스로 해보면서 개념들을 한 번 더 익히고 내것으로 만드는 시간이 꼭 필요하다는 생각을 늘 한다. 이제 자바스크립트가 어떤건지 맛을 봤으니 두번째 싸이클 때는 직접 만들어보고 비교해보는 식으로 들어봐야겠다.

+ 드림코딩 유튜브 클론도 자바스크립트를 어떻게 적용하는지 보고 스스로 해보자.

 

 

<오늘의 오류..>

git 레퍼지토리를 신경안쓰다보니 10k 오류가 떴고..멍청했던 지난 날을 반성하며 깃 초기화... 이제 매 프로젝트마다 꼭 깃 관리할거라고 다짐한다.. 기록이 곧 자산이다.

 

 

 

그냥 예뻐서...

 

인덱스의 생성은 언제나 짜릿해.

오늘의 교훈 깃관리 잘하자. 커밋을 잘하자.

한번 개념을 훑었으면 듣기전에 직접해보고 코드를 비교해보자.