Web-Dev-For-Beginners/translations/pcm

Web Development for Beginners - A Curriculum

Learn di basics of web development wit our 12-week full course wey Microsoft Cloud Advocates run. Each one of di 24 lessons dey dive inside JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Join quizzes, talks, and practical assignments. Improve your skills and make your knowledge stay well wit our effective project-based teaching. Start your coding journey today!

Join di Azure AI Foundry Discord Community

Follow these steps to start to use these resources:

1. Fork the Repository: Click
2. Clone the 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

Prefer to Clone Locally?

Dis repository get 50+ language translations wey fit make di download size big well-well. To clone without 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 complete di course wit faster download.

If you want more translations, di supported languages dey listed here

🧑‍🎓 You be student?

Visit Student Hub page wey you go find beginner resources, Student packs and even ways to get free certificate voucher. Na dis page you suppose bookmark and dey check from time to time as we dey update content every month.

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

New Challenge don add, find "GitHub Copilot Agent Challenge 🚀" for most chapters. Na new challenge for you to complete wit GitHub Copilot and Agent mode. If you never use Agent mode before, e fit no be only generate text but e fit also create and edit files, run commands and more.

📣 Announcement - New Project to build using Generative AI

New AI Assistant project just add, check am out project

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

No miss our new Generative AI curriculum!

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

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

Each lesson get assignment to complete, knowledge check and challenge to guide you inside learning topics like:

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

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

🌱 Getting Started

Teachers, we don put some suggestions on how to use dis curriculum. We go like make you give your feedback for our discussion forum!

Learners, for each lesson, start wit pre-lecture quiz, follow by reading di lecture materials, complete di activities then check your understanding wit post-lecture quiz.

To make your learning better, join your peers to work on di projects together! Discussions dey encouraged for our discussion forum where our moderators go ready answer your questions.

To improve your education, we dey highly recommend make you explore Microsoft Learn for extra study materials.

📋 Setting up your environment

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

Create your repository

To make e easy for you to save your work, e good make you create your own copy of dis repo. You fit do am by clicking Use this template button for top of di page. E go create new repository inside your GitHub account wit copy of di curriculum.

Follow these steps:

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

Running the curriculum in a Codespace

For your copy of this repository wey you create, click the Code button then select Open with Codespaces. E go create new Codespace for you to work inside.

Running the curriculum locally on your computer

To run dis curriculum locally on 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 guide you through different options for each of these tools so you fit choose the one wey best for you.

We recommend make you use Visual Studio Code as your editor, e get built-in Terminal. You fit download Visual Studio Code here.

1. Clone your repository to your computer. You fit do am by clicking the Code button then copy di URL:

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

   git clone <your-repository-url>
   

2. Open di folder for Visual Studio Code. You fit do dis by click 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

📂 Every lesson get:

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

