Практичний посібник з вивчення розробки для початківців

Я розпочав свій шлях кодування навесні 2018 року, трохи менше року тому. З того часу я здобув певні навички програмування, але все ж я розумію, що попереду ще багато чого навчитися. У будь-якому випадку, я вирішив зібрати ці поради в одному місці, щоб допомогти майбутнім розробникам на їх шляху. Ця стаття - путівник, який я хотів би знайти, коли розпочав подорож.

Перед початком

Якщо ви вирішили вчитися самостійно, в Інтернеті багато інформації, і складно обмотати все головою. Важливо мати структурований план і уникати марної витрати часу, переходячи з одного ресурсу на інший.

Зверніть увагу, що це лише перші кроки у фронтальний Всесвіт. Це допоможе вам розпочати роботу, але воно не призначене як повне керівництво.

Зверніть увагу, що зазначені нижче ресурси не є рекламою. Я згадую їх, бо вони мені в якийсь момент допомогли, і я особисто рекомендую їх. Більшість з них безкоштовні, інакше це буде вказано.

Для початку рекомендую зареєструватися на freeCodeCamp.А решту буду засновувати на їхній навчальній програмі. Я вважаю це чудовим ресурсом з різних причин:

  1. Навчальна програма. Це може бути ваш основний шлях. Це добре структурований огляд речей, яким слід навчитися, і забезпечує хорошу криву навчання.
  2. Вправи. Вони мають розмір укусу, тому ви можете легко встигати за темпами, роблячи пару з них щодня та підтримуючи зелену карту тепла.
  3. Проекти. Після завершення кожного розділу ви побудуєте 5 проектів, щоб пройти сертифікацію. Ідеально отримати трохи практики та закріпити свої знання.
  4. Громада. Це більше, ніж просто навчальна платформа. Існує форум, блог та канал YouTube, де розробники різних рівнів діляться своїми знаннями і де ви можете знайти натхнення.
  5. Це безкоштовно. Гроші можуть бути критичними для багатьох людей, і тут, у будь-якому випадку, ви нічого не витратите, крім часу.
Порада професіонала: ви можете створити обліковий запис у Twitter , якщо у вас його ще немає, і публічно зобов'язатись100DaysOfCodeвиклик. Причина проста - багато людей роблять цей виклик. Ви отримаєте мотивацію та підтримку, і це допоможе вам не відставати від темпу. Дуже рекомендую, не соромтесь і насолоджуйтесь спільнотою ?

Тепер ми все готові розпочати! ?

Адаптивний веб-дизайн

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

Основи

Основні HTML та HTML5іОсновні розділи CSS - це основи сучасного Інтернету. Прикладний візуальний дизайн, прикладна доступність та чуйні принципи веб-дизайнунавчить вас основам написання хороших веб-сайтів. Не поспішайте і крокуйте обережно, це головні будівельні блоки у ваших знаннях.

Ви можете доповнити своє навчання чудовим посібником з “Інтенетування важко”.

Далі ви збираєтесь вивчити потужні техніки розмітки, такі як CSS Flexbox та CSS Grid . Перш ніж рухатись далі, заповніть цей короткий посібник, щоб отримати огляд різних технік компонування, якими користувались люди до ери Flexbox-Grid. Навряд чи вам коли-небудь доведеться їх використовувати, але завжди добре бути в курсі та оцінювати сучасні технології.

CSS Flexbox

Я полюбив Flexbox через його простоту та потужність. Багато різних властивостей можуть спочатку спантеличити вас, тому моя пропозиція - розмістити шпаргалку біля комп’ютера, щоб ви завжди могли легко їх знайти. Крім того, додайте в закладки цю інтерактивну шпаргалку Flexbox.

І нарешті, потренуйтеся, зігравши у захоплюючий Flexbox Froggyгра. ?

Сітка CSS

Сітка є більш вдосконаленою та гнучкою, але у більшості випадків Flexbox цілком достатньо. У будь-якому випадку, у вас буде ще один потужний інструмент у вашому арсеналі. Особливо, якщо це так легко зрозуміти, коли вирощуєш свої врожаї в Сітковому саду.?

Практика

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

  1. Створіть обліковий запис на Codepen . Це крутий майданчик для інтерфейсу, де ви можете будувати свої проекти, тестувати свої фрагменти та тренуватися.
  2. Встановіть aредактор кодуна своїй машині та навчіться працювати з нею.
  3. Вивчіть основи командного рядка з цього відеоУесом Босом або Майстернею оболонок про Udacity.
  4. Дізнайтеся, як використовувати Git у цьому списку відтворення від NetNinja.
  5. Отримайте практичну практику. Виберіть будь-які проекти з цього списку відтворення від Traversy Media та кодуйте разом. Побудуйте їх, поки не відчуєте впевненості. Було б чудово, якщо ви вже використовуєте редактор коду та контроль версій і завантажуєте свою роботу до спеціального репозиторію дослідження на Github.

Тепер ви готові отримати свою першу сертифікацію! ?

Піти і будувати свої остаточні проекти та ділитися ними?

Javascript алгоритми та структури даних

Тепер ви знаєте, як створювати статичні веб-сайти, і настав час вивчити JavaScript.

