프론트 엔드 개발
안녕하세요
이것은 프론트 엔드 개발을 배우고 자하는 모든 사람들을위한 오픈 소스 저장소입니다.
프론트 엔드 개발
프론트 엔드 웹 개발은 HTML, CSS 및 JavaScript를 사용하여 데이터를 그래픽 인터페이스로 변환하여 사용자가 해당 데이터를보고 상호 작용할 수있는 실무입니다.
Star Mark & Repository 공유의 지원을 보여주십시오.
프론트 엔드 개발자에게 유용한 리소스 목록
목차
- 프론트 엔드 개발
- 안녕하세요
- 프론트 엔드 개발자에게 유용한 리소스 목록
- 목차
- 로드맵
- 유용한
- 학습
- a11y
- YouTube 채널
- 블로그
- 팟 캐스트
- 코드 편집기
- 도구
- CSS 프레임 워크
- 아이콘
- 그림 물감
- 타이포그래피
- 디자인 영감
- 애니메이션 프레임 워크
- 재고 자원
- 지리 위치
- 아피스
- 모형
- 서적
- 도전 / 게임
- 학생들을위한 무료 도구
- YouTube 동영상
- 테스트
로드맵
- 로드맵-프론트 엔드 개발자를위한 잘 설명 된 단계별 로드맵.
유용한
- BGJAR- 웹 사이트, 블로그 및 앱을위한 무료 SVG 배경 생성기.
- 검사 - Mac 또는 Windows에서 직접 iOS 장치의 모바일 웹 앱 및 웹 사이트를 검사하고 디버깅하십시오.
학습
- Flexbox에 대한 완전한 가이드 | CSS- 트릭 - Flexbox 레이아웃에 대한 포괄적 인 안내서.
- 그리드에 대한 완전한 가이드 | CSS- 트릭 - 그리드 레이아웃에 대한 포괄적 인 안내서.
- Command Line Power User- ZSH, Z 및 관련 도구를 사용하여 최신 명령 줄 워크 플로우를 배우는 웹 개발자를위한 비디오 시리즈.
- CSS 그리드 - CSS 그리드에 대한 모든 비디오 과정 완료
- JS Best Of JS Faights JS 프레임 워크에 대한 최고의 Github 리포지토리를 확인하는 사이트
- Codecademy- 세계에 코딩하는 방법을 가르치는 일련의 대화식 과정. 다양한 언어에서 무료 및 유료 구독을 제공합니다.
- CODEMENTOR- 학습 여정에서 다양한 코딩 언어로 숙련 된 개발자로부터 도움을받는 도구.
- 스케일러 주제 - HTML, Java, JavaScript, Python 등과 같은 프로그래밍 언어를 학습하는 플랫폼.
- 반응 형 레이아웃 정복 - Kevin Powell (https://twitter.com/kevinjpowell). 이 과정은 그의 훌륭한 21 일 코스에서 반응 형 레이아웃을 만들기 위해 알아야 할 모든 것을 안내합니다.
- COURSERA- 스탠포드와 예일과 같은 유명한 학교에서 온 과정.
- CSS Almanac | CSS- 트릭 - CSS의 많은 기능에 대한 빠른 참조 가이드.
- CSS Grid Playground- 모질라 팀이 선별 한 시각적 가이드로 많은 코드 예제와 데모가있는 CSS의 그리드 레이아웃 기능을 배우도록 도와줍니다.
- 디자인 리소스 - Skullface의 디자인 리소스.
- Dev.to- 프로그래머가 아이디어를 공유하고 서로 성장하도록 도와줍니다.
- DevProjects- 무료 커뮤니티는 이론과 실천 사이의 격차를 해소하는 데 도움이되는 선임 개발자의 선별 된 프로젝트로 구성됩니다. !
- Dicoding Academy- 모든 사람이 기초에서 프로그래밍을 배울 수있는 곳 ( Bahasa Indonesia에서만 가능 ).
- EDX- 하버드, MIT, Wharton 등의 일련의 대학 수준의 과정.
- Egghead- "Bite -Size"세그먼트의 웹 개발 비디오 자습서. 무료 및 "Pro"(유료) 멤버십이 모두 있습니다.
- enboard | 프론트 엔드 리소스 - 프론트 엔드 개발에 대한 조직 리소스.
- Flexbox- Flexbox 지식을 레벨 업 - 온라인 좀비 중심 스토리 코스.
- Freecodecamp- 프로그래밍 프로젝트를 통합 한 무료 리소스 및 개발자 작업을위한 인터뷰 준비.
- Frontend Masters- 업계 리더의 웹 개발 비디오 자습서 (자주 업데이트). 무료 (제한된 시간)와 유료 회원이 모두 있습니다.
- Full Stack Open- Helsinski University의 풀 스택 웹 개발 코스. 반응, redux, node.js, mongodb, graphql 및 typescript를 한 번에 배우십시오! 이 과정은 최신 JavaScript 기반 웹 개발을 소개합니다. 주요 초점은 Node.js와 함께 구축 된 REST API를 사용하는 Reactjs를 사용하여 단일 페이지 응용 프로그램을 구축하는 것입니다.
- Geeksforgeeks- 괴짜를위한 컴퓨터 과학 포털.
- Khan Academy- 개발자에게 중요한 과정을 제공하는 보편적 인 온라인 학습 플랫폼.
- LearnAnything- 대화식 마인드 맵을 검색하여 무엇이든 배우십시오.
- JavaScript 배우기 - 대화식 환경에서 JavaScript를 배우십시오. 짧은 레슨을 읽고, 메모를하고, 브라우저에서 직접 도전을 완료하십시오.
- 마스터 링 마크 다운 - 문서 작성 방식을 바꿀 미니 시리즈.
- Mozilla Developer Network- 오픈 웹 기술에 대한 최신 정보.
- 완전한 웹 개발 자습서 -Lyty.dev 잘 설명 된 예제가있는 완전한 웹 개발 자습서.
- PluralSight- 업계 전문가의 무제한 온라인 개발자 교육.
- Saylor- 학생들에게 대학 학점 기회를 제공하는 개방형 온라인 학습 솔루션.
- SCRIMBA- 다양한 언어로 된 코드 스크리닝 기반 학습.
- 스카치 - 많은 웹 개발 과정. 무료 및 "프리미엄"(유료) 멤버십이 모두 있습니다.
- 검색 과정 - 선택한 트렌드 코스 및 튜토리얼.
- Sololearn- 웹 개발 학습을위한 무료 포털.
- 팀 트리 하우스 - 다양한 언어와 주제에 대한 자체 학습.
- 최신 JavaScript 튜토리얼 - JavaScript 언어에 관한 모든 것.
- Odin Project- 웹 개발 학습을위한 오픈 소스 커리큘럼
- 튜토리얼 포인트 - 대화식 코드 예제가있는 다양한 언어에 대한 튜토리얼.
- udacity- 온라인으로 배울 - 딥 러닝, 머신 러닝, 프론트 엔드 언어.
- Udemy- 온라인 학습 및 교육 시장.
- 시계 및 코드 - 지적 엄격함과 깊이를 요구하는 학생들을위한 컴퓨터 과학 학교.
- W3School- 웹 개발 참조 라이브러리. 일부 서버 측 언어뿐만 아니라 HTML, CSS, JavaScript (JQuery, Ajax 등)를 다룹니다. 설명 및 대화식 예제를 포함합니다.
- 웹 API | MDN- 초보자가 웹 API에 대해 알아야 할 모든 것.
- Bulma CSS와 Marksheet.io의 Jeremy Thomas Creator의 4 분 만에 웹 디자인.
- Wesbos- 웹 개발의 무료 및 프리미엄 코스
- Web Dev Tricks- 모든 CSS, JS, jQuery 트렌드 코드가 소스 코드가 한 곳에 있습니다. 모든 유형의 현대적인 웹 개발 및 디자인에 대한 편리한 파트너.
- Web.dev- Google 개발자의 최신 빠른 웹 사이트를위한 가이드 및 리소스.
- 프론트 엔드 웹 개발자가되면 HTML, CSS, JavaScript 및 JQuery와의 역량을 개발하십시오.
- Webglossary.info- 웹 개발 및 디자인 용 용어집, 3,500 개 이상의 항목 (2023 년 8 월에 따라)
- 웹 기술 - 웹 개발자로서 배울 수있는 유용한 기술에 대한 시각적 개요.
- 앱 양조장 - 웹 개발 기술을 다루는 하나의 플랫폼에서 모두
- Full Stack Open 2021-이 과정은 JavaScript를 사용한 최신 웹 애플리케이션 개발에 대한 소개 역할을합니다.
- DevTools Tech- 고품질 실제 프로그래밍 질문에 중점을 둔 프론트 엔드 엔지니어를위한 무료 인터뷰 준비 플랫폼.
⬆ 위로 돌아갑니다
a11y
- A11y 스타일 가이드 - KSS 문서화 된 스타일에서 생성 된 살아있는 스타일 가이드 또는 패턴 라이브러리.
- AX- 접근성 테스트 툴킷.
- Color Contrast Analyzer -CCA는 텍스트의 가독성과 그래픽 컨트롤 및 시각적 지표와 같은 시각적 요소의 대비를 결정하는 데 도움이됩니다.
- Deque University- 웹 및 모바일 접근성 기술에 대한 온라인 과정.
- W3C 웹 접근성에 대한 소개 - 전략, 표준, 리소스를 장애인이 웹에 액세스 할 수 있도록합니다.
⬆ 위로 돌아갑니다
YouTube 채널
- HTML, CSS, Bootstrap, JavaScript, Git, Github, SQL에 대한 APNA 대학 튜토리얼
- HTML, CSS, 부트 스트랩, JavaScript, React, React에 대한 Adrian Twarog- 자습서
네이티브, UI/UX 및 멋진 디자인 물건 - 1stwebDesigner- WordPress, PSD에서 HTML의 튜토리얼
- Brad Hussey- Bootstrap, Sass, JQuery, PHP, Freelancing의 튜토리얼
- CSS Tricks -Chris Coyier의 유명한 웹 디자인 및 개발 블로그 CSS Tricks의 YouTube 채널.
- CSS 튜토리얼 -CSS의 모든 기본 사항을 다루는 Husain Sir의 힌디어 튜토리얼.
- Coder 's Guide- HTML, CSS, JavaScript, Bootstrap에 대한 튜토리얼
- Codevolution- React, Vue, Angular, Mongodb, JavaScript, Mean Stack, HTML, CSS에 대한 튜토리얼.
- 영리한 프로그래머 - React, MongoDB, JavaScript, Mern Stack, HTML, CSS, React Native에 대한 튜토리얼.
- Derek Banas- C#, Visual Basic, Django, Python, Nodejs, Angularjs, Mongodb, JQuery, JavaScript, CSS, Ruby on Rails, Java, Sqlite, Android, HTML, PHP, Objective C에 대한 튜토리얼
- DEVTIPS- HTML5, CSS, SASS, Bootstrap, Foundation, JQuery, Ruby on Rails, Github에 대한 튜토리얼.
- DesignCourse- UI/UX Design 또는 HTML5, CSS, SASS, 애니메이션 라이브러리에 대한 튜토리얼.
- Dennis Ivy- Django & Flask Full -Stack 웹 개발 프로젝트에 대한 튜토리얼
- Elzero Web School- 아랍어 전용
- Freecodecamp- jQuery, JavaScript, React, Math, Science, Software Engineering, 오픈 소스 소프트웨어에 대한 튜토리얼
- 재미있는 기능 - JavaScript, React, Functional Programming, GraphQL, 개발자로서의 튜토리얼
- Google Chrome 개발자 - 웹 개발 기술을 레벨링하는 데 도움이되는 Pro -Tips, Insights 및 Techniques를 통해 최신 웹 개발에 대한 최신 및 가장 큰 대화.
- Kevin Powell- HTML, CSS 튜토리얼, 간단한 방식으로 CSS를 더 잘 이해하는 데 도움이됩니다.
- LearnCode.academy- HTML, CSS, jQuery, JavaScript, React JS / Redux, Node JS의 자습서
- LevelUptuts- HTML, CSS, Sass, WordPress, Magento, Drupal, React, Meteor 튜토리얼
- Mackenzie Child- 코드 챌린지 디자인 - UI에 대한 튜토리얼, 여러 스타일의 사이트를 설계 및 코딩하는 방법.
- 코딩 트레인 - 자바 스크립트, 노드, 머신 러닝, 신경망, 알고리즘에 대한 자습서
- NET NINJA- HTML, CSS, JQuery, JavaScript, Git 및 Github, Bootstrap, MangoDB, WordPress, PSD에서 HTML 등의 튜토리얼.
- THEDIGICRAFT- HTML, CSS, JQuery, PHP, Ajax, Bootstrap, MySQL 튜토리얼.
- THENEWBOSTON- ECMAScript 6, React JS / Redux, Django, Angular 2, Gulp, Git, Python, Seo, Sass, SCSS, Grunt, Illustrator, Mongodb, PHP, Java, Ruby, 객관적인 C
- Traversy Media- HTML, CSS, JQuery, PHP, Ajax, Bootstrap, MySQL, ECMascript 6, React JS / Redux, Django, Angular, Ionic, Gulp, GIT, Python, Node JS, PHP, Laravel, Cake PHP, Symfony, Codeigniter, Codeigniter, 프로그래밍 팁.
- CodeWithHarry- HTML, CSS, JavaScript, Node JS, MongoDB 및 호스팅의 자습서.
- MOSH로 프로그래밍 - React, Nodejs, Python, JavaScript, Angular, Typescipt 및 C#에 대한 튜토리얼.
- Dev Ed- 웹 개발, 웹 디자인, 3D 모델링, Figma와 같은 도구 등
- Web Dev Simplified- HTML, JavaScript, CSS 및 동일한 프로젝트 및 기타 프레임 워크를 사용하여 웹 사이트 개발 학습
- Mozilla Developer- 웹 디자이너, 웹 개발자 또는 웹 사이트 또는 웹 앱 제작과 관련된 사람으로서의 작업을 도와주는 비디오
- Academind- 항상 배울 것이 있습니다. 각도 자습서 나 안내서, vue.js, 기타 프론트 엔드 개발 컨텐츠 또는 데이터 과학 주제 또는 기타 사항을보고 싶든
- React, Redux, Next JS & React Native의 Sonny Sangha 프로젝트 자습서
- WB 웹 개발 - HTML, CSS, Bootstrap, Sass, JavaScript, Git 및 Github, Mongodb, Nodejs, Reactjs에 대한 튜토리얼
- 온라인 튜토리얼- 프론트 엔드 웹 개발의 최고 클래스 컨텐츠. HTML, CSS 및 JavaScript에 대한 독점 튜토리얼이 놀라운 효과가 있습니다. 모든 프론트 엔드 개발자를 위해 반드시 방문해야합니다
- Frontend 인터뷰 팁, 인터뷰 경험 및 JavaScript의 특별 핵심 개념에 대한 Akshay Saini-Videos.
- 고급 프론트 엔드 개념, 인터뷰 질문 및 경험에 대한 DevTools 기술 및 중급에서 고급 JavaScript 개념에 중점을 둡니다.
⬆ 위로 돌아갑니다
블로그
- 10 JavaScript Concepts 과정을 알아야합니다. 기본에서 Advance JavaScript 개념까지 모든 JavaScript 개발자가 알아야 할 간단한 방식으로 설명합니다.
- 더 창의적 인 100 가지 방법 - Shaunta Grimes에서 더 창의적 인 100 가지 방법.
- 2017 Design Roundup- 2017 년 모든 Codrops 웹 개발 리소스 수집.
- 디자인을 잊어 버린 50 가지 - UX 전동 공구 - 중간 - 50 가지 - Jon Moore에서 디자인하는 것을 잊었을 것입니다.
- Code 2K17의 ACM 달 : Moodify Building -ACM Code 2K17 : Ajay NS의 Moodify Building.
- GitHub & CloudFlare를 사용하여 웹 사이트 설정을위한 그림 가이드 - Karan Thakkar의 Github 및 CloudFlare를 사용하여 웹 사이트 설정을위한 그림 가이드입니다.
- Brad Frost 블로그 - CSS & HTML의 Atomic Design, Building Design Systems의 저자.
- 최고의 무료 글꼴 -70+ 디자이너를위한 70+ 최고의 무료 글꼴 - 2019 년 상업용 무료 무료
- CSS 애니메이션 vs 웹 애니메이션 API : 사례 연구
- CSS Tricks- CSS, HTML, JavaScript 및 웹 디자인 및 개발과 관련된 모든 것들에 관한 일일 기사.
- 디자인과 창의성 인용문 -72 마가렛 켈시의 디자인과 창의성에 대한 인용문.
- 디자인 리소스 - 설계에 대한 작업 및 학습을위한 리소스 목록.
- 변화를위한 디자인 - Viba Mohan의 재생 및 지속 가능한 디자인에 관한 기사.
- 도메인 등록 기관 DNS 및 호스팅 - 도메인 레지스트라, DNS 및 Kirby Kohlmorge의 호스팅
- Gatsby에 대한 초보자 안내서 -Gatsby.js : Aman Mittal의 React 정적 사이트 생성기 설정 및 사용 방법
- 2016,2017, 2018의 ECMAScript의 모든 예
- Flavio Copes Tutorials -Flavio Cops의 JavaScript 및 웹 개발에 대한 일일 튜토리얼
- URL에서 대화식 - 월드 와이드 웹의 작동 방식에 대한 설명.
- Frontend Dogma- 프론트 엔드 개발을위한 뉴스 및 도구, 일반적으로 하루에 두 번 업데이트됩니다.
- Frontend Weekly- 일주일에 한 번받은 편지함에 전달되는 프론트 엔드 개발과 관련된 최고의 기사, 링크 및 뉴스.
- CSS로 BitsOfcode 로고를 애니메이션 한 방법 - 사용자 정의 CSS 애니메이션의 프로세스 기사.
- Minmax () 함수 작동 방식 - CSS 그리드 레이아웃에 사용할 수있는 CSS Minmax () 함수의 설명.
- 기술을 처음 접할 때 인상적인 포트폴리오를 구축하는 방법 - Randle Browning의 기술을 처음 접할 때 인상적인 포트폴리오를 구축하는 방법
- 절대 초보자를위한 JavaScript 및 HTML을 사용하여 임의의 인용 생성기를 구축하는 방법 - JavaScript 및 HTML을 사용하여 임의의 인용 생성기를 구축하는 방법, Sophanarith Sok의 절대 초보자.
- 첫 번째 VUE 구성 요소를 구축하는 방법 -Sarah Dayan의 VUE 구성 요소를 구축하기위한 초보자 프로젝트 자습서.
- 신경 네트워크를 처음부터 코딩하자 - 파트 1 - Typeme - Medium - Charles Fried에서 처음부터 신경망을 코딩하자
- Muzli의 Music Player Inspirations- Muzli의 Music Player Inspiration 2017.
- 프론트 엔드 체크리스트 - 제작에 웹 사이트를 시작하기 전에 필요한 모든 요소의 철저한 목록입니다.
- 14 살 밖에되지 않았을 때 챗봇을 구축하고 마케팅하는 것이 어떤 것인지 - Alec Jones에서 14 살 밖에되지 않았을 때 챗봇을 구축하고 마케팅하는 것이 어떤 것인지
- 접을 수있는 마진과의 거래는 무엇입니까? - CSS의 붕괴 마진 기능에 대한 설명.
- Fernandocomet의 UX에 대한 UX- 선별 된 리소스 목록에 대한 잘 관리 된 목록.
- 에어 비앤비 오픈 소스 - 엔지니어링 및 데이터 과학 기사 및 오픈 소스 프로젝트.
- JS의 비용 - Addy Osmani의 귀중한 사용자 경험을 위해 JavaScript를 효율적으로 제공하는 방법.
- CSS Scroll -SNAP- CSS 스크롤 스냅에 대한 튜토리얼을 사용하면 사용자가 스크롤을 완료 한 후 뷰포트를 잠글 수 있습니다.
- Chrome의 예압, 프리 페치 및 우선 순위 - Addy Osmani의 Chrome의 Neworking Stack에서 웹 로딩 프리미티브가 어떻게 작동하는지에 대한 기사.
- 자신을위한 학습 - 전통 중국어
- 웹 개발자를위한 IDE- 웹 개발을위한 IDE를 선택할 때 고려해야 할 요소 및 좋은 옵션의 예.
- 2020의 상위 8 월 API- 2020 년 상위 8 개의 날씨 API- 개발자를위한 최고의 무료 날씨 API
- Digital Ocean Community Tutorials- 전문가의 무료 튜토리얼 컬렉션. 모두 Digital Ocean Community에서 기여했습니다.
- 초보자를위한 React - 프론트 엔드 개발자를위한 React.js 핸드북 - 프론트 엔드 개발자를위한 React.js 핸드북
- Ultimate React Resources - 블로그에는 블로그 게시물, 무료 전자 책, 선별 된 목록이있는 Github 리포지토리, 실제 코드가있는 실제 세계에서 React.js의 실질적인 구현이 포함되어 있습니다.
- CSS 그리드에 대한 완전한 소개 - 다른 복잡한 레이아웃을 구축하여 CSS 그리드의 기본 사항을 배우는 블로그.
- Rado의 블로그) - 반응 의존성 및 구현, GraphQL 등에 대한 기사를 블로그로 연결하는 블로그!
- Roblog- 기술, JavaScript, Node.js 및 웹 개발과 관련된 모든 것들을위한 목적지.
- Monica Powell 블로그 - JavaScript, React, Gatsby 및 Git의 멋진 블로그.
- DevTools Tech- 프론트 엔드 엔지니어를 위해 신중하게 선별 된 고품질 리소스.
채용
팟 캐스트
- 코딩 블록 - 전문 프로그래머 팀의 소프트웨어 개발 팟 캐스트.
- Frontend Happy Hour- 업계 패널리스트의 프론트 엔드, 소프트웨어 및 커리어 개발 팟 캐스트.
- JavaScript Jabber- JavaScript 개발자를위한 팟 캐스트. 웹 사이트는 다른 많은 프로그래밍 관련 팟 캐스트도 제공합니다.
- 구문 - Wes Bos와 Scott Tolinski의 Front End Development Podcasts Level Up Tuts.
⬆ 위로 돌아갑니다
코드 편집기
Atom -Atom은 현대적이고 접근하기 쉽지만 핵심에 해킹 가능하는 텍스트 편집기입니다. 구성 파일을 만지지 않고도 무엇이든 할 수 있도록 사용자 정의 할 수있는 도구입니다. 오픈 소스 | 모든 플랫폼
브래킷 - 초점을 맞춘 비주얼 도구와 전처리 지원을 제공하는 브래킷은 브라우저에서 쉽게 디자인 할 수있는 최신 텍스트 편집기입니다. 웹 디자이너와 프론트 엔드 개발자를 위해 처음부터 제작되었습니다. 오픈 소스 | 모든 플랫폼
Geany -Geany는 작고 경량 통합 개발 환경입니다.
Intellijidea- Jetbrains의 보편적 인 IDE. Code-Completion, Integrationa 및 버전 제어 시스템 (VCS)이 있습니다.
메모장 ++ - 메모장 ++는 무료 ( "프리 스피치"및 "무료 맥주"에서와 같이) 소스 코드 편집기 및 여러 언어를 지원하는 메모장 교체품입니다. Windows 전용 -Python Language를 위해 특별히 -PyCharm을 사용하는 것은 코드 분석, 그래픽 디버거, 통합 장치 테스터, 버전 제어 시스템과의 통합 및 Django와의 웹 개발을 지원하고 Anaconda와의 데이터 과학을 지원합니다. 모든 플랫폼 | 오픈 소스
숭고한 텍스트 - 코드, 마크 업 및 산문을위한 정교한 텍스트 편집기. 모든 플랫폼
VIM -VIM은 모든 종류의 텍스트를 효율적으로 만들고 변경하기위한 매우 구성 가능한 텍스트 편집기입니다. 대부분의 UNIX 시스템과 Apple OS X와 함께 "VI"로 포함됩니다.
Visual Studio Code- 코드 편집 재정의. Intellisense, GIT 명령 내장, 확장 가능 및 사용자 정의 가능한 구문 강조 및 자동 완성이 있습니다. 오픈 소스 | 모든 플랫폼
Webstorm- 가장 똑똑한 JavaScript IDE 인 Webstorm은 JavaScript 및 관련 기술을위한 통합 개발 환경입니다. 모든 플랫폼
Ultraedit -Ultraedit는 Mac, Windows 및 Linux에서 사용할 수있는 강력한 HTML 및 코드 편집기입니다. 가장 인기있는 프로그래밍 언어에 대한 내장 파일 비교 유틸리티, 자동 완성, 고급 레이아웃, 멀티 탭, 멀티 팬 편집기 및 구문 강조 표시가 제공됩니다.
Nano -GNU Nano는 Unix -like OS의 텍스트 편집기입니다.
STACKBLITZ- JavaScript 프레임 워크 및 라이브러리의 온라인 오픈 소스 강력한 코드 편집기, GitHub 가져 오기, 라이브 서버 및 편집기에서 GitHub 로의 직접 커밋과 같은 멋진 기능이 있습니다!
⬆ 위로 돌아갑니다
비주얼 스튜디오 코드 확장
- 자동 이름 바꾸기 태그 - 하나의 HTML/XML 태그 이름을 바꾸면 쌍을 이루는 HTML/XML 태그의 이름을 자동으로 바꿉니다.
- 더 나은 의견 -이 확장 색상 코드는 다양한 유형의 주석을 제공하여 다른 의미를 부여하고 코드의 나머지 부분에서 두드러집니다.
- 브래킷 쌍 Colorizor- 코드를 훨씬 더 읽기 쉽게 만들기위한 색상 일치 브래킷.
- 코드 맞춤법 검사기 - Camelcase 코드와 잘 어울리는 기본 맞춤법 검사기.
- ES Lint- 코드 오류 및 모범 사례를 강조하기위한 JavaScript Linter.
- 포맷 토글 - 간단한 클릭으로 Formatter (Pretier, Beautify,…)를 전환 할 수있는 Code Extension.
- git history- git 로그, 파일 기록, 비교 또는 커밋보기
- GITLENS- 시각적 스튜디오 코드에 내장 된 GIT 기능을 과급합니다. GIT 비난 주석 및 코드 렌즈를 통해 한눈에 코드 작성자를 시각화하고 GIT 저장소를 원활하게 탐색하고 탐색하며 강력한 비교 명령을 통해 귀중한 통찰력을 얻습니다.
- JS 스 니펫 -이 확장에는 vs 코드 편집기 용 ES6 구문의 JavaScript 용 코드 스 니펫이 포함되어 있습니다 (JavaScript 및 TypeScript 지원).
- 라이브 서버 - 라이브 브라우저 Reload가있는 빠른 개발 라이브 서버.
- 재료 아이콘 테마 - Google 자료 테마 아이콘 팩.
- Path Intellisense- 인용문의 경로를 입력하기 시작하면 디렉토리 및 파일 이름에 대한 IntelliSense를 얻게됩니다.
- Peacock- 작업 공간의 작업 공간 색상을 미묘하게 변경하십시오. 여러 대 코드 인스턴스가 있고 어느 것이 어느 것을 신속하게 식별하고 싶을 때 이상적입니다.
- POLACODE- 기사와 트윗에서 볼 수있는 멋진 코드 스크린 샷을 알고 있습니까? 글쎄, 아마도 그들은 아마도 폴라 코드에서 왔을 것입니다. 사용하기가 매우 간단합니다. 코드를 클립 보드에 복사하고 확장자를 열고 코드를 붙여 넣고 클릭하여 이미지를 저장하십시오!
- 더 Pretier- 코드를 저장시 자동으로 포맷하십시오.
- Quokka.js -Quokka.js는 빠른 JavaScript / TypeScript 프로토 타이핑을위한 개발자 생산성 도구입니다. 런타임 값은 입력 할 때 코드 옆의 IDE에 업데이트 및 표시됩니다.
- 설정 동기화 - 설정 동기화 확장 GitHub에서 설정을 저장합니다. 그런 다음 하나의 명령으로 새 버전의 VS 코드에로드 할 수 있습니다.
⬆ 위로 돌아갑니다
도구
- API 디렉토리 | 프로그래밍 가능한 웹
- Animista -CSS 애니메이션 사전 설정/생성기
- 더 나은 코드 허브 - 소프트웨어 엔지니어링 가이드 라인에 대해 GitHub 코드베이스를 확인하고 피드백을 제공합니다.
- Browserling- 가상 머신의 라이브 대화식 크로스 브라우저 테스트.
- LambDatest- 2000+ 브라우저 및 OS의 테스트 웹 사이트 및 웹 앱.
- Browserstack- 다양한 브라우저 및 모바일 장치에서 웹 사이트 및 모바일 앱을 테스트합니다.
- 사용할 수 있습니까?
- CheckBot- SEO, 속도 및 보안 문제에 대한 웹 사이트를 테스트하는 브라우저 확장
- Codepen- 브라우저에서 코드를 작성하고 구축 할 때 결과를 볼 수있는 사회 개발 환경.
- Codeply- 디자이너 및 개발자가 프론트 엔드 프레임 워크를 비교, 프로토 타입 및 테스트 할 수있는 HTML, CSS, JavaScript 편집기 놀이터.
- Codesandbox- 웹 개발을위한 Instant IDE 및 프로토 타이핑 도구.
- 온라인 코드 편집기에서 새 바이올린 -JSFIDDLE- 테스트 JS, CSS, HTML 또는 CoffeeScript를 만듭니다.
- Critical Path CSS Generator -Jonas Ohlsson의 CSS 생성기는 웹 페이지를 렌더링하기 위해 브라우저가 통과 해야하는 CS의 양을 줄입니다.
- CrossBrowserTesting 앱 - 모바일 및 데스크탑 웹 브라우저에서 기능 웹 테스트를 실행하기위한 웹 서비스.
- CSS 치트 시트 - CSS 선택기 및 속성에 대한 한 페이지 참조를 사용하기가 매우 쉽습니다. 또한 Flexbox 및 그리드 카테고리도 포함되어 있습니다.
- CSS 미니 파이어 - CSS 파일을 최소화하십시오!
- CSS 참조 - CSS에 대한 무료 비주얼 가이드.
- CSS 트리거 - 주어진 CSS 속성을 돌릴 때 트리거되는 것을 알려줍니다.
- CSS 필터 - 대화식 CSS 필터 생성기
- Colorlisa- 훌륭한 아티스트를 기반으로하는 컬러 팔레트 생성기
- DirtyMarkup- HTML, CSS 및 JavaScript 코드를 정리하십시오.
- ExtendsClass- 브라우저에서 직접 사용할 수있는 기능을 추가하는 도구를 제공합니다.
- Favicon Generator- 이미지를 업로드하고 웹 사이트의 Favicon을 생성하십시오.
- iOS/Google Progressive Web App Manifest 용 Favicon Generator -Online 도구 - 다양한 플랫폼에서 Favicon을 테스트합니다.
- 무료 개발자 물건 - 개발자가 사용할 수있는 개발자를위한 무료 물건 목록. 일부 서비스는 영원히 무료이거나 적어도 1 년 동안 무료 계층이 있습니다.
- 개발자에게 무료 -이 웹 사이트에는 프론트 엔드 개발자뿐만 아니라 모든 종류의 개발자를 위해 광범위한 무료 및 유료 리소스 목록이 있습니다.
- 텍스트를 기반으로 Favicon을 생성 - 텍스트, 이미지 또는 이모티콘에서 Favicon을 생성합니다.
- 파도 얻기 - 웹 디자인에 사용하기 위해 다양한 유형의 SVG 파를 생성하십시오.
- 글리치 - 글리치는 Google Docs에서 함께 일하는 것과 같습니다. 사람들은 동시에 동일한 프로젝트를 수행 할 수 있습니다.
- 그래픽 생성기 - 일부 일반적인 프론트 엔드 애플리케이션에 대한 그래픽을 생성합니다.
- Google Analytics- 웹 사이트 트래픽을 추적하고보고하는 웹 서비스.
- Google APIS Explorer- 다양한 Google API를 대화식으로 탐색하는 도구.
- Sublime Text의 JavaScript 콘솔 - JavaScript를 테스트하고 Sublime Text 3에서 빌드 시스템을 통해 실행하는 자습서 3.
- jQuery mega 치트 시트 - jQuery selectros의 치트 시트, 조작, 이벤트 등 PDF 형식.
- JS BIN- HTML, CSS 및 JS 용 라이브 페이스트 빈 및 다양한 프로세서.
- Lighthouse- 웹 페이지의 품질을 향상시키기위한 오픈 소스, 자동화 된 도구.
- Modern JavaScript 치트 시트 - 이것은 Manuel Beaudru의 JavaScript 팁과 개념의 훌륭한 모음입니다. JavaScript 및 기타 관련 프레임 워크를 시작하면 익숙해 져야 할 많은 것들에 대한 훌륭한 개요로 작동합니다.
- 노드 패키지 관리자 (NPM) - JavaScript의 패키지 관리자.
- 원사 - NPM과 같은 JavaScript의 패키지 관리자.
- ResponsInator- 인기있는 장치에서 반응 형 사이트가 어떻게 보이는지 복제하십시오.
- React Cheat Sheet -Documentation Based 웹 사이트도 진행성 웹 앱도 오프라인에서도 잘 작동합니다. 키워드로 검색하거나 사전 정의 된 필터 중 하나를 선택할 수 있습니다.
- 반응 그리드 시스템 - 유연한 그리드를 생성하여 반응 형 웹 사이트를 만듭니다.
- 정규 표현식 (Regex) 편집자 - 정규 표현식을 만들고 확인하는 데 도움이됩니다.
- Sans Francisco- 디자이너를위한 도구 - 디자이너를위한 도구 모음
- ScreenSizemap- 장치 독립적 인 픽셀에서 화면 크기의 비교.
- Sizzy : 브라우저 테스트 도구 - 한 번에 여러 장치에서 반응 형 디자인을 개발하고 테스트하기위한 도구.
- 스택 오버플로 - 개발자가 질문을하고 답변을 얻을 수있는 온라인 커뮤니티.
- W3C 마크 업 유효성 검사 서비스 - HTML, XHTML, SMIL, MATHML 등의 웹 문서의 마크 업 유효성을 확인합니다.
- W3C CSS 유효성 검사 서비스 - 스타일 시트로 CSS 및 XHTML 문서의 유효성을 확인합니다.
- 시간 도우미 - Millis를 DateTimes로 변환하고 그 반대도 마찬가지입니다.
- TinypNG -PNG 및 JPEG 압축/최적화기
- 웹 개발자 점검 목록 - 웹 개발 중에 다루는 것들에 대한 점검표를 분류했습니다.
- 웹에서 성능을 최적화하기위한 진보적 인 툴링 - 페이지 성능을 향상시키는 데 사용할 수있는 도구 목록.
- STACKBLITZ- 링크를 통해 공유 할 수있는 Angular 및 React 프로젝트의 온라인 IDE.
- Postman (API 테스트 도구) - API 클라이언트를 작성, 공유, 테스트 및 문서화 할 수 있습니다.
- 무료 부트 스트랩 5 치트 시트 - 부트 스트랩 5 클래스, 변수 및 믹스 인의 대화식 목록입니다.
- JSONT- 온라인 간단하고 강력한 JSON 서식 도구.
⬆ 위로 돌아갑니다
CSS 프레임 워크
- 부트 스트랩 - 책임있는 모바일 우선 사이트를 설계하고 사용자 정의합니다.
- Bulma CSS- Flexbox를 기반으로 한 모듈 식 오픈 소스 프레임 워크.
- 카라멜 - 단순하고 현대적이고 반응이 좋은 웹 사이트 프레임 워크.
- 추기경 - 성능 및 확장 성을위한 모듈 식 모바일 우선 프레임 워크.
- 요소 CSS -VUE 2.0 기반 구성 요소 라이브러리.
- Foundation CSS- 반응 형 프론트 엔드 프레임 워크 제품군.
- HARMMOON- 대시 보드 및 도구를 구축하기위한 완전히 사용자 정의 할 수 있고 반응이 좋은 프론트 엔드 프레임 워크.
- JEET- SASS 및 스타일러스 용 분수 그리드 시스템.
- 적은 - 적응 형 웹 사이트 설계를위한 CSS 그리드 시스템.
- 재료 설계 라이트 - 바닐라 CSS, JS 및 HTML에서 재료 설계 구성 요소 구현.
- CSS- CSS 프레임 워크를 구체화하십시오. 모든 플랫폼의 모든 제품에서 통합 된 사용자 경험을 허용합니다.
- 밀리그램 - 미니멀리스트 CSS 프레임 워크.
- 깔끔한 - 가볍고 유연한 Sass 그리드.
- 꽃잎 CSS- 가벼운 CSS UI 프레임 워크를 기반으로합니다.
- 순수한 CSS- 작고 반응이 좋은 CSS 모듈 세트.
- Semantic UI- 테마 및 반응 형 디자인을 위해 설계된 UI 프레임 워크.
- SKELETON CSS- 반응 형 프로젝트를 시작하기위한 단순하고 반응 형 보일러 플레이트.
- Specter CSS- 더 빠르고 확장 가능한 개발을위한 가벼운, 반응 형이며 현대적인 CSS 프레임 워크.
- TACIT- 그래픽 디자인의 초보자를위한 원시적이지만 매력적인 프레임 워크.
- Tailwindcss- 고도로 사용자 정의 가능하고 저수준 CSS 프레임 워크.
- UI 키트 - 웹 인터페이스를위한 경량 및 모듈 식 프론트 엔드 프레임 워크.
- 무소지 - 세트 수의 열이 아닌 백분율을 기준으로 유체 그리드 시스템.
- 중요한 CSS- SASS 및 SLIM으로 구축 된 웹 응용 프로그램을위한 최소 침습적 CSS 프레임 워크.
⬆ 위로 돌아갑니다
아이콘
- 브랜디콘 - 아이콘 글꼴 생성기 및 뷰어.
- 플랫 아이콘 - PNG, SVG, EPS, PSD 및 Base64 형식의 무료 아이콘 데이터베이스.
- 글꼴 굉장한 - 오픈 소스 아이콘 세트 및 일관된 스타일의 툴킷.
- GLYPHICON- 부트 스트랩, 기타 CSS 프레임 워크 및 모든 웹 프로젝트와 함께 사용할 아이콘.
- Google 자재 디자인 아이콘 - 재료 아이콘의 개요와이를 프로젝트에 통합하는 방법.
- Icomoon- 아이콘 글꼴 생성기 및 아이콘 컬렉션.
- ICONGRAM- 다른 소스의 아이콘 팩 모음.
- ICONSVG- 프로젝트를위한 빠른 사용자 정의 가능한 아이콘
- ICONS8- 일관되게 스타일링되고 사용자 정의 가능한 아이콘 팩.
- 이오니콘 - SVG 및 WebFont의 오픈 소스 아이콘.
- Mapicons- Google Maps API 및 Google Places SVG 마커 및 아이콘 레이블을 사용하는 Google Places API와 함께 사용하는 아이콘 글꼴.
- 재료 디자인 상징적 인 글꼴 - 웹 사이트 또는 데스크탑에서 쉬운 SVG를위한 전체 소재 디자인 아이콘.
- MFGLABS -ICONSET- 웹 폰트 및 CSS에서 사용할 수 있도록 MFG Lab의 아이콘 세트.
- Micon- Windows 글꼴 및 CSS 툴킷.
- 명사 프로젝트 - 포괄적 인 아이콘 컬렉션.
- Octicons- 프로젝트를위한 Github 아이콘 모음.
- 오픈 아이코닉, 무료 및 오픈 아이콘 세트 - SVG, WebFont 및 래스터 형식으로 세트 한 오픈 소스 아이콘.
- OpenWebicons- 확장 가능한 벡터 아이콘 및 로고를위한 WebFont.
- Reacticons -SVG 인기있는 아이콘 팩의 아이콘에 반응합니다.
- Remixicon- 오픈 소스 중립 스타일 아이콘 시스템.
- Shape.so- 사용자 정의 가능한 아이콘 및 애니메이션 모음.
- Stackicon- 소셜 브랜드를위한 맞춤형 아이콘.
- 타이피 콘-웹 폰트에 포함 된 무료 벡터 아이콘.
- 날씨 아이콘 - 날씨 테마 아이콘 글꼴 및 CSS.
- Zocial | CSS3 버튼 세트 - CSS를 사용하여 소셜 버튼을 만들고 소셜 아이콘을 글꼴로 만듭니다.
⬆ 위로 돌아갑니다
그림 물감
- Adobe Color- 컬러 휠, 추출물 테마, 추출물 그라디언트, 접근성 도구 등
- BADA55 컬러 코드 - LEET 단어를 CSS 육각 색상으로 변환합니다.
- 중앙 색상 - 브랜딩에 가장 적합한 수작업 컬러 팔레트 컬렉션.
- 컬러 헌트 - 아름다운 컬러 팔레트의 열린 컬렉션
- Natalya Shelburne의 색상 이론 - 코딩하는 사람들을위한 실용적인 색 이론 : 예제와 함께 색상 사용에 대한 튜토리얼
- 컬러 휠 | 색 구성표 - Adobe Color CC- 다른 색상 규칙을 가진 대화식 컬러 휠 (조정 가능)
- Colordesigner 도구 -이 도구의 주요 목적은 색상 팔레트를 구축하는 데 도움이되고 색상을 기반으로 색조와 색조를 생성하는 것입니다. 색상을 선택하면 앱이 나머지를 수행합니다. 더 많은 컨트롤을 위해 미리 선택된 색상 또는 컬러 피커를 사용할 수 있습니다. 여기에서 다른 도구도 확인하십시오
- ColorMind -Bootstrap -ColorMind는 딥 러닝을 사용하여 컬러 팔레트를 라이브 웹 사이트 모형에 자동으로 적용하는 색 구성표 생성기입니다.
- 쿨러- 많은 기능을 가진 초고속 색 구성표 제작자
- CSS Gradient- 기울기 및 컬러 팔레트를 탐색하기위한 선별 된 사이트 목록.
- 데이터 색상 선택기 - 시각적으로 등거리 색상의 컬러 팔레트를 생성합니다. 데이터 시각화에 유용합니다.
- 색상 디자인 - 색상 디자인에 대한 완전한 안내서 (매체의 기사)
- 평평한 UI 색상 - 플랫 디자인을위한 컬러 피커
- 이미지 색상 선택기 - 이미지 색상 피커 및 팔레트 생성기
- LOL 색상 - 선별 된 색상 팔레트 영감
- 재료 팔레트 - 재료 설계를위한 컬러 팔레트 생성기
- Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
- Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
- Picular - Google, but for colors - Primary color generator using Google's image search.
- Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
- UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
- W3school Color Picker - Find the perfect color from the color wheel, easy control
- UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ![무료]
⬆ back to top
타이포그래피
- A Crash Course in Typography: The Basics of Type - First article of a series on Typography
- Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
- Fontspiration - An iOS app for creating custom typographic designs
- Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
- Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
- Just My Type - A collection of font pairings
- Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
- Typekit - "Quality fonts from the world's best foundries"
- Typography Terms - An infographic on Typography Terms + explanations
⬆ back to top
디자인 영감
- Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
- Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
- Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
- Site Inspire - siteInspire is a showcase of the finest web and interactive design.
- Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
- Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
- Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
- Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
- Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
- Landings - Find the best landing pages for your design inspiration based on your preference.
⬆ back to top
Animation Frameworks
- Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
- Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
- Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
- Magic Animations - Showcase of different animations with link to GitHub repo
- MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
- Particles JS - A lightweight JavaScript library for creating particles.
- Typed JS - A JavaScript typing animation library with a great documentation on GitHub
- Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page
⬆ back to top
Stock Resources
- Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
- Canva - 8,000+ free templates and thousands of free photos
- Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
- Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
- Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
- I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
- Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
- MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
- Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
- Open Doodles - A Free Set of Open-Source Illustrations.
- The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
- Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
- Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
- Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
- Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
- Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
- StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
- The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
- UnDraw - "MIT licensed illustrations for every project you can imagine and create
- UnSplash - "Beautiful, Free Photos" & themed collections of photos
- 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
- Design Stripe - "Create beautiful illustrations, no design skills needed
⬆ back to top
Geolocation
- Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
- Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
- Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
- OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
- GeoJS - Free to use API for geolocation lookup by IP address
⬆ back to top
아피스
- Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
- Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
- jsonplaceholder - Fake Online REST API for Testing and Prototyping
- A list of public APIs
- Lorem Picsum - Easy to use and customize placeholder photos
- OpenWeatherMap - Weather API with free and paid licenses
- Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
- TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
- Unsplash Source - API to retrieve random images from Unsplash.com
- Web APIs | MDN
- News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
- Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.
⬆ back to top
Mockups
- Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
- Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
- Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
- Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
- Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
- The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
- MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
- MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
- Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
- Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic
⬆ back to top
서적
- Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
- HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
- HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
- HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
- HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
- Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
- Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
- You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
- Guide to Git and Github - A beginner friendly guide to using git and working with Github.
- Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
- Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
- HTML & CSS Books ![Free]
- Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
- Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid
⬆ back to top
Challenges / Games
- Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
- Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
- Codewars - Improve your skills by training with others on real code challenges.
- CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
- CSS Diner - It's a fun game to learn and practice CSS selectors.
- CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
- Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
- Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
- Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
- Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
- JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
- Leetcode - Coding problems to solve in a range of categories and difficulties
- Project Euler - Challenging computer science and mathematical problems.
- 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
- Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.
⬆ back to top
Free Tools For Students
- JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
- Student Developer Pack : The best developer tools, free for students via @githubeducation
⬆ back to top
YouTube Videos
- Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
- SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
- CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
- Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
- 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!
⬆ back to top
테스트
- Jest - JavaScript testing framework
- Mocha - JavaScript testing framework
- Karma - JavaScript test runner
- Istanbul - JavaScript test coverage tool
- TestCafe - Node.js end-to-end testing
- Cypress - JavaScript end-to-end testing framework
- Puppeteer - Google's Chrome automation tool for E2E testing.
- Playwright - Microsoft's browser automation tool for E2E testing.
- Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
- Chai - Assertation library for JavaScript testing
- PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
- Vitest - Vitest is a blazing fast unit test framework powered by Vite
⬆ back to top
