유튜브 영상: 링크
HTML / CSS 입문을 위한 30일 챌린지를 진행하였고, 진행하면서 배웠던 점과 내용들을 공유를 해볼게요 :)
HTML / CSS 30일 챌린지를 통해서 배운 점
- HTML / CSS를 활용하여 웹 페이지를 만들 수 있다.
- 정말 어설프게 알고 있던 HTML/CSS 지식을 학습할 수 있었다. (e.x, block 태그, inline 태그의 특징 / 이미지는 지정하지 않을 시 원본 크기 / width와 height 기준 등등)
- 기준이 생겼기에 모르는 내용은 찾아서 학습을 할 수 있다.
- 자연스럽게 생긴 HTML / CSS의 자신감
연습 페이지 (결과물)
2주 차에서 만든 링크트리 보다 난이도를 올렸습니다. MDN을 통해서 개념정리를 하고 3개의 웹 페이지를 더 만들면서 연습을 해봤는데요. 만들어 본 페이지는 다음과 같습니다 :)
- 랜딩페이지
- 구글
- 당근 마켓
역시나 직접 만들어 봐야 이해가 더 잘 되고 내 실력이 늘고 있는 모습을 볼 수 있습니다.
우리 모두는 지식을 쌓고 직접 활용을 해보셔야 돼요!!
만들면서 하나씩 하나씩 만드는 재미도 있고, 다 만들고 나면 이 뿌듯함도 격하게 느끼실 수 있어요 😀
구글 페이지는 다 만들고 나서도 실제하고 비슷해서 깜빡 속았답니다 ㅠ.ㅠ
독학으로 진행했던 HTML / CSS 챌린지 진행 방법
- MDN 문서를 통해서 HTML / CSS 내용을 익힌다. 이때 직접 타이핑을 하고 여러 실험을 해본다.
- 전반적인 기본기를 다졌으니 쉬워 보이고 내가 만들어 볼만한 사이트를 고른다.
- 개발자 도구를 열어서 구조 분석을 하면서 직접 사이트를 클론 하며 경험치를 쌓는다.
개념 학습만 했다고 원하시는 사이트를 바로 만드실 수 없어요. 웹 페이지 제작을 하기 위한 경험치가 부족하기 때문입니다. 그런 이유로 유명한 사이트나, 만들어 볼만한 사이트를 선택하여 직접 만들어 보시면서 경험치를 쌓으셔야겠습니다.
프런트까지 개발하는 풀스택을 원한다?
HTML / CSS를 직접 활용하고 싶다?
HTML / CSS 책을 여러 권 봤는데도 감이 안 잡힌다?
-> 반드시 MDN 문서를 읽어 보며 학습을 할 것!!!
MDN 문서: 링크
온라인 강의: 링크
MDN 문서를 읽으면서 독학이 어려우시다면, 강의도 수강을 해보실 수 있어요!! 문서의 내용이 너무 좋아서 강의도 제작을 하였습니다. 참고해 주세요 :)
'개발 기록 > 개발 로그' 카테고리의 다른 글
[JS] 성능 최적화를 위한 데이터 구조 선택 (with reduce, find) (0) | 2025.01.08 |
---|---|
[토비의 스프링 정리] #5 서비스 추상화 리뷰 및 기록 (0) | 2023.04.27 |
[git 에러] refusing to allow a Personal Access Token to create or update workflow (0) | 2023.01.27 |
Ep 2. HTML / CSS 입문 30일 챌린지 - 링크트리 만들기 (2주차) (0) | 2022.11.07 |
Ep 1. HTML / CSS 입문 30일 챌린지 (1주차) (0) | 2022.11.06 |