當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

掩码项目编码_每天进行20天的编码项目

發(fā)布時間：2023/11/29 编程问答 61 豆豆

生活随笔收集整理的這篇文章主要介紹了掩码项目编码_每天进行20天的编码项目小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

掩碼項(xiàng)目編碼

by Angela He

通過何安佳

每天進(jìn)行20天的編碼項(xiàng)目 (A coding project a day for 20 days)

我如何在20天內(nèi)自學(xué)Web開發(fā) (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.

這是斯坦福大學(xué)學(xué)生寒假的第一天。回到家里，我打開了十二個編碼靈感標(biāo)簽，進(jìn)入了一個代碼編輯器，并創(chuàng)建了我的第一個編碼項(xiàng)目。 20天后，我創(chuàng)建了我的最后一個項(xiàng)目，然后打包整理并飛回大學(xué)。

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.

我每天都在挑戰(zhàn)自己編寫一個項(xiàng)目的代碼，這樣我才能掌握使網(wǎng)站像激發(fā)我靈感的網(wǎng)站一樣驚人的技能。使我的眾多想法變?yōu)楝F(xiàn)實(shí)，并能夠與世界分享，一直是我的動力，首先是藝術(shù)，現(xiàn)在是代碼。

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天內(nèi)，我自學(xué)了多種Web開發(fā)語言，并創(chuàng)建了許多項(xiàng)目，包括消息傳遞應(yīng)用程序，便箋應(yīng)用程序和聊天機(jī)器人。

You can find my 20 Days projects on CodePen.

您可以在CodePen上找到我的20天項(xiàng)目。

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

這是我的工具，創(chuàng)作過程以及最后的幾點(diǎn)思考。

工具類 (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開發(fā)代碼。
Photoshop. A world-class graphics editor for creating raster graphics. I created graphics for certain projects with this and a Huion tablet.
Photoshop。世界一流的圖形編輯器，用于創(chuàng)建柵格圖形。我使用此軟件和Huion平板電腦為某些項(xiàng)目創(chuàng)建了圖形。
HTML. Hypertext Markup Language; creates the content of a webpage.
HTML。超文本標(biāo)記語言; 創(chuàng)建網(wǎng)頁的內(nèi)容。
Pug. A template engine for a more ‘clean, whitespace sensitive syntax for HTML’ — great for speeding up development.
哈巴狗一個模板引擎，用于更“干凈的，對HTML的空格敏感的語法” —非常適合加快開發(fā)速度。
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.
引導(dǎo)程序。一個組件庫，用于快速啟動響應(yīng)式組件。非常適合速度；對于獨(dú)特的設(shè)計(jì)來說并不是那么好，因?yàn)槊總€組件都具有預(yù)定的外觀。
CSS. Cascading Style Sheets; dictates the design of a webpage.
CSS。級聯(lián)樣式表；決定網(wǎng)頁的設(shè)計(jì)。
Sass. Style sheet language that provides variables, functions, mixins, and more to streamline creating CSS.
ass子樣式表語言，提供變量，函數(shù)，mixin等，以簡化CSS的創(chuàng)建過程。
Javascript. Used to define unpredictable or user-controlled events of a webpage.
Javascript。用于定義網(wǎng)頁的不可預(yù)測或用戶控制的事件。
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庫，通過將每個部分分成一個可重用的組件來幫助維護(hù)狀態(tài)并創(chuàng)建網(wǎng)頁的內(nèi)容。
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。一個用于創(chuàng)建和顯示3D模型的Javascript庫。
Firebase. A mobile and web platform that provides easy access to database, messaging, authentication, and other services.
火力基地。一個移動和Web平臺，可輕松訪問數(shù)據(jù)庫，消息傳遞，身份驗(yàn)證和其他服務(wù)。

創(chuàng)作過程 (Creative Process)

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

要成功創(chuàng)建一個項(xiàng)目，我必須做兩件事：

Have an idea,

有個主意

Know it’d be feasible.

知道這是可行的。

Thus my creative process took form in three steps —

因此，我的創(chuàng)作過程分三步走：

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 —

對于每個項(xiàng)目，我的目標(biāo)都是在學(xué)習(xí)新知識的同時做一些有趣的事情。考慮到這一點(diǎn)，我瀏覽了自己喜歡的設(shè)計(jì)和Web開發(fā)網(wǎng)站以獲取靈感-

