[Research] 프론트엔드 관련 사이트 총정리
작성:
업데이트:
카테고리: Research
작성 동기
어제 일자로 SSAFY 우리 반의 프론트엔드 개발 스터디를 모집했다. 그동안 프론트엔드, 그리고 갖가지 개발 관련 정보들이나 사이트들을 즐겨찾기에 저장해놓았는데, 스터디장으로서 이를 스터디원들에게 공유하고 싶은 마음이 있었고, 나도 정리를 한 번 해야겠다고 생각이 든 참이었다. 그래서 공용 Repo에 README를 만들어 정리하여 공유하였다. 이를 내 개인 공간인 블로그에도 정리해서 블로그를 들러주는 분들에게도 정보를 공유하고자 한다.
FE 공통
프론트엔드 개발자 교육 과정
간단한 로드맵 및 관련 사이트 요약
Can I Use
HTML이나 CSS, JS 등의 문법, 특히 최신 문법을 브라우저가 지원하는지 확인하는 사이트
W3School
HTML, CSS, JS, SQL 기타 여러 프로그래밍 언어들의 학습과 레퍼런스를 모두 지원하는 개발계의 백화점
Free Code Camp
자바스크립트 코드를 직접 실행해가며 배울 수 있는 사이트. 웹 디자인, React, DB, API 등 다양한 커리큘럼이 있음.
PoiemaWeb
HTML, CSS, JS, TS, Bootstrap, Sass, jQuery, Node.js, Express, MongoDB 등에 대한 자세한 정보 지원 사이트
CODEPEN
HTML, CSS, JS 코드를 한목에 바로 실행하여 결과를 볼 수 있으며, 다른 사람의 코드를 보면서 영감을 받을 수도 있는 사이트
HTML
MDN
HTML계의 수학의 정석
The Open Graph Protocol
HTML Head의 op meta 태그에 대한 정보들을 알려주는 사이트
Emmet CheatSheet
HTML 개발을 수월하게 해주는 Emmet 문법의 총집합
CSS
CSS Diner
CSS Selector를 시각적으로 확인하며 재미있게 실습할 수 있는 사이트
Flexbox Froggy
Flex display를 시각적으로 확인하며 재미있게 실습할 수 있는 사이트
JavaScript
javascript30
“Build 30 Things in 30 Days with 30 Tutorials”를 모토로 30가지 다양한 자바스크립트 기술들을 보며 영감을 얻을 수 있는 사이트
모던 JavaScript 튜토리얼
자바스크립트에 대한 자세한 설명과 예제도 볼 수 있는 사이트
exlskills
영어 사이트이지만 인터페이스가 깔끔하고 설명이 간결하고 쉬우며 여러 예제가 있는 사이트
React.js
pikurate
React FE 개발자에게 유용한 링크 모음
CSS 전처리
CSS 파일을 작성할 때 더욱 편의를 제공하는 언어. SASS, SCSS, LESS 등이 있음
댓글남기기