분류 html

초보자를 위한 웹 개발-커리큘럼

컨텐츠 정보

  • 조회 24 (작성일 )

본문

24 개의 강의, 12 주, 웹 개발자로 시작하기.


https://github.com/microsoft/Web-Dev-For-Beginners


Microsoft의 Azure Cloud Advocates는 JavaScript, CSS 및 HTML 기본 사항에 대한 모든 12 주 24 강의 커리큘럼을 제공하게 되어 기쁘게 생각합니다. 

각 레슨에는 사전 및 사후 레슨 퀴즈, 레슨 완료를 위한 서면 지침, 솔루션, 과제 등이 포함됩니다. 우리의 프로젝트 기반 교육을 통해 새로운 기술을 '고수'할 수 있는 입증 된 방법인 구축하면서 배울 수 있습니다.


저자 Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees 및 스케치 노트 아티스트 Tomomi Imura에게 진심으로 감사드립니다!


교사 여러분,이 커리큘럼을 사용하는 방법에 대한 몇 가지 제안을 포함했습니다. 자신 만의 강의를 만들고 싶다면 강의 템플릿도 포함되어 있습니다. 


학생들이 이 커리큘럼을 혼자 사용하려면 전체 레포를 포크하고 사전 강의 퀴즈로 시작한 다음 강의를 읽고 나머지 활동을 완료하여 스스로 연습을 완료하십시오. 솔루션 코드를 복사하는 대신 학습 내용을 이해하여 프로젝트를 작성하십시오. 그러나 해당 코드는 각 프로젝트 지향 레슨의 /solutions 폴더에서 사용할 수 있습니다. 또 다른 아이디어는 친구들과 스터디 그룹을 구성하고 함께 내용을 살펴 보는 것입니다. 추가 연구를 위해 아래에 언급 된 비디오를 시청하고 Microsoft Learn을 권장합니다. 


Promo video

프로젝트와 프로젝트를 만든 사람들에 대한 비디오를 보려면 위의 이미지를 클릭하십시오!


교육학 


우리는 이 커리큘럼을 구축하는 동안 두 가지 교육적 교리를 선택했습니다. 프로젝트 기반이고 빈번한 퀴즈를 포함하도록 합니다. 이 시리즈가 끝날 무렵 학생들은 타이핑 게임, 가상 테라리움, '그린'브라우저 확장, '스페이스 인베이더'형 게임 및 비즈니스 형 뱅킹 앱을 구축하고 JavaScript의 기본 사항을 배웠습니다. , HTML 및 CSS를 오늘날 웹 개발자의 최신 도구 모음과 함께 제공합니다.


콘텐츠가 프로젝트와 일치하도록 함으로써 프로세스가 학생들의 참여도를 높이고 개념 유지가 강화됩니다. 또한 "초보자 시리즈 : JavaScript"비디오 자습서 컬렉션의 비디오와 함께 개념을 소개하기 위해 JavaScript 기본에 대한 몇 가지 시작 레슨을 작성했습니다. 일부 작성자는 이 커리큘럼에 기여했습니다.


또한, 수업 시작 전의 저 위험 퀴즈는 학생의 주제 학습 의도를 설정하고 수업 후 두 번째 퀴즈는 추가 유지를 보장합니다. 이 커리큘럼은 유연하고 재미있게 설계되었으며 전체 또는 일부를 수강 할 수 있습니다. 프로젝트는 작게 시작하여 12 주 주기가 끝날 때까지 점점 복잡해집니다.


프레임 워크를 채택하기 전에 웹 개발자로서 필요한 기본 기술에 집중하기 위해 의도적으로 JavaScript 프레임 워크를 도입하는 것을 피했지만,이 커리큘럼을 완료하기 위한 좋은 다음 단계는 다른 비디오 모음을 통해 Node.js에 대해 배우는 것입니다. "초보자 시리즈 to : Node.js ".


행동 강령, 기여번역 지침을 찾아보십시오. 건설적인 피드백을 환영합니다!


각 강의에는 다음이 포함됩니다. 

  • optional sketchnote 선택적 스케치 노트
  • optional supplemental video 선택적 추가 비디오
  • pre-lesson warmup quiz 사전 수업 준비 퀴즈
  • written lesson 서면 수업
  • for project-based lessons, step-by-step guides on how to build the project 프로젝트 기반 수업의 경우 프로젝트를 빌드 하는 방법에 대한 단계별 가이드
  • knowledge checks 지식 점검
  • a challenge  도전 
  • supplemental reading 보충 독서
  • assignment 숙제
  • post-lesson quiz 수업 후 퀴즈

