Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정으로 웹 개발의 기본을 배워보세요. 24개의 각 레슨은 테라리움, 브라우저 확장, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS 및 HTML을 심도 있게 다룹니다. 퀴즈, 토론, 실습 과제를 통해 참여하고 학습하세요. 효과적인 프로젝트 기반 교육법으로 기술을 향상시키고 지식 습득을 최적화하세요. 지금 코딩 여정을 시작하세요!

Azure AI Foundry Discord 커뮤니티에 참여하세요

이 리소스를 사용해 시작하려면 다음 단계를 따르세요:

1. 저장소 포크하기: 클릭
2. 저장소 클론하기: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Azure AI Foundry Discord에 가입하여 전문가 및 동료 개발자 만나기

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

로컬에서 클론하는 것을 선호하시나요?

이 저장소는 50개 이상의 언어 번역본을 포함하고 있어서 다운로드 크기가 상당히 큽니다. 번역 없이 클론하려면 sparse checkout을 사용하세요:

Bash / macOS / Linux:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

CMD (Windows):

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"

이렇게 하면 더 빠른 다운로드로 코스를 완료하는 데 필요한 모든 것을 얻을 수 있습니다.

추가 지원 희망 언어는 여기에서 확인하세요

초보자용 자료, 학생 팩, 무료 수료증 바우처를 받을 수 있는 방법이 마련된 학생 허브 페이지를 방문하세요. 이 페이지는 매월 콘텐츠가 교체되므로 즐겨찾기해 두고 가끔 확인하는 것이 좋습니다.

새로운 챌린지가 추가되었습니다, 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 찾아보세요. GitHub Copilot과 Agent 모드를 사용해 완수할 수 있는 새로운 도전입니다. 이전에 Agent 모드를 사용해 본 적 없다면 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령 실행 등이 가능한 기능입니다.

새 AI 어시스턴트 프로젝트가 추가되었습니다. 확인해보세요 프로젝트

새로운 생성 AI 커리큘럼을 놓치지 마세요!

시작하려면 https://aka.ms/genai-js-course를 방문하세요!

• 기초부터 RAG까지 모든 내용을 다루는 레슨
• GenAI와 동반 앱을 사용해 역사적 인물과 상호작용
• 재미있고 흥미진진한 내러티브, 시간 여행도 하게 됩니다!

각 레슨에는 과제, 지식 점검, 그리고 다음과 같은 주제 학습을 안내하는 챌린지가 포함되어 있습니다:

• 프롬프트 작성 및 프롬프트 엔지니어링
• 텍스트 및 이미지 앱 생성
• 검색 앱

시작하려면 https://aka.ms/genai-js-course를 방문하세요!

교사분들, 이 커리큘럼을 사용하는 방법에 대한 몇 가지 제안을 포함했습니다. 의견은 우리 토론 포럼에서 들려주세요!

학습자님들, 각 레슨에서는 사전 퀴즈로 시작하여 강의 자료를 읽고 여러 활동을 완료하며 강의 이후 퀴즈로 이해도를 확인하세요.

학습 효과를 높이려면 동료 학습자와 함께 프로젝트를 진행하고 토론하세요! 토론 포럼에서 토론이 활발히 권장되며, 모더레이터 팀이 질문에 응답할 준비가 되어 있습니다.

더 깊은 학습을 위해 추가 학습 자료를 Microsoft Learn에서 살펴보시길 강력히 추천합니다.

이 커리큘럼은 이미 개발 환경이 준비되어 있습니다! 시작할 때 Codespace(브라우저 기반 설치 불필요 환경)에서 실행하거나, 로컬 컴퓨터에서 Visual Studio Code 같은 텍스트 편집기를 사용해 진행할 수 있습니다.

작업 내용을 쉽게 저장하려면 이 저장소의 자신의 복사본을 만드는 것이 권장됩니다. 페이지 상단의 Use this template 버튼을 클릭하면 커리큘럼 복사본이 포함된 새 저장소가 GitHub 계정에 생성됩니다.

단계는 다음과 같습니다:

1. 저장소 포크하기: 이 페이지 우측 상단의 "Fork" 버튼을 클릭하세요.
2. 저장소 클론하기: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

생성한 저장소 복사본에서 Code 버튼을 클릭한 후 Open with Codespaces를 선택하세요. 그러면 작업할 새로운 Codespace가 생성됩니다.

로컬 컴퓨터에서 이 커리큘럼을 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 레슨인 프로그래밍 언어 및 도구 소개에서 각 도구별 다양한 옵션을 안내하니 자신에게 가장 알맞은 것을 선택하세요.