My favorite design sites:

我最喜歡的設(shè)計(jì)網(wǎng)站：

Dribbble.
運(yùn)球。
Behance.
行為。
Daily UI.
每日用戶界面。

My favorite web dev sites:

我最喜歡的Web開發(fā)網(wǎng)站：

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 —

對于我的每個想法，我都知道其中的某些部分必須在網(wǎng)絡(luò)上已有一個實(shí)現(xiàn)。我在互聯(lián)網(wǎng)上搜索了優(yōu)雅的實(shí)現(xiàn)。通常導(dǎo)致公開解決方案的一些網(wǎng)站包括-

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.
..然后進(jìn)入似乎與我想要完成的網(wǎng)站類似的任何網(wǎng)站上的Chrome開發(fā)者工具。

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

我研究了已經(jīng)完成的工作，如何完成工作，然后結(jié)合我所學(xué)到的知識來制定最干凈的解決方案。

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

當(dāng)您可以改善過去時，無需重新發(fā)明輪子。

3.創(chuàng)建！ (當(dāng)日余下的時間) (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.

有了一個想法和例子，我使我的想法變成了現(xiàn)實(shí)。每天都有障礙，進(jìn)展似乎令人麻木。但是，通過在線研究，我可以從錯誤中吸取教訓(xùn)，并且每天都能掌握更多知識，并且更快。

第1至9天：重新創(chuàng)建示例 (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天，我選擇了一個我特別喜歡的設(shè)計(jì)或網(wǎng)站，然后嘗試重新創(chuàng)建它。

10到20天：提出獨(dú)到的見解 (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.

一旦我對網(wǎng)絡(luò)開發(fā)變得更加滿意，我就將我的編碼項(xiàng)目基于我一直想做的原始想法，例如交互藝術(shù)，原始字體和一個可愛的note應(yīng)用程序。

反射 (Reflection)

1.學(xué)到終身知識。 (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.

回首過去，我已經(jīng)走了很遠(yuǎn)。在這20天的時間里，我學(xué)習(xí)了Bootstrap，jQuery，React，Pug，Sass和其他工具，以及大量簡潔HTML / CSS / Javascript概念，例如混合模式，蒙版和剪切，動畫，偽元素，媒體查詢，閉包和上下文，承諾等等。這些將幫助我應(yīng)對未來的項(xiàng)目，尤其是當(dāng)Web開發(fā)和漸進(jìn)式Web應(yīng)用變得越來越流行時。

2.永遠(yuǎn)沒有足夠的時間。 (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.

盡管我學(xué)到了很多東西，但我沒有學(xué)到很多。我很傷心，我沒有時間學(xué)習(xí)我關(guān)注的其他工具，例如Vue.js ， Redux ， GreenSock等。盡管如此，這些都是我以后可以繼續(xù)努力的事情。

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.

最重要的是，我逐漸相信自己的編碼和創(chuàng)造能力。

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.

我不會(再一次)開始一個龐大的項(xiàng)目，也不會再一次(再一次)完成它，我每天或每兩天從頭到尾完成一個項(xiàng)目，受時間限制而不得不縮小范圍。

With every completed project, I grew more confident in my skills, ambition, and ability to achieve goals.在完成每個項(xiàng)目后，我對自己的技能，雄心和實(shí)現(xiàn)目標(biāo)的能力變得更加自信。

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.

與去年冬季休假不同，在這里我開始了一個(仍未完成的)項(xiàng)目，然后由于需要做的無量工作而灰心喪氣，這次休假使我感到鼓舞。今天，我對斯坦福大學(xué)感到滿意，對我所學(xué)到的知識表示感謝，更加自信，并渴望創(chuàng)造更多。

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

非常感謝徐天天的 100天運(yùn)動設(shè)計(jì)啟發(fā)了我！

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

如果您喜歡閱讀本文，請務(wù)必給一個(或幾個！)這對我來說意義非凡。？

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

您也可以在Twitter ， Tumblr ， Instagram和GitHub上關(guān)注我，以獲得更多有趣的項(xiàng)目：)

翻譯自: https://www.freecodecamp.org/news/a-coding-project-a-day-for-20-days-5cd4c9383f84/