퀴즈에 대한 참고 사항 : 모든 퀴즈가 이 앱에 포함되어 있으며 각각 3 개의 질문으로 구성된 총 48 개의 퀴즈가 있습니다. 강의 내에서 링크되지만 퀴즈 앱은 로컬에서 실행할 수 있습니다. 퀴즈 앱 폴더의 지침을 따릅니다. 점차 현지화되고 있습니다.


레슨 



프로젝트 이름배운 개념학습 목표연결된 강의서면 수업SketchnoteAssignmentStarting QuizEnding QuizVideoAuthor
01시작하기프로그래밍 및 거래 도구 소개Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobsIntro to Programming Languages and Tools of the TradeJasmine
02Getting StartedBasics of GitHub, includes working with a teamHow to use GitHub in your project, how to collaborate with others on a code baseIntro to GitHub🛑Floor
03Getting StartedAccessibilityLearn the basics of web accessibilityAccessibility Fundamentals🛑Christopher
04JS BasicsJavaScript Data TypesThe basics of JavaScript data typesData TypesJasmine
05JS BasicsFunctions and MethodsLearn about functions and methods to manage an application's logic flowFunctions and MethodsJasmine and Christopher
06JS BasicsMaking Decisions with JSLearn how to create conditions in your code using decision-making methodsMaking DecisionsJasmine
07JS BasicsArrays and LoopsWork with data using arrays and loops in JavaScriptArrays and LoopsJasmine
08TerrariumHTML in PracticeBuild the HTML to create an online terrarium, focusing on building a layoutIntroduction to HTML🛑Jen
09TerrariumCSS in PracticeBuild the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsiveIntroduction to CSS🛑Jen
10TerrariumJavaScript Closures, DOM manipulationBuild the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulationJavaScript Closures, DOM manipulation🛑Jen
11Typing GameBuild a Typing GameLearn how to use keyboard events to drive the logic of your JavaScript appEvent-Driven Programming🛑Christopher
12Green Browser ExtensionWorking with BrowsersLearn how browsers work, their history, and how to scaffold the first elements of a browser extensionAbout Browsers🛑Jen
13Green Browser ExtensionBuilding a form, calling an API and storing variables in local storageBuild the JavaScript elements of your browser extension to call an API using variables stored in local storageAPIs, Forms, and Local Storage🛑Jen
14Green Browser ExtensionBackground processes in the browser, web performanceUse the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to makeBackground Tasks and Performance🛑🛑Jen
15Space GameMore Advanced Game Development with JavaScriptLearn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a gameIntroduction to Advanced Game Development🛑🛑Chris
16Space GameDrawing to canvasLearn about the Canvas API, used to draw elements to a screenDrawing to Canvas🛑🛑Chris
17Space GameMoving elements around the screenDiscover how elements can gain motion using the cartesian coordinates and the Canvas APIMoving Elements Around🛑🛑Chris
18Space GameCollision detectionMake elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the gameCollision Detection🛑🛑Chris
19Space GameKeeping scorePerform math calculations based on the game's status and performanceKeeping Score🛑🛑Chris
20Space GameEnding and restarting the gameLearn about ending and restarting the game, including cleaning up assets and resetting variable valuesThe Ending Condition🛑🛑Chris
21Banking AppHTML Templates and Routes in a Web AppLearn how to create the scaffold of a multipage website's architecture using routing and HTML templatesHTML Templates and Routes🛑Yohan
22Banking AppBuild a Login and Registration FormLearn about building forms and handing validation routinesForms🛑Yohan
23Banking AppMethods of Fetching and Using DataHow data flows in and out of your app, how to fetch it, store it, and dispose of itData🛑Yohan
24Banking AppConcepts of State ManagementLearn how your app retains state and how to manage it programmaticallyState Management🛑Yohan

오프라인 액세스 


Docsify를 사용하여 이 문서를 오프라인으로 실행할 수 있습니다. 이 저장소를 포크하고 로컬 머신에 Docsify를 설치 한 다음 이 저장소의 루트 폴더에 docsify serve를 입력하십시오. 웹 사이트는 localhost : localhost : 3000의 포트 3000에서 제공됩니다.