Web-Dev-For-Beginners/translations/pcm/README.md

Web Development for Beginners - A Curriculum

Learn di fundamentals of web development wit our 12-week complete course by Microsoft Cloud Advocates. Each of di 24 lessons dey dive into JavaScript, CSS, an HTML through hands-on projects like terrariums, browser extensions, an space games. Engage wit quizzes, discussions, an practical assignments. Enhance your skills an optimize your knowledge retention wit our effective project-based way wey we teach. Start your coding journey today!

Join di Azure AI Foundry Discord Community

Follow these steps to get started using 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 an meet experts an fellow developers

🌐 Multi-Language Support

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

Prefer to Clone Locally?

Dis repository get 50+ language translations wey dey increase di download size well well. To clone without translations, use 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"

Dis go give you everything you need to complete di course wit better faster download.

If you wan get more language translations wey support dey listed here

🧑‍🎓 You be student?

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

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

New Challenge add, look for "GitHub Copilot Agent Challenge 🚀" inside plenty chapters. Na new challenge you fit complete using GitHub Copilot an Agent mode. If you never use Agent mode before, e fit not only generate text but fit also create an edit files, run commands an more.

📣 Announcement - New Project to build using Generative AI

New AI Assistant project just add, 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 cover everything from basics go RAG.
• Interact wit historical characters usin GenAI an our companion app.
• Fun an engaging story, you go dey time travel!

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

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

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

🌱 Getting Started

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

Learners, for every lesson, start wit pre-lecture quiz an follow through by reading di lecture material, complete di different activities an check your understanding wit di post-lecture quiz.

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

To go further your education, we highly recommend say you explore Microsoft Learn for extra study materials.

📋 Setting up your environment

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

Create your repository

Make you fit save your work well well, e good make you create your own copy of this repository. You fit do am by clicking Use this template button wey dey top of di page. E go create new repository inside your GitHub account wit copy of di curriculum.

Follow these steps:

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

Running di curriculum inside Codespace

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

Running di curriculum locally on your computer

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

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

1. Copy yor repository go yor computer. You fit do dis by klik di Code button den copy di URL:

   CodeSpace

   Den, open Terminal for Visual Studio Code den run dis command, change <your-repository-url> wit di URL wey you just copy:

   git clone <your-repository-url>
   

2. Open di folder inside Visual Studio Code. You fit do dis by clicking File > Open Folder den select 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 quick quick

📂 Each lesson get:

• sketchnote if you want
• extra video if you want
• quiz to prepare for lesson
• di lesson wey dem write
• for project-based lessons, guide step by step how to build di project
• knowledge checks
• challenge
• extra reading
• assignment
• post-lesson quiz

Note about quizzes: All di quizzes dey inside Quiz-app folder, 48 quizzes total and every one get three questions. You fit find dem here quiz app fit run for your own machine or you fit deploy am 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 di basic foundation behind most programming languages and software wey dey help pro developers do their work	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	Basics of GitHub, dey include work with team	How to use GitHub for your project, how to collaborate wit others for code base	Intro to GitHub	Floor
03	Getting Started	Accessibility	Learn di basics of web accessibility	Accessibility Fundamentals	Christopher
04	JS Basics	JavaScript Data Types	Di basics of JavaScript data types	Data Types	Jasmine
05	JS Basics	Functions and Methods	Learn about functions and methods to manage an app 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 wit data using arrays and loops inside JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML in Practice	Build di HTML to create online terrarium, focus on building 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 di page responsive	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	Build di JavaScript to make di 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 drive the logic of your JavaScript app	Event-Driven Programming	Christopher
12	Green Browser Extension	Working with Browsers	Learn how browsers dey work, their history, and how to scaffold first elements of browser extension	About Browsers	Jen
13	Green Browser Extension	Build form, call API and store variables for local storage	Build di JavaScript elements for your browser extension to call API using variables wey dey inside local storage	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Background processes inside browser, web performance	Use browser background processes to manage extension icon; learn about web performance and optimizations	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 a game	Introduction to Advanced Game Development	Chris
16	Space Game	Drawing to canvas	Learn about Canvas API, wey dem use to draw elements for screen	Drawing to Canvas	Chris
17	Space Game	Moving elements around screen	Find out how elements fit move using cartesian coordinates and Canvas API	Moving Elements Around	Chris
18	Space Game	Collision detection	Make elements collide and react to each other using keypress and provide cooldown to keep game performance	Collision Detection	Chris
19	Space Game	Keeping score	Do maths calculations based on game's status and performance	Keeping Score	Chris
20	Space Game	Ending and restarting game	Learn about how to end and restart game, including cleaning up assets and reseting variables	The Ending Condition	Chris
21	Banking App	HTML Templates and Routes for Web App	Learn how to create scaffold for 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 how to handle validation routines	Forms	Yohan
23	Banking App	Methods of Fetching and Using Data	How data go inside and outside your app, how to fetch, store am, and clear 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 important pedagogical principles in mind:

• project-based learning
• frequent quizzes

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

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

By making sure say di content match projects, e make di process beta and more interesting for students and e go help dem remember concepts well. We self write some starter lessons for JavaScript basics to introduce concepts, plus video from "Beginners Series to: JavaScript" video collection, wey some authors contribute to this curriculum.

Plus, a low-stakes quiz before class dey set student mind to learn topic, while second quiz after class go help dem remember am pass. This curriculum design to be flexible and fun and fit be taken as whole or part. The projects start small and go dey more complex by end of 12-week cycle.

Even though we no include JavaScript frameworks purposely to focus on basic skills wey web developer suppose get before using framework, next step wey fit make sense after dis curriculum na to learn about Node.js via another video collection: "Beginner Series to: Node.js".

Check our Code of Conduct and Contributing guidelines. We dey 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 this repo, type docsify serve. Di website go run for port 3000 on your localhost: localhost:3000.

📘 PDF

A PDF of all of the lessons fit find here.

🎒 Other Courses

Our team dey produce other courses! Check am out:

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

Getting Help

If you jam or get any questions about how to build AI apps, join other learners and experienced developers for discussions about MCP. Na supportive community where questions dey welcome and knowledge dey shared freely.

If you get product feedback or find errors while you dey build, visit:

License

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

---

Disclaimer: Dis document e been translate wit AI translation service Co-op Translator. Even tho we dey try make am correct, abeg sabi say automatic translation fit get some mistakes or no too correct. Di original document wey e dey for im correct language na di correct one. For important tins, make person wey sabi translate do di work. We no go responsible if pipo no understand well or if dem misinterpret tins because of dis translation.