1. Review

• HTML and its function.
• Semantics and syntax.
• Tags.
• DOM Structure.

1. Review

HTML:

• Selectors.
• Properties and values.
• Box modal.
• Float.
• Block Elements and Inline Elements.
• Browser compatibility.

1. Review

CSS:

1. Review

No need to remember them all.

2. Front-End knowledge structure

2. Front-End knowledge structure

3. Path of growth

3. Path of growth

Web Front-End Developer

Front-End Developer

Developer

Master

1. Common HTML+CSS.
2. Semantics. 
3. Browser compatibility.
4. Accessibility and Reusability.
5. Clean code.
6. Performance.
7. Efficient development, workflow.

3. Path of growth

Step by step.

4. Knowledge need to know

• Internet Explorer.
• Chrome, Firefox, Opera, Safari...

4. Knowledge need to know

Browsers:

• Html, Html5.
• CSS, CSS3.
• SASS, COMPASS, LESS.

4. Knowledge need to know

Languages:

• Google.
• Text editer, Note Pad++, Edit Plus.
• Sublime text, Webstorm.

4. Knowledge need to know

IDE:

• Chrome developer tool.
• Firebug.
• Safari developer tool.
• IE Tester.

4. Knowledge need to know

Debugging:

• Bootstrap.
• Pure.
• Foundation.

4. Knowledge need to know

Frameworks:

• Responsive web design.
• Single page application.

4. Knowledge need to know

Mobile:

• Sass, Less, Compass.
• Grunt, Gulp.

4. Knowledge need to know

Compile & Build:

5. Capability

5. Capability

LEARN FAST

5. Capability

SENSE OF BEAUTY

5. Capability

UNDERSTANDING DEEPLY

5. Capability

COMMUNICATION

5. Capability

SOFT SKILLS

6. HOW

6. How

Practise

6. How

Practise

6. How

Practise

• http://www.w3school.com.cn/
• https://www.codeschool.com/

6. How

Websites

• HTML5高级程序设计/Pro HTML 5 Programming
• 大巧不工
• CSS网站布局实录
• 网站重构-应用web标准进行设计
• CSS禅意花园/The Zen of CSS design

6. How

Books

6. How

Flowing blogs

6. How

Using more products

6. How

Thinking

Refine

Summary