Как започнах да се уча да кодирам: ресурсите, които използвах през първите три месеца

Искате ли да научите как да кодирате? Тази статия ви води през джунглата на технологии и ресурси, като ви помага да преминете от не знание към изграждането на бързи, интерактивни и модерни уебсайтове.

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

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

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

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

В края на статията има пълен списък с препоръчаните от мен ресурси.

Част 1: HTML, CSS и JavaScript

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

HTML

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

Бях събрал битове и парчета HTML, преди да започна да приемам кодирането по-сериозно, но ако трябваше да избера един ресурс, за да го науча днес, щях да отида с freeCodeCamp. Той е с динамичен темп, бърз и прост - и е безплатен!

Ако търсите среда, в която да практикувате наученото, препоръчвам CodePen, който представлява пясъчна кутия за основните езици в мрежата (HTML, CSS и JavaScript).

CSS

CSS е естественият спътник на HTML. На повърхността, това е много просто, въпреки че има някои концепции - особено свързани с оформлението и позиционирането -, които могат да отнемат известно време, за да си оправите главата.

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

Най-трудната част от CSS е разбирането на оформлението. Повечето от моите въпроси за оформление бяха зададени от потребители в StackOverflow, така че бързото търсене с Google реши повечето ми проблеми.

CSS3 има два мощни инструмента за оформление и това може да помогне да се гмуркам по-дълбоко в тези: Често се връщам към Flexbox Guide и Grid Guide, чрез CSS Tricks и следвах приблизително половината от безплатния урок за CSS Grid Ges на ръководството на Wes Bos, преди да се почувствам готов за продължа напред.

JavaScript

HTML и CSS не са напълно разработени езици за програмиране и затова няма да придобиете пълен усет какво е действително програмирането, докато не започнете да изучавате такъв. JavaScript е езикът за програмиране в мрежата.

Това прави JavaScript изключително безопасен избор за учене. Плюс това, той все повече се използва за други цели чрез технологии като Node.js.

За начинаещи JavaScript не е толкова достъпен като HTML или CSS и препоръчвам да прескачате между различни източници, за да подсилите основните понятия.

  • Начинаещи: Както при HTML и CSS, горещо препоръчвам курса на JavaScript на freeCodeCamp. Няколко други курса, най-полезният от които бяха Codecademy и безплатен въвеждащ курс от Flatiron School.
  • Междинен: След като по-добре разбрах JavaScript, започнах да допълвам проблеми на https://codewars.com. CodeWars е фантастичен, но проблемното му класифициране на трудността е хит-и-пропуск, някои от проблемите, които се предполагат за начинаещи, могат да изглеждат много взискателни! Предлагам да започнете с няколко проблема в най-ниското ниво. Ако се задържите, търсенето на методи на JavaScript на уебсайта на MDN може да бъде много полезно.

Част 2: Други задължителни части от инструментариума на всеки програмист

Git и GitHub

Git е това, което се нарича „система за контрол на версиите“, а GitHub е най-популярната, базирана в облака услуга на Git.

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

Когато просто се учите и нямате нужда да използвате Git, може да се почувствате скучно. Но това си заслужава: не само, че по-голямата част от професионалните разработчици разчитат на GitHub (или подобни услуги), но наличието на активен профил в GitHub може да ви помогне да осигурите работа.

Колкото по-рано започнете да ангажирате работата си с GitHub, толкова повече доказателства ще имате за опита си като разработчик. Използвах инструктажа по Git на Codecademy, за да ми помогнат да започна.

Командният ред

Най-добрият начин да използвате Git е чрез „терминал“ или „команден ред“, а това е от съществено значение и за съвременните уеб разработчици, като ви позволява лесно да добавяте пакети на трети страни към уебсайтовете си чрез NPM (Node Package Manager) или Прежда. Както по-горе, направих първите си стъпки тук, използвайки Codecademy.

Бележка за потребителите на Windows: Горещо препоръчвам да изтеглите https://gitforwindows.org/ и да го използвате за Git и NPM / Прежди. Тя ви позволява да използвате команди, познати на потребителите на Linux и Mac и - доколкото мога да разбера - това е цялостно подобрение на вградения команден ред.

Част 3: Изграждане на вашия набор от умения

След като имате работни познания по HTML, CSS и JavaScript, изборът на технологии, които бихте могли да научите, може да се почувства непосилен.

За уеб разработчиците ето какво бих препоръчал.

дръзки приказки

Sass е CSS предпроцесор. Той отнема основен CSS и добавя няколко нови функционалности, които го правят по-добър, по-лесен за писане и по-лесен за поддръжка. Освен това е много лесно да се учи. Просто следвайте официалното ръководство. След като започнах да използвам Sass, беше много трудно да се върна към редовен CSS!

за първоначално зареждане

Bootstrap е компонентна библиотека, разработена от Twitter. Тя позволява на разработчиците да изграждат прототипи много бързо. Вместо персонализирано кодиране на този плъзгач, навигация или акордеон, Bootstrap може да ви помогне да разгърнете един за секунди.

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

