Code Monkey home page Code Monkey logo

web-dev-for-beginners's Introduction

GitHub license GitHub contributors GitHub issues GitHub pull-requests PRs Welcome

GitHub watchers GitHub forks GitHub stars

Open in Visual Studio Code

初学者的 Web 开发课程

微软的Azure云倡导者很高兴地提供一个为期12周的24课时的课程,所有关于JavaScript、CSS和HTML的基础知识。每节课都包括课前和课后测验、完成课程的书面说明、解决方案、作业等。我们以项目为基础的教学方法使你能够边学边做,这是一种证明新技能能够“扎根”的方法。

衷心感谢我们的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees和手绘艺术家Tomomi Imura!

你是学生吗?

利用以下资源开始:

  • Student Hub page 在这个页面,你会发现初学者资源、学生包,甚至是获得免费证书券的方法。这是一个你想加入书签并不时检查的页面,因为我们至少每月都会更换内容。
  • Microsoft Student Learn ambassadors 加入一个由学生大使组成的全球社区,这可能是你进入微软的途径。

入门

对于老师, 我们已经有了一些关于如何使用该课程的建议。 我们希望您能在我们的讨论区提出反馈意见!

对于学生,如果你想自己使用这个课程,你可以fork整个repo并自己完成练习,从课前测验开始,然后阅读课程并完成其余活动。尽量通过理解课程来创建项目,而不是复制解决方案的代码;不过,这些代码可以在每节课中的/solutions目录中找到。另一个方法是与朋友组成一个学习小组,一起学习这些内容。对于进一步的学习,我们建议通过Microsoft Learn 和观看下面提到的视频。

Promo video

Gif by Mohit Jaisal

🎥 点击上面的图像,观看关于该项目和创造该项目的人们的视频!

教学宗旨

在建立这个课程时,我们选择了两个教学宗旨:确保它是基于项目的,并包括频繁的测验。在本系列课程结束时,学生将建立一个打字游戏,一个虚拟的花艺瓶,一个“绿色”浏览器扩展,一个“太空入侵者”类型的游戏,以及一个商业类型的银行应用程序,并将学会JavaScript、HTML和CSS的基础知识,以及当今网络开发人员的现代工具链。

🎓 你可以把这个课程的前几节课作为Microsoft Learn的学习路径来学习!

通过确保内容与项目相一致,这个过程对学生来说更有吸引力,对概念的保持也会增强。我们还编写了几节关于JavaScript基础知识的入门课程来介绍概念,并配以“Beginners Series to: JavaScript”的视频教程集,其中一些作者为这个课程做出了贡献。

此外,课前的低风险测验确定了学生对学习一个主题的意向如何,而课后的第二次测验则确保了学生知识的进一步保留。这个课程的设计是灵活而有趣的,可以全部或部分地学习。这些项目开始时很简单,到12周的周期结束时变得越来越复杂。

虽然我们有意避免介绍JavaScript框架,以便在采用框架之前集中于作为一个Web开发者所需的基本技能,但是完成本系列课程的一个好的去处就是通过“Beginner Series to: Node.js”来学习Node.js。

查看我们的行为准则贡献翻译指南。我们欢迎你的建设性的反馈!

每一课都包括:

  • 可能的手绘笔记
  • 可能的补充视频
  • 课前预习小测验
  • 书面课程
  • 对于基于项目的课程,关于如何建立项目的分步指南
  • 知识点检查
  • 一个挑战
  • 补充阅读
  • 作业
  • 课后小测验

关于测验的说明: 所有的测验都包含在这个应用程序中,总共有48个测验,每个测验三个问题。它们在课程中被链接,但测验应用程序可以在本地运行;按照quiz-app文件夹中的指示操作。它们正逐渐被本地化。

课程

