자발적 관심사/Data

html, css 배우고 싶은데 강의만 듣기 너무 지루하다는 당신!

2sim 2020. 9. 16. 21:46
728x90

www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ

 

Coder Coder

Practical tips for the beginner web developer.

www.youtube.com

Thanks for Coder Coder! 

coder-coder.com/learn-web-development/

 

Learn web development as an absolute beginner (2020) - Coder Coder

Trying to learn web development, but feeling lost? Check out this beginner's guide! It's full of the information you need to start learning to code now.

coder-coder.com


 

"아니~ html이랑 css강의도 대충 다 들었고 감도 있는데~

이게 강의만 들어서 될 일이냐고~ 프로젝트를 하면서 진짜 써봐야 감이 오는 거라며?

근데 프로젝트는 무슨 프로젝트부터 해야하느냔 말이야~ 난 진짜 완전 쌩 초짜인데?"

 

하면서 돌아다니다가 발견하게 된 요기!

www.freecodecamp.org/learn/

 

freeCodeCamp.org

Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.

www.freecodecamp.org

위 코드캠프는 무료이고 설명 + 실습(테스트)를 통과해서 다음 단계로 넘어가게 해주기 때문에 약간 게임같은 기분으로 코딩 공부를 할 수 있다. 완주하고 나면 수료증이 나와서 링크드인에 게시도 가능하다고 함!

하지만 Coder Coder 블로그에 따르면 위의 코드 캠프는 아직 '난 개발자는 아니고 그냥 취미로 공부해보고 싶어!'하는 사람에게 추천하는 코스라고 함!

클릭하면 출처로 이동!

 

왼쪽에 HTML에 대한 설명, 중간에 코드를 직접 타이핑하는 공간, 맨 오른쪽에는 웹에서 구현된 화면이 나옴!

 

좀 더 자세히 살펴보자면

음~ 라디오 버튼은 언제 쓰는 거고, 코드는 이렇게 짜는 거구나?

아니 영어라서 너무 읽기 불편하다고? 파파고와 구글에 번역기 돌리던가 크롬에 자동번역 사용하면 된다. 너무 겁먹지 말자. 그래도 이해가 잘 안 된다? 그럼 옆에 나온 코드를 그냥 복사해서 한번 넣어본다.

 

<lable>이라고 시작되는 부분부터 코드를 넣어봤더니 오른쪽에 동그란 선택자와 Indoor이 나타났다!

이렇게 직접 해보면서 이해할 수 있어서 너무 좋다.

이런 식으로 이 코드에 대해서 잘 이해했다면 설명 글 아래에 있는 퀘스트(과제)를 한번 깨본다!

 

단계별로 뭘 해야하는지 알려주기 때문에 하면 됨! 다하고 <Run the Tests> 클릭!
그럼 요렇게 테스트를 통과했다는 메세지가 뜬다

 

유용하다고 생각이 들면 전자메모장에 정리도 해보면서 한번 더 익힌다.

 

 

일단 여기까지가 나의 목표! 완주하고 돌아오겠다

728x90