网页可以简单的理解为素材及布局、交互行为和数据的集合体。

1. 美工负责素材及界面布局
2. 交互制定交互的行为和规则
3. 后端设计数据库
4. 前端是通过工具（HTML、CSS、JavaScript）把这些都整合起来，设计制作出页面。

Web前端，制作的是用户可以看得见碰得着的东西。或者称为“网页制作”、“网页制作工程师”、“前端制作工程师”、“网站重构工程师”。

另外，根据不同的对象，和自己的心情，是否有闲暇时间，使用不同的方式来回答这个问题：

1. 对于没必要了解工作内容的人，一律回复：写代码的程序员即可。
2. 对于朋友，可以让他稍微了解工作内容的人，可以回复：写网站界面/程序的。
3. 对于家里人，只需要知道你工作的地方稳定/你工作开心/生活健康就好，回复诸如：吃得好睡的好，工资高待遇好……
4. 对于妹纸，可以做一个resume或者blog出来，然后和她们讲：“我的工作内容和做这个网站差不多”
5. 对于校友或者学弟学妹一类，想了解专业方向和工作内容的人，可以比较详细的回答他们

下面是完整的技能树：

前端工程师

• 部署流程
  • 压缩合并
    • YUI Compressor
    • Google Clousure Complier
    • UglifyJS
    • CleanCSS
  • 文档输出
    • JSDoc
    • Dox/Doxmate/Grunt-Doxmate
  • 项目构建工具
    • make/Ant
    • GYP
    • Grunt
    • Gulp
    • Yeoman
    • FIS
    • Mod
• 编程知识储备
  • 数据结构
  • OOP/AOP
  • 原型链/作用域链
  • 闭包
  • 编程范型
  • 设计模式
  • Javascript Tips
• SEO
• 性能
  • JSPerf
  • YSlow 35 rules
  • PageSpeed
  • HTTPWatch
  • DynaTrace’s Ajax
  • 高性能JavaScript
• 开发工具
  • 编辑器和IDE
    • VIM/Sublime Text2
    • Notepad++/EditPlus
    • WebStorm
    • Emacs EmacsWiki
    • Brackets
    • Atom
    • Lime Text
    • Light Table
    • Codebox
    • TextMate
    • Neovim
    • Komodo IDE / Edit
    • Eclipse
    • Visual Studio/Visual Studio Code
    • NetBeans
    • Cloud9 IDE
    • HBuilder
    • Nuclide
  • 调试工具
    • Firebug/Firecookie
    • YSlow
    • IEDeveloperToolbar/IETester
    • Fiddler
    • Chrome Dev Tools
    • Dragonfly
    • DebugBar
    • Venkman
  • 版本管理
    • Git/SVN/Mercurial
    • Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
• 切页面
  • HTML/HTML5
  • CSS/CSS3
  • Sass/LESS/Stylus
  • PhotoShop/Paint.net/Fireworks/GIMP/Sketch
• 编程语言
  • JavaScript/Node.js
  • CoffeeScript
  • TypeScript
• 浏览器
  • IE6/7/8/9/10/11 (Trident)
  • Firefox (Gecko)
  • Chrome/Chromium (Blink)
  • Safari (WebKit)
  • Opera (Blink)
• 代码质量
  • Coding style
    • JSLint/JSHint/jscs
    • CSSLint
    • Markup Validation Service
    • HTML Validators
  • 单元测试
    • QUnit/Jasmine
    • Mocha/Should/Chai/Expect
    • Unit JS
  • 自动化测试
    • WebDriver/Protractor/Karma Runner/Sahi
    • phantomjs
    • SourceLabs/BrowserStack
  • 前端库/框架
    • jQuery/Underscore/Mootools/Prototype.js
    • YUI3/Dojo/ExtJS/KISSY
    • Backbone/KnockoutJS/Emberjs
    • AngularJS
    • Batarang
    • Bootstrap
    • Semantic UI
    • Juice UI
    • Web Atoms
    • Polymer
    • Dhtmlx
    • qooxdoo
    • React
    • Brick
• 前端标准/规范
  • HTTP/1.1: RFCs 7230-7235
  • HTTP/2
  • ECMAScript3/5
  • W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…
  • CommonJS Modules/AMD
  • HTML5/CSS3
  • Semantic Web
    • MicroData
    • RDFa
  • Web Accessibility
    • WCAG
    • Role Attribute
    • WAI-ARIA
• 代码组织
  • 类库模块化
    • CommonJS/AMD
    • YUI3模块
  • 业务逻辑模块化
    • bower/component
  • 文件加载
    • LABjs
    • SeaJS/Require.js
  • 模块化预处理器
    • Browserify

• 安全
  • CSRF/XSS
  • CSP
  • Same-origin policy
  • ADsafe/Caja/Sandbox
• 移动Web
  • HTML5/CSS3
  • 响应式网页设计
  • Zeptojs/iScroll
  • V5/Sencha Touch
  • PhoneGap
  • jQuery Mobile
  • W3C Mobile Web Initiative
  • W3C mobileOK Checker
  • Open Mobile Alliance
• 前沿技术社区/会议
  • D2/WebRebuild
  • NodeParty/W3CTech/HTML5梦工厂
  • JSConf/沪JS(JSConf.cn)
  • QCon/Velocity/SDCC
  • JSConf/NodeConf
  • CSSConf
  • YDN/YUIConf
  • HybridApp
  • WHATWG
  • MDN
  • codepen
  • w3cplus
  • CNode
  • 计算机知识储备
  • 编译原理
  • 计算机网络
  • 操作系统
  • 算法原理
  • 软件工程/软件测试原理
  • Unicode
• 软技能
  • 知识管理/总结分享
  • 沟通技巧/团队协作
  • 需求管理/PM
  • 交互设计/可用性/可访问性知识
• 可视化
  • SVG/Canvas/VML
  • SVG: D3/Raphaël/Snap.svg/DataV
  • Canvas: CreateJS/KineticJS
  • WebGL/Three.JS

后端工程师

• 编程语言
  • C/C++/Java/PHP/Ruby/Python/…
• 网页服务器
  • Nginx
  • Apache
  • Lighttpd
• 数据库
  • SQL
  • MySQL/PostgreSQL/Oracle/DB2
  • MongoDB/CouchDB
• 数据缓存
  • Redis
  • Memcached
• 文件缓存/代理
  • Varnish
  • Squid
• 操作系统
  • Unix/Linux/OS X/Windows
• 数据结构

转载请注明：陈童的博客 » 怎么样向不懂前端的人介绍前端？