Проект за кодиране на ден в продължение на 20 дни

Как се научих за уеб разработка за 20 дни

Това беше първият ден на зимната ваканция за студентите от Станфорд. Върнах се у дома, отворих дузина раздели на кодиращо вдъхновение, попаднах на редактор на кодове и създадох първия си проект за кодиране. 20 дни по-късно създадох последния си проект, преди да опаковам и излетя, за да се върна в колежа мелене.

Предизвиках себе си да кодирам проект всеки ден, за да мога да придобия умения да направя уебсайт толкова невероятен, колкото уебсайтовете, които ме вдъхновяват. Да превърна многобройните си идеи в реалност и да мога да ги споделя със света, винаги е била моята движеща сила, първо в изкуството, сега в кода.

През тези 20 дни се научих на няколко езика за уеб разработка и създадох много проекти, включително приложение за съобщения, приложение за бележки и чатбот.

Можете да намерите моите 20 дни проекти на CodePen.

Ето моите инструменти, творчески процес и малко отражение в края.

Инструменти

Използвах всички следните инструменти, но всичко извън HTML, CSS, Javascript и редактор на код не е задължително.

  • CodePen. Онлайн редактор на кодове за HTML, CSS и Javascript, където потребителите могат да покажат работата си - чудесно за виждането на вашия уеб код за разработка.
  • Photoshop. Графичен редактор от световна класа за създаване на растерна графика. Създадох графика за определени проекти с този и Huion таблет.
  • HTML. Език за маркиране на хипертекст; създава съдържанието на уеб страница.
  • Пъг. Двигател за шаблони за по-„чист, чувствителен към бялото пространство синтаксис за HTML“ - чудесен за ускоряване на развитието.
  • За първоначално зареждане. Библиотека на компоненти за бързо получаване на отзивчиви компоненти Страхотен за скорост; не е толкова добър за уникален дизайн, тъй като всеки компонент ще има предварително определен вид.
  • CSS. Каскадни стилове; диктува дизайна на уеб страница.
  • Sass. Език на листа на стила, който предоставя променливи, функции, комбинации и други, за да опрости създаването на CSS.
  • Javascript. Използва се за дефиниране на непредвидими или контролирани от потребителя събития на уеб страница.
  • Реагират. Javascript библиотека, която помага да се поддържа състоянието и да се създаде съдържанието на уеб страница чрез разделяне на всяка част в компонент за многократна употреба.
  • JQuery. Javascript библиотека, която да помогне за опростяване на HTML DOM манипулирането и преминаването - имайте предвид, че неговата лекота идва с цената на сравнително големия й размер - около 30 KB.
  • three.js. Javascript библиотека за създаване и показване на 3D модели.
  • Firebase. Мобилна и уеб платформа, която осигурява лесен достъп до база данни, съобщения, удостоверяване и други услуги.
Събирайте вдъхновение от Awwwards, CodePen и Dribbble

Творчески процес

За да създам успешно проект, трябваше да направя две неща:

  1. Имате идея,
  2. Знайте, че би било възможно.

Така творческият ми процес се оформи в три стъпки -

1. Получете идея (30 минути)

Моята цел за всеки проект беше да направя нещо готино, докато науча нещо ново. Имайки това предвид, разгледах любимите си сайтове за дизайн и уеб разработка за вдъхновение -

Любимите ми сайтове за дизайн:

  • Dribbble.
  • Behance.
  • Ежедневен потребителски интерфейс.

Любимите ми сайтове за уеб разработчици:

  • CodePen.
  • Awwwards.
  • Codrops.
  • CodyHouse.)

И измисли мозъчен списък на идеи като следните -

Мозъчна буря

… След това избрах любимия си от списъка като Официална идея на деня ™.

2. Намерете примери (30 минути)

За всяка идея, която имах, знаех, че част от нея трябва да има съществуваща реализация в мрежата. Разтърсих интернет за елегантни изпълнения. Някои сайтове, които обикновено водят до обществени решения, включват -

  • GitHub
  • CodePen
  • JSFiddle
  • Stackoverflow
  • Обикновен стар Google
  • ..и влизам в Chrome Developer Tools на всеки уебсайт, който изглежда подобен на този, който се опитвах да постигна.

Проучих какво е направено, как е направено, след което комбинирах това, което научих, за да взема най-чистото решение, което можех.

Няма нужда да преоткривате колелото, когато можете да подобрите миналото.

3. Създайте! (останалата част от деня)

Въоръжен с идея и примери, реализирах идеята си. Всеки ден ще има препятствия и напредъкът ще изглежда умопомрачително бавен. Но с онлайн изследвания се научих на грешките си и ставах все по-информирани и по-бързи всеки ден.

Дни 1–9: примери за пресъздаване

За дни от 1 до 9 си взех дизайн или уебсайт, който ми хареса особено и се опитах да го пресъздам.

Дни 10–20: Разработете оригинални идеи

След като станах по-удобна в уеб разработката, аз базирах своите кодиращи проекти на оригинални идеи, които винаги съм искал да правя, като интерактивно изкуство, оригинални шрифтове и приложение за сладки бележки.

размисъл

1. Научени знания през целия живот.

Поглеждайки назад, стигнах далеч от мястото, където бях преди. През 20-те дни научих Bootstrap, jQuery, React, Pug, Sass и други инструменти, както и множество чисти HTML / CSS / Javascript понятия като смесени режими, маскиране и изрязване, анимации, псевдо елементи, медийни заявки и др. затваряния и контекст, обещания и много други. Те ще ми помогнат да се справя с бъдещи проекти, особено ако и като уеб развитие и прогресивни уеб приложения стават все по-популярни.

2. Никога достатъчно време.

Въпреки че научих много, не научих толкова, колкото ми се искаше. Натъжавам се, че нямах време да науча други инструменти, на които бях насочен, като Vue.js, Redux, GreenSock и други. Независимо от това, това са всичко, за което мога да се върна назад и да работя в бъдеще.

По-добре беше да отделя време, за да разбера моите инструменти, вместо да се втурвам от един инструмент към друг, без да разбирам.

3. Израсъл уверено в себе си.

Най-важното е, че пораснах да вярвам в кодирането и творческите си способности.

Вместо да стартирам мащабен проект (отново) и никога да не го завърша (отново), завършвам проект от началото до края всеки ден или два, принуден да приложа малък от времето ограничение.

С всеки завършен проект станах все по-уверен в своите умения, амбиция и способност да постигам цели.

За разлика от миналата зимна пауза, където стартирах (все още незавършен) проект, след което се обезсърчих от неизмеримата работа, която изисква, аз съм окуражен от тази почивка. Днес се връщам в Станфорд, благодарен съм за наученото, малко по-уверен и нетърпелив да създам повече.

Голяма благодарност на Тиантиан Сю, който ме вдъхнови със своите 100 дни дизайн на движение!

Ако сте харесали да четете това, не забравяйте да дадете (или няколко!) Това ще означава толкова много за мен.

Можете също да ме последвате в Twitter, Tumblr, Instagram и GitHub за по-готини проекти :)