Като казах, че като уча, не бих разчитал твърде много на Bootstrap. Ще научите много, като сами изградите общи компоненти (навигационни ленти, светлинни кутии, плъзгачи и т.н.)!

JQuery

2019 г. може да бъде повратна точка за jQuery, тъй като все по-голям брой разработчици се насочват към рамки като React.js и Vue.js, където стилът на манипулиране на DOM на jQuery се разглежда като лоша практика.

Все пак бих препоръчал да научите jQuery. Не само, че в Интернет все още се използва огромно количество jQuery (и вие почти сте сигурни, че ще го срещнете като професионален уеб разработчик), но открих, че изучаването на jQuery наистина ми помогна да развивам знанията си за JavaScript. За мен най-доброто място да науча jQuery беше неговият официален сайт.

Днес, когато се опитвам да постигна ефект във ванилов JavaScript, който знам, че съществува в jQuery, поглеждам към изходния код на jQuery. Кодът на jQuery е добре написан, бърз и много съвместим и ми помогна да разбера много за това, какво може да направи ваниловият JavaScript. Със сигурност се възползвах от изучаването на jQuery преди да избера по-модерна технология като React.

Други библиотеки, като Lodash и Underscore, използват подобни принципи на jQuery. Често предпочитам да опитам и разбирам изходния код на тези технологии и да пиша във Ванили JavaScript. Това каза, че няма нужда да преоткривате колелото: ако се окажете на множество места, където Lodash (например) би бил полезен, тогава продължете!

реагирам

Има няколко съвременни JavaScript библиотеки там, включително Ember, React, Vue и Angular. Тук няма нито един правилен избор, но след като направих някои изследвания, избрах да се съсредоточа върху React.

От всички тези библиотеки и рамки изглежда, че React е най-популярният и бързо развиващ се. Той е разработен от Facebook, а неговият подход към манипулацията с DOM също му дава предимство пред Angular.

Много ми харесва React. Беше по-трудно да се учи от jQuery и отнема повече време. Ползите обаче стават очевидни дори при малки лични проекти. Реагирайте на модулния характер, използването на състоянието и скоростта, за да е удоволствие да работите.

Единственият курс по програмиране, за който съм платил, е React за начинаещи на Уес Бос. Това е така, защото програмирането в React може да се почувства съвсем различно от програмирането с „традиционния“ JavaScript: той използва много функции, специфични за ES6 JavaScript, и има голям шанс да не се сблъскате с класовата система на JavaScript, преди да използвате React.

Най-добрият безплатен ресурс за научаване на React беше собственият урок.

WordPress и PHP

Ако имате стремежи да работите като уеб програмист, или на свободна практика, или като част от по-голяма компания, вероятно ще срещнете WordPress.

Разработчиците може да имат смесени чувства към WordPress и PHP, езика, който е в основата му, но това е идеалното решение за много фирми и захранва почти една четвърт от мрежата.

Причината за неговия непрекъснат успех е познанството. Много хора имат опит да го използват като CMS (система за управление на съдържанието) и - с правилните оптимизации - той може да бъде толкова бърз и универсален, колкото много повече съвременни CMS решения.

Завърших PHP проблеми на CodeWars за седмица или повече, само за да се запозная с основните синтаксис и методи и това ми беше достатъчно, за да се гмурна в WordPress. По-специално препоръчвам този фантастичен урок за начинаещи в WordPress, който обяснява как да започнете с персонализирани теми. Бих прочел и по темата за начинаещи на Underscores. Когато имате проблеми, мястото, което трябва да отидете, е https://developer.wordpress.org/.

Част 4: Какво следва?

Минус една или две технологии, това е всичко, което се научих да достигна до удобно ниво през първите си три месеца.

Планирах да се задълбоча в PHP. Но тогава реших, че засега съм по-щастлива в JavaScript земята! Има толкова много опции за следващи стъпки, в зависимост от това, което ви интересува.

Списъкът ми с неща, които трябва да науча, включва Node, Next, Express, Redux, Gatsby.js и GraphQL. Това са много технологии и аз все още не съм готов да ви разказвам за никоя от тях. По-добре се върнете!

TL; DR: Обобщение на ресурсите

HTML

  • https://www.freecodecamp.org/
  • https://codepen.io/

CSS

Както по-горе, плюс:

  • CSS трикове
  • Безплатен CSS Grid Tutorial на Wes Bos

JavaScript

Както по-горе, плюс:

  • Codecademy
  • Безплатно въвеждане на JavaScript в Flatiron School
  • CodeWars
  • MDN

Git и GitHub

  • Codecademy

Командна линия

  • Codecademy

дръзки приказки

  • Официална документация

за първоначално зареждане

  • Официална документация

JQuery

  • Официална документация

реагирам

  • Wes Bos е React за начинаещи (единственият платен курс, който препоръчвам)
  • Официален урок

WordPress и PHP

  • CodeWars
  • Статията на Таня Расия относно създаването на персонализирана тема на WordPress
  • Сайтът за разработчици на WordPress
  • Подчертава Темата за начинаещи