프론트엔드 개발 참고 사이트

💖 CSS

CSS Triggers

• https://csstriggers.com/

1분 코딩 CSS 튜토리얼

• https://studiomeal.com/archives/category/tutorial

CSS 임시방편

• 본격적으로 꾸미기 전에 잠깐 적용해두는 CSS, 못나보이는 게 싫을 때 쓰면 됨
  https://andybrewer.github.io/mvp/

색 조합 추천

• https://mycolor.space//

패턴 배경

• https://www.toptal.com/designers/subtlepatterns/
• https://coolbackgrounds.io//

모양 배경

• https://www.shapedivider.app//

svg Generator

• https://www.shapedivider.app//

색상 추출

• 색상 휠
  https://color.adobe.com/ko/create/color-wheel
• 그라데이션
  https://cssgradient.io/
  https://uigradients.com/#Subu

브랜드 icons

• https://www.shapedivider.app//

shadow example

• https://getcssscan.com/css-box-shadow-examples/

---

💡아이디어

CSS 아이디어

• https://dribbble.com/

코드펜

• https://codepen.io/

vanillaJS 스몰 프로젝트

• https://vanillawebprojects.com/

Public APIs

• https://github.com/public-apis/public-apis

---

👀 유튜브 채널(프론트 + 백)

• 드림코딩 엘리

  https://www.youtube.com/c/드림코딩by엘리/videos

• 노마드 코더

  https://www.youtube.com/channel/UCUpJs89fSBXNolQGOYKn0YQ

• 개발바닥

  https://www.youtube.com/channel/UCSEOUzkGNCT_29EU_vnBYjg

• 생활코딩

  https://www.youtube.com/c/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A91

• 얄팍한 코딩사전

  https://www.youtube.com/channel/UC2nkWbaJt1KQDi2r2XclzTQ

• 라매 개발자

  https://www.youtube.com/c/라매개발자

• 한끗차IT

  https://www.youtube.com/channel/UC0e36dIjdIxIEvfW__ibwDw

• 작은개발자

  https://www.youtube.com/channel/UCeenZhDWiyzeneiDrKtzZJA

• 테크보이 워니

  https://www.youtube.com/channel/UC0uDM1xZMNBAoW2xnzhAQ7g

• 동빈나

  https://www.youtube.com/channel/UC0e36dIjdIxIEvfW__ibwDw

• 김버그 Kimbug

  https://www.youtube.com/channel/UCFDbz39kFPvU0AUpgHx4ICw

• 코남

  https://www.youtube.com/channel/UCEV0Mv07slTliSXBlV-lG2w

---

👩🏻‍💻 학습 사이트(강의)

• 드림코딩 엘리

  https://academy.dream-coding.com

• 노마드 코더

  https://nomadcoders.co

• 부스트코스

  https://www.boostcourse.org

• 인프런

  https://www.inflearn.com/?utm_source=google&utm_medium=cpc&utm_campaign=brand&gclid=Cj0KCQjw9O6HBhCrARIsADx5qCQHRo9vySGDLJZQNPYY28h4j868GcPEP2KaQSKFfPWEOgCJKc3qeKsaAjtZEALw_wcB

• 유데미

  https://www.udemy.com

---

📒 학습 사이트(문서 / 실습)

공식 사이트는 당연히 아실 것 같아 제외했습니다:)

• 모던 자바스크립트 튜토리얼

  https://ko.javascript.info/

• 벨로퍼트 모던 자바스크립트

  https://learnjs.vlpt.us/

• 딥 자바스크립트 책 온라인 무료 버전

  https://exploringjs.com/deep-js/toc.html

• 벨로퍼트 모던 리액트

  https://react.vlpt.us/

• typescript 홈페이지(-> playground)

  typescript로 작성된 것을 javascript 로 볼 수 있다.
  https://www.typescriptlang.org/

• 정규식

  연습
  http://regexpal.com
  개념 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

---

💻 코딩 연습 사이트

• pythonTutor

  python 뿐만 아니라 다른 언어도 가능. live programming 을 돌려서 코드 동작 과정을 살펴볼 수 있음!
  http://pythontutor.com/visualize.html#mode=edit

• 설치 없이 코드를 테스트 할 수 있는 사이트

  jsbin

  https://jsbin.com/?html,output

  repl.it

  https://replit.com

  codeSandbox

  https://codesandbox.io

---

💯 코딩테스트 연습 사이트(국내)

• 코드업

  https://www.codeup.kr/

• JS 기초 100제

  https://www.notion.so/JS-100-94d97d294dd14c9b911a02c840fa9f2d

• 백준

  http://www.acmicpc.net/

• 프로그래머스

  https://programmers.co.kr/

---

기술 면접

• 단골 질문(필수 개념)

  https://github.com/JaeYeopHan/Interview_Question_for_Beginner

---

기업 정보

• 스타트업 데이터베이스

  https://thevc.kr/

---

그 외

• 기술의 사용 범위를 알 수 있는 사이트
  https://caniuse.com/