项目名称 教授概念 学习目标 课程链接 课程作者
01 入门篇 编程语言和行业工具介绍 了解大多数编程语言背后的基本支撑,以及帮助专业开发人员完成工作的软件。 编程语言和工具介绍 Jasmine
02 入门篇 GitHub的基础知识,包括与一个团队合作 如何在你的项目中使用GitHub,如何在代码库中与他人合作 GitHub介绍 Floor
03 入门篇 无障碍性 学习网络无障碍的基本知识 无障碍基础知识 Christopher
04 JS基础 JavaScript数据类型 JavaScript数据类型的基础知识 数据类型 Jasmine
05 JS基础 函数和方法 了解管理应用程序逻辑流的函数和方法 函数和方法 Jasmine and Christopher
06 JS基础 用JS做出决定 学习如何使用决策方法在你的代码中创建条件 做出决定 Jasmine
07 JS基础 数组和循环 在JavaScript中使用数组和循环来处理数据 数组和循环 Jasmine
08 花艺瓶 实践中的HTML 构建HTML以创建一个在线花艺瓶,重点是构建一个布局 HTML简介 Jen
09 花艺瓶 实践中的CSS 构建CSS,为在线花艺瓶设计样式,重点是CSS的基础知识,包括使页面具有响应性 CSS简介 Jen
10 花艺瓶 JavaScript闭包,DOM操作 构建JavaScript,使水族馆成为一个拖/放界面,重点是闭包和DOM操作 JavaScript闭包,DOM操作 Jen
11 打字游戏 建立一个打字游戏 学习如何使用键盘事件来驱动你的JavaScript应用程序的逻辑 事件驱动编程 Christopher
12 绿色浏览器扩展 与浏览器协作 了解浏览器是如何工作的,它们的历史,以及如何为浏览器扩展的第一批元素提供支架 关于浏览器 Jen
13 绿色浏览器扩展 构建一个表单,调用一个API,并在本地存储中存储变量 构建你的浏览器扩展的JavaScript元素,使用存储在本地存储中的变量调用API API、表单和本地存储 Jen
14 绿色浏览器扩展 浏览器中的后台进程,网络性能 使用浏览器的后台进程来管理扩展的图标;了解网络性能和一些优化 后台任务和性能 Jen
15 太空游戏 用JavaScript进行更高级的游戏开发 学习使用类和组合的继承以及Pub/Sub模式,为建立游戏做准备。 高级游戏开发简介 Chris
16 太空游戏 在Canvas上绘图 了解用于在屏幕上绘制元素的Canvas API 在Canvas上绘图 Chris
17 太空游戏 在屏幕上移动元素 了解元素如何利用软轴坐标和Canvas API获得运动效果 移动元素 Chris
18 太空游戏 碰撞检测 使用按键使元素相互碰撞和反应,并提供冷却功能以确保游戏的性能 碰撞检测 Chris
19 太空游戏 记分 根据游戏的状态和性能进行数学计算 记分 Chris
20 太空游戏 结束和重启游戏 学习结束和重启游戏的方法,包括清理资产和重设变量值 结束的条件 Chris
21 银行应用 网络应用程序中的HTML模板和路线 学习如何使用路由和HTML模板创建多页面网站架构的支架 HTML模板和路线 Yohan
22 银行应用 建立一个登录和注册表格 学习构建表单和交接验证程序的知识 表格 Yohan
23 银行应用 获取和使用数据的方法 数据如何流入和流出你的应用程序,如何获取它,存储它,并处理它 数据 Yohan
24 银行应用 国家管理的概念 了解你的应用程序如何保留状态以及如何以编程方式管理它 国家管理 Yohan

离线访问

你可以通过使用Docsify离线运行这个文档。fork这个repo,在你的本地机器上安装Docsify,然后在这个repo的根文件夹中,输入 docsify serve。网站将在你的本地主机上的3000端口服务:localhost:3000

PDF

所有课程的PDF文件可以在这里找到

其他课程

我们的团队还制作了其他课程! 详见:

web-dev-for-beginners's People

Contributors

jlooper avatar manusquall avatar san1ay avatar saragibby avatar silverskyvicto avatar eugenegohh avatar donghoon-song avatar minwook-shin avatar hexatester avatar dependabot[bot] avatar juliamuiruri4 avatar chungzh avatar kant avatar daehungwak avatar abrilurena avatar pachicodes avatar cldxiang avatar softchris avatar ericjhernandezj avatar robertopauletto avatar mkleczewski avatar crtao avatar sinedied avatar mt-gitlocalize avatar wirelesslife avatar franciscoimanolsuarez avatar yooseongsil avatar namosuke avatar flamadev avatar pablonunes avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.