Розділ JavaScript на freeCodeCamp чудовий, але я настійно раджу заглянути на javascript.infoяк додаткове посилання. Це найкращий ресурс, який надає вичерпну інформацію про все, що пов’язано з JavaScript.

Більше рекомендацій

  1. Курс основ основ JavaScript JavaScript Бо Карнес, якщо ви віддаєте перевагу візуальним путівникам.
  2. Щодо нового стандарту для JavaScript, то моїми улюбленими є чудові курси ES6 для всіх! (платно) Wes Bos та Modern JavaScript - Beau Carnes.
  3. Курс регулярних висловів про Скрімбу.
  4. Мені дуже допоміг об’єктно-орієнтований курс JavaScript від NetNinja.

Алгоритми

Це моя улюблена частина сертифікації. Я пам’ятаю, наскільки складними вони були, коли я тільки почав їх вирішувати. Я міг думати про можливі рішення цілими днями. Це чудовий спосіб вивчити JavaScript і подумати як програміст.

В якості невеликої допомоги я раджу переглядати JavaScript Cardio Sessions від Traversy Media.

Щоб отримати більше практики, я настійно рекомендую вам зареєструватися в CodeWars і встановити початкову мету для досягнення 6кю . Це дуже корисно, тому що коли ви виконуєте будь-який виклик, ви можете переглядати рішення інших людей та відкривати нові трюки, підходи та ідеї.

Щоб знайти інших претендентів на 100DaysOfCode, включаючи мене, перейдіть до налаштувань облікового запису та введіть # 100DaysOfCode у поле Clan.

Перш ніж приступати до остаточних проектів, ви повинні бути готові до остаточного боса, Касового апарату. ?

Після того, як ви переможете його, я можу сказати, що ...

... тепер ви знаєте, як працювати з JavaScript! ?

Злипання речей

Тепер настав час прийняти виклик Javascript30 від Уеса Боса. Це найкращий спосіб дізнатися, як HTML, CSS та JavaScript працюють разом, відшліфувати свої знання основ та зрозуміти DOM. Створення цих маленьких проектів було для мене чудовим досвідом і справді цікавим!

Інтернетні бібліотеки

З цього моменту ви стаєте справжнім розробником інтерфейсу?

Bootstrap

Найпопулярніший фреймворк CSS. Створіть пару веб-сайтів разом із путівниками на YouTube. Звикніть до відомого розташування сітки стовпців Bootstrap.

jQuery

Незважаючи на те, що деякі люди кажуть, що jQuery мертвий, це завжди буде корисно, коли рішення в чистому JavaScript буде химерним, а використання фреймворка JS занадто багато. Це буде ще одним чудовим інструментом у вашому арсеналі. Створіть з ним пару маленьких додатків для практики.

Сасс

Я не повністю оцінив фреймворки CSS, поки не побачив їх справжню силу. Я хотів вивчити передові техніки CSS і придбав дивовижний Advanced CSS і Sassкурс (оплачується) Йонасом Шмедтманом. Настійно рекомендується, якщо ви хочете вдосконалити свої навички роботи з CSS і зрозуміти робочий процес. Я все ще задоволений, що знайшов.

React & Redux

Це основна частина розділу Бібліотеки Front Front. React - чудовий вибір як перша бібліотека JavaScript для вивчення.

Чесно кажучи, важко зрозуміти, як з ним працювати у форматі freeCodeCamp, оскільки ви не можете нічого створити з нуля, а деякі речі працюють під капотом. Тож пройдіть курс React та Redux і не поспішайте зрозуміти їх ідеї та інструменти.

Мої особисті улюблені:

  1. Повний посібник React (разом із Redux)від NetNinja
  2. Реагуйте на початківців (платно) Wes Bos
  3. React - Повне керівництво (платно) від Academind

Сподіваюся, ви із задоволенням будете використовувати свої нові знання у фінальних проектах.

Тепер ви можете побудувати все, що завгодно ?

Рухаючись далі

Зараз ви справжній розробник інтерфейсів і маєте достатньо навичок для створення чудових веб-додатків. Можливо, вам цікаво, що робити далі, і відповідь проста, як "Будуй, будуй, будуй!" . Ваше поточне завдання - створити для себе портфоліо та отримати більше практики.

Ось кілька порад для вас, що робити далі:

  1. Отримайте ідеї для проекту вВізьміть домашні проектирозділ на freeCodeCamp.
  2. Створіть будь-який проект разом із курсом, а потім модифікуйте та вдосконалюйте його, додаючи нові функції.
  3. Боріться з D3.js та Node.js, щоб отримати наступні сертифікати freeCodeCamp!
  4. Прочитайте красномовний JavaScript іВи не знаєте JSщоб стати ніндзя JavaScript.
  5. Покращи свій ранг на Codewars.
  6. Спробуйте цей вдосконалений веб-дизайн із цього веб-дизайну для веб-розробниківзвичайно.
  7. Зберігайте свій обліковий запис GitHub активним і намагайтеся зробити внесок у відкритий код.

Якщо один із цих ресурсів не працює для вас, це нормально. Не засмучуйтесь, те, що працює для когось, не обов’язково має працювати для кожної людини.

Сподіваюсь, цей посібник допоможе вам у навчанні та, сподіваємось, заощадить ваш час?

Удачі!