어제 일자로 SSAFY 우리 반의 프론트엔드 개발 스터디를 모집했다. 그동안 프론트엔드, 그리고 갖가지 개발 관련 정보들이나 사이트들을 즐겨찾기에 저장해놓았는데, 스터디장으로서 이를 스터디원들에게 공유하고 싶은 마음이 있었고, 나도 정리를 한 번 해야겠다고 생각이 든 참이었다. 그래서 공용 Repo에 README를 만들어 정리하여 공유하였다. 이를 내 개인 공간인 블로그에도 정리해서 블로그를 들러주는 분들에게도 정보를 공유하고자 한다.


간단한 로드맵 및 관련 사이트 요약


HTML이나 CSS, JS 등의 문법, 특히 최신 문법을 브라우저가 지원하는지 확인하는 사이트


HTML, CSS, JS, SQL 기타 여러 프로그래밍 언어들의 학습과 레퍼런스를 모두 지원하는 개발계의 백화점


자바스크립트 코드를 직접 실행해가며 배울 수 있는 사이트. 웹 디자인, React, DB, API 등 다양한 커리큘럼이 있음.


HTML, CSS, JS, TS, Bootstrap, Sass, jQuery, Node.js, Express, MongoDB 등에 대한 자세한 정보 지원 사이트


HTML, CSS, JS 코드를 한목에 바로 실행하여 결과를 볼 수 있으며, 다른 사람의 코드를 보면서 영감을 받을 수도 있는 사이트


HTML계의 수학의 정석


HTML Head의 op meta 태그에 대한 정보들을 알려주는 사이트


HTML 개발을 수월하게 해주는 Emmet 문법의 총집합


CSS Selector를 시각적으로 확인하며 재미있게 실습할 수 있는 사이트


Flex display를 시각적으로 확인하며 재미있게 실습할 수 있는 사이트



"Build 30 Things in 30 Days with 30 Tutorials"를 모토로 30가지 다양한 자바스크립트 기술들을 보며 영감을 얻을 수 있는 사이트


자바스크립트에 대한 자세한 설명과 예제도 볼 수 있는 사이트


영어 사이트이지만 인터페이스가 깔끔하고 설명이 간결하고 쉬우며 여러 예제가 있는 사이트


React FE 개발자에게 유용한 링크 모음


CSS 파일을 작성할 때 더욱 편의를 제공하는 언어. SASS, SCSS, LESS 등이 있음