Google 검색을 통해 학습을 할 수 있는 사이트는 많지만
학습할 환경을 제공해주거나 문제를 제공하는 사이트들은 검색에 노출이 적습니다.
그래서 모아봤습니다.
온라인 웹 IDE
설정하지않고 바로 사용할 수 있는 IDE사이트들 입니다.
CodeSandbox: Online Code Editor and IDE for Rapid Web Development
Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more.
codesandbox.io
StackBlitz | Instant Dev Environments | Click. Code. Done. - StackBlitz
Instant dev experiences Wait, I can enjoy web dev again? Significantly reduce time to market with matchlessly secure, instantly reproducible, fullstack dev environments which boot in milliseconds.
stackblitz.com
JSFiddle - Code Playground
jsfiddle.net
JSFiddle을 통해 일회성 프론트엔드 스크립트를 만들기 최고입니다.
링크를 통해 팀원에게 공유해보세요~
학습사이트
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://opentutorials.org/course/1
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그
opentutorials.org
위에 사이트들에서 기초를 학습하시고
(심화학습) 매운맛보실려면 아래로 들어가서 문제를 풀어보세요.
BFE.dev - 前端刷题，提升前端开发实力，拿到心仪的Offer。
BFE.dev - 前端刷题， 帮助你训练前端开发，准备前端面试，拿到心仪offer
bigfrontend.dev
CSS 학습사이트 입니다.
CSS를 어느정도 알게 되셨다면
아래 사이트에서 CSS선택자에 대해 더 공부할 수 있습니다.
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
Flex가 잘 이해가 안된다면
아래 사이트에서 Flex에 대해 더 공부할 수 있습니다.
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
전반적인 CSS를 이해하고 활용해보고 싶다면
아래 링크에서 CSS를 활용해 문제를 풀어보세요
CSSBattle
CSS Code Golfing Game is here!
cssbattle.dev