프런트엔드 학습 경로-HTML 튜토리얼-php.cn

프런트엔드 학습 경로

WBOY

풀어 주다： 2016-09-26 08:27:20

원래의

1281명이 탐색했습니다.

프론트엔드 엔지니어란?

간단히 말하면 프론트엔드 엔지니어는 HTML/CSS/JavaScript 등의 웹 기술을 사용하여 디자이너와 협력하여 사용자 인터페이스를 구현하고 백엔드 엔지니어와 데이터를 연결하며 웹 애플리케이션 개발 포지션을 완성합니다.

디자인 소프트웨어

프론트엔드 엔지니어의 가장 중요한 업무는 디자이너의 디자인 도면을 잘라서 코드로 변환하는 것이기 때문에 디자인 소프트웨어의 기본적인 동작과 도면 자르기 방법을 익혀야 합니다.

편집자

일꾼이 일을 잘하려면 먼저 도구를 갈아야 합니다. 사용할 수 있는 편집기와 IDE는 많지만 여기서는 가장 좋은 두 가지만 추천합니다.

코드 관리

코드 작성 방법뿐만 아니라 코드 관리 방법도 배워야 합니다. 직장에서는 지속적으로 수정, 반복, 리팩토링하면서 코드를 직접 배포해야 하는 상황에 직면할 수 있습니다. 물론 버전 제어 소프트웨어도 마스터해야 합니다.

Linux에서는 명령줄에서 파일 열기, 이동, 복사와 같은 가장 기본적인 작업을 배워야 합니다.
- Linux에서 가장 일반적으로 사용되는 20가지 명령
- Niao 형제의 Linux 개인 주방 - 기본
Git은 코드를 작성할 때 반드시 사용해야 하는 버전 관리 소프트웨어입니다. 시작하고 나면 금방 배울 수 있습니다.
- 원숭이도 이해할 수 있는 Git 시작하기

테스트 도구

미리보기와 디버깅은 프런트 엔드 코드를 작성할 때 대부분의 경우 편집기와 브라우저 사이를 전환하는 데 필요합니다.

HTML5
- MDN의 HTML5 입문 튜토리얼
- NetEase Cloud Classroom에서 HTML5 시작하기
CSS3
- 초보자를 위한 CSS3 튜토리얼
- Gitbook CSS3 튜토리얼
스타일 가이드
- Tencent alloteam 프론트엔드 코드 사양
- Baidu ecomfe 프런트엔드 코드 사양
- Google HTML/CSS 스타일 가이드
- Google JavaScript 스타일 가이드
반응형 디자인
- 반응형 디자인 가이드
- 적응형 웹 디자인 - Ruan Yifeng
- 반응형 웹 디자인이란? 진행하는 방법?
웹 애니메이션
- CSS 애니메이션
- 캔버스 애니메이션 튜토리얼
- JavaScript로 애니메이션을 만드는 방법 알아보기
부트스트랩
- 초보자를 위한 부트스트랩 튜토리얼
- MOOC.com은 Bootstrap을 활용합니다
jQuery
- 초보자를 위한 jQuery 튜토리얼
- MOOC.com의 jQuery 기본
아약스
- JQuery Ajax 빠른 시작
- jQuery Ajax 전체 분석

w3c 표준
- 웹 플랫폼 문서
ECMA6
- Ruan Yifeng의 ECMAScript6 소개
테스트
- FEX 프론트엔드 자동화 테스트 탐구
- 테스트 프레임워크 Mocha 예제 튜토리얼
- Karma 및 Jasmine 자동화 단위 테스트
자동화된 빌드
- 스트리밍 자동화 빌드 도구 Gulp
- 프론트엔드 엔지니어링 구축 도구 F
- 웹 프로젝트 비계 생성 도구 여만
  - Yeoman과 AngularJS를 사용하여 웹 애플리케이션 구축
모듈/패키지 관리
- npm
  - npm 사용 소개
  - Node.js 개발 환경을 빠르게 구축하고 npm을 가속화하세요
- Sea.js
  - 5분 안에 Sea.js 시작하기
- JS 필요
- ES6 모듈
전처리기
- 햄
  - 튜토리얼
  - HTML 코드 약어: Emmet 및 Haml
- 사스
  - Sass 시작하기
- 타입스크립트
  - TypeScript 핸드북(중국어 버전)
프레임
- 반응하다
  - 시작하기 예제 튜토리얼
- 뷰
  - vue.js 튜토리얼
- 각도