网页源码世界

网页源码世界

Web Programming

想知道微博、QQ空间是怎么开发的吗？想知道jQuery, HTML5, Javascript有多神奇吗？进入具有挑战性的网页编程前端课程，创作应用于网络的多媒体元素。

课程特色

学习和掌握静态网页基础语言：Html, CSS 和高级前端语言: Javascript,jQuery, HTML5

制作音频、视频、二维动画和游戏等多媒体元素

培养5大编程思维：创造力，抽象化，数据，算法，程序

衔接大学课程，领先未来全球职场

培养硅谷的思维方式，赋能未来，用科技解决现实世界问题

适合对象/Students：9-18岁中阶者 Intermediate learner at age 9-18

授课语言/Language:英语/ English

上课条件/Prerequisites：具有基本的英语沟通能力；熟练操作电脑；具有网页编程基本技能 the ability to communicate with instructors in English；proficiency in using laptops; basic skills in web programming

课时/ACH:162

开课时间/ Schedule：2018年9月 September 2018

课堂规模/Size1:8

Introduction to Web Programming: 网页编程基础HTML/CSS/JavaScript

此课程为所有对互联网世界好奇的学员设计。以设计一系列好玩又具有互动性的专案为目标，来介绍网页编程的基础概念；由 HTML 建构网页内容开始，再使用 CSS 设计自己的网页，以扎根网页编程的基础。

最后以 JavaScrip 学习电脑运算思维，逐列学习并了解网页编程的架构。

Designed for anyone who is curious about programming or what powers the Internet,the course teaches the basics of web programming through a series of fun and engaging projects. Students start with structuring web content with HTML and styling with CSS to gain a solid foundation in static web programming. They then move on to learning fundamental computer science concepts using JavaScript.

课时: 27课时

关键要点

学习HTML语法，CSS语法简介和JavaScript语法

计算机科学概念介绍，包括抽象，条件和循环

通过编写HTML和CSS代码创建一系列静态网页

规划，实施和测试设计的网站

在课堂上展示网站

ACH：27

Key Takeaways

Introduction to the HTML syntax， CSS syntax and the basics of JavaScript syntax

Introduction to computer science concepts including abstraction, conditionals and loops

Creat a series of static web pages by writing HTML and CSS codes

Plan, implement and test the designed website

Present the website to the rest of class

Web Programming II:

网页编程 JavaScript

前端Web编程课程。在学习了HTML，CSS和JavaScript的基础知识后，本课程的学生通过一些列编程挑战和编写交互式前端网页，巩固他们对JavaScript语法的掌握。在整个课程中，鼓励和支持学生独立进行研究，有逻辑地规划项目并将用户设计原则应用于创建用户为中心的项目。

Web Programming II is a deep dive in front-end web programming for aspiring young programmers following our Introduction to Web Programming course. After learning the basics of HTML, CSS and JavaScript, students in this course learn to solve programming challenges and program interactive front-end web pages to solidify and expand their grasp in the JavaScript syntax. Throughout the course, students are encouraged and supported to research independently, plan projects logically and apply user design principles to create user-friendly projects.

课时: 27课时

关键要点

在程序中应用和操作不同的数据类型

理解HTML DOM结构，并演示对基本DOM元素的控制

应用并创建交互式DOM事件

解释和使用基本的JavaScript逻辑结构

构建允许用户交互的前端网页

ACH:27

Key takeaways

Apply and manipulate different data types in a program

Understand the HTML DOM structure, and demonstrate control over basic DOM elements

Apply and create interactive DOM events

Interpret and use fundamental JavaScript logical structures

Build front-end web pages that allow for user interaction

Web Programming III: 网页编程CSS & JS进阶课程

Deep Dive into CSS and JS

网页编程进阶课程。通过对HTML，CSS和JavaScript的深入理解，学生可以逐步解决Web编程中固有的一些基本挑战 - 布局和动画。

我们今天看到的大部分网页都是由UX设计师精心设计，再由网络开发人员实现。我们如何布局页面，并适配于台式电脑，笔记本电脑，平板电脑和手机，并具有可读性，吸引力和易于导览的特点，这在现代时代非常重要。

最重要的是，绝大多数网页都岂止于动画。它可以是状态栏，下拉菜单或图像轮播。了解如何使用JavaScript创建这些效果以及DOM操作是一项重要的技能。

This unit continues to extend from the foundation of Web Programming built in the preceding courses. With a solid understanding of basic HTML, CSS and JavaScript, students progress to tackle some fundamental challenges inherent in web programming - layouts and animations.

Much of the web we see today was carefully designed by a UX designer and laid out by a web developer. How we place things in a page and have it be readable, attractive, and easy to navigate for users on desktops, laptops, tablets and phones, is very important in the modern age.

On top of that, the vast majority of modern web pages feature some form of animation. It may be a status bar, a drop down menu or an image carousel. The possibilities are endless. Understanding how to create these effects with JavaScript and careful DOM manipulation is an important skill to possess.

课时:27课时

关键要点

将CSS显示属应用于美化网页布局

了解网页设计在建立网站中的重要性

使用包含各种类型转换和操作的CSS构建简单的动画

学习使用JavaScript进行开发

构建允许用户交互的前端网页

ACH:27

Key takeaways

Apply CSS display properties to aesthetically lay out a web page

Understand the significance of web design in building a website

Build simple animations using CSS that encompass various types of transformations and actions

Use JavaScript to develop

Build front-end web pages that allow for user interaction

Web Applications：

网页应用 jQuery

jQuery，主流的JavaScript库。面向有抱负的高级前端Web编程课程，介绍Web编程和JavaScript语言。在本课程中，学生学习使用jQuery进行编程，创建功能强大的Web应用程序。

在这个课程中，老师鼓励和支持学生独立进行研究，合理地规划项目并应用项目设计的原则来创建能够解决现实世界问题的用户为中心的项目。

The jQuery course is an advanced front-end web programming course for aspiring young programmers following their introduction to web programming and the JavaScript language. In this course, students learn to program using jQuery, a popular JavaScript Library that allows students to create powerful web applications.

Throughout the course, students are encouraged and supported to research independently, plan projects logically and apply user design principles to create user-friendly projects that solve real world problems.

Tips: jQuery小贴士

在网页环境中，大部分JavaScript的应用都是基于DOM操作。DOM操作是更改与JavaScript并存的HTML和CSS。jQuery数据库是为了促进这一重要概念而创建的，并被广泛采用，在世界上前100万个浏览网站和网页应用程序里，其中65%都运用了jQuery 数据库。

Much of the use of JavaScript in the web environment is on the idea of DOM manipulation; that is, changing the HTML and CSS live with JavaScript. The library of jQuery was created to facilitate this important concept, and is so widely adopted that it exists in more than 65% of the top 1 million browsed websites and web applications in the world.

课时:27课时

关键要点

回顾HTML，CSS和JavaScript基础知识

介绍jQuery语法和基本功能，比如事件和动画

使用jQuery学习DOM操作和遍历

定义现实世界的问题并设计解决方案

使用jQuery构建交互式网站

ACH:27

Key takeaways

Refresher on fundamental HTML, CSS and JavaScript

Introduction to jQuery syntax and basic functions such as events and animations

Learn DOM manipulation and traversal with jQuery

Define a real world problem and designing a solution

Build interactive websites using JQuery

Web Applications:

网页应用 HTML5 & Canvas

在原有的JavaScript基础上，本课程做了进一步扩展。 通过扎实掌握Javascript，学生们现在可以更加深入了解HTML5，特别是Canvas元素。

HTML5是HTML标准的最新版本，提供各种多媒体支持。HTML5 Canvas元素广泛用于在网页上绘制图形，允许用户使用Javascript轻松渲染2D图形。与Flash和Silverlight不同的是，HTML Canvas元素是一种开源技术，支持移动手机，台式机和平板电脑上的所有主流浏览器。

学生将使用Canvas开发2D动画和游戏，以及探索PhaserJS。PhaserJS是人们在网络上创建2D游戏的首要Javascript数据库。

除了学习HTML5里的canvas元素以外, 学生还使用Sublime，Terminal和Github等专业工具学习编码，体验IT行业内的职业化编码方式。

This course is an advanced unit that extends from the foundation of Javascript built so far through our web programming series. With a solid understanding of Javascript, students now learn about what HTML5 has to offer and specifically, the Canvas element.

HTML5 is the latest version of the HTML standard that offers a variety of rich media support. The HTML5 Canvas element is widely used to draw graphics on web pages, allowing the user to render 2D graphics easily using Javascript. Unlike Flash & Silverlight, the HTML Canvas element is an open source technology supported by all major browsers across mobile, desktops and tablets.

Students will be using Canvas to develop 2D animations and games. As well as exploring PhaserJS, the premier Javascript library for creating 2D games on the web.

In addition to the HTML5 canvas element, students learn best industry practices in coding, using professional tools such as Sublime, Terminal and Github.

课时:27课时

关键要点

学会HTML5，画布和Sublime Text

制作HTML，CSS，和JavaScript文件并在Github上发布

学会如何使用HTML画布元素绘制线条，图形，引进外来图片

使用HTML5和JavaScript制作动画以及编写基本的游戏控制

使用pahser.io和HTML里的画布元素动手制作2D 游戏

ACH:27

Key takeaways

Introduction to HTML5, Canvas and Sublime Text

Creating .html, .css and .js files and hosting them via GitHub

Learn how to draw lines, shapes and importing images in Canvas

Animation and basic game control with HTML5 and JavaScript

Create a 2D game from scratch by applying phaser.io and the Canvas element

Web Applications:

网页编程 JavaScript 框架 & 高级HTML 5

JavaScript Frameworks & Advanced HTML5

我们学生已经在Web编程的不同领域夯实基础，如HTML，CSS和JavaScript的基础知识，流行的jQuery数据库的使用，流行的HTML5元素，以及如何使用简单的网络编程框架，如移相器(Phaser)。

有了扎实的基础，现在是时候让学生学习如何将不同的知识结合起来制作一些复杂的Web编程项目，并学习JavaScript的一些替代用途以及它的流行框架。

在本课程中，学生将学习如何构建复杂的HTML5游戏并编写其逻辑，JSON数据格式，面向对象编程（OOP）如何在JavaScript中工作，流行且高度灵活的框架ReactJS的基础知识，最近的ES6 JavaScript的标准，以及在他们的Web编程项目中使用CSS框架，例如Bootstrap。

Our students’ progression has laid a solid foundation in different areas of web programming such as the basics of HTML, CSS and JavaScript, the use of popular library jQuery, the recent HTML5 elements, as well as how to use simple web programming framework such as Phaser.

With such great foundation built, it is time for students to learn how to combine different knowledge into making a few complex web programming project and learn a few alternative uses of JavaScript as well as its popular frameworks.

In this course, students will learn how to build complex HTML5 games and program its logics, what a JSON data format is, how Object Oriented Programming (OOP) works in JavaScript, the basics of a popular and highly flexible framework ReactJS, the recent ES6 standard of JavaScript, and the use of CSS frameworks, for example Bootstrap, in their web programming project.

课时:27课时

关键要点

介绍HTML5以及怎样用JavaScript编写游戏

学习现在流行的框架----ReactJS

学习怎样使用ES6版语法进行面向对象编程

JavaScript 编程传统以及练习如何设计游戏

JSON数据形式以及谷歌浏览器扩展

学习如何通过应用面向对象编程范式构建游戏对象

学习如何通过数组处理大数据以及相关方法

ACH:27

Key takeaways

Introduction of HTML5 Game Programming in JavaScript

Introduction to one of the popular frameworks - ReactJS

Learning Object-Oriented Programming in ES6 syntaxes

JavaScript Programming Conventions and Game Design Practices

JSON Data Format and Google Chrome Extension（JSON）

Learn how to structure game objects by applying Object-Oriented Programming

Learn how to handle large amount of data in array and their related methods