본문 바로가기
AI + 대학원/html css

[코세라] HTML, CSS, and Javascript for Web Developers 후기 추천 블로그

by 팡귄 2022. 2. 25.

한 달 전부터 시작한 코세라의 HTML, CSS, and Javascript for Web Developers를 소개하려합니다. 총 5주차 구성입니다.
첫 1주차는 그런대로 속도가 붙는데, 2주차부터는 영상만도 27개라 권장 예상시간이 11시간입니다. 그리하여 저는.... 2주차를 끝내는데에 보름은 걸렸습니다. 그런데!! 3주차 지나가면서 html 문맹을 깨우치는 느낌ㅎㅎ과 즐거움이 있어 소개합니다! 중간마다 고비가 왔는데 나름의 극복법도 나누어보겠습니다.


그리하여 이 글은 이 강의를 들으려고 마음 먹은 초급자나, 듣고 있는데 고비를 맞이한 분들을 위한 포스팅입니다.

목차

1. 강의 내용과 체감수준

2. 과제 제출 및 같이 공부하기 좋은 블로그

1. 강의 내용과 체감수준

무엇보다 짚어가야할 것이 강의 대상이 초급자용이 아니라는 점입니다.
(신청할때 저 mixed의 뜻을 모르고..ㅠ) 초급자 용은 따로 Beginner라고 적혀 있습니다.

(+) 물론 막 건너띄면서 개념을 다루지 않습니다. 기초부터 차근차근 진행합니다. 환경설정부터 시작해요.
( ! ) 다만 아주 조금씩 몇몇 용어는 자세한 설명이 없이 등장합니다. 그럼에도 중요한 뼈대와 개념을 잡는 1주차는 html과 css를 한 번도 제대로 공부하지 않은 입장에서도 이해가 갑니다. 문맹에서 점차 탈출하는 경험을 하실 겁니다.
( ! ) 번역이 아주 조금, 간혹 애매한 부분이 있는데 그런 점들이 약간의 장애물이긴 합니다. 그럴 때는 한국어 자막을 끄고 오히려 영어 자막을 살짝 봤다가, 구글과 곁들여 강의를 들어보는 것을 추천합니다.
( ! ) 강의 촬영일이 좀 되어서 프로그램이나 웹페이지마다 조금씩 업데이트가 된 것이 있습니다. 그러다 보니 강의영상과 조금 다른 부분이 있습니다. 그러나 문제될 수준은 아닙니다! 초반 환경구성 강의에서 멘붕이 오더라도 '그냥 좀 다른 게 있네.' 하고 계속 지나오셔도 됩니다. 이후에는 크게 문제가 되지 않습니다.
그리고 매번 나오는 퀴즈는 여러 번 응시가 가능하기 때문에 너무 스트레스 받지 말고 복습퀴즈 정도로 임하면 됩니다.



2주차가 시작되면 고비가 옵니다.
( ! ) 과제 데드라인은 나중에 재설정을 통해 다시 날짜를 뒤로 잡을 수도 있습니다.

2주차 마지막에는 과제가 기다리는데, 최소한 아래의 것들을 다룰 수 있어야합니다.

깃허브 업로드, 깃허브페이지 생성, html에 css파일 링크 걸기.

깃허브는 강의 1주차에 다룹니다. 그러나 css를 링크거는 게 초보인 저에게는 나름의 과제였습니다.ㅎ
이 과제만 넘어서면, 3주차 과제는 2주차랑 매우 흡사합니다. 첫 2주차 과제를 견디면, 3주차는 더 잘 할 수 있습니다.

혹시 CSS 링크거는데 막힌 분을 위한 tmi

더보기

저와 같이 바보같은 분은 없겠지만,

index.html 에 <link href="css/style.css" rel="stylesheet" type="text/css"> 넣고

css 폴더 안에 / style.css를 넣었는지 꼭 확인해보세요.

그리고 내 깃허브 main 브랜치 안에 css폴더를 둬야합니다., css 브랜치를 만들면 안 되어요!!!!!

2. 과제 제출 및 같이 공부하기 좋은 블로그

초보자 입장에서 첫 과제는 너무 어려웠습니다.

그러나 기억할 것!

1. 과제를 낼 때 동료평가인 점을 적극 활용하라.

( ! ) 과제 데드라인은 나중에 재설정을 통해 다시 날짜를 뒤로 잡을 수도 있습니다.
( ! ) 답도 없이 산으로 가는 중이라면, 제출 후 동료평가를 하면서 다른 사람의 코드를 보며 배우세요!
( ! ) 제출하고도 수정이 되기때문에, 다시 보완해서 제출해도 됩니다!

2. 1번 방법을 활용하기 전에 힘껏 다 삽질(?)을 해보기

그러고 나서 다른 사람의 코드를 보니 이유가 보이더군요. 어찌나 깔끔히 짰는지 보이니 감탄을 금치못하였습니다ㅎㅎ. 그래도 저도 나름의 고민 깊은 이유를 가진 코드를 가지고 맞대어 본 것이 정말 큰 역할을 했어요.

3. 정석대로 읽으면서 공부하기

과제를 하면서도 이해가 안 가는 것이 투성입니다. 이 고비를 넘는 방법에 큰 역할을 한 것 html과 css관련하여 설명한 글을 한 번 정석으로 쭉 읽는 것이었습니다.
목차 1. html이란? 2. box model 3....... 이런 식으로 정리되어있는 웹문서가 꽤 양은 많지만, 2주차에서 다룬 부분까지만 차례대로 읽었더니 그동안 배운 단어들이 글 속에서 술술 찾아 읽힙니다. 그리고 1,2주차에 묵혀있던 애매한 부분이 퍼즐처럼 맞춰지더군요!
아래 블로그에 큰 도움을 받았습니다. (거의 이 포스팅을 쓴 이유라고 해도 과언이 아닙니다.)

https://nolboo.kim/blog/2013/07/22/beginners-guide-to-html-and-css-3-slash-10/#box-sizing

HTML & CSS 초보자 가이드 - 3강 : Box Model & Positioning          <!--- @n0lb00's Blog-->

원본 : A Beginner’s Guide to HTML & CSS - LESSON 3 : Box Model & Positioning HTML과 CSS를 완전히 이해하는데 필요한 하나의 원칙은 박스모델이다. “페이지의 모든 엘리먼트는 사각형 박스이다.” 박스 모델을

nolboo.kim

이것도 추천!

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS

CSS 에서 항목 크기 조정 - Web 개발 학습하기 | MDN

지금까지 다양한 수업에서는 CSS 를 사용하여 웹 페이지의 항목 크기를 조정하는 여러가지 방법을 살펴 보았습니다. 디자인의 다양한 기능이 얼마나 큰지 이해하는 것이 중요하며, 이 수업에서

developer.mozilla.org


과제를 한 번 해내고 나면 다시 또 큰 힘이 되어 3주차를 달려나갈 수 있습니다!!
마지막 완강을 꼭 이루길 바라겠습니다! (스스로에게 하는 말..)

반응형