추천 텍스트 편집기는 Visual Studio Code로, 내장 터미널도 함께 제공합니다. Visual Studio Code는 여기에서 다운로드할 수 있습니다.

1. 컴퓨터에 저장소를 복제하세요. Code 버튼을 클릭하고 URL을 복사하여 할 수 있습니다:

   CodeSpace

   그런 다음 Visual Studio Code 내에서 Terminal을 열고, 방금 복사한 URL을 <your-repository-url> 대신 사용하여 다음 명령어를 실행하세요:

   git clone <your-repository-url>

2. Visual Studio Code에서 폴더를 엽니다. File > Open Folder를 클릭하고 방금 복제한 폴더를 선택하면 됩니다.

추천하는 Visual Studio Code 확장 기능:

• Live Server - Visual Studio Code 내에서 HTML 페이지를 미리 보기 위해
• Copilot - 코드 작성 속도를 높이기 위해

• 선택적 스케치노트
• 선택적 보충 영상
• 수업 전 워밍업 퀴즈
• 서면 강의
• 프로젝트 기반 강의의 경우 단계별 프로젝트 구축 안내
• 개념 점검
• 도전 과제
• 추가 읽기 자료
• 과제
• 수업 후 퀴즈

퀴즈에 대한 참고: 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며, 총 48개의 퀴즈로 각 퀴즈는 세 문제로 구성되어 있습니다. 퀴즈는 여기에서 이용할 수 있으며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다; quiz-app 폴더 내 지침을 따르세요.

우리 커리큘럼은 두 가지 핵심 교수 원칙에 기반하여 설계되었습니다:

• 프로젝트 기반 학습
• 빈번한 퀴즈

본 프로그램은 JavaScript, HTML, CSS의 기본 원리와 최신 웹 개발자들이 사용하는 도구 및 기술을 가르칩니다. 학생들은 타자 게임, 가상 테라리움, 친환경 브라우저 확장, 우주 침입자 스타일 게임, 그리고 기업용 뱅킹 앱을 만들어 실습 경험을 쌓게 됩니다. 시리즈가 끝날 때쯤 학생들은 웹 개발에 대한 탄탄한 이해를 갖추게 됩니다.

🎓 이 커리큘럼의 초기 몇 강의를 Microsoft Learn의 학습 경로로도 들을 수 있습니다!

프로젝트와 콘텐츠를 연계하여 학생들의 참여도를 높이고 개념의 유지력을 강화합니다. 자바스크립트 기본 개념을 소개하는 여러 시작 강의를 작성했고, 영상 강의 컬렉션 "JavaScript 초보자 시리즈"의 영상도 함께 제공합니다. 해당 컬렉션 저자가 일부 커리큘럼 작업에 참여했습니다.

또한 수업 전 저강도 퀴즈는 학습 의도를 세우고, 수업 후 퀴즈는 개념 유지에 도움을 줍니다. 본 커리큘럼은 유연하고 재미있게 학습할 수 있도록 설계되었으며, 전부 또는 일부만 수강해도 됩니다. 프로젝트들은 처음에 작게 시작해 12주 주기 말에 갈수록 복잡해집니다.

웹 개발자로서 프레임워크 사용 전 필요한 기본기를 집중할 수 있도록, 일부러 자바스크립트 프레임워크 도입은 피했습니다. 이후 진행해야 할 좋은 다음 단계는 "Node.js 초보자 시리즈" 영상 컬렉션을 통해 Node.js를 배우는 것입니다.

우리의 행동 강령 및 기여 가이드를 방문해 주세요. 건설적인 피드백을 환영합니다!

Docsify를 사용하면 이 문서를 오프라인에서 실행할 수 있습니다. 리포를 포크하고, 로컬 컴퓨터에 Docsify 설치 후, 이 리포의 루트 폴더에서 docsify serve를 입력하세요. 웹사이트는 포트 3000에서 localhost로 서비스됩니다: localhost:3000.

모든 강의의 PDF는 여기에서 확인할 수 있습니다.

저희 팀은 다른 강의도 제작합니다! 확인해 보세요:

AI 앱 개발 중 막히거나 질문이 있으면 MCP에 관한 토론에 참여하세요. 질문이 환영받고 지식이 자유롭게 공유되는 지원 커뮤니티입니다.

제품 피드백이나 빌드 중 오류가 있으면 다음을 방문하세요:

이 저장소는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

면책 조항: 이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역에는 오류나 부정확성이 있을 수 있음을 유의하시기 바랍니다. 원본 문서의 원어 버전이 가장 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 발생하는 오해나 오해석에 대해 당사는 책임을 지지 않습니다.