Note about quizzes: All di quizzes dey inside the Quiz-app folder, 48 quizzes total wey get three questions each. Dem dey available here quiz app fit run locally or deploy for Azure; follow the instruction inside 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 di basic tins wey dey behind most programming languages and about software wey help professional developers do dia work	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	Basics of GitHub, include how to work with team	How to use GitHub for your project, how to work together with others on top code base	Intro to GitHub	Floor
03	Getting Started	Accessibility	Learn the basics of web accessibility	Accessibility Fundamentals	Christopher
04	JS Basics	JavaScript Data Types	The basics of JavaScript data types	Data Types	Jasmine
05	JS Basics	Functions and Methods	Learn about functions and methods to manage how application logic flow go	Functions and Methods	Jasmine and Christopher
06	JS Basics	Making Decisions with JS	Learn how to create conditions inside your code using decision-making methods	Making Decisions	Jasmine
07	JS Basics	Arrays and Loops	Work with data using arrays and loops for JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML in Practice	Build di HTML to create online terrarium, focus on how to build layout	Introduction to HTML	Jen
09	Terrarium	CSS in Practice	Build di CSS to style the online terrarium, focus on basics of CSS including how to make the page responsive	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	Build the JavaScript to make terrarium work as drag/drop interface, focus on closures and DOM manipulation	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Build a Typing Game	Learn how to use keyboard events to direct the logic of your JavaScript app	Event-Driven Programming	Christopher
12	Green Browser Extension	Working with Browsers	Learn how browsers dey work, dia history, and how to begin the first elements for a browser extension	About Browsers	Jen
13	Green Browser Extension	Building form, call API and store variables for local storage	Build JavaScript elements for your browser extension to call API using variables inside 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's icon; learn about web performance and some optimization to improve	Background Tasks and Performance	Jen
15	Space Game	More Advanced Game Development with JavaScript	Learn about Inheritance wey dey use both Classes and Composition plus Pub/Sub pattern, prepare to build game	Introduction to Advanced Game Development	Chris
16	Space Game	Drawing to canvas	Learn about Canvas API, wey dem use to draw things for screen	Drawing to Canvas	Chris
17	Space Game	Moving elements around screen	Discover how elements fit move using cartesian coordinates and Canvas API	Moving Elements Around	Chris
18	Space Game	Collision detection	Make elements collide and respond to each other using keypresses and give cooldown function to make sure game perform well	Collision Detection	Chris
19	Space Game	Keeping score	Do math calculations based on game's status and performance	Keeping Score	Chris
20	Space Game	Ending and restarting the game	Learn about how to end and restart game, include how to clean assets and reset variable values	The Ending Condition	Chris
21	Banking App	HTML Templates and Routes for Web App	Learn how to create base architecture of multipage website with routing and HTML templates	HTML Templates and Routes	Yohan
22	Banking App	Build Login and Registration Form	Learn about building forms and validation routines	Forms	Yohan
23	Banking App	Methods of Fetching and Using Data	How data flow inside your app and outside, how to fetch am, store am and delete am	Data	Yohan
24	Banking App	Concepts of State Management	Learn how your app hold state and how to manage am by programming	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 dey based on two key teaching principles:

• project-based learning
• frequent quizzes

Di program dey teach basics of JavaScript, HTML, CSS, plus latest tools and techniques wey web developers dey use nowadays. Students go get chance to get hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader style game, and banking app for businesses. By di end of di series, students go sabi ground well well for web development.

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

By making sure say content match projects, e make di process more enjoyable for students and e go help them remember concepts well well. We still write plenty starter lessons for JavaScript basics to introduce concepts, plus video from the "Beginners Series to: JavaScript" video tutorials wey some authors contribute to dis curriculum.

Plus, one low-stakes quiz dey before class to set student mind for learning topic, while second quiz after class make sure say dem remember more. Dis curriculum design be flexible and fun and fit be taken whole or in part. Di projects start small and dey become more complex by di end of di 12-week course.

Though we avoid introducing JavaScript frameworks so that focus dey on basic skills wey web developer need before dem use framework, a good next step after dis curriculum na to learn Node.js through another group of videos: "Beginner Series to: Node.js".

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

🧭 Offline access

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

📘 PDF

PDF of all lessons fit be found here.

🎒 Other Courses

Our team dey produce oda kurs dem! Check am out:

LangChain

---

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

Getting Help

If you jam or get any gbege about how to build AI app dem. Join other learners and baba developers for talk about MCP. Na beta community wey dey support, questions dey welcome and knowledge dey free to share.

If you get product feedback or error while you dey build, waka go:

License

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

---

Wetin I Go Talk: Dis dokument don translate wit AI translation service wey dem call Co-op Translator. Even though we dey try make am correct, make you sabi say machine translate fit get mistake or no correct. Di original dokument wey dem write for im own language na di real correct one. If na serious matter, make you use professional human translator. We no go responsible if pesin no understand or understand wrong because of dis translation.