Меню Закрити

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

Free Vectors by vecteezy.com

Розповідає Nikita Rudenko

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

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

Стаття допоможе вам розпочати роботу, але не може стати всеосяжним путівником.

 

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

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

Основи

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

Ви можете знайти додаткові відомості у великому посібнику на Interneting Is Hard.

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

CSS Flexbox

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

Крім того, створіть закладку цієї інтерактивної шпаргалки Flexbox.

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

CSS Grid

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

Практика

Перш ніж перейти до реальних проектів, рекомендую зробити таке:

  1. Створіть обліковий запис на Codepen. Це класний майданчик для фронтенду, де можна створювати свої проекти, тестувати фрагменти коду та практикуватися.
  2. Установіть на комп’ютері редактор коду та навчіться з ним працювати.
  3. Ознайомтеся з основами командного рядка за допомогою цього відео від Wes Bos або Shell Workshop від Udacity.
  4. Ознайомтеся з Git.
  5. Попрактикуйтеся. Виберіть будь-які проекти із цього списку Traversy Media та створіть свій проект. Створюйте їх, поки не почуватиметеся впевнено.

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

Створіть свої проекти та поділіться ними.

Фото Jake Ingle

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

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

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

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

  1. Курс основ JavaScript від Beau Carnes, якщо надаєте перевагу візуальним посібникам.
  2. Щодо нового стандарту JavaScript, то моїми фаворитами є чудові курси “ES6 for everyone!” (платний) від Wes Bos та “Сучасний JavaScript” від Beau Carnes.
  3. Курс Regular expressions на Scrimba.
  4. ООП на JavaScript” від NetNinja був для мене дуже корисним.

Алгоритми

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

Щоб трохи допомогти, раджу вам подивитися JavaScript Cardio Sessions від Traversy Media.

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

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

Перш ніж остаточно взятися за проекти, ви маєте бути готові до останнього випробування — Cash Register.

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

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

Фото Pankaj Patel

Склеювання докупи

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

Frontend-бібліотеки

Відтепер ви стали справжнім frontend-розробником і можна перейти до вивчення бібліотек.

Bootstrap

Найбільш популярний CSS фреймворк. Створіть кілька веб-сайтів, переглянувши будь-яке навчальне відео на YouTube (їх дуже багато).

jQuery

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

Сасс

Я не оцінив CSS фреймворки на повну, поки не побачив їхньої реальної потужності. Я хотів навчитися передових методів CSS, тож купив дивовижний курс Advanced CSS and Sass від Jonas Schmedtmann. Дуже рекомендую, якщо хочете відшліфувати свої навички CSS і зрозуміти тонкощі робочого процесу. Я просто в захваті, що знайшов його.

React & Redux

React — чудовий вибір першої бібліотеки JavaScript для вивчення.

Мої особисті фаворити:

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

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

Тепер можете створювати все, що хочете.

Фото rawpixel

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

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

Нижче кілька порад, що робити далі:

  1. Черпайте ідеї для проекту в розділі Take Home Projects на freeCodeCamp.
  2. Створюйте проект під час курсу, потім змінюйте його та покращуйте, додаючи нові функції.
  3. Вивчіть D3.js і Node.js, щоб отримати сертифікати наступного рівня на freeCodeCamp!
  4. Прочитайте Eloquent JavaScript та You Don’t Know JS, аби стати майстром із JavaScript.
  5. Покращуйте свій рейтинг на Codewars.
  6. Відчуйте смак висококласного веб-дизайну з  Web Design for Web Developers.
  7. Підтримуйте активним обліковий запис GitHub і спробуйте зробити свій внесок в open source.

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

Сподіваюся, цей матеріал допоможе вам у навчанні та заощадить час.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

1+

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: