Web-Dev-For-Beginners/translations/pcm

Web Development for Beginners - Kurikulum

Larn di basics of web development wit our 12-week full course wey Microsoft Cloud Advocates organize. Each of di 24 lessons go deep inside JavaScript, CSS, and HTML thru hands-on projek dem like terrariums, browser extension dem, and space games. Get involved wit quizzes, discussions, and practical assignment dem. Improve your skill dem and make your knowledge strong wit our better project-based teaching method. Start your coding journey today!

Join di Azure AI Foundry Discord Community

Follow dis steps to start to use these resources:

1. Fork di Repository: Click
2. Clone di Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Join The Azure AI Foundry Discord and meet experts and fellow developers

🌐 Multi-Language Support

Supported via GitHub Action (Automated & Always Up-to-Date)

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 | 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

You prefer to Clone locally?

Dis repository get more than 50 language translations wey go make di download big well well. If you wan clone without all di translations, use sparse checkout:

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'

Dis one go give you everything wey you need to finish di course sharp sharp.

If you want make dem add more language translations, dem dey listed here

🧑‍🎓 You be student?

Visit Student Hub page wey go get beginner resources, Student packs and even ways to get free certificate voucher. Dis na di page wey you supposed bookmark and dey check sometimes as we dey change content monthly.

📣 Announcement - New GitHub Copilot Agent mode challenges to complete!

New Challenge don add, look for "GitHub Copilot Agent Challenge 🚀" inside most chapters. Na new challenge wey go make you use GitHub Copilot and Agent mode complete am. If you never use Agent mode before, e fit generate text plus create and edit files, run commands and more.

📣 Announcement - New Project to build using Generative AI

New AI Assistant project just add, make you check am project

📣 Announcement - New Curriculum on Generative AI for JavaScript just release

No miss our new Generative AI curriculum!

Visit https://aka.ms/genai-js-course to start!

• Lessons wey go cover everything from basics reach RAG.
• Talk with historical characters using GenAI and our companion app.
• Fun and interesting story, you go dey time travel!

Each lesson get assignment to finish, knowledge check and challenge to guide you for learning things like:

• Prompting and prompt engineering
• Text and image app generation
• Search apps

Visit https://aka.ms/genai-js-course to start!

🌱 How to Start

Teachers, we don put some suggestions ontop how to use dis curriculum. We go like hear your feedback for our discussion forum!

Learners, for each lesson, start wit pre-lecture quiz then read di lecture material, complete di different activities and check your understanding wit post-lecture quiz.

To make your learning better, connect wit your fellow learners make una work dey go together! Discussions dey encouraged inside our discussion forum where our moderators team dey ready to answer your questions.

To deepen your education, we strongly recommend say you make use of Microsoft Learn for more study materials.

📋 How to set up your environment

Dis curriculum get development environment wey ready! As you start you fit choose run di curriculum for Codespace (na browser-based, no install environment), or local for your computer using text editor like Visual Studio Code.

Create your repository

Make e easy for you to save work, e good say you create your own copy of dis repository. You fit do am by clicking Use this template button ontop page. Dis one go create new repository for your GitHub account with copy of di curriculum.

Follow these steps:

1. Fork the Repository: Click di "Fork" button for top-right corner of dis page.
2. Clone the Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

How to run di curriculum for Codespace

Inside your copy of dis repository you don create, click Code button and select Open with Codespaces. Dis one go create new Codespace for your work.

How to run di curriculum local for your computer

To run dis curriculum local for your computer, you go need text editor, browser, and command line tool. Our first lesson, Introduction to Programming Languages and Tools of the Trade, go show you different options for each tool make you choose wetin best for you.

We recommend say you use Visual Studio Code as your editor, e come with Terminal. You fit download am here.

1. Clone your repository go your computer. You fit do am by clicking Code button and copy di URL:

   CodeSpace Then, open Terminal inside Visual Studio Code and run dis command, change <your-repository-url> with the URL wey you just copy:

   git clone <your-repository-url>
   

2. Open di folder for Visual Studio Code. You fit do dis by clicking File > Open Folder and choose di folder wey you just clone.

Recommended Visual Studio Code extensions:

• Live Server - to preview HTML pages inside Visual Studio Code
• Copilot - to help you write code faster

📂 Each lesson get:

• optional sketchnote
• optional extra video
• pre-lesson warmup quiz
• written lesson
• for project-based lessons, step-by-step guides on how to build the project
• knowledge checks
• one challenge
• extra reading
• assignment
• post-lesson quiz

A note about quizzes: All quizzes dey inside the Quiz-app folder, 48 total quizzes with three questions each. Dem dey available here the quiz app fit run locally or deploy for Azure; follow instruction for di quiz-app folder.

🗃️ Lessons

	Project Name	Concepts Taught	Learning Objectives	Linked Lesson	Author
01	Getting Started	Introduction to Programming and Tools of the Trade	Learn the basic underpinnings wey dey most programming languages and about software wey dey help professional developers do their job	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	Basics of GitHub, including working with team	How to use GitHub for your project, how to collaborate with others on code base	Intro to GitHub	Floor
03	Getting Started	Accessibility	Learn basics of web accessibility	Accessibility Fundamentals	Christopher
04	JS Basics	JavaScript Data Types	Basics of JavaScript data types	Data Types	Jasmine
05	JS Basics	Functions and Methods	Learn about functions and methods to manage application logic flow	Functions and Methods	Jasmine and Christopher
06	JS Basics	Making Decisions with JS	Learn how to create conditions for your code using decision-making methods	Making Decisions	Jasmine
07	JS Basics	Arrays and Loops	Work with data using arrays and loops inside JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML in Practice	Build HTML to create online terrarium, focus on building layout	Introduction to HTML	Jen
09	Terrarium	CSS in Practice	Build CSS to style online terrarium, focus on basics of CSS including making page responsive	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	Build JavaScript to make terrarium function as drag/drop interface, focus on closures and DOM manipulation	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Build Typing Game	Learn how to use keyboard events to drive logic of your JavaScript app	Event-Driven Programming	Christopher
12	Green Browser Extension	Working with Browsers	Learn how browsers work, their history, and how to scaffold first elements of browser extension	About Browsers	Jen
13	Green Browser Extension	Building form, calling API and storing variables in local storage	Build JavaScript elements of browser extension to call API using variables wey dey local storage	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Background processes for browser, web performance	Use browser background processes to manage extension icon; learn about web performance and optimizations to improve it	Background Tasks and Performance	Jen
15	Space Game	More Advanced Game Development with JavaScript	Learn about Inheritance using Classes and Composition and Pub/Sub pattern, prepare for building game	Introduction to Advanced Game Development	Chris
16	Space Game	Drawing to canvas	Learn about Canvas API, use am draw elements to screen	Drawing to Canvas	Chris
17	Space Game	Moving elements around screen	Discover how elements fit gain motion using cartesian coordinates and Canvas API	Moving Elements Around	Chris
18	Space Game	Collision detection	Make elements collide and react to each other using keypresses and provide cooldown function to keep game performance	Collision Detection	Chris
19	Space Game	Keeping score	Do math calculation based on game status and performance	Keeping Score	Chris
20	Space Game	Ending and restarting game	Learn about ending and restarting game, including cleaning up assets and resetting variable values	The Ending Condition	Chris
21	Banking App	HTML Templates and Routes for Web App	Learn how create scaffold of multipage website architecture using routing and HTML templates	HTML Templates and Routes	Yohan
22	Banking App	Build Login and Registration Form	Learn about building forms and handling validation routines	Forms	Yohan
23	Banking App	Methods of Fetching and Using Data	How data flow in and out of your app, how to fetch am, store am, and dispose am	Data	Yohan
24	Banking App	Concepts of State Management	Learn how your app dey keep state and how to manage am programmatically	State Management	Yohan
25	Browser/VScode Code	Working with VScode	Learn how to use code editor	Use VScode Code Editor	Chris
26	AI Assistants	Working with AI	Learn how to build your own AI assistant	AI Assistant project	Chris

🏫 Pedagogy

Our curriculum design get two main pedagogical principles:

• project-based learning
• frequent quizzes

Di program teaches di fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use now. Students go fit develop hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and banking app for business. By end of di series, students go get solid understanding of web development.

🎓 You fit do di first few lessons for dis curriculum as Learn Path on Microsoft Learn!

By making sure say di content align with projects, di process go be more interesting for students and dem go remember concepts well. We write some starter lessons for JavaScript basics to introduce concepts, join am with video from the "Beginners Series to: JavaScript" video tutorials wey some authors contribute for this curriculum.

Plus, low-stakes quiz before class dey set student mind to learn topic, and second quiz after class go make dem remember more. This curriculum design to be flexible and fun and you fit do am wholly or partly. The projects start small and get more complex by end of 12-week cycle.

Even though we no put JavaScript frameworks so that you fit focus on basic skills as web developer before framework, next good step to complete this curriculum na to learn Node.js through another video series: "Beginner Series to: Node.js".

Visit our Code of Conduct and Contributing guidelines. We dey welcome your constructive feedback!

🧭 Offline access

You fit run this documentation offline by using Docsify. Fork this repo, install Docsify for your local machine, then for root folder of this repo, type docsify serve. The website go dey for port 3000 on your localhost: localhost:3000.

📘 PDF

PDF of all lessons fit find am here.

🎒 Other Courses

Our team dey produce oda courses! Checkam:

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

Getting Help

If you jam for road or get questions about how to build AI apps. Join other learners and beta developers for talk about MCP. E be one community wey dey support, where questions dey welcome and knowledge dey share freely.

If you get product feedback or wahala for building, visit:

License

This repository get MIT license. See di LICENSE file for more tori.

---

Disclaimer: Dis document dem translate am wit AI translation service wey dem call Co-op Translator. Even though we try make e correct, abeg sabi say automated translations fit get some mistakes or no too correct. Di original document for im native language na di correct one. If na serious mata, make person wey sabi translate am well do am. We no go take any blame if pesin no understand or use am wrong because of dis translation.