lang/html

HTML5 Tutorials 30

C/H 2014. 7. 26. 21:37
HTML5를 배울수 있는 Tutorial을 찾는다면 기본에서 고급까지 배울수 있는 30가지 HTML Tutorials를 소개합니다.

HTML5, CSS3, Javascript, jQuery





  1. Creating a Mobile-First Responsive Web Design
    모바일 반응형 웹디자인 만들기
    모바일에서 웹 경험을 제공하기 위한 튜토리얼을 제공합니다.
  2. Using semantic HTML
    시멘틱 웹 사용
    시멘틱 HTML을 설명하고, 왜 공부해야하는지 설명을 제공합니다.
  3. WebGL 2D Translation
    WebGL 기초부터 시리즈로 튜토리얼을 제공합니다.
  4. Getting started with the HTML5 track element
    HTML5 트랙 요소로 시작하기
    트랙요소는 비디오 및 오디오에 오디오 자막, 자막, 화면 판독기에 대한 설명및 챕터를 추가하는 표준화된 방법을 제공합니다.
  5. Toying With the HTML5 File System API
    HTML5 파일시스템 API가지고 놀기
    HTML5의 캔버스 그리기, 오디오 및 비디오 API와 멀티미디어 샐행등을 포함한 새로운 기능에 대한 튜토리을 제공합니다.
  6. Capturing Audio & Video in HTML5
    HTML5 오디오, 비디오 캡쳐
    오랫동안 오디오와 비디오 캡쳐는 브라우즈 플러그인을 통해서만 사용할 수 있는 넘사벽이었지만, HTML5에서는 넘을수 있는 벽입니다.
  7. An Introduction to the HTML5 Gamepad API
    HTML5 게임패드 API소개
    게임패드 API는 오래된 콘솔게임 패드를 연결하고 브라우저 기반 게임에 사용할 수 있다.
  8. Understanding HTML5 and CSS3 for Web Design designmodo.com/html5-css3-web-design
    웹 디자인 관점 HTML5, CSS3 이해
    HTML5와 CSS3는 웹 개발/디자인에 더 많은 도구를 제공한다. 이 튜토리얼은 웹사이트에서 짜투리 공간을 활용할 수 있는 방법과 이해를 할 수 있는 방법을 제공한다.
  9. Case Study: A Tale of An HTML5 Game with Web Audio
    사례연구 : 웹 오디오와 HTML5 게임 이야v기 Fieldrunners는 2008년에 아이폰에 도입된 성공적인 타워 방어 스타일 게임이다. 이 후 다른 여러 플랫폼에 도입되었다.
  10. Case Study: Building Technitone.com
    사례연구 : Technitone.com 구축
    Technitone.com은 WebGL을 캔버스, 웹소켓, CSS3, 자바스크립트, 플래시, 크롬등에서 도입한 새로운 웹 오디오 API이다.
    이 튜토리얼은 계획, 서버, 소리, 영상, 워크 플로우와 제품생산등 모든 내용에 대해서 다룬다.
  11. An in Depth Analysis of HTML5 Multimedia and Accessibility
    HTML5 멀티미디어와 접근성 상세분석 HTML5가 사용자에게 미디어 콘텐츠를 제공할 수 있는 방법에대한 설명을 제공합니다.
  12. HTML5 Tutorial : How to Build a Single Product Page
    웹사이트 구축을 위해 아이폰4S 페이지 만들기와 가상의 프로젝트를 수행하는 튜토리얼을 제공합니다.
  13. Tutorial : Create A Minimal Single Page Portfollo With HTML5/CSS3
    HTML5와 CSS3를 이용해서 최소한의 리소스를 이용 싱글페이지 포토폴리오를 만들기위한 프론트엔드 구축 튜토리얼을 제공한다.
  14. HTML5 Drag and Drop Multiple File Uploader
    드래그&드롭 다중 파일 업로더
    HTML5 에서 드래그&드롭으로 파일을 업로드하는 구성과 삭제하는 방법을 제공한다.
  15. Retro shop single page layout for your e-shop
    레트로 디자인 싱글 페이지 레이아웃 쇼핑몰
    HTML5, CSS, Javascript 로 레트로 템플릿을 생성하는 방법을 알아봅니다.
  16. Cocos2D HTML5 tutorial: Why it's Hello World of course
    Cocos2D HTML5 'Hello World' 코스
  17. Convert Your WordPress Theme to HTML5
    HTML5 워드프레스 테마 변경
    구글 팬더 업데이트 이후 더 나은 구글 순위를 차지하기 위해서는 사람이 읽을 수 있는 코드가 필요해졌습니다. 이 튜토리얼은 워드프레서 테마(which Google loves) XHTML에서 HTML5로 변환하는 방법을 제공합니다.
  18. Developing HTML5 Canvas Games for Facebook with JavaScript- Part 1
    자바스크립트 페이브북 HTML5 캔버스 게임개발 - 파트 1
    HTML5 캔버스 요소와 자바스크립트를 이용해서 페이스북에서 실행하는 게임을 만드는 방법을 제공합니다.
  19. Create an interactive bubble chart with HTML5 canvas
    HTML5 캔버스로 대화형 버블차트 만들기
    데스크탑과 모바일에서 작동하는 대화형 차트를 구성하고 실제 데이트를 사용하여 차트를 만드는 방법을 제공합니다.
  20. Create HTML5 audio visualisations URL
    HTML5 오디오 시각화 URL 만들기
    플래시와 HTML5 사이의 경계를 흐리게하는 오디오기반 애니메이션을 제공합니다.
  21. Toggle Fullscreen HTML5 Canvas and Other DOM Elements
    브라우즈에서 HTML5 캔버스 태그에 전체화면 기능을 추가하는 방법을 제공합니다.
  22. Mobilizing Websites with Responsive Design and HTML5 Tutorial
    HTML5 모바일 웹사이트 반응형 디자인
    별도의 모바일 사이트를 구축하지 않고, HTML, CSS, Javascript를 이용 모바일장치에 친숙하도록 구축하는 방법 제공.
  23. Full CSS3 HTML5 Contact Form with No Images
    HTML5, CSS를 이용 이미지를 사용하지 않는 폼
    이미지를 사용하지 않고 HTML5와 CSS3만으로 폼약식을 만드는 방법을 단계별로 제공합니다.
  24. Create Your Portfolio Gallery Using HTML5 Canvas
    HTML5 캔버스 갤러리 만들기
    HTML5 캔버스와 CSS3로 갤러리 생성 방법을 제공합니다.
  25. Build a Lightbox for a responsive HTML5 touch interface
    반응형 HTML5 터치 인터페이스 Lightbox 구축
    제스처 기능을 지원하는 Lightbox 구축방법을 제공한다.
  26. Create an HTML5 Canvas Tile Swapping Puzzle
    HTML5 캔버스 타일 스왑 퍼즐
    HTML5와 Javascript로 동적 타일교환 게임을 구성하는 방법을 설명한다.
  27. HTML5 Canvas Optimization: A Practical Example
    HTML5 캔버스 최적화 실전예제
    HTML5 생성 애니메이션 최적화, Javascript 최적화에 대해 제공한다.
  28. Learn CreateJS by Building an HTML5 Pong Game
    CreateJS와 탁구게임 구축 배우기
    카를로스 네즈의 EaselJS로 HTML5 탁구게임 만들기에서 영감을 얻었으며, 그래픽과사운드 효과는 네즈의 튜토리얼을 사용한다.
  29. How to Create an Audio Player in jQuery, HTML5 & CSS3
    JQuery, HTML5와 CSS3를 사용한 오디오 플레이 만들기
    HTML5 MediaElement와 API를 이요해서 오디오, 비디오 플레이어를 만드는 방법을 제공한다.
  30. Design a Foursquare-like User Profile Page in HTML5/CSS3
    HTML5, CSS3를 이용 Foursquare와 같은 사용자 프로필 페이지 만들기
    포스퀘어와 같은 간단한 프로필 페이지 코딩방법을 제공한다.


참고 30 Must-Read HTML5 Tutorials


반응형