김버그님 유튜브 구경
<HTML이 쉽다구? 공부법>
<div>태그를 남발하면 정보의 위계질서를 파악하기 힘들다
<프론트엔드 3년차 개발자가 말하는 개발 공부 후기>
HTML-CSS-JavaScript-DOM(Document Object Model)
html,css(static,정적)
css-레이아웃,반응형,기타
syntax=grammar
<DOM이 뭐죠? jQuery는 왜들..>
API(Application Programming Interface)
Document=HTML
jQuery: DOM을 쉽게 사용(직관적),브라우저 호환도 다 해줌.
DOM Enlightenment(부엉이그림책, 한국어판 DOM을 깨우치다)
<당신이 알아야 하는 CSS>
CSS Framework(bootstrap), Architecture(클래스이름 작명,BEM), Pre-processor
<프론트엔드 개발의 하이라이트, 자바스크립트>
Package Manager(npm), Build Tools, JavsScript Framework(리액트,뷰,앵귤러),
Single Page Application(Client-Side Rendering)-html(index.html)은 하나인데, 브라우저의 javascript가 변경사항을 반영함
Data Fetching
존버는 승리합니다
<프론트엔드 개발자와 퍼블리셔, 포트폴리오 어떻게>
1단계: HTML, CSS-레이아웃,반응형웹
구글검색: free web design template 무료 웹 시안.psd
free web design psd
디자인보고 그대로 구현
2단계: JavaScript & DOM API
패스트캠퍼스 프론트엔드 개발 스쿨 1기 수강
<프론트엔드 개발자, 포트폴리오>
3단계: React(라이브러리), Vue같은 자바스크립트 프레임워크
웹 어플리케이션 만들기.(ToDo리스트)
4단계: 협업과 프로젝트 완성의 경험(백엔드)
<6개월 프론트엔드 개발자 독학러>
<div>대신 <dl><dt><dd>
github commit여러번에 걸쳐해서 과정을 보여줘야
리액트가 뷰보다 수요가 많음
<웹개발 독학 3개월>
프로젝트 구조변경 - html파일은 pages폴더에. index.html은 root폴더에 그대로.
assets폴더에 css,js,images폴더 넣어주기.
favicon폴더도 images폴더에 넣어주기
파일명은 무조건 알파벳과 숫자만. + dash-, underscore_, tilde~
가급적 소문자로lowercase
<칭찬받는 코드 작성법>
들여쓰기 space2번,
인라인 스타일 하지말기.(css파일보다 우선순위이기때문에, 유지보수 불가)
<script>는 <body>안에서 가장 끝에 넣어야 한다.
<title>은 페이지마다 다르게.
css에서 선택자와 선언부는 한줄에 적지 않는다.
body {
margin: 0;
padding: 0;
}
속성도 한줄에 적지 않는다.
선언과 선언 사이에는 한줄 띄어준다.
body {
margin: 0;
padding: 0;
}
ul {
color: blue;
}
선택자도 한줄에 적지 않는게 좋다.
body,
h1,
h2,
h3 {
margin: 0;
}
style.css에는 공통사항을
dark.css에는 dark theme관련
vscode 확장도구-prettier
.prettierrc 파일생성
{
tabWidth : 2,
useTabs : false, //tab사용x space사용
endOfLime : "lf",
printWidth : 80, //글자가 80자 이상이면 줄내림
semi : false, // 세미콜론( ; ) x
singleQuote : false
}
ctrl + shitr + p > open settings(JSON) > settings.json
<영어로 된 개발 문서 잘 읽는 법>
공식문서 이해가 안되도 계속 읽으면 된다.
<구독자10,000+ 돌파 라이브>
디자인 잘하는 꿀팁: 이쁘다고 생각하는 사이트의 요소를, F12개발자도구로 클릭해서, 속성확인. 복사해서 메모해놓기
dribble.com 디자인 눈에 익혀두기
자바스크립트 강의 - udemy - 할인많이함. 100$이상 일때 결제하면 안됨. Robert Bunch 강사