{"id":16594612,"url":"https://github.com/hjzheng/newcomer","last_synced_at":"2025-06-12T21:12:39.111Z","repository":{"id":69302987,"uuid":"56759730","full_name":"hjzheng/newcomer","owner":"hjzheng","description":"前端新人培训","archived":false,"fork":false,"pushed_at":"2018-07-17T05:47:09.000Z","size":2624,"stargazers_count":27,"open_issues_count":0,"forks_count":67,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-04T08:18:51.702Z","etag":null,"topics":["angularjs","frontend","training","training-materials"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hjzheng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-21T09:14:26.000Z","updated_at":"2024-10-10T15:30:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"a55e121d-79ba-45c6-8315-0785f5bc0fd5","html_url":"https://github.com/hjzheng/newcomer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hjzheng/newcomer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjzheng%2Fnewcomer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjzheng%2Fnewcomer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjzheng%2Fnewcomer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjzheng%2Fnewcomer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hjzheng","download_url":"https://codeload.github.com/hjzheng/newcomer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjzheng%2Fnewcomer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259531602,"owners_count":22872137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","frontend","training","training-materials"],"created_at":"2024-10-11T23:46:49.264Z","updated_at":"2025-06-12T21:12:39.106Z","avatar_url":"https://github.com/hjzheng.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# newcomer\n新人培训 (零基础培训)\n\n**说明 关于可选或选读, 导师可以根据新人能力, 推荐阅读**\n\n#### CSS基础\n\n**适当的讲一下, 但不要过多的占用自己时间, 最终目的, 独立完成UX设计稿到静态HTML页面转换(PSD2HTML)**\n\n1. 如何使用 Webstorm ( 强调快捷键使用 )\n2. 熟悉 html 页面结构 ( 强调 doctype ), 写一个人简历页面, 不要用 CSS 样式, 注意 [html规范](https://gist.github.com/hjzheng/e3a1fadb3ef7df69ecef)\n3. 使用Chrome dev tools 调试 CSS, HTML\n4. 使用 jsbin.com 写自己的 demo 页面\n5. reset.css 例如 normalize.css (为什么会有rest.css 和 浏览器的差异性)\n6. 盒模型\n7. CSS Layout 一些知识 [传送门](http://zh.learnlayout.com/)\n    - block, inline 和 inline-block 元素特点 [传送门](http://zhenghaoju700.blog.163.com/blog/static/1358595182014542594926/)\n    - 浮动布局 和 清理浮动 [传送门](http://zhenghaoju700.blog.163.com/blog/static/1358595182014583144423/)\n    - 定位布局 [传送门](http://zhenghaoju700.blog.163.com/blog/static/13585951820145109128773/)\n    - flex布局 [传送门](https://gist.github.com/hjzheng/eb21c393a320391dcf63)\n    - box-sizing\n    - 垂直居中 [传送门](http://mossad.iteye.com/blog/2153675)\n8. CSS 样式优先级 和 CSS 选择器 (这个 w3cschool 上有, 取决于新人自学程度) [传送门](http://zhenghaoju700.blog.163.com/blog/static/135859518201342883431872/)\n9. 一些常见的组件的写法, 例如导航栏, 登录页面, 菜单, 商品展示等, 可以参考京东或天猫首页, 重点在于HTML结构选择\n10. 工作流(从原型到html页面(PSD2HTML), 随便截取一张网页的一部分, 让新人实现, 导师可以进行示范)\n    - 拿到设计稿, 分析结构, 标注\n    - 先写出HTML结构\n    - 在添加上CSS样式\n    - 最终效果与设计稿一致\n11. CSS3 和 HTML5 (可选)\n12. CSS框架 bootstrap (可选)\n13. [精通CSS 高级Web标准解决方案](https://book.douban.com/subject/4736167/)\n14. [CSS规范](http://codeguide.bootcss.com/)\n\n#### JS基础 (ES5)\n\n**以自学为主, 有问题问导师, 独自完成练习, 导师可以带着做一个简单的练习**\n\n1. 语法: 标识符, 数字, 字符串, 语句, 表达式, 字面量, 函数\n2. 对象, 函数, 继承, 数组, 正则, 变量提升, 闭包, 原型继承, 立即自执行函数, 高阶函数, 函数的四种调用方式等\n3. DOM, BOM 和 Ajax 请求\n    - [JavaScript权威指南](http://item.jd.com/10974436.html)\n    - [codecademy.com Javascript 练习](https://www.codecademy.com/learn/javascript) (可选)\n    - [NodeSchool JS教程](https://github.com/sethvincent/javascripting) (可选)\n4. [JavaScript语言精髓](http://item.jd.com/11090963.html) (选读)\n5. [Effective JavaScript：编写高质量JavaScript代码的68个有效方法](http://item.jd.com/11354665.html)\n6. [JavaScript模式](http://item.jd.com/11044070.html) (选读)\n7. [JavaScript DOM高级程序设计](http://item.jd.com/10138651.html) (选读)\n8. JS规范 [ESLint规范](https://github.com/Jocs/ESLint_docs)\n9. [练习](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/js-practice)\n    - Tab http://www.angularjs.cn/\n    - Todo List 用原生JS写 AngularJS 官网的 [Todo List](https://angularjs.org/)\n    - login http://www.angularjs.cn/login\n10. [其他资料](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/js-practice/concept/others.md)\n\n\n#### AngularJS\n\n**以自学为主, 有问题问导师, 独自完成练习**\n\n1. [AngularJS官方指南](https://docs.angularjs.org/guide)\n2. [PhoneCat](https://docs.angularjs.org/tutorial)\n3. [精通AngularJS](http://www.duokan.com/book/90947)\n4. [A Better Way to Learn AngularJS](https://thinkster.io/a-better-way-to-learn-angularjs) 可以作为[AngularJS1.x知识的考察点](https://github.com/ShuyunXIANFESchool/newcomer/blob/master/src/angular-practice/angular-skill-tree/AngularJS1.x%20%E6%8A%80%E8%83%BD%E7%82%B9.png)\n5. AngularJS 1.x 规范 参考 [johnpapa/angular-styleguide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/i18n/zh-CN.md)\n6. [AngularJS 1.x Code Review CheckList](https://angularcodereview.com/angularjs/) [xmind总结](https://github.com/ShuyunXIANFESchool/newcomer/blob/master/src/angular-practice/angular-code-review/AngularJS1.x%20Code%20Review%20CheckList.png)\n7. 练习\n   - Todo list\n   - 写指令\n     - [tooltip](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/angular-practice/tooltip)\n     - [dropdown](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/angular-practice/dropdown)\n     - [switch](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/angular-practice/switch)\n     - [modal](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/angular-practice/modal)\n     - [steps](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/angular-practice/steps)\n     - [loading](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/angular-practice/loading)\n     - [checkbox\u0026radio](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/angular-practice/form)\n   - [飞饭练习](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/angular-practice/flymeal)\n\n#### React\n\n**以自学为主, 有问题问导师, 独自完成练习**\n\n1. [React官方指南](https://facebook.github.io/react/docs/hello-world.html)\n2. [think in react](https://facebook.github.io/react/docs/thinking-in-react.html)\n3. [React（第2版）：引领未来的用户界面开发框架](https://book.douban.com/subject/26918475/) 入门经典\n4. [React Design Patterns and Best Practices](https://book.douban.com/subject/26963822/) 进阶神器\n5. 练习\n    - [饿了吗练习](https://github.com/hjzheng/react-practice/blob/master/note/test.md)\n\n#### ES6相关\n\n**实际项目中会用到ES6, 这里提供两个练习环境**\n\n   - [babelify + browserify + gulp](https://github.com/hjzheng/es6-practice)\n   - [babel + webpack](https://github.com/hjzheng/es6-practice-webpack)\n\n1. [阮一峰的 ES6入门](http://es6.ruanyifeng.com/)\n2. 关于 ES6 与 AngularJS 1.x 如何结合使用\n   - 参考[ccms-components](https://github.com/ShuyunFF2E/ccms-components)\n   - [Angular 1.x和ES6的结合](https://github.com/xufei/blog/issues/29)\n3. [ESLint规范](https://github.com/Jocs/ESLint_docs)\n\n#### 团队协作\n\n**实际项目关于 git 的使用, 以及通过一些工具例如 ESLint 等, 对代码风格控制, 以及通过单元测试, 保证代码质量**\n\n1. [git使用](http://rogerdudler.github.io/git-guide/)\n2. [前端代码质量控制](https://github.com/ShuyunXIANFESchool/newcomer/tree/master/src/others)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhjzheng%2Fnewcomer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhjzheng%2Fnewcomer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhjzheng%2Fnewcomer/lists"}