Baidu Front-end College two-month learning Volume task description

Mission Statement Beginner & Intermediate Classes

The tasks of the beginner and intermediate classes are basically the same, but they are different in detail and time requirements.

• Task one: HTML, CSS Basics
  • Beginner class: 11 days
  • Intermediate class: 4 days
• Task two: JavaScript basics
  • Beginner class: 13 days
  • Intermediate class: 7 days
• Task three: A simple to-do APP that consolidates previous learning and deeply learns some of the features of the JavaScript language, as well as some of the relevant design patterns
  • Beginner class: 7 days
  • Intermediate class: 7 days
• Tasks: About Mobile, node. js, ES6, CSS processing, JavaScript modularity, front-end engineering, mastering the current front-end mainstream technology
  • Beginner class: 15 days
  • Intermediate class: 11 days
• Task four: To-do large project practice, do a large-scale project of mobile +PC, learn how to do technical options, how to do large project design architecture
  • Beginner class: 30 days
  • Intermediate class: 30 days

The exact number of days is fine-tuned to fit the course content. To the final announcement of the main advanced class

The advanced class assumes that the trainees already have a very good front-end foundation, and the main need is to conduct project practices that are biased in nature or large practical nature. Topics include: 1. MVVM Form Framework Task 1.1 task description

1. Implement a form management framework that requires form validation, error message display, form submission processing, and AJAX-based form submission.

2. The user of the framework should use the MVVM pattern for development without using DOM operations.

The

A workable way to use code is as follows:

 var eform = require (' eform '); var form = Eform.define ({username: {required:false, Validate:functi            On (value, async) {var next = async ();            $.post ({Username:value}, function () {next (true);            }, function () {next (false);        });        }}, Password: {validate:function (value) {return This.passwordConfirm.value = = = value; }}, Usertype: {validate:function (value) {///This requires validation of the username form to be triggered without the user's action This.use        Rname.required = true; }});//need to identify some validation rules in HTML to add to the model to Form.scan ($ (' #form ') [0]);//This requires triggering username validation form.fields.username = ' another username ';//If a programmer is naughty, it writes such code document.getElementById (' username '). Value = ' a bad username ';//We need to help him verify that right// Another rogue likes to use various form controls Uploader.on (' Change ', function (value) {form.fields.username.value = value;}); /We can not abandon him, also need to help him verify//specific details please contact the Tutor 

1.2 Suggested MVVM implementations

Model-to-view: Use ES5 's new feature object.defineproperties.

View to default: Use mutation Observer. 1.3 Advanced Tasks

1. How is object.defineproperties implemented under IE?

2. Mutation Observer is a new gadget, what about other browsers?

3. Try to extend the frame to non-forms.

4. Try to configure jquery to write a real MVVM framework.

5. Do you have a new idea about MVVM?

1.4 Purpose of study

1. Understand the basic patterns and processing methods of form operations

2. Understand what MVVM is, and how it is implemented

3. Understand framework availability and scalability, and trade-offs between the two

2. Mobile-side web IM2.1 task description

• Implement a mobile web-based IM tool
• Can realize the communication of words and expressions

2.2 Task requirements

• Self-fulfilling from UI design, front end, back end

2.3 Purpose of the mission

• Fully implement a lightweight product from scratch
• Experience Full Stack Engineer
• Stepping on the various pits on the mobile side

3. Maze Game 3.1 Task description

• Automatic generation of 3D Maze world based on WebGL
• Realizing the Avatar movement in the maze
• Implementation of remote control using mobile phone as Avatar

3.2 Task Requirements

• Do not base on an existing framework
• enough to dazzle

3.3 Purpose of the mission

• Learn and practice WebGL in depth
• Learn to cross-end interactions
• Try to do something cool

4.3D HTML World Game 4.1 task description

• On a PC browser, for a normal HTML page, WebGL can generate his 3D world version, which is produced by the DOM nesting relationship of the page itself endlessly rising peaks Dom ladder
• Can operate a 3D ball in the world to advance, turn, accelerate, slow down, jump
• The use of the mobile phone side of the gravity sensor and touch screen as a small ball movement of the operating remote control
• Achieve a small partner who plays in the same 3D page world can see other people's Balls
• To achieve the interaction between the ball and the ball, such as a collision buckle, blood, etc.

4.2 Task Requirements

• Good visual effect, smooth picture
• Games are easy to learn, but fun to play

4.3 Purpose of the Mission

• Learn and practice WebGL in depth
• Learn to cross-end interactions
• Try to do something cool

5. Low Poly Generator 5.1 task description

• Automatic generation of low Poly (lower poly) images via uploaded images
• Provides manually specified edges and feature points to increase the effect of creating pictures

5.2 Task Requirements

• Smooth Product Experience

5.3 Purpose of the mission

• In-depth research on image field based on front-end technology

  Source: >

Baidu Front-end College two-month learning Volume task description