Web Dev For Beginners
1.0.0
Microsoft Cloud Advocates의 12주 종합 과정을 통해 웹 개발의 기본 사항을 알아보세요. 24개의 각 강의에서는 테라리움, 브라우저 확장, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS 및 HTML을 다룹니다. 퀴즈, 토론, 실제 과제에 참여하세요. 효과적인 프로젝트 기반 교수법을 통해 기술을 향상하고 지식 보유를 최적화하세요. 오늘 코딩 여정을 시작해보세요!
초보자용 리소스, 학생 팩, 무료 인증서 바우처를 얻을 수 있는 방법까지 찾을 수 있는 학생 허브 페이지를 방문하세요. 매달 콘텐츠가 바뀌면서 즐겨찾기에 추가하고 수시로 확인하고 싶은 페이지입니다.
생성 AI에 대한 새로운 12개 강의 커리큘럼을 놓치지 마세요!
각 수업에는 완료해야 할 과제, 지식 확인 및 다음과 같은 학습 주제를 안내하는 과제가 포함되어 있습니다.
프롬프트 및 신속한 엔지니어링
텍스트 및 이미지 앱 생성
검색 앱
시작하려면 https://aka.ms/genai-beginners를 방문하세요!
교사 여러분 , 우리는 이 커리큘럼을 사용하는 방법에 대한 몇 가지 제안을 포함시켰습니다. 토론 포럼에서 여러분의 피드백을 환영합니다!
학습자는 각 수업마다 사전 퀴즈로 시작하여 강의 자료를 읽고 다양한 활동을 완료하며 강의 후 퀴즈를 통해 이해도를 확인합니다.
학습 경험을 향상하려면 동료와 연결하여 프로젝트를 함께 진행하세요! 토론 포럼에서는 중재자 팀이 귀하의 질문에 답변해 드릴 수 있으므로 토론이 권장됩니다.
더 많은 교육을 받으려면 Microsoft Learn에서 추가 학습 자료를 살펴보는 것이 좋습니다.
이 커리큘럼에는 개발 환경이 준비되어 있습니다! 시작하면서 커리큘럼을 Codespace( 브라우저 기반, 설치가 필요 없는 환경 )에서 실행하거나 Visual Studio Code와 같은 텍스트 편집기를 사용하여 컴퓨터에서 로컬로 실행하도록 선택할 수 있습니다.
작업 내용을 쉽게 저장하려면 이 저장소의 복사본을 직접 만드는 것이 좋습니다. 페이지 상단에 있는 이 템플릿 사용 버튼을 클릭하면 됩니다. 그러면 커리큘럼 사본이 포함된 GitHub 계정에 새 저장소가 생성됩니다.
다음 단계를 따르세요.
저장소 포크 : 이 페이지 오른쪽 상단에 있는 "포크" 버튼을 클릭하세요.
리포지토리 복제 : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
생성한 이 저장소의 복사본에서 Code 버튼을 클릭하고 Open with Codespaces 를 선택합니다. 그러면 작업할 수 있는 새로운 Codespace가 생성됩니다.
이 커리큘럼을 컴퓨터에서 로컬로 실행하려면 텍스트 편집기, 브라우저 및 명령줄 도구가 필요합니다. 첫 번째 강의인 프로그래밍 언어 및 업무용 도구 소개에서는 이러한 각 도구에 대한 다양한 옵션을 안내하여 자신에게 가장 적합한 것을 선택할 수 있습니다.
터미널이 내장된 Visual Studio Code를 편집기로 사용하는 것이 좋습니다. 여기에서 Visual Studio Code를 다운로드할 수 있습니다.
저장소를 컴퓨터에 복제하세요. 코드 버튼을 클릭하고 URL을 복사하면 됩니다.
그런 다음 Visual Studio Code에서 터미널을 열고 다음 명령을 실행하여 <your-repository-url> 방금 복사한 URL로 바꿉니다.
git clone <저장소 URL>
Visual Studio Code에서 폴더를 엽니다. 파일 > 폴더 열기를 클릭하고 방금 복제한 폴더를 선택하면 됩니다.
권장되는 Visual Studio Code 확장:
라이브 서버 - Visual Studio Code 내에서 HTML 페이지를 미리 봅니다.
Copilot - 코드를 더 빠르게 작성할 수 있도록 도와줍니다.
선택적 스케치노트
선택적 보충 비디오
수업 전 워밍업 퀴즈
서면 수업
프로젝트 기반 수업의 경우 프로젝트 구축 방법에 대한 단계별 가이드
지식 점검
도전
보충 독서
과제
수업 후 퀴즈
퀴즈에 대한 참고 사항 : 모든 퀴즈는 퀴즈 앱 폴더에 포함되어 있으며 각각 3개의 질문으로 구성된 총 48개의 퀴즈가 있습니다. 퀴즈 앱을 로컬에서 실행하거나 Azure에 배포할 수 있는 강의 내에서 연결됩니다.
quiz-app폴더의 지침을 따르세요. 점차 현지화되고 있습니다.
| 프로젝트 이름 | 배운 개념 | 학습 목표 | 연계 레슨 | 작가 | |
|---|---|---|---|---|---|
| 01 | 시작하기 | 프로그래밍 및 업무 도구 소개 | 대부분의 프로그래밍 언어의 기본 토대와 전문 개발자의 업무 수행에 도움이 되는 소프트웨어에 대해 알아보세요. | 프로그래밍 언어 및 업계 도구 소개 | 여자 이름 |
| 02 | 시작하기 | GitHub의 기본 사항에는 팀과의 작업이 포함됩니다. | 프로젝트에서 GitHub를 사용하는 방법, 코드 베이스에서 다른 사람들과 협업하는 방법 | GitHub 소개 | 바닥 |
| 03 | 시작하기 | 접근성 | 웹접근성의 기본을 배워보세요 | 접근성 기본 사항 | 크리스토퍼 |
| 04 | JS 기초 | 자바스크립트 데이터 유형 | JavaScript 데이터 유형의 기본 | 데이터 유형 | 여자 이름 |
| 05 | JS 기초 | 기능 및 방법 | 애플리케이션의 논리 흐름을 관리하는 기능과 방법에 대해 알아봅니다. | 기능 및 방법 | 자스민과 크리스토퍼 |
| 06 | JS 기초 | JS로 결정하기 | 의사 결정 방법을 사용하여 코드에서 조건을 만드는 방법을 알아보세요. | 의사결정 | 여자 이름 |
| 07 | JS 기초 | 배열과 루프 | JavaScript에서 배열과 루프를 사용하여 데이터 작업 | 배열과 루프 | 여자 이름 |
| 08 | 테라리움 | 실제 HTML | 레이아웃 구축에 중점을 두고 HTML을 구축하여 온라인 테라리움을 생성합니다. | HTML 소개 | 젠 |
| 09 | 테라리움 | 실제 CSS | 페이지를 반응형으로 만드는 것을 포함하여 CSS의 기본 사항에 중점을 두고 온라인 테라리움 스타일을 지정하는 CSS를 구축합니다. | CSS 소개 | 젠 |
| 10 | 테라리움 | JavaScript 클로저, DOM 조작 | 클로저 및 DOM 조작에 중점을 두고 테라리움 기능을 드래그/드롭 인터페이스로 만들기 위해 JavaScript를 빌드합니다. | JavaScript 클로저, DOM 조작 | 젠 |
| 11 | 타이핑 게임 | 타이핑 게임 만들기 | 키보드 이벤트를 사용하여 JavaScript 앱의 논리를 구동하는 방법을 알아보세요. | 이벤트 중심 프로그래밍 | 크리스토퍼 |
| 12 | 그린 브라우저 확장 | 브라우저 작업 | 브라우저의 작동 방식과 기록, 브라우저 확장의 첫 번째 요소를 스캐폴딩하는 방법을 알아보세요. | 브라우저 정보 | 젠 |
| 13 | 그린 브라우저 확장 | 양식 작성, API 호출 및 로컬 저장소에 변수 저장 | 로컬 저장소에 저장된 변수를 사용하여 API를 호출하도록 브라우저 확장의 JavaScript 요소를 빌드합니다. | API, 양식 및 로컬 저장소 | 젠 |
| 14 | 그린 브라우저 확장 | 브라우저의 백그라운드 프로세스, 웹 성능 | 확장 프로그램의 아이콘을 관리하려면 브라우저의 백그라운드 프로세스를 사용하세요. 웹 성능과 몇 가지 최적화에 대해 알아보세요. | 백그라운드 작업 및 성능 | 젠 |
| 15 | 우주 게임 | JavaScript를 활용한 더욱 발전된 게임 개발 | 게임 구축을 준비하면서 클래스와 컴포지션, Pub/Sub 패턴을 모두 사용하는 상속에 대해 알아보세요. | 고급 게임 개발 소개 | 크리스 |
| 16 | 우주 게임 | 캔버스에 그리기 | 화면에 요소를 그리는 데 사용되는 Canvas API에 대해 알아보세요. | 캔버스에 그리기 | 크리스 |
| 17 | 우주 게임 | 화면 주위에서 요소 이동하기 | 데카르트 좌표와 Canvas API를 사용하여 요소가 어떻게 동작할 수 있는지 알아보세요. | 요소 이동 | 크리스 |
| 18 | 우주 게임 | 충돌 감지 | 키 누르기를 사용하여 요소가 서로 충돌하고 반응하도록 하고 게임 성능을 보장하기 위한 쿨다운 기능을 제공합니다. | 충돌 감지 | 크리스 |
| 19 | 우주 게임 | 점수 유지 | 게임 상태 및 성능을 기반으로 수학 계산을 수행합니다. | 점수 유지 | 크리스 |
| 20 | 우주 게임 | 게임 종료 및 다시 시작 | 자산 정리 및 변수 값 재설정을 포함하여 게임 종료 및 다시 시작에 대해 알아봅니다. | 엔딩 조건 | 크리스 |
| 21 | 뱅킹 앱 | 웹 앱의 HTML 템플릿 및 경로 | 라우팅 및 HTML 템플릿을 사용하여 다중 페이지 웹 사이트 아키텍처의 기반을 만드는 방법을 알아보세요. | HTML 템플릿 및 경로 | 요한 |
| 22 | 뱅킹 앱 | 로그인 및 등록 양식 작성 | 양식 작성 및 유효성 검사 루틴 처리에 대해 알아보기 | 양식 | 요한 |
| 23 | 뱅킹 앱 | 데이터를 가져오고 사용하는 방법 | 데이터가 앱 안팎으로 흐르는 방식, 데이터를 가져오고 저장하고 폐기하는 방법 | 데이터 | 요한 |
| 24 | 뱅킹 앱 | 상태 관리의 개념 | 앱이 상태를 유지하는 방법과 이를 프로그래밍 방식으로 관리하는 방법을 알아보세요. | 상태 관리 | 요한 |
우리 커리큘럼은 두 가지 주요 교육학 원칙을 염두에 두고 설계되었습니다.
프로젝트 기반 학습
자주 퀴즈
이 프로그램은 JavaScript, HTML, CSS의 기초는 물론 오늘날 웹 개발자가 사용하는 최신 도구와 기술을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장 프로그램, 스페이스 인베이더 스타일 게임, 기업용 뱅킹 앱을 구축하여 실습 경험을 개발할 수 있는 기회를 갖게 됩니다. 시리즈가 끝나면 학생들은 웹 개발에 대한 확실한 이해를 얻게 될 것입니다.
? 이 커리큘럼의 처음 몇 가지 단원을 Microsoft Learn의 학습 경로로 수강할 수 있습니다!
콘텐츠가 프로젝트와 일치하는지 확인함으로써 프로세스는 학생들의 참여를 더욱 높이고 개념 유지가 강화됩니다. 또한 개념을 소개하기 위해 JavaScript 기초에 대한 몇 가지 시작 강의를 작성했으며, 이 강의의 저자 중 일부가 이 커리큘럼에 기여한 "Beginners Series to: JavaScript" 비디오 튜토리얼 컬렉션의 비디오와 짝을 이루었습니다.
또한, 수업 전의 저위험 퀴즈는 주제 학습에 대한 학생의 의도를 설정하는 반면, 수업 후 두 번째 퀴즈는 더 많은 기억력을 보장합니다. 이 커리큘럼은 유연하고 재미있게 설계되었으며 전체 또는 일부를 수강할 수 있습니다. 프로젝트는 작게 시작하여 12주 주기가 끝날 무렵에는 점점 더 복잡해집니다.
프레임워크를 채택하기 전에 웹 개발자로서 필요한 기본 기술에 집중하기 위해 의도적으로 JavaScript 프레임워크 도입을 피했지만, 이 커리큘럼을 완료하기 위한 좋은 다음 단계는 다른 비디오 컬렉션인 "초보자 시리즈: Node.js".
행동 강령 및 기여 지침을 확인하세요. 우리는 귀하의 건설적인 피드백을 환영합니다!
Docsify를 사용하여 이 문서를 오프라인으로 실행할 수 있습니다. 이 저장소를 포크하고 로컬 컴퓨터에 Docsify를 설치한 다음 이 저장소의 루트 폴더에 docsify serve 입력하세요. 웹 사이트는 로컬 호스트( localhost:3000 의 포트 3000에서 제공됩니다.
모든 강의의 PDF는 여기에서 찾을 수 있습니다.
우리 팀은 다른 커리큘럼도 제작하고 있어요! 확인해 보세요:
초보자를 위한 AI
초보자를 위한 데이터 과학
초보자를 위한 생성 AI
초보자를 위한 새로운 사이버 보안
초보자를 위한 IoT
초보자를 위한 머신러닝
초보자를 위한 XR 개발
AI 페어링 프로그래밍을 위한 GitHub Copilot 마스터하기
이 저장소는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.
