├── CN.md ├── README.md ├── background.png ├── backround.png └── chart.png /CN.md: -------------------------------------------------------------------------------- 1 | # learn-web-development 2 | 从2017年里最好的文章中学习 Web 开发 3 | 4 | Mybridge 5 | 6 | [English Version](./README.md) | [中文版本](./CN.md) 7 | 8 | 在过去的一年间（2017年），我们对比了近16000篇 Web 开发相关的文章，并从中挑出了最好的45篇。 9 | 10 | 我们相信，向经验丰富的 Web 开发者学习会是促进你事业进步一个非常好的方式。该清单组织收录了2017年里最有用的那些学习指南，旨在让你学习起来更加轻松。在这些学习指南中，经验丰富的 Web 开发人员分享了他们在构建和发布 Web 应用方面的经验与教训。 11 | 12 | 这份清单有20个关键主题： 13 | 14 | Mybridge 15 | 16 | 如果你想查看带图片的版本：[查看 Medium 链接](https://goo.gl/oh4HXE) 17 | 18 | ## 目录 19 | 1. [通用指南](#通用指南) 20 | 1. [AWS](#aws) 21 | 1. [Docker](#docker) 22 | 1. [安全](#安全) 23 | 1. [编程最佳实践](#编程最佳实践) 24 | 1. [Git](#git) 25 | 1. [Google Analytics](#google-analytics) 26 | 1. [Bootstrap](#bootstrap) 27 | 1. [HTTPS](#https) 28 | 1. [Vim](#vim) 29 | 1. [Web Font](#web-font) 30 | 1. [HTML Email](#html-email) 31 | 1. [WebAssembly](#webassembly) 32 | 1. [Chrome DevTools](#chrome-devtools) 33 | 1. [案例分析](#案例分析) 34 | 1. [性能](#性能) 35 | 1. [Progressive Web App](#progressive-web-app) 36 | 1. [面试](#面试) 37 | 1. [从业收获](#从业收获) 38 | 1. [用户界面](#用户界面) 39 | 40 | ### 推荐学习课程 41 | 42 | A) 游戏 AI：[使用 Unity 构建人工智能应用的新手指南。](http://bit.ly/2nbsc5n) 43 | 44 | 5,041 推荐，4.7/5 星 45 | 46 | B) 计算机视觉：[深度学习与计算机视觉 A-Z™: 学习 OpenCV, SSD 和 GANs 并创建一个图像识别应用。](http://bit.ly/2DGORkq) 47 | 48 | 8,161 推荐，4.5/5 星 49 | 50 | ### 通用指南 51 | * [2017 前端开发手册 - Cody Lindley](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 52 | * [2017 Web 开发者技能学习路线图](https://github.com/kamranahmedse/developer-roadmap?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 53 | * [前端清单：为现代网站和细心开发者准备的完美的前端清单](http://frontendchecklist.com/?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 54 | * [我们这超过 500 名工程师都在使用这份前端开发指南](https://medium.freecodecamp.com/grabs-front-end-guide-for-large-teams-484d4033cc41?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 55 | 56 | ### AWS 57 | * [Amazon Web Services 开放学习指南](https://github.com/open-guides/og-aws?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 58 | * [亚马逊 ECS 与 Docker 服务的打包指南](http://start.jcolemorrison.com/the-hitchhikers-guide-to-aws-ecs-and-docker?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 59 | 60 | ### Docker 61 | * [从这里了解你该如何开始使用 Docker](http://djangostars.com/blog/heres-how-you-start-using-docker?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 62 | * [Docker 介绍](https://tobiastom.name/explains/docker?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 63 | 64 | ### 安全 65 | * [Web 开发者安全清单](https://simplesecurity.sensedeep.com/web-developer-security-checklist-f2e4f43c9c56?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 66 | * [Auth-Boss: 了解 Web 上不同的认证方法](https://github.com/teesloane/Auth-Boss?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 67 | * [用伪密码字段绕过浏览器安全警告](https://www.troyhunt.com/bypassing-browser-security-warnings-with-pseudo-password-fields?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 68 | 69 | ### 编程最佳实践 70 | * [程序员需要了解的设计模式](https://github.com/kamranahmedse/design-patterns-for-humans?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 71 | * [Google 的软件工程实践精选[PDF]](https://arxiv.org/abs/1702.01715?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 72 | 73 | ### Git 74 | * [Git-flight-rules: 为使用 git 的程序员准备的指南，他会在你遇到问题时告诉你该怎么做](https://github.com/k88hudson/git-flight-rules?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 75 | 76 | ### Google Analytics 77 | * [我在构建的每个网站上都会使用的 Google Analytics 设置](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 78 | 79 | ### Bootstrap 80 | * [关于 Bootstrap 4 你所需要知道的一切](https://medium.freecodecamp.org/bootstrap-4-everything-you-need-to-know-c750991f6784?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 81 | 82 | ### HTTPS 83 | * [通向 HTTPS 的六步“快乐之路”](https://www.troyhunt.com/the-6-step-happy-path-to-https?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 84 | 85 | ### Vim 86 | * [15年后的 Vim](https://statico.github.io/vim3.html?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 87 | 88 | ### Web Font 89 | * [Web fonts: 你究竟什么时候才需要它](https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 90 | 91 | ### HTML Email 92 | * [向 Web 开发者发送 HTML 电子邮件的构建指南 – Smashing Magazine](https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 93 | 94 | ### WebAssembly 95 | * [漫画简介 WebAssembly – Smashing Magazine](https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 96 | 97 | ### Chrome DevTools 98 | * [增强你的 Web 开发技能树：在 Chrome 开发者工具的150个动画提示](https://medium.com/dev-channel/increase-your-web-development-skill-set-150-animated-tips-on-chrome-devtools-4a30155e6b8e?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 99 | * [Chrome 开发者工具：2017发展概况 (Google I/O '17)](https://www.youtube.com/watch?v=PjjlwAvV8Jg?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 100 | * [使用 Chrome 开发者工具获取 Taylor Swift的下一场演唱会门票](https://medium.com/@amyngyn/look-what-you-made-me-do-chrome-b85eb2a90540?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 101 | * [Chrome 中的预加载，预取和优先级 - Addy Osmani, Google 工程师](https://medium.com/dev-channel/preload-prefetch-and-priorities-in-chrome-776165961bbf?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 102 | 103 | ### 案例分析 104 | * [我们是如何开发出 r/Place 的](http://redditblog.com/2017/04/13/how-we-built-rplace?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 105 | * [我是如何在两个月内学会编程，开发了一个 Web 应用并将其发布到 Product Hunt 上的](https://medium.com/@AndreyAzimov/i-learned-to-code-and-build-a-web-app-in-2-months-da8f2932c139?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 106 | 107 | ### 性能 108 | * [Web 发展状态：有效性能改进的推进指南](https://medium.com/@fox/talk-the-state-of-the-web-3e12f8e413b3?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 109 | * [基本图像优化 - Addy Osmani](https://images.guide?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 110 | * [有关 Web 缓存你所需要了解的一切](http://kamranahmed.info/blog/2017/03/14/quick-guide-to-http-caching?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 111 | * [用一点机器学习的知识来加速你的网站](https://hackernoon.com/speed-up-your-site-with-a-little-machine-learning-fa9eb7c86dbb?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 112 | 113 | ### Progressive Web App 114 | * [Pinterest Progressive Web App 性能分析](https://medium.com/@addyosmani/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 115 | * [Progressive Web Apps 与 Web 开发新手指南](https://hackernoon.com/a-beginners-guide-to-progressive-web-apps-the-frontend-web-424b6d697e35?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 116 | * [使用 JavaScript 框架开发 Progressive Web Apps (Google I/O '17)](https://www.youtube.com/watch?v=aCMbSyngXB4?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 117 | 118 | ### 面试 119 | * [我刚拿到 Facebook 的工作机会，我是这样准备我的面试的……](https://medium.freecodecamp.org/software-engineering-interviews-744380f4f2af?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 120 | * [30分钟备战你的下一个编程面试](https://medium.freecodecamp.org/coding-interviews-for-dummies-5e048933b82b?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 121 | * [我刚拿到 Snapchat 的工作机会，我从中学到了什么以及它能如何帮助你找到工作](https://medium.freecodecamp.com/a-dynamic-framework-for-finding-your-first-programming-job-b4eb0605b4f3?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 122 | * [Google 编程测试问题与答案 #1: First Recurring Character](https://www.youtube.com/watch?v=GJdiM-muYqc?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 123 | 124 | ### 从业收获 125 | * [我该如何向一位来自2007年的时间旅行者解释这十年里的 Web 发展](https://medium.freecodecamp.org/web-development-explained-to-a-time-traveler-from-ten-years-ago-600fad81170d?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 126 | * [我从事 Web 开发已经17年了，这是我所学到的一切 - Daniel Khan](http://community.risingstack.com/ive-been-a-web-developer-for-17-years-and-this-is-what-i-learned-daniel-khan?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 127 | * [开发者优势：如果成为一名高级开发工程师](https://hackernoon.com/developers-edge-how-to-become-a-senior-developer-f1ec1738cf45?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 128 | * [资深首席技术官（多次成功经历）为你解答最受关注的创业问题](http://firstround.com/review/veteran-cto-with-20-years-experience-answers-your-top-startup-building-questions?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 129 | 130 | ### 用户界面 131 | * [重新思考拖拽（drag and drop）操作：简化操作，使其优美](https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 132 | * [Grid 内容展开动画](https://tympanus.net/codrops/2017/11/08/expanding-grid-item-animation?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 133 | * [菜单悬停效果带来的灵感启示](https://tympanus.net/codrops/2017/08/01/inspiration-for-menu-hover-effects?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # learn-web-development 2 | Learn Web Development from Top Articles of 2017 3 | 4 | Mybridge 5 | 6 | [English Version](./README.md) | [中文版本](./CN.md) 7 | 8 | Between Jan~Dec 2017, we’ve compared nearly 16,000 Web Development articles to pick the Top 45. 9 | 10 | We believe learning from web developers who have hands-on experience in the field is a great way to advance your career. This directory is designed to make your life easier as it organizes the most useful tutorials written in 2017, where experienced web developers share their lessons in building and shipping a web application.. 11 | 12 | This directory has 20 key topics: 13 | 14 | Mybridge 15 | 16 | If you want a version with images: [Go to our Medium link](https://goo.gl/oh4HXE) 17 | 18 |
19 | 20 | ## Table of Contents 21 | 1. [General Guide](#general-guide) 22 | 1. [AWS](#aws) 23 | 1. [Docker](#docker) 24 | 1. [Security](#security) 25 | 1. [Best Coding Practices](#best-coding-practices) 26 | 1. [Git](#git) 27 | 1. [Google Analytics](#google-analytics) 28 | 1. [Bootstrap](#bootstrap) 29 | 1. [HTTPS](#https) 30 | 1. [Vim](#vim) 31 | 1. [Web Font](#web-font) 32 | 1. [HTML Email](#html-email) 33 | 1. [WebAssembly](#webassembly) 34 | 1. [Chrome DevTools](#chrome-devtools) 35 | 1. [Case Study](#case-study) 36 | 1. [Performance](#performance) 37 | 1. [Progressive Web App](#progressive-web-app) 38 | 1. [Interview](#interview) 39 | 1. [Lesson Learned](#lesson-learned) 40 | 1. [User Interface](#user-interface) 41 |
42 | 43 | ### Recommended Learning 44 | 45 | A) Gaming AI: [The Beginner’s Guide to Building an Artificial Intelligence in Unity.](http://bit.ly/2nbsc5n) 46 | 47 | 5,041 recommends, 4.7/5 stars 48 | 49 | B) Computer Vision: [Deep Learning and Computer Vision A-Z™: Learn OpenCV, SSD & GANs and create image recognition apps.](http://bit.ly/2DGORkq) 50 | 51 | 8,161 recommends, 4.5/5 stars 52 | 53 |
54 | 55 | 56 | 57 | ### General Guide 58 | * [Front-end Developer Handbook 2017 - Cody Lindley](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 59 | * [Roadmap to becoming a web developer in 2017](https://github.com/kamranahmedse/developer-roadmap?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 60 | * [Front-End Checklist: The perfect Front-End Checklist for modern websites and meticulous developers](http://frontendchecklist.com/?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 61 | * [Our 500+ engineers all use this front end development guide](https://medium.freecodecamp.com/grabs-front-end-guide-for-large-teams-484d4033cc41?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 62 | 63 |
64 | 65 | ### AWS 66 | * [The Open Guide to Amazon Web Services.](https://github.com/open-guides/og-aws?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 67 | * [The Hitchhiker's Guide to AWS ECS and Docker](http://start.jcolemorrison.com/the-hitchhikers-guide-to-aws-ecs-and-docker?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 68 | 69 |
70 | 71 | ### Docker 72 | * [Here’s How You Start Using Docker](http://djangostars.com/blog/heres-how-you-start-using-docker?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 73 | * [Docker Introduction](https://tobiastom.name/explains/docker?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 74 | 75 |
76 | 77 | ### Security 78 | * [Web Developer Security Checklist](https://simplesecurity.sensedeep.com/web-developer-security-checklist-f2e4f43c9c56?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 79 | * [Auth-Boss: Learn about different authentication methodologies on the web.](https://github.com/teesloane/Auth-Boss?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 80 | * [Bypassing Browser Security Warnings with Pseudo Password Fields](https://www.troyhunt.com/bypassing-browser-security-warnings-with-pseudo-password-fields?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 81 | 82 |
83 | 84 | ### Best Coding Practices 85 | * [Design Patterns for Programmers](https://github.com/kamranahmedse/design-patterns-for-humans?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 86 | * [Key software engineering practices at Google [PDF]](https://arxiv.org/abs/1702.01715?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 87 | 88 |
89 | 90 | ### Git 91 | * [Git-flight-rules: A guide for programmers using git about what to do when things go wrong.](https://github.com/k88hudson/git-flight-rules?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 92 | 93 |
94 | 95 | ### Google Analytics 96 | * [The Google Analytics Setup I Use on Every Site I Build](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 97 | 98 |
99 | 100 | ### Bootstrap 101 | * [Bootstrap 4: Everything You Need to Know](https://medium.freecodecamp.org/bootstrap-4-everything-you-need-to-know-c750991f6784?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 102 | 103 |
104 | 105 | ### HTTPS 106 | * [The 6-Step "Happy Path" to HTTPS](https://www.troyhunt.com/the-6-step-happy-path-to-https?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 107 | 108 |
109 | 110 | ### Vim 111 | * [Vim After 15 Years](https://statico.github.io/vim3.html?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 112 | 113 |
114 | 115 | ### Web Font 116 | * [Web fonts: when you need them, when you don’t](https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 117 | 118 |
119 | 120 | ### HTML Email 121 | * [An Introduction To Building And Sending HTML Email For Web Developers – Smashing Magazine](https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 122 | 123 |
124 | 125 | ### WebAssembly 126 | * [An Abridged Cartoon Introduction To WebAssembly – Smashing Magazine](https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 127 | 128 |
129 | 130 | ### Chrome DevTools 131 | * [Increase your web development skill-set: 150 animated tips on Chrome DevTools](https://medium.com/dev-channel/increase-your-web-development-skill-set-150-animated-tips-on-chrome-devtools-4a30155e6b8e?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 132 | * [DevTools: State of the Union 2017 (Google I/O '17)](https://www.youtube.com/watch?v=PjjlwAvV8Jg?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 133 | * [Using Chrome Developer Tools to get tickets to Taylor Swift’s next concert](https://medium.com/@amyngyn/look-what-you-made-me-do-chrome-b85eb2a90540?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 134 | * [Preload, Prefetch And Priorities in Chrome - Addy Osmani, Staff Engineer at Google](https://medium.com/dev-channel/preload-prefetch-and-priorities-in-chrome-776165961bbf?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 135 | 136 |
137 | 138 | ### Case Study 139 | * [How We Built r/Place](http://redditblog.com/2017/04/13/how-we-built-rplace?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 140 | * [I learned to code, build a web app and launch it on Product Hunt in 2 months](https://medium.com/@AndreyAzimov/i-learned-to-code-and-build-a-web-app-in-2-months-da8f2932c139?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 141 | 142 |
143 | 144 | ### Performance 145 | * [The State of the Web: A guide to impactful performance improvements](https://medium.com/@fox/talk-the-state-of-the-web-3e12f8e413b3?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 146 | * [Essential Image Optimization - Addy Osmani](https://images.guide?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 147 | * [Web Cache - Everything you need to know](http://kamranahmed.info/blog/2017/03/14/quick-guide-to-http-caching?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 148 | * [Speed up your site with a little machine learning](https://hackernoon.com/speed-up-your-site-with-a-little-machine-learning-fa9eb7c86dbb?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 149 | 150 |
151 | 152 | ### Progressive Web App 153 | * [A Pinterest Progressive Web App Performance Case Study](https://medium.com/@addyosmani/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 154 | * [A Beginner’s Guide to Progressive Web Apps & the Frontend Web](https://hackernoon.com/a-beginners-guide-to-progressive-web-apps-the-frontend-web-424b6d697e35?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 155 | * [Production Progressive Web Apps With JavaScript Frameworks (Google I/O '17)](https://www.youtube.com/watch?v=aCMbSyngXB4?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 156 | 157 |
158 | 159 | ### Interview 160 | * [I just got a developer job at Facebook. Here’s how I prepped for my interviews.](https://medium.freecodecamp.org/software-engineering-interviews-744380f4f2af?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 161 | * [The 30-minute guide to rocking your next coding interview](https://medium.freecodecamp.org/coding-interviews-for-dummies-5e048933b82b?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 162 | * [I just got a developer job at Snapchat. Here’s what I learned and how it can help you with your job search.](https://medium.freecodecamp.com/a-dynamic-framework-for-finding-your-first-programming-job-b4eb0605b4f3?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 163 | * [Google Coding Interview Question and Answer #1: First Recurring Character](https://www.youtube.com/watch?v=GJdiM-muYqc?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 164 | 165 |
166 | 167 | ### Lesson Learned 168 | * [How I would explain a decade of web development to a time traveler from 2007](https://medium.freecodecamp.org/web-development-explained-to-a-time-traveler-from-ten-years-ago-600fad81170d?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 169 | * [I've been a Web Developer for 17 Years, and this is what I learned - Daniel Khan](http://community.risingstack.com/ive-been-a-web-developer-for-17-years-and-this-is-what-i-learned-daniel-khan?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 170 | * [The Developer’s Edge: How To Become A Senior Developer](https://hackernoon.com/developers-edge-how-to-become-a-senior-developer-f1ec1738cf45?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 171 | * [Veteran CTO (with Multiple Successful Exits) Answers Your Top Startup-Building Questions](http://firstround.com/review/veteran-cto-with-20-years-experience-answers-your-top-startup-building-questions?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 172 | 173 |
174 | 175 | ### User Interface 176 | * [Rethinking drag and drop: Taking something basic and making it beautiful](https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 177 | * [Expanding Grid Item Animation](https://tympanus.net/codrops/2017/11/08/expanding-grid-item-animation?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 178 | * [Inspiration for Menu Hover Effects](https://tympanus.net/codrops/2017/08/01/inspiration-for-menu-hover-effects?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) 179 | -------------------------------------------------------------------------------- /background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/learn-web-development/e56e82a8ac8a17d9e8f9c6dc4e73aa020d3ec4f4/background.png -------------------------------------------------------------------------------- /backround.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/learn-web-development/e56e82a8ac8a17d9e8f9c6dc4e73aa020d3ec4f4/backround.png -------------------------------------------------------------------------------- /chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/learn-web-development/e56e82a8ac8a17d9e8f9c6dc4e73aa020d3ec4f4/chart.png --------------------------------------------------------------------------------