이 글에서는 API, 호스팅 플랫폼, Cheat Sheet, 아이콘, 템플릿, 글꼴, 색상 리소스, 학습 플랫폼, CSS 게임, 코드 편집기, JavaScript 애니메이션 라이브러리 등 100개 이상의 무료 웹 개발 리소스를 공유해드리겠습니다.
웹 개발을 배울 수 있는 무료 리소스 🔥
웹사이트
- freeCodeCamp
- MDN Web Docs
- W3Schools
- Scrimba
- Codecademy
- TheOdinProject
- Frontend Mentor
- Javascript30
- Coursera
- Khan Academy
웹사이트를 위한 무료 호스팅 플랫폼 🔥
- Netlify: 웹 프로젝트를 쉽게 배포하세요.
- Render: 웹 애플리케이션과 정적 사이트를 손쉽게 호스팅하세요.
- GitHub Pages: GitHub 리포지토리에서 직접 정적 웹사이트를 호스팅하세요.
- Firebase Hosting: Firebase로 웹 앱을 손쉽게 확장하세요.
- Vercel: 자동 배포를 통해 웹사이트와 애플리케이션을 배포하세요.
- Cyclic.sh: 별도의 설정 없이 정적 사이트를 호스팅하세요.
- Appwrite: 웹 및 모바일 개발자를 위한 오픈 소스 백엔드 서버.
- Supabase: 확장 가능한 백엔드로 최신 앱을 빌드하세요.
- InfinityFree: PHP, MySQL 등이 포함된 무료 무제한 웹 호스팅.
- Surge: 프론트엔드 개발자를 위한 정적 웹 퍼블리싱.
프로젝트를 위한 무료 API 🔥
- OpenWeatherMap API:모든 위치의 현재 날씨 데이터에 액세스하세요.
- News API: 다양한 소스에서 실시간 뉴스 기사를 검색하세요.
- REST Countries API: 전 세계 국가에 대한 정보를 가져옵니다.
- Chuck Norris Jokes API: Chuck Norris 농담으로 프로젝트에 활기를 불어넣으세요.
- Open Food Facts API: 식품 정보 및 성분에 액세스하세요.
- GitHub API: GitHub 기능을 애플리케이션에 통합하세요.
- Reddit API: 게시물과 댓글을 포함한 Reddit 데이터를 가져옵니다.
- OneDrive API: Microsoft OneDrive에서 파일과 폴더를 관리하세요.
- Dogs API: 프로젝트에 사랑스러운 강아지 이미지와 정보를 가져올 수 있습니다.
- GIPHY API: GIF와 스티커를 애플리케이션에 통합하세요.
- OMDb API: 영화 및 TV 프로그램 데이터베이스에 액세스하세요.
- VirusTotal API: 의심스러운 파일과 URL에서 멀웨어를 분석하세요.
- PokeAPI: 게임 관련 프로젝트를 위해 포켓몬 데이터를 검색하세요.
- NASA API: 이미지와 정보를 포함한 풍부한 NASA 데이터에 액세스하세요.
벡터, 이미지, 일러스트레이션을 위한 무료 사이트 🔥
- Freepik: 무료 벡터, 사진, PSD, 아이콘을 찾아보세요.
- Vecteezy: 고품질 벡터 아트, 그래픽 및 일러스트레이션을 찾아보세요.
- Unsplash: 백만 개가 넘는 무료 고해상도 사진에 액세스하세요.
- Pixabay: 방대한 무료 이미지 및 동영상 라이브러리를 살펴보세요.
- Flaticon: 무료 아이콘, SVG, PSD, PNG, EPS 형식 또는 아이콘 글꼴로 다운로드하세요.
- SVGRepo: SVG를 무료로 다운로드하세요.
- SVGBackgrounds: 사용자 지정 가능한 SVG 패턴 및 배경.
- FreeDesignFile: 고품질 그래픽 디자인 리소스.
- Pexels: 재능 있는 크리에이터가 공유하는 무료 스톡 사진과 동영상을 찾아보세요.
- Vectorian: 로열티가 없는 벡터 아트, 스톡 사진 및 스톡 영상을 다운로드하세요.
프로젝트를 위한 무료 아이콘 🔥
- FontAwesome
- Flaticon
- Iconfinder
- Material Icons
- Icons8
- BoxIcons
- Feather Icons
- IcoFont
- SVGHUB
- Tabler Icons
- Iconsmind
- Iconmonstr
- SVGRepo
프로젝트를 위한 무료 폰트 🔥
- Google Fonts
- 1001FreeFonts
- Fontjoy
- Fontsly
- FontSpace
- AbstractFonts
- FontZone
- DevFonts
- DaFont
- FontSquirrel
- FontFabric
프로젝트를 위한 무료 컬러 리소스 🔥
- Coolors
- Paletton
- Colorion
- ColorHunt
- ColorHexa
- Adobe Color
- Colormind
- ColorPicker
- ColorKit
- MyColor
- ColorHub
무료 Cheat Sheet 사이트 🔥
- HTML Cheat Sheet: HTML 요소 및 속성에 대한 빠른 참조 가이드입니다.
- CSS Cheat Sheet: CSS 속성 및 선택기에 대한 종합 가이드입니다.
- JavaScript Cheat Sheet: JavaScript 구문 및 개념에 대한 편리한 참조 자료입니다.
- Git Cheat Sheet: Git에 대한 필수 명령어 및 워크플로우.
- Markdown Cheat Sheet: 서식 있는 텍스트 서식을 만들기 위한 마크다운 구문 가이드입니다.
- React Cheat Sheet: React 개념 및 구문에 대한 간략한 개요.
- Learn x in y minutes: 다양한 프로그래밍 언어와 도구를 빠르게 배울 수 있는 간결한 튜토리얼입니다.
- SQL Cheat Sheet: 포괄적인 SQL 명령어 및 쿼리 참조.
- OverAPI: 다양한 프로그래밍 언어와 프레임워크에 대한 Cheat Sheet 모음입니다.
HTML/CSS 템플릿을 위한 무료 사이트 🔥
- HTML5UP
- HTMLRev
- Free-CSS
- Templated
- FreeHTML5
- Start Bootstrap
- BootstrapMade
- Bootswatch
- BootstrapTaste
- Cruip
- Tooplate
- HTML5xCSS3
게임을 하며 CSS 배우기 🔥
- CSS Diner: 재미있는 게임으로 CSS 선택자를 연습하세요.
- Flexbox Froggy: 이 게임을 통해 CSS Flexbox를 배워보세요.
- Grid Garden: 이 게임을 통해 CSS 그리드 레이아웃을 마스터하세요.
- Flexbox Defense: CSS 플렉스박스를 배우는 게임.
- CSSBattle: CSS 코드를 작성하여 다른 사람들과 경쟁하세요.
- Flexbox Zombies: 이 게임을 통해 CSS 플렉스박스를 배워보세요.
무료 코드 편집기 🔥
자바스크립트 애니메이션 라이브러리 🔥
- Anime.js: 경량 자바스크립트 애니메이션 라이브러리.
- ScrollReveal.js: 뷰포트에 들어오는 요소를 쉽게 표시합니다.
- Popmotion: 기능적이고 유연한 자바스크립트 모션 라이브러리.
- AniJS: CSS 애니메이션을 위한 선언적 처리 라이브러리.
- Wow.js: 페이지를 아래로 스크롤할 때 CSS 애니메이션을 표시합니다.
- Typed.js: 타이핑하는 자바스크립트 라이브러리.
- Velocity.js: 가속화된 자바스크립트 애니메이션.
- GSAP: 최신 웹을 위한 전문가급 애니메이션.
마무리
도움이 되셨기를 바랍니다. 읽어주셔서 감사합니다.