掩码项目编码

by Angela He

通过何安佳

每天进行20天的编码项目 (A coding project a day for 20 days)

我如何在20天内自学Web开发 (How I taught myself web development in 20 days)

It was the first day of winter break for Stanford students. Back at home, I opened a dozen tabs of coding inspiration, got onto a code editor, and created my first coding project. 20 days later, I created my last project before packing up and flying out to return to the college grind.

这是斯坦福大学学生寒假的第一天。回到家里，我打开了十二个编码灵感标签，进入了一个代码编辑器，并创建了我的第一个编码项目。 20天后，我创建了我的最后一个项目，然后打包整理并飞回大学。

I challenged myself to code a project every day so I could gain the skills to make a website as amazing as the websites that inspire me. To make my numerous ideas into reality, and be able to share them with the world, has always been my driving force, first in art, now in code.

我每天都在挑战自己编写一个项目的代码，这样我才能掌握使网站像激发我灵感的网站一样惊人的技能。使我的众多想法变为现实，并能够与世界分享，一直是我的动力，首先是艺术，现在是代码。

During those 20 days, I taught myself multiple web development languages and created many projects including a messaging app, a notes app, and a chatbot.

在那20天内，我自学了多种Web开发语言，并创建了许多项目，包括消息传递应用程序，便笺应用程序和聊天机器人。

You can find my 20 Days projects on CodePen.

您可以在CodePen上找到我的20天项目。

Here are my tools, creative process, and some reflection at the end.

这是我的工具，创作过程以及最后的几点思考。

工具类 (Tools)

I used all of the following tools, but everything beyond HTML, CSS, Javascript, and a code editor is optional.

我使用了以下所有工具，但HTML，CSS，Javascript和代码编辑器之外的所有工具都是可选的。

CodePen. An online code editor for HTML, CSS, and Javascript where users can showcase their work — great for getting your web dev code seen.
CodePen。用于HTML，CSS和Javascript的在线代码编辑器，用户可以在其中展示其工作-非常适合查看您的Web开发代码。
Photoshop. A world-class graphics editor for creating raster graphics. I created graphics for certain projects with this and a Huion tablet.
Photoshop。世界一流的图形编辑器，用于创建栅格图形。我使用此软件和Huion平板电脑为某些项目创建了图形。
HTML. Hypertext Markup Language; creates the content of a webpage.
HTML。超文本标记语言; 创建网页的内容。
Pug. A template engine for a more ‘clean, whitespace sensitive syntax for HTML’ — great for speeding up development.
哈巴狗一个模板引擎，用于更“干净的，对HTML的空格敏感的语法” —非常适合加快开发速度。
Bootstrap. A component library for getting responsive components up quick. Great for speed; not so great for unique designs since every component will have a predetermined look.
引导程序。一个组件库，用于快速启动响应式组件。非常适合速度；对于独特的设计来说并不是那么好，因为每个组件都具有预定的外观。
CSS. Cascading Style Sheets; dictates the design of a webpage.
CSS。级联样式表；决定网页的设计。
Sass. Style sheet language that provides variables, functions, mixins, and more to streamline creating CSS.
ass子样式表语言，提供变量，函数，mixin等，以简化CSS的创建过程。
Javascript. Used to define unpredictable or user-controlled events of a webpage.
Javascript。用于定义网页的不可预测或用户控制的事件。
React. A Javascript library that helps maintain state and create the content of a webpage by separating each part into a reusable component.
React 一个Javascript库，通过将每个部分分成一个可重用的组件来帮助维护状态并创建网页的内容。
jQuery. A Javascript library to help simplify HTML DOM manipulation and traversal — note, however, that its ease comes at the cost of its relatively large size — around 30 KB.
jQuery的。一个有助于简化HTML DOM操作和遍历的Javascript库-但是请注意，它的简便性是以相对较大的大小为代价的-大约30 KB。
three.js. A Javascript library for creating and displaying 3D models.
three.js。一个用于创建和显示3D模型的Javascript库。
Firebase. A mobile and web platform that provides easy access to database, messaging, authentication, and other services.
火力基地。一个移动和Web平台，可轻松访问数据库，消息传递，身份验证和其他服务。

创作过程 (Creative Process)

To successfully create a project, I had to do two things:

要成功创建一个项目，我必须做两件事：

Have an idea,
有个主意
Know it’d be feasible.
知道这是可行的。

Thus my creative process took form in three steps —

因此，我的创作过程分三步走：

1.了解一个想法(30分钟) (1. Get an idea (30 min))

My goal for each project was to make something cool while learning something new. With that in mind, I browsed my favorite design and web development sites for inspiration —

对于每个项目，我的目标都是在学习新知识的同时做一些有趣的事情。考虑到这一点，我浏览了自己喜欢的设计和Web开发网站以获取灵感-

My favorite design sites:

我最喜欢的设计网站：

Dribbble.
运球。
Behance.
行为。
Daily UI.
每日用户界面。

My favorite web dev sites:

我最喜欢的Web开发网站：

CodePen.
CodePen 。
Awwwards.
啊！
Codrops.
科洛普斯。
CodyHouse.)
CodyHouse 。)

And brainstormed a list of ideas like the following —

并集思广益，列出了如下想法：

…then picked my favorite out of the list as the Official Idea of the Day™.

…然后从列表中选择了我最喜欢的作为“每日官方想法™” 。

