프런트엔드는 의심할 여지 없이 2016년 가장 인기 있는 기술입니다.
Angular js, Vue, React 등 다양한 프론트엔드 MVC 프레임워크가 끝없이 등장하며, 프론트엔드 컴포넌트 개발의 개념은 사람들의 마음속에 깊이 뿌리내렸습니다. 프론트엔드 급여는 이미 모바일 개발보다 높습니다.
개인 웹마스터로서 프론트엔드 디자인을 배우는 것도 필요합니다. 먼저, 몇 가지 작은 디자인 문제를 스스로 해결할 수 있으며 동시에 자신의 미적 감각을 향상시키고 UI 디자인 수준을 향상시킬 수 있습니다. 웹사이트.
프론트엔드 기술 요약 이 프로젝트는
프론트엔드 엔지니어와 관련된 지식의 모든 측면을 자세히 기록합니다. 기본적인 실력을 갖춘 후에는 학습 방향을 찾고
실력과 지식을 향상시킬 수 있습니다.
frontend-dev-bookmarks는 외국인들이 정리한 프론트엔드 개발 리소스입니다. 적용 범위가 매우 넓습니다. 여기에는 다양한 지식 포인트, 도구 및 기술이 포함되어 있으며 매우 포괄적입니다.
개인적으로 입문 단계에서 마스터해야 한다고 생각하는 기본 기술은 다음과 같습니다.
위의 기본 기술을 익히면 업무에 필요한 기술을 빠르게 익힐 수 있습니다.
적절한 도구는 학습 효율성을 효과적으로 높이고, 지식 자체에 집중하며,
문제 발생 시 문제를 빠르게 찾아 해결할 수 있습니다. 개인적으로 필요하다고 생각하는 프론트엔드 개발 도구는 다음과 같습니다.
방법:
대상:
다음은 입문단계에 좋은 책과 자료입니다
xxx site:https://developer.mozilla.org
이전 기초를 다지고 나면 기본적으로 프론트엔드가 시작되는 단계입니다. 이때는 다들 학습 방향을 염두에 두고 있을 수도 있습니다.
이전 필수 기술 섹션에서 언급한 두 가지 프로젝트를 참고하여 그중 일부를 선택하여 개발 및 학습할 수 있습니다. 다음은 몇 가지 좋은 측면입니다.
위 마스터들이 대충 정리해놨으니 여기서는 헛소리만 할게요
####도구
####SKILLS
사실 JavaScript(NodeJS 포함), HTML, CSS 외에도 프런트엔드 기술이 많이 있습니다. 사실 프론트엔드 스킬 트리는 매우 방대합니다.
##### 언어 기본
JavaScript:
CSS:
HTML:
#####고급
자바스크립트:
CSS 및 HTML: 주로 CSS3 및 HTML5의 기능과 브라우저 처리 과정 및 그리기 원리
일반적으로 사용되는 NodeJs 패키지:
몇 가지 아이디어:
t make me think
성능 최적화:
#####프로젝트
#####미래
#####기타
인턴십에 참가하면서 느낀 점과 제가 잘 못했다고 느낀 점은 코드만 입력하면 해결되지 않는 부분입니다.
####입문서
책을 읽으면 시작할 수 있지만, 책에 담긴 내용은 시대에 뒤떨어진 부분도 많지만, 새로운 기술 발전에도 계속해서 관심을 기울여야 합니다. 제가 좋다고 생각하는 몇 권의 책은 다음과 같습니다.
《Don생각하지 마세요》: 웹 디자인의 개념과 사용자 행동에 대한 이해가 매우 좋습니다####좋은 웹사이트
####프로세스
저는 Java SSH를 하다가 중도에 프론트엔드 개발자가 되었기 때문에 상대적으로 실력이 약하고 문제가 더 많았습니다. 기본적으로 W3C School의 책과 튜토리얼은 물론 Uncle Tom의 블로그와 같은 일부 프런트엔드 블로그를 읽어서 시작할 수 있습니다. 예전에는 jQuery만 사용하고 네이티브 js에 대한 공부는 별로 하지 않았습니다. 나중에는 경험 많은 사람들이 쓴 언어의 본질 등 동물 관련 서적을 많이 읽었습니다. 나는 이 책들을 통해 언어 수준의 지식을 많이 배웠습니다. 하지만 이것만으로는 충분하지 않기 때문에 커뮤니티에 자주 가서 모두가 무슨 이야기를 하는지 살펴보고, 관심이 있으면 더 많은 정보를 찾거나 데모를 작성하겠습니다. 이것이 CSS를 배우는 주요 방법입니다. 나중에는 다양한 전문가들의 블로그와 상대적으로 깊이 있는 책들, 그리고 새로운 지식과 프레임워크에 더 관심을 갖기 시작했고, 계속해서 github에 코드를 제출하는 연습을 하면서 많은 지식도 배웠습니다. 인턴 과정을 거치면서 실제 프로젝트 개발에 직접 참여하면서 학교에서 배울 수 없는 많은 개념과 생각을 배울 수 있었던 것도 큰 도움이 되었습니다. 더 이상 얘기하지 말고 벽돌을 옮기고 제안을 요청할 것입니다...
Qiu God의 초대로 저는 프론트엔드 학습 경험을 공유하고 싶습니다. 여기서는 프론트엔드 지식 시스템 아키텍처를 요약하지 않겠습니다. 개인적으로 모든 사람이 공부하는 데 유용하다고 생각하는 몇 가지 링크만 조사한 다음 주로 프런트 엔드 학습 과정에서 직면한 문제와 배운 교훈을 시작하려는 FE 초보자에게 도움이 될 수 있는지 공유합니다. 나는 이것이 이 기사의 청중 유형이라고 가정할 것입니다), 그들이 우회하는 횟수를 줄이고 그들이 내딛는 모든 단계에서 다음 방향을 아는 것이 가장 좋을 것입니다. 명인의 요약 및 공유는 Qiu God이 주최하는 FE-learning을 참조하세요.
프론트엔드를 배우는 방법은 누구나 자신만의 방식이 있을 수 있다는 점부터 말씀드리고 싶습니다. 이 글은 참고용이므로 그냥 읽어도 됩니다.
저는 우연히 프론트엔드에 입문했습니다. 저는 항상 게임 웹사이트를 만들고, 유니티, 언리얼 엔진 등의 게임 엔진을 가지고 놀았고, 여러 게임 프로토타입을 만져봤습니다. .하지만 연구원으로 실험실에 들어가자마자 튜터가 직접 js를 작성하라고 보냈습니다. 튜터는 저에게 Baidu Map API를 기반으로 한 데이터 표시 페이지를 작성하도록 반달을 주었습니다. 관대하지만 이전에는 js를 많이 작성하지 않았고 map api를 어떻게 사용하는지 모르기 때문에 선배들이 남긴 "코드"를 참고하면서 "Javascript Authoritative Guide"(Rhinoceros Book)를 읽었습니다. 실험실에서 마침내 모든 기능을 작성했습니다. 그 페이지는 나의 js 입문 페이지로 간주되며, 프론트엔드 학습 경로의 시작이기도 합니다.
지금 생각해보면 프론트엔드를 맡게 되었지만 계속해서 잘하려면 흥미에 의지해야 합니다. 물론 프론트엔드는 흥미로운 기술 분야이고, 커뮤니티는 매일 매우 "바쁘다".
개인적으로는 프론트엔드 학습 초기에는 책에서 완전히 벗어나 프로젝트 중심을 할 수 있다고 생각합니다. 저는 개인적으로 코뿔소 책부터 읽기 시작했지만, 시간이 부족하거나 큰 책을 읽는 것이 지루하다고 느끼신다면 저처럼 되지 마세요. 물론, 책을 읽기로 결정했다면 책에 나오는 모든 예를 따르는 것이 가장 좋습니다. 저는 대학원에 가기 전까지 js를 접한 적이 없었는데, 개학하기 전인 4월에 선생님께서 Baidu Map API 프로젝트에 대해 직접 알려주셨고, 그 후 다양한 ERP와 지도 데이터 표시가 나타났습니다. , 같지는 않았지만 기본적으로는 모두 프론트엔드 작업이었습니다. SSH 및 Android 개발도 했습니다. 전체 연구실에서 프론트엔드를 작성하는 사람이 저뿐이라는 것이 믿어지시나요? 리치 클라이언트 SPA 시대의 백엔드는 편안한 인터페이스이고 기본적으로 코드의 양이 프론트엔드에 있는데 어떻게 이렇게 잘 쓸 수 있지... 이 기간 동안 멘토를 따라 창업을 경험하게 되었고, 매일 오후 7시부터 10시까지 작업을 했다는 점에서 급격한 성장을 이룬 것으로 볼 수 있다.
기술을 익히려면 먼저 일반적인 프레임워크를 숙지하고, 구현할 수 있는 아이디어를 생각하고, 실행할 수 있는 데모를 만든 다음, 세부 사항을 개선해야 합니다. 데모가 완료되면 이에 대한 지각적인 이해가 있게 됩니다. 기술을 이해하고 책을 다시 읽으면 훨씬 더 많은 것을 얻을 수 있습니다. Native js에서 jquery로, 그 다음에는 extjs로, 그리고 강사가 지정한 기술부터 나만의 기술 선택까지, 마치 몬스터와 싸우고 업그레이드하듯 프로젝트를 하나씩 연습해 나갔습니다. 물론, 프로젝트가 없다면 나만의 프로젝트를 만들고 나만의 아이디어를 실현하는 것이 재미있고 뿌듯합니다.
프런트엔드 학습은 많은 것들이 파편화되고 흩어져 있다는 특징이 있으며, 이를 스스로 정리하고 요약해야 합니다. Weibo와 Zhihu에서 많은 위대한 스승을 따르는 것은 단지 가십을 듣기 위한 것이 아닙니다. 때때로 위대한 스승의 말씀은 무심코 언급된 단어가 다음 학습 목표가 될 가능성이 높습니다. 이러한 정보를 수집하고, Google을 잘 활용하고, 질문하고, 생각해보세요. 게임 속 수집요소와 마찬가지로 프론트엔드 학습도 수집요소가 가득한 '게임'이지만, 인벤토리와 창고 역할을 하려면 지식관리 도구가 필요합니다. 제가 아는 전문가들은 모두 지식관리자입니다. 도구를 많이 사용하는 사용자입니다. 이전에는 oneNote를 사용했는데, 당시에는 클라우드 저장공간에 묶여 있지 않았습니다. 지금은 기본적으로 Evernote를 사용하고 있는데, 누적된 노트가 1,200개가 넘습니다. Delicious는 태그를 기반으로 관리되기 때문에 즐겨찾기로 사용할 계획은 있었지만 한 번도 사용한 적이 없습니다. 물론 이러한 도구에 초점을 맞추는 것은 아니지만 편리한 도구를 사용하면 학습 효율성을 높일 수 있습니다. 물론 가장 중요한 것은 항상 배우고자 하는 강한 열망을 유지하는 것입니다. 당신의 목표는 프런트 엔드에 대한 모든 것을 이해하는 것입니다(물론 전부는 아닙니다. 왜냐하면 결국 에너지는 제한되어 있기 때문입니다. 현실적으로 말하면 그럴 가능성은 거의 없습니다.)
이건 별로 통제할 수 없을 것 같습니다... 보스에 대해서는 어느 정도 운에 따라 자세히 설명하지 않겠습니다. 하지만 그렇다고 해도 주변의 전문가들과 더 많이 소통하는 것이 왕이다. 이 전문가는 반드시 수준이 높을 필요는 없지만 기술에 대한 열정이 있어야 한다. 대학원 1학년 때 매일 7시에 연구실 문에 들어갔는데 나보다 먼저 도착한 남자가 있었다. 나중에 알고 보니 이 사람은 아침에 갔다가 오후에 돌아왔고, 강사님도 익숙해지셨고, 알고 보니 이 사람은 밤새도록 코드를 작성하다가 아침에 다시 잠이 들었습니다. 나중에 나는 이 신과 자주 문제를 논의했고, 그때마다 내 경험치가 꾸준히 오르는 것을 느꼈다. 그리고 연구실에는 또 다른 신이 있는데, 그 앞에 있는 밤새도록 신이 "먼 초에 불과하고 항상 쫓고 결코 따라잡지 못한다"고 묘사한 두 신의 특징은 조금씩 알고 있다는 점이다. 자, c/c++부터 vc/mfc, 그리고 유닉스 네트워크 프로그래밍까지 잠시 읽기 계획을 세웠습니다. 결국에는 Java 핵심 기술과 C# 프로그래밍 가이드를 봤습니다. MSDN에서 신들과 이야기를 나눌 수 있었습니다.
요컨대 이 두 신은 나를 구덩이에 끌어들이거나 한 구덩이에서 다른 구덩이로 뛰어오르기도 했습니다. 두 신 모두 프론트엔드에 종사하지는 않지만 기술에는 항상 유사점이 있습니다.
읽고, 더 읽고, 좋은 책을 읽어보세요. Liu Weipeng의 블로그에서 공식을 봤습니다. 첫 달 월급은 이전에 구입(읽은) 기술 서적 가격의 합계와 같습니다. (여기서 언급된 기술 서적은 고전적이고 인정받는 기술 서적을 의미합니다. 좋은 책 책). 이 공식의 정확성을 논의하는 것은 무의미해 보이지만 그 합리성은 의심의 여지가 없습니다. 즉, 더 많은 고전 기술 서적을 읽으십시오. 가장 극단적인 예는 Google의 Xu You라는 사람이 우리 대학교에서 도서관의 TP312 책장 전체를 휩쓸었다고 하더군요... 프론트엔드 고전 서적의 경우 제가 수집한 프론트엔드 도서 목록이 있습니다. 프론트엔드 클래식, 괜찮습니다) 책은 메시지를 남겨서 알려주세요.) 가능하다면 이 책을 읽어볼 수도 있습니다. 앞에서 언급한 것처럼 프런트엔드 지식 포인트는 느슨하고, 흩어져 있는 지식 포인트를 수집하고, 블로그를 통해 빠르게 학습하는 등의 방법이 있습니다. 이는 지식 시스템을 깊이 이해하고 싶다면 그 내용을 이해하는 것의 한 측면일 뿐입니다. , 그리고 그것에 대한 체계적인 이해를 확립하기 위해서는 여전히 고전을 읽는 것이 필수적입니다.
처음부터 Rhinoceros 책을 다 읽었고, 프론트엔드와 거의 관련이 없는 다른 고전적인 기술 서적을 계속 읽었습니다. 나중에 실험실 프로젝트와 제가 했던 몇 가지 작은 프로젝트를 통해 저는 점차 실력이 향상되었습니다. 프론트엔드 필드에 대해 더 잘 알고 "Javascript Mode", "Javascript Design Pattern" 및 "Writing Maintenanceable Javascript"를 읽었습니다. 나중에 node에 대해 배우고 이를 사용하여 몇 가지 가젯을 만들기 시작했습니다. up and run', 'Mongodb', 'The Authoritative Guide' 등이 있지만 전자가 약간 함정에 빠진 것 같습니다. 그 당시에는 푸링의 책 '심층적이고 간단한 설명'이 아직 출판되지 않았는데, 나왔을 때 도서관에 가서 빌려서 읽었는데 기분이 꽤 좋았습니다. 아직 책을 너무 적게 읽었다는 생각이 들었습니다. 아직 계속 읽어야 할 것 같습니다(위 도서 목록 참조).
프론트엔드의 포지셔닝은 어떤 지식과 기술을 흡수해야 하는지와 관련이 있으며, 기술 세계에서 특히 민감해야 할 것이 무엇인지 결정합니다. 프런트엔드가 단지 페이지를 자르고 상호작용과 시각적 요구사항을 실현하는 데만 그친다고 생각한다면 프런트엔드에 대한 이해는 아직 초기 단계에 있는 것입니다. Alibaba와의 최종 인터뷰에서 저는 심사관에게 다음과 같은 질문을 했습니다. 프런트엔드 기술은 날이 갈수록 변하고 있으며, 범위는 점점 더 넓어지고 있으며, 표준은 점점 더 풍부해지고 있습니다. 어떤 촉수라도 멀리까지 도달할 수 있는 것 같습니다. . 프런트 엔드에 적절한 위치를 부여하는 방법은 무엇입니까? 심사관이 나를 위해 오랫동안 분석해 주었고 한 문장으로 요약했다. 사용자와 웹사이트 사이의 연결자, 사용자 경험의 창조자(원래는 아니지만 일반적인 의미이다)이다. 즉, 프론트엔드의 궁극적인 목표는 사실상 사용자 경험을 중심으로 사용자 경험을 창출하고 사용자 경험을 향상시키는 것입니다. 인터랙션 디자인부터 성능 최적화까지, 워크플로우 효율성을 높이기 위한 워크플로우 개선까지, 결국에는 사용자 경험을 창출하고 개선하는 일이며, 궁극적으로는 사용자 경험에 반영되어야 합니다. 이 요약은 매우 타당하다고 생각합니다. (물론 "사용자 경험"이라는 용어는 너무 광범위하고 단순히 프론트엔드 엔지니어만의 범주는 아닙니다. 예를 들어 백엔드를 개발할 때 데이터 처리 프로세스를 최적화하면 전반적인 성능이 향상됩니다. , 이는 사용자 경험에도 좋습니다.
오늘날 프런트엔드 엔지니어는 페이지 자르기, 시각적 요구사항 구현, 특정 단계에서의 상호작용 구현(예: 프런트엔드 자동화, 이미지 프로그래밍, 성능 최적화 등)보다 훨씬 더 심층적인 문제에 필연적으로 직면하게 됩니다. ., 조금 더 뒤로 밀면 됩니다. 과거에는 백엔드 템플릿이 일반적으로 백엔드 범주에 속했습니다. 이제 프런트엔드 아키텍처가 발전하면서 이러한 질문을 받을 수도 있습니다. 백엔드 언어(PHP/Java/C# 등)를 사용해야 하는 백엔드 템플릿 코드를 작성하는 것을 소위 빅 프론트엔드라고 합니다(단, 큰 프런트 엔드는 여전히 사용자와 접촉하는 부분을 처리하고 사용자 경험을 최적화합니다. 아마도 가장 일반적이거나 이야기되는 것은 노드일 것입니다. 실제로 이러한 기술 중 하나를 선택할 수 있습니다. BAT 3개 회사 중에서는 바이두가 PHP를 더 많이 사용하고 알리바바가 노드를 더 많이 사용한다고 합니다.
유 삼촌은 자신의 블로그에서 소위 풀엔드가 수평이고 풀스택이 수직이라고 언급했습니다. 풀엔드 즉, 모든 단말은 사용자 경험과 관련되어 있고 사용자와 직접적으로 접촉하기 때문에 프런트엔드입니다. 멀티터미널 개발에 적응하려면 웹 프론트엔드를 기반으로 안드로이드 개발과 iOS 개발에 대한 지식을 확장해야 합니다. 다행히 하이브리드 개발 방식이 인기를 끌면서 네이티브 언어 개발을 활용하는 능력은 그렇지 못할 것입니다. -깊이.
풀스택은 스타트업 기업에게 가장 적합한 개발 형태라고 할 수 있습니다. 크게 보면 프론트엔드부터 백엔드까지, 개발부터 운영, 유지관리까지를 통칭합니다. 나는 이런 종류의 이야기를 하지 않을 것입니다. 대부분의 사람들은 아마도 이 방향으로 발전하고 싶지 않을 것입니다. 좁은 의미의 풀스택은 구체적으로 NodeJ를 기반으로 구축된 백엔드에서 js 언어를 사용하여 작성하는 것을 의미하며, 프론트엔드와 백엔드는 통일된 언어, 통일된 프로그래밍 모델을 가지며 심지어 동일한 것을 공유합니다. 코드 세트. 전체 스택 개발에 대해 자세히 알아보려면 전체 스택 엔지니어에 대한 Yu Bo의 기사를 읽어보세요.
위 내용은 프론트엔드와 파생된 기술 경로에 대한 저의 피상적인 이해입니다. 해당 분야를 배우고 해당 분야의 전반적인 동향을 파악하는 것은 매우 중요합니다. 또한 프론트엔드 학습 방향과 경력 성장 경로에 대한 전반적인 이해를 갖고 싶다면 Ba Chi가 요약한 이 프론트엔드 개발 토크를 읽어보는 것이 좋습니다.
프런트엔드 학습 및 인터뷰를 위한 몇 가지 유용한 링크를 제공하세요.
grunt에 비해 gulp 학습이 더 쉽습니다
SPA의 경우 backbone.js와 backbone.marionette.js를 권장합니다
FQ 고민하지 마세요. 10위안만 써도 한 달치 붉은 살구를 사실 수 있어요.
이런 것들은 기초를 탄탄히 다지고 익히는 데에는 문제가 없습니다.
html 별로 할말은 없고 시간나면 html5도 배워보겠습니다.
Css 문서를 최대한 많이 읽으십시오. 많은 중국어 자료를 너무 많이 읽으면 혼란스러울 수 있습니다.
다양한 브라우저의 html/css 태그 및 속성 지원 상태를 확인할 수 있는 웹사이트가 있어 매우 유용합니다.
javascript JavaScript 고급 프로그래밍을 살펴보세요. 하지만 이렇게 두꺼운 책을 읽고 나면 잊어버리게 됩니다. 다음은 JavaScript의 핵심 개념을 설명하는 좋은 기사입니다: 객체/프로토타입 체인/생성자/실행 컨텍스트/범위 체인/클로저/this.
시간이 되시면 내년 6월 출시 예정인 ECMAScript 6도 살펴보실 수 있습니다. Ruan Yifeng의 웹사이트에는 소개 정보가 있습니다.
jquery에는 이 웹사이트에서 쉽게 찾을 수 있는 많은 API가 있습니다. jquery deferred의 사용법을 알아보는 시간을 가져보세요.
코드 오류 확인, 새 디렉터리 파일 생성, 코드 정리 등 sublimetext용 플러그인을 추가로 설치하세요.
| 综合类 | 地址 |
|---|---|
| 前端知识体系 | http://www.cnblogs.com/sb19871023/p/3894452.html |
| 前端知识结构 | https://github.com/JacksonTian/fks |
| Web前端开发大系概览 | https://github.com/unruledboy/WebFrontEndStack |
| Web前端开发大系概览-中文版 | http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html |
| Web Front-end Stack v2.2 | Web Front-end Stack v2.2 |
| 免费的编程中文书籍索引 | https://github.com/justjavac/free-programming-books-zh_CN |
| 前端书籍 | https://github.com/dypsilon/frontend-dev-bookmarks |
| 前端免费书籍大全 | https://github.com/vhf/free-programming-books |
| 前端知识体系 | http://www.cnblogs.com/sb19871023/p/3894452.html |
| 免费的编程中文书籍索引 | https://github.com/justjavac/free-programming-books-zh_CN |
| 智能社 - 精通JavaScript开发 | http://study.163.com/course/introduction/224014.htm |
| 重新介绍 JavaScript（JS 教程） | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript |
| 麻省理工学院公开课：计算机科学及编程导论 | http://v.163.com/special/opencourse/bianchengdaolun.html |
| JavaScript中的this陷阱的最全收集--没有之一 | http://segmentfault.com/a/1190000002640298 |
| JS函数式编程指南 | https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html |
| JavaScript Promise迷你书（中文版） | http://liubin.github.io/promises-book |
| 腾讯移动Web前端知识库 | https://github.com/AlloyTeam/Mars |
| Front-End-Develop-Guide 前端开发指南 | https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide |
| 前端开发笔记本 | https://li-xinyang.gitbooks.io/frontend-notebook/content |
| 大前端工具集 - 聂微东 | https://github.com/nieweidong/fetool |
| 前端开发者手册 | https://dwqs.gitbooks.io/frontenddevhandbook/content |
| 入门类 | 地址 |
|---|---|
| 前端入门教程 | http://www.cnblogs.com/jikey/p/3613082.html |
| 瘳雪峰的Javascript教程 | http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 |
| jQuery基础教程 | http://www.imooc.com/view/11 |
| 前端工程师必备的PS技能——切图篇 | http://www.imooc.com/view/506 |
| 结合个人经历总结的前端入门方法 | https://github.com/qiu-deqing/FE-learning |
| 工具类 | 地址 |
|---|---|
| 前端人的俱乐部 | http://f2er.club/ 真可以解放你的收藏夹 |
| 如何优雅地使用Sublime Text | http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/# |
| 新编码神器Atom使用纪要 | http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/ |
| css sprite 雪碧图制作 | http://www.imooc.com/learn/93 |
| 版本控制入门 – 搬进 Github | http://www.imooc.com/learn/390 |
| Grunt-beginner前端自动化工具 | http://www.imooc.com/learn/30 |
| IntelliJ IDEA 简体中文专题教程 | https://github.com/judasn/IntelliJ-IDEA-Tutorial |
| Webstorm,InterllIdea,Phpstorm | http://t.cn/8kZZ1Uy |
| SublimeText | https://github.com/jikeytang/sublime-text |
| Atom | https://atom.io |
| visual studio code | https://code.visualstudio.com |
| 综合效果搜索平台 | 地址 |
|---|---|
| JavaScript 资源大全中文版 | https://github.com/jobbole/awesome-javascript-cn |
| 100+ 超全的web开发工具和资源 | https://xituqu.com/170.html |
| zoommyapp.com | http://zoommyapp.com/ 高质量图库 |
| unsplash.com | https://unsplash.com/ 高质量图库 |
| www.pinterest.com | https://www.pinterest.com/ 图库 |
| New Old Stock | http://nos.twnsnd.co 复古风图库 |
| 效果网 | http://www.jq22.com |
| 花瓣网 | http://huaban.com/ |
| 优美图 | http://www.topit.me/ |
| codepen | http://codepen.io/ |
| 摄图网 | http://699pic.com/ |
| 常用的JavaScript代码片段 | http://microjs.com |
| 周报类 | 地址 |
|---|---|
| 奇舞周刊 | http://old.75team.com/weekly/ |
| 码农周刊 | http://weekly.manong.io |
| WEB前端开发 | http://www.css88.com |
| A JS tip per day! | http://www.jstips.co |
| 腾讯全端 AlloyTeam | http://www.alloyteam.com/webdevelop/ |
| 平安科技移动开发二队技术周报 | https://github.com/PaicHyperionDev/MobileDevWeekly |
| 开发中心 | 地址 |
|---|---|
| mozilla js参考 | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript |
| chrome开发中心（chrome的内核已转向blink） | https://developer.chrome.com/extensions/api_index.html |
| safari开发中心 | https://developer.apple.com/library/safari/navigation |
| microsoft js参考 | https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx |
| js秘密花园 | http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html |
| js秘密花园 | http://bonsaiden.github.io/JavaScript-Garden/zh |
| w3help | http://www.w3help.org 综合Bug集合网站 |
| Nodejs | 地址 |
|---|---|
| nodejs 篇幅比较巨大 | http://liuqing.pw |
| Node.js 包教不包会 | https://github.com/alsotang/node-lessons |
| 篇幅比较少 | http://www.rainweb.cn/article/category/Nodejs |
| node express 入门教程 | http://www.w3cfuns.com/article-5598538-1-1.html |
| nodejs定时任务 | http://my.oschina.net/u/568264/blog/193773 |
| 一个nodejs博客 | http://60sky.com |
| 【NodeJS 学习笔记04】新闻发布系统 | http://www.cnblogs.com/yexiaochai/p/3536547.html |
| 过年7天乐，学nodejs 也快乐 | http://www.cnblogs.com/qqloving/p/3541099.html |
| 七天学会NodeJS | https://github.com/nqdeng/7-days-nodejs |
| Nodejs学习笔记（二）--- 事件模块 | http://www.cnblogs.com/zhongweiv/p/nodejs_events.html |
| nodejs入门 | http://www.cnblogs.com/liusuqi/p/3735491.html |
| angularjs nodejs | https://github.com/zensh/jsgen |
| 从零开始nodejs系列文章 | http://blog.fens.me/series-nodejs |
| 理解nodejs | http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb |
| nodejs事件轮询 | http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop |
| node入门 | http://www.nodebeginner.org/index-zh-cn.html |
| nodejs cms | http://ourjs.com/detail/53e1f281c5910a9806000001 |
| Node初学者入门，一本全面的NodeJS教程 | http://ourjs.com/detail/529ca5950cb6498814000005 |
| NodeJS的代码调试和性能调优 | http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line |
| 综合API | 地址 |
|---|---|
| javascripting | http://www.javascripting.com |
| 各种流行库搜索 | http://microjs.com |
| runoob.com-包含各种API集合 | http://www.runoob.com |
| 开源中国在线API文档合集 | http://tool.oschina.net/apidocs |
| devdocs | http://devdocs.io 英文综合API网站 |
| Ecmascript | 地址 |
|---|---|
| Understanding ECMAScript 6 - Nicholas C. Zakas | https://leanpub.com/understandinges6/read |
| exploring-es6 | https://leanpub.com/exploring-es6/read |
| exploring-es6翻译 | https://github.com/es6-org/exploring-es6 |
| exploring-es6翻译后预览 | http://es6-org.github.io/exploring-es6 |
| 阮一峰 es6 | http://es6.ruanyifeng.com |
| 阮一峰 Javascript | http://javascript.ruanyifeng.com |
| ECMA-262，第 5 版 | http://yanhaijing.com/es5 |
| es5 | http://es5.github.io |
| Js template | 地址 |
|---|---|
| template-chooser | http://garann.github.io/template-chooser |
| artTemplate | https://github.com/aui/artTemplate |
| tomdjs | https://github.com/aui/tmodjs/blob/master/README.md |
| 淘宝模板juicer模板 | http://juicer.name/docs/docs_zh_cn.html |
| Fxtpl v1.0 繁星前端模板引擎 | http://koen301.github.io/fxtpl |
| laytpl | http://laytpl.layui.com |
| mozilla - nunjucks | https://github.com/mozilla/nunjucks |
| Juicer | https://github.com/PaulGuo/Juicer |
| dustjs | http://akdubya.github.io/dustjs |
| etpl | http://ecomfe.github.io/etpl |
| HTML(HTML5) | 地址 |
|---|---|
| 深入理解HTML5标签 | https://segmentfault.com/a/1190000002695791 |
| 如何写出高效率的HTML | https://segmentfault.com/a/1190000002680822 |
| HTML meta标签总结与属性使用介绍 | https://segmentfault.com/a/1190000004279791 |
| 戏说HTML5 | http://www.cnblogs.com/dojo-lzz/p/5059316.html |
| CSS | 地址 |
|---|---|
| CSS 语法参考 | http://tympanus.net/codrops/css_reference |
| 如何编写可维护的CSS | https://github.com/chadluo/CSS-Guidelines/blob/master/README.md |
| CSS3动画手册 | http://isux.tencent.com/css3/index.html |
| 腾讯css3动画制作工具 | http://isux.tencent.com/css3/tools.html |
| 志爷css小工具集合 | http://linxz.github.io/tianyizone |
| css3 js 移动大杂烩 | http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb |
| bouncejs 触摸库 | http://bouncejs.com |
| css3 按钮动画 | http://fian.my.id/Waves |
| animate.css | http://daneden.github.io/animate.css |
| 全局CSS的终结(狗带 [译] | http://www.alloyteam.com/2015/10/8536 |
| browserhacks | http://browserhacks.com |
| Angularjs | 地址 |
|---|---|
| Angular.js 的一些学习资源 | https://github.com/dolymood/AngularLearning |
| angularjs中文社区 | http://angularjs.cn |
| Angularjs源码学习 | http://www.cnblogs.com/xuwenmin888/p/3739096.html |
| Angularjs源码学习 | http://www.ifeenan.com/?c=AngularJS |
| angular对bootstrap的封装 | http://angular-ui.github.io/bootstrap |
| angularjs + nodejs | https://cnodejs.org/topic/51404e0f069911196d2e3923 |
| 吕大豹 Angularjs | http://www.cnblogs.com/lvdabao/tag/AngularJs |
| AngularJS 最佳实践 | http://www.infoq.com/cn/news/2013/02/angular-web-app |
| Angular的一些扩展指令 | http://www.lovelucy.info/angularjs-best-practices.html |
| Angular数据绑定原理 | https://github.com/Pasvaz/bindonce |
| 一些扩展Angular UI组件 | https://github.com/angular-ui |
| Ember和AngularJS的性能测试 | http://voidcanvas.com/emberjs-vs-angularjs-performance-testing |
| 带你走近AngularJS - 基本功能介绍 | http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html |
| Angularjs开发指南 | http://angular.duapp.com/docs/guide |
| Angularjs学习 | http://www.cnblogs.com/amosli/p/3710648.html |
| 不要带着jQuery的思维去学习AngularJS | http://www.rainweb.cn/article/angularjs-jquery.html |
| angularjs 学习笔记 | http://wangjiatao.diandian.com/?tag=angularjs |
| angularjs 开发指南 | http://www.angularjs.cn/T008 |
| angularjs 英文资料 | https://github.com/jmcunningham/AngularJS-Learning |
| angular bootstrap | http://angular-ui.github.io/bootstrap |
| angular jq mobile | https://github.com/opitzconsulting/jquery-mobile-angular-adapter |
| angular ui | http://mgcrea.github.io/angular-strap |
| 整合jQuery Mobile+AngularJS经验谈 | http://www.tuicool.com/articles/7ZZVr2 |
| 有jQuery背景，该如何用AngularJS编程思想 | http://blog.jobbole.com/46589/ |
| AngularJS在线教程 | http://each.sinaapp.com/angular |
| angular学习笔记 | http://www.zouyesheng.com/angular.html |
| React | 地址 |
|---|---|
| react.js 中文论坛 | http://www.react-china.org |
| react.js 官方网址 | https://facebook.github.io/react/index.html |
| react.js 官方文档 | https://facebook.github.io/react/docs/getting-started.html |
| react.js material UI | http://material-ui.com/# |
| react.js TouchstoneJS UI | http://touchstonejs.io |
| react.js amazeui UI | http://amazeui.org/react |
| React 入门实例教程 - 阮一峰 | http://www.ruanyifeng.com/blog/2015/03/react.html |
| React Native 中文版 | http://wiki.jikexueyuan.com/project/react-native |
| Webpack 和 React 小书 - 前端乱炖 | http://www.html-js.com/article/Fakefish%203053 |
| Webpack 和 React 小书 - gitbook | https://fakefish.github.io/react-webpack-cookbook |
| webpack | https://github.com/webpack/webpack |
| Webpack，101入门体验 | http://html-js.com/article/3009 |
| webpack入门教程 | http://html-js.com/article/3113 |
| 基于webpack搭建前端工程解决方案探索 | http://segmentfault.com/a/1190000003499526 |
| React原创实战视频教程 | http://www.piliyu.com |
| vue | 地址 |
|---|---|
| Vue | http://cn.vuejs.org |
| Vue 论坛 | http://forum.vuejs.org |
| Vue 入门指南 | http://www.cnblogs.com/aaronjs/p/3660102.html |
| Vue 的一些资源索引 | http://segmentfault.com/a/1190000000411057 |
| awesome-vue | https://github.com/vuejs/awesome-vue |
| 移动端API | 地址 |
|---|---|
| 99移动端知识集合 | https://github.com/jtyjty99999/mobileTech |
| 移动端前端开发知识库 | https://github.com/AlloyTeam/Mars |
| 移动前端的一些坑和解决方法（外观表现） | http://caibaojian.com/mobile-web-bug.html |
| 【原】移动web资源整理 | http://www.cnblogs.com/PeunZhang/p/3407453.html |
| zepto 1.0 中文手册 | http://mweb.baidu.com/zeptoapi |
| zepto 1.0 中文手册 | http://www.html-5.cn/Manual/Zepto |
| zepto 1.1.2 | http://www.css88.com/doc/zeptojs_api |
| zepto 中文注释 | http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html |
| jqmobile 手册 | http://app-framework-software.intel.com/api.php |
| 移动浏览器开发集合 | https://github.com/maxzhang/maxzhang.github.com/issues |
| 移动开发大杂烩 | https://github.com/hoosin/mobile-web-favorites |
| jQuery | 地址 |
|---|---|
| jQuery API 中文文档 | http://www.jquery123.com |
| hemin 在线版 | http://hemin.cn/jq |
| css88 jq api | http://www.css88.com/jqapi-1.9/on |
| css88 jqui api | http://www.css88.com/jquery-ui-api |
| 学习jquery | http://learn.jquery.com |
| jquery 源码查找 | http://james.padolsey.com/jquery |
| Web前端资源汇总(jQuery,Js,Css3等) | http://www.cnblogs.com/jihua/p/webfront.html |
| D3 | 地址 |
|---|---|
| d3 Tutorials | https://github.com/mbostock/d3/wiki/Tutorials |
| Gallery | https://github.com/mbostock/d3/wiki/Gallery |
| lofter | http://datavisual.lofter.com/post/40cf3a_188e535 |
| iteye | http://alanland.iteye.com/blog/1878595 |
| ruanyifeng | http://javascript.ruanyifeng.com/library/d3.html |
| Requriejs | 地址 |
|---|---|
| Javascript模块化编程（一）：模块的写法 | http://www.ruanyifeng.com/blog/2012/10/javascript_module.html |
| Javascript模块化编程（二）：AMD规范 | http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html |
| Javascript模块化编程（三）：require.js的用法 | http://www.ruanyifeng.com/blog/2012/11/require_js.html |
| RequireJS入门（一） | http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html |
| RequireJS入门（二） | http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html |
| RequireJS进阶（三） | http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html |
| requrie源码学习 | http://www.cnblogs.com/yexiaochai/p/3632580.html |
| requrie 入门指南 | http://www.oschina.net/translate/getting-started-with-the-requirejs-library |
| requrieJS 学习笔记 | http://www.cnblogs.com/yexiaochai/p/3214926.html |
| requriejs 其一 | http://cyj.me/why-seajs/requirejs/ |
| require backbone结合 | http://www.cnblogs.com/yexiaochai/p/3221081.html |
| Seajs | 地址 |
|---|---|
| seajs | http://seajs.org |
| seajs 中文手册 | http://cyj.me/why-seajs/zh |
| Less,sass | 地址 |
|---|---|
| sass | http://www.w3cplus.com/sassguide |
| sass教程-sass中国 | http://www.sass.hk |
| Sass 中文文档 | http://sass.bootcss.com |
| less | http://less.bootcss.com |
| Markdown | 地址 |
|---|---|
| Markdown 语法说明 (简体中文版 | http://wowubuntu.com/markdown |
| markdown入门参考 | https://github.com/LearnShare/Learning-Markdown/blob/master/README.md |
| gitbook | https://www.gitbook.com 国外的在线markdown可编辑成书 |
| mdeditor | https://www.zybuluo.com/mdeditor 一款国内的在线markdown编辑器 |
| stackedit | https://stackedit.io 国外的在线markdown编辑器，功能强大，同步云盘 |
| mditor | http://bh-lay.github.io/mditor 一款轻量级的markdown编辑器 |
| lepture-editor | https://github.com/lepture/editor |
| markdown-editor | https://github.com/jbt/markdown-editor |
| 作业部落 | https://www.zybuluo.com 功能强大，速度流畅，全平台同步 |
| 호환성 | 주소 |
|---|---|
| esma 호환성 목록 | http://kangax.github.io/compat-table/es6 |
| W3C CSS 검증 서비스 | http://jigsaw.w3.org/css-validator/validator.html.zh-cn |
| 카니우스 | http://caniuse.com/#index |
| csscreator | http://csscreator.com/properties |
| 마이크로소프트 |
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
