Study/개발 Tip

2021 웹 개발 올인원 리소스 모음

AC 2021. 11. 26. 15:27

개발자 로드맵

 문서 및 참고 자료

  • MDN 웹 문서 42 - MDN 웹 문서 사이트는 웹 사이트와 프로그레시브 웹 앱 모두에 대한 HTML, CSS 및 API를 포함한 개방형 웹 기술에 대한 정보를 제공합니다.
  • DevDocs 38 - 개발자를 위한 빠르고 오프라인이며 무료인 문서 브라우저입니다. 하나의 웹 앱에서 100개 이상의 문서를 검색하세요.
  • 데브힌트 39 - 겸손한 치트 시트 모음.
  • 플렉스 - 말벤 43 - CSS 플렉스 레이아웃을 위한 시각적 치트시트.
  • 그리드 - 말벤 34 - CSS 그리드 레이아웃을 위한 시각적 치트시트.

 디자인 도구

  • 피그마 52 - Figma는 팀이 처음부터 끝까지 더 나은 디자인을 만들고, 테스트하고, 제공하는 데 도움이 됩니다.
  • 어도비 XD 26 - 실제와 같은 모양과 느낌의 디자인으로 스토리를 공유하세요. 와이어프레임, 애니메이션, 프로토타입, 공동 작업 등 모든 것이 한 곳에서 가능합니다.
  • 스케치 10 - 프리랜서부터 세계 최대 규모의 팀에 이르기까지 백만 명이 넘는 사람들이 사용하는 디자인 플랫폼을 사용하여 생성, 프로토타입 제작, 공동 작업을 수행하고 아이디어를 실현하세요.
  • 이상한 18 - 협업 순서도, 와이어프레임, 스티커 메모 및 마인드 맵과 같은 생각의 속도로 시각적으로 의사 소통합니다.

 웹 작동 방식

HTML과 CSS

 프론트 엔드 챌린지 또는 기술

  • 코드펜 20 - 온라인 코드 편집기를 사용하여 JavaScript, CSS 및 HTML을 빌드, 공유 및 학습
  • 프론트엔드 멘토 29 - 실제 프로젝트를 구축하여 프론트엔드 기술을 향상시키십시오. 전문적인 디자인 작업을 하면서 실제 HTML, CSS 및 JavaScript 문제를 해결하십시오.
  • 좋은 코드 20 - Adobe XD 파일 및 스타일 가이드가 포함된 수십 개의 프론트 엔드 코딩 과제를 탐색합니다.
  • 코딩 13 - 프론트엔드 코딩 문제를 탐색하고 시도합니다.
  • CSSBattle 15 - CSS 코드 골프는 여기! CSS 기술을 사용하여 가능한 가장 작은 코드로 대상을 복제하십시오. 아래 대상을 확인하고 CSS 기술을 테스트해 보세요.

글꼴 및 타이포그래피

  • 구글 폰트 4 - 무료로 사용하기 쉬운 웹폰트를 위한 #1 리소스입니다.
  • 폰트 아레나 9 - 무료 글꼴, 프리미엄 글꼴에 대한 무료 대안, 연구용 기사.
  • 폰조이 5 - Fontjoy는 디자이너가 최고의 글꼴 조합을 선택할 수 있도록 도와줍니다. 완벽한 페어링을 위해 다양한 글꼴을 믹스 앤 매치하세요.
  • 글꼴 쌍 7 - 글꼴 쌍은 디자이너가 Google 글꼴을 함께 결합하는 데 도움이 됩니다. 아름다운 Google 글꼴 조합 및 쌍.

색상 및 도구

  • 냉각기 14 - 디자인을 위한 아름다운 색상 조합을 생성하거나 찾아보세요.
  • 0~255 9 - 색상을 밝게 하고 어둡게 하기 쉽게 해주는 색상 도구입니다.
  • 색상 x 색상 4 - UI에 대한 접근 가능한 색상 시스템을 만드는 도구
  • 색상 및 글꼴 5 - 한 번의 클릭으로 복사 붙여넣기가 가능한 색상과 타이포그래피 조합을 찾습니다.
  • 색공간 7 - 멋진 색상 팔레트를 생성합니다.
  • CSS 그라디언트 9 - 무료 CSS 그라디언트 생성기 도구.
  • UI그라디언트 8 - 디자이너와 개발자를 위한 엄선된 아름다운 색상 그라디언트 모음.

 이미지 리소스

  • 언스플래쉬 11 - 무료 이미지 및 사진.
  • 픽셀 9 - 무료 재고 사진.
  • Pixabay 9 - 무료 이미지 또는 비디오.
  • LOADING.IO 11 - 프로젝트를 위한 무료 스피너.
  • 로티파일 8 - LottieFiles는 Lottie를 위해 설계된 애니메이션 모음입니다. 개발자를 괴롭히던 시대는 지났습니다.
  • 제거 10 - 이미지 배경을 제거합니다.
  • 사진 데이터 제거 7 - 사진을 인터넷에서 공유하기 전에 사진에서 개인 데이터를 제거하십시오.
  • 멍청한 6 - BeFunky의 올인원 온라인 크리에이티브 플랫폼에는 사진을 쉽게 편집하고, 그래픽 디자인을 만들고, 사진 콜라주를 만드는 데 필요한 모든 것이 있습니다.

 삽화

  • 열어 젖히다 25 - 필요에 맞는 일러스트레이션을 찾아 클릭하여 다운로드합니다.
  • 많은 픽셀 22 - 프로젝트에 힘을 실어줄 무료 삽화. 방문 페이지, 블로그 게시물, 이메일 뉴스레터, 소셜 미디어 그래픽 등에 상업적 또는 비상업적 방법으로 사용하십시오.
  • 드로킷 17 - 손으로 그린 ​​벡터 일러스트레이션과 아이콘 리소스는 다음 프로젝트에 적합합니다.
  • 프리픽 14 - 무료 그래픽 리소스.

아이콘

  • 아이오콘 18 - 오픈 소스 및 MIT 라이센스 아이콘 팩.
  • 글꼴 굉장 8 - 벡터 아이콘 및 소셜 로고.
  • 재료 아이콘 9 - 재료 아이콘은 일반적인 작업 및 항목에 대한 유쾌하고 아름답게 제작된 기호입니다. Android, iOS 및 웹용 디지털 제품에서 사용하려면 데스크탑에서 다운로드하십시오.
  • 아이콘8 6 - PNG 및 SVG에서 무료 아이콘을 다운로드하십시오.
  • 플랫 아이콘 3 - SVG, PSD, PNG, EPS 형식 또는 ICON FONT의 무료 벡터 아이콘.
  • 테이블러 아이콘 6 - 완전히 사용자 정의 가능한 무료 SVG 아이콘.
  • 아이코폰트 6 - 2100개 이상의 무료 아이콘을 통해 창의적인 디자인을 완성할 수 있습니다.
  • 간단한 아이콘 7 - 인기 브랜드를 위한 1463개의 무료 SVG 아이콘.

 발전기

 접근성

 사이트 분석기

  • web.dev 17 - 귀하의 웹사이트가 얼마나 잘 작동하는지 확인하십시오. 그런 다음 사용자 경험을 개선하기 위한 팁을 얻으십시오.
  • 등대 지표 6 - Lighthouse Metrics는 사이트 성능에 대한 쉬운 통찰력을 제공합니다.

Windows용 터미널

 온라인 IDE, 편집기

 자바스크립트

 NODEJS

파이썬

 반응

 아피스

  • 공개 API 21 - 개발자를 위한 1000개 이상의 무료 공개 및 공개 REST API의 집합체 목록입니다.
  • JSON자리 표시자 6 - 테스트 및 프로토타이핑을 위해 가짜 온라인 REST API를 무료로 사용할 수 있습니다.
  • 오픈웨더 3 - OpenWeatherMap의 간단하고 빠른 무료 날씨 API를 사용하면 현재 날씨 데이터, 시간별, 5일 및 16일 예측에 액세스할 수 있습니다.
  • 스왑 4 - 스타워즈 API.
  • 인용 REST API 6 - They Said So는 세계에서 가장 큰 데이터베이스인 100만 개 이상의 인용문을 보유하고 있습니다. 그리고 Quotes API를 사용하면 데이터에 쉽게 액세스할 수 있습니다.

개발자 도구

  • 우편 집배원 7 - Postman은 API 개발을 쉽게 만듭니다. API 구축의 각 단계를 간소화하고 협업을 간소화하여 더 나은 API를 더 빠르게 만들 수 있습니다.
  • 불명 증 5 - 선도적인 오픈 소스 API 클라이언트, GraphQL 및 REST를 위한 협업 API 설계 플랫폼.
  • JSON 서버 7 - 30초 이내에 (진지하게) 제로 코딩으로 완전한 가짜 REST API를 얻으십시오. 프로토타입 및 조롱을 위한 빠른 백엔드가 필요한 프론트엔드 개발자를 위해 <3으로 생성되었습니다.
  • npm 트렌드 4 - 어떤 NPM 패키지를 사용해야 합니까? 시간 경과에 따른 NPM 패키지 다운로드 통계를 비교합니다. 트렌드를 파악하고 승자를 선택하십시오.
  • 번들 공포증 5 - 번들에 npm 패키지를 추가하는 비용을 찾습니다.

 온라인 학습 자료

  • 프리코드캠프 19 - 집에서 코딩을 배웁니다. 프로젝트를 빌드합니다. 인증을 획득하세요.
  • w3schools 19 - 세계 최대의 웹 개발자 사이트. 튜토리얼 참조, 예제, 실습, 인증서.
  • 코드아카데미 7 - 원하는 직업에 필요한 기술을 배우십시오. 온라인 교육 및 코딩 학습의 리더로서.
  • 실제 파이썬 5 - 온라인에서 Python 배우기: 모든 기술 수준의 개발자를 위한 Python 자습서, Python 서적 및 과정, Python 뉴스, 코드 예제, 기사 등.
  • 오늘 밤 공부 15 - 손으로 쓴 간단한 자습서, 테스트, 비디오 자습서를 통해 Core Java, C++, DBMS, 데이터 구조 등과 같은 엔지니어링 주제를 배우기에 가장 좋은 곳입니다.
  • 프로그램 10 - 따라하기 쉬운 자습서, 예제, 온라인 컴파일러 및 참조를 통해 Python, C/C++, Java 및 기타 인기 있는 프로그래밍 언어로 코딩하는 방법을 배웁니다.
  • 자바스크립트 정보 20 - 현대 자바스크립트 튜토리얼.
  • 명령줄 튜토리얼 8 - 기본 UNIX 명령 자습서.
  • 힘내 10 - Git에 대해 배우고 실험하기 위한 대화형 챌린지 시리즈입니다. 재개하다
  • 이력서 천재 19 - 인터뷰에 응할 유일한 온라인 이력서 작성 도구입니다. 몇 분 안에 전문적인 이력서를 만들고 다운로드하고 인쇄하십시오.
  • resume.io 19 - 무료 온라인 이력서 작성기를 사용하면 몇 분 안에 완벽한 이력서를 작성할 수 있습니다. 지금 바로 전문 이력서를 작성하고 지원하는 것이 얼마나 쉬운지 확인하십시오!
  • 지금 재개 12 - 몇 분 밖에 걸리지 않습니다. 온라인 이력서 작성기는 사용하는 데 오랜 시간이 걸리지 않으며 무료로 사용할 수 있는 이력서 작성기는 그렇지 않습니다.
  • 칸바 8 - Canva의 무료 이력서 작성 도구를 사용하면 꿈의 직장에 쉽고 빠르게 지원할 수 있습니다. 수백 가지 무료 중에서 선택하십시오.
  • 노보레스메 9 - 2020년에 완벽한 이력서를 작성하고 무료 이력서 작성기를 사용하여 꿈의 직업을 얻으십시오. 템플릿을 선택합니다. 개인화하십시오.
  • 수신 재개 14 - 이력서를 쉽게 작성할 수 있습니다.

 기타

  • 우편함 5 - 일회용 테스트 이메일 받은 편지함 서비스.
  • HTTP 상태 코드 9 - 정의, 세부 정보 및 유용한 코드 참조가 있는 HTTP 상태 코드 디렉토리.
  • 도커와 함께 플레이 6 - Docker를 배울 수 있는 간단하고 상호작용적이며 재미있는 놀이터입니다.
  • 작은 도우미 8 - 웹 개발자를 위한 무료 단일 목적 온라인 도구 모음입니다.
  • 개발자를 위한 무료 14 - 개발자를 위한 무료 계층이 있는 소프트웨어 및 기타 제품 목록입니다.
  • 개발자 리소스 14 - 개발자 리소스에는 개발자 여정을 위한 모든 것이 있으며 모두 선별된 목록에 표시됩니다.

 개발자 블로그 사이트

  • 개발자 12 - 건설적이고 포괄적인 소셜 네트워크. 오픈 소스이며 근본적으로 투명합니다.
  • 중간 3 - 미디엄은 독자들이 역동적인 사고를 발견하고 전문가와 미지의 목소리가 모든 주제에 대한 글을 공유할 수 있는 개방형 플랫폼입니다.
  • 해커 뉴스 9 - Hacker News에서 최신 정보를 얻으십시오!
  • 해커 눈 12 - Hacker Noon은 실제 기술 전문가가 작성한 자유로운 이야기와 의견으로 기술 산업을 반영합니다.
  • freeCodeCamp 뉴스 4 - 무료 코드 캠프 커뮤니티 뉴스.
  • 스매싱 매거진 7 - Smashing Magazine — 웹 디자이너와 개발자를 위한 것입니다.
  • 해시노드 8 - Hashnode는 자신의 도메인에 기사를 게시할 수 있는 무료 콘텐츠 제작 플랫폼이자 커뮤니티입니다.

 유튜브 채널

LIST
저작자표시 비영리 변경금지

'Study > 개발 Tip' 카테고리의 다른 글

HTML 10줄로 증강 현실 구현하는 방법  (0) 2021.11.30
2021년 최고의 Node.js 프레임워크 10가지  (0) 2021.11.29
도메인 통신 iframe 소스 공유  (0) 2021.11.23
Nginx SSL 발급하기 (자동갱신)  (0) 2021.11.23
프로그래머가 다른 사람과 다르게 생각하는 12가지 방법  (0) 2021.11.12

'Study/개발 Tip'의 다른글

  • 현재글2021 웹 개발 올인원 리소스 모음

관련글

댓글

티스토리툴바