2.查找示例(30分钟) (2. Find examples (30 min))

For every idea I had, I knew some part of it must have an existing implementation on the web. I scoured the internet for elegant implementations. Some sites that usually led to public solutions include —

对于我的每个想法，我都知道其中的某些部分必须在网络上已有一个实现。我在互联网上搜索了优雅的实现。通常导致公开解决方案的一些网站包括-

GitHub
的GitHub
CodePen
密码笔
JSFiddle
JSFiddle
StackOverflow
堆栈溢出
Plain Old Google
普通的旧Google
..and going into Chrome Developer Tools on any website that seems similar to what I was trying to accomplish.
..然后进入似乎与我想要完成的网站类似的任何网站上的Chrome开发者工具。

I studied what had been done, how it’d been done, then combined what I’d learned to make the cleanest solution I could.

我研究了已经完成的工作，如何完成工作，然后结合我所学到的知识来制定最干净的解决方案。

No need to reinvent the wheel when you can improve upon the past.

当您可以改善过去时，无需重新发明轮子。

3.创建！ (当日余下的时间) (3. Create! (rest of the day))

Armed with an idea and examples, I made my idea into reality. Every day there’d be roadblocks, and progress would seem mind-numbingly slow. But with online research, I learned from my mistakes and got more knowledgeable and faster every day.

有了一个想法和例子，我使我的想法变成了现实。每天都有障碍，进展似乎令人麻木。但是，通过在线研究，我可以从错误中吸取教训，并且每天都能掌握更多知识，并且更快。

第1至9天：重新创建示例 (Days 1–9: recreating examples)

For days 1 to 9, I took a design or website I especially liked and tried to recreate it.

从第1天到第9天，我选择了一个我特别喜欢的设计或网站，然后尝试重新创建它。

10到20天：提出独到的见解 (Days 10–20: Develop original ideas)

Once I became more comfortable with web development, I based my coding projects on original ideas I’ve always wanted to do, like interactive art, original fonts, and a cute notes app.

一旦我对网络开发变得更加满意，我就将我的编码项目基于我一直想做的原始想法，例如交互艺术，原始字体和一个可爱的note应用程序。

反射 (Reflection)

1.学到终身知识。 (1. Learned lifelong knowledge.)

Looking back, I came a long way from where I was before. Over the 20 days, I learned Bootstrap, jQuery, React, Pug, Sass, and other tools, as well as loads of neat HTML/CSS/Javascript concepts such as blend modes, masking and clipping, animations, pseudo elements, media queries, closures and context, Promises, and much more. These will help me tackle future projects, especially if and as web development and progressive web apps become more popular.

回首过去，我已经走了很远。在这20天的时间里，我学习了Bootstrap，jQuery，React，Pug，Sass和其他工具，以及大量简洁HTML / CSS / Javascript概念，例如混合模式，蒙版和剪切，动画，伪元素，媒体查询，闭包和上下文，承诺等等。这些将帮助我应对未来的项目，尤其是当Web开发和渐进式Web应用变得越来越流行时。

2.永远没有足够的时间。 (2. Never enough time.)

Although I learned a lot, I didn’t learn as much as I’d like. I’m saddened I didn’t have time to learn other tools I had my eye on, like Vue.js, Redux, GreenSock, and others. Nonetheless, those are all things I can go back and work on in the future.

尽管我学到了很多东西，但我没有学到很多。我很伤心，我没有时间学习我关注的其他工具，例如Vue.js ， Redux ， GreenSock等。尽管如此，这些都是我以后可以继续努力的事情。

It was better to take time to understand my tools instead of rushing from one tool to the next without understanding.

最好花一些时间来了解我的工具，而不要在不了解的情况下匆匆忙忙地使用一种工具。

3.对自己充满信心。 (3. Grew confident in myself.)

Most importantly, I grew to believe in my coding and creative abilities.

最重要的是，我逐渐相信自己的编码和创造能力。

Instead of starting a massive project (again) and never finishing it (again), I’d complete a project from start to end every day or two, forced to scope small by the time limit.

我不会(再一次)开始一个庞大的项目，也不会再一次(再一次)完成它，我每天或每两天从头到尾完成一个项目，受时间限制而不得不缩小范围。

With every completed project, I grew more confident in my skills, ambition, and ability to achieve goals.

在完成每个项目后，我对自己的技能，雄心和实现目标的能力变得更加自信。

Unlike last winter break, where I started a (still unfinished) project then became discouraged by the immeasurable work it required, I’m encouraged by this break. Today, I’m content back at Stanford, grateful for what I’ve learned, a little more confident, and eager to create more.

与去年冬季休假不同，在这里我开始了一个(仍未完成的)项目，然后由于需要做的无量工作而灰心丧气，这次休假使我感到鼓舞。今天，我对斯坦福大学感到满意，对我所学到的知识表示感谢，更加自信，并渴望创造更多。

Big thanks to Tiantian Xu who inspired me with her 100 days of motion design!

非常感谢徐天天的 100天运动设计启发了我！

If you liked reading this, be sure to give a ?(or several!) It’d mean so much to me. ?

如果您喜欢阅读本文，请务必给一个(或几个！)这对我来说意义非凡。？

You can also follow me on Twitter, Tumblr, Instagram, and GitHub for more cool projects :)

您也可以在Twitter ， Tumblr ， Instagram和GitHub上关注我，以获得更多有趣的项目：)