Як стати кращим розробником інтерфейсу, будуючи проекти (включені ідеї)

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

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

Клієнтські проекти не постачаються з покроковими інструкціями, оскільки в іншому випадку вони вам зовсім не потрібні. Вам доведеться думати нестандартно, знаходити рішення, йти на компроміси та рубати шлях до фінішу.

Найкращий спосіб навчитися цим навичкам - це виконати деякі проекти для розробників із інтерфейсом та навчатись у дорозі. А найкраща частина? Вам навіть не потрібен клієнт, щоб розпочати роботу, оскільки ви можете робити ці проекти самостійно.

Як вибрати особистий проект розвитку

Майте на увазі рівень своєї майстерності

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

Але не забувайте, що оскільки ціль тут - допомогти вам освоїти фронтенд-розробку, вибирайте проект, який виходить за рамки вашого поточного рівня кваліфікації, але все ще здійсненний.

Наприклад, якщо ви нещодавно вивчали HTML та CSS, прийшов час підвищити рівень, вивчивши JavaScript.

Вирішіть особисту проблему або проблему, яка вас турбує

Ви також з більшою ймовірністю отримаєте задоволення від проекту, якщо він вирішить ваші власні проблеми або виконає ваші власні бажання.

Можливо, ви завжди втрачаєте час, коли прокручуєте стрічку новин Facebook, або хочете веб-сайт, на якому ви можете автоматично генерувати цікаві ескізи YouTube.

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

4 цікавих проекту з розвитку інтерфейсу

Створіть клон веб-сайту.

Навички вивчення: HTML, CSS, JavaScript та / або Bootstrap.

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

Виберіть веб-сайт, який вам подобається, і побудуйте його клон самостійно. Не дивіться на вихідний код якомога більше, щоб отримати від нього максимум користі.

Клонування Google насправді є однією з вправ Thinkful для студентів їх кодування. Thinkful - це освітня компанія, яка пропонує технологічні курси, включаючи веб-камери для веб-розробки.

Ви також можете дотримуватися цієї вправи, щоб допомогти вам клонувати цільову сторінку програми під назвою Karma WiFi. Його створив Кайл Коскі, один з наставників Thinkful, і використовує HTML та CSS.

Що добре у клонуванні веб-сайту, ви можете вибрати рівень складності веб-сайту. Якщо ви тільки починаєте, простий веб-сайт, який потребує лише HTML та CSS, є гарним місцем для початку. Якщо ви досвідченіші, виберіть веб-сайт, який вимагає JavaScript або React.

Створіть гру-вікторину.

Навичка вивчення: JavaScript

JavaScript - це мова програмування, яка дозволяє створювати інтерактивні веб-сторінки. Це мова, яку ви використовуєте при створенні адаптивних елементів, таких як меню, відеоплеєри, анімація, інтерактивні карти та навіть ігри в браузері.

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

Це більше, ніж розваги та ігри. Вікторини насправді набирають популярності як інструменти маркетингу вмісту. Ви коли-небудь бачили подібні речі?

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

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

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

Щоб створити вікторину, перегляньте ці навчальні посібники зі складання тестів на JavaScript з WebDevTrick та SitePoint. Ось як може виглядати ваша вікторина JS:

Створіть свій власний мобільний QR-рідер.

Навичка вивчення: JavaScript

Штрих-коди та QR-коди змінили спосіб здійснення покупок. Клієнти тепер можуть сканувати товар за допомогою своїх смартфонів і дізнаватися про нього різну інформацію, таку як ціна або де вони можуть його придбати.

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

На відміну від думки інших, для сканування QR-кодів вам не потрібен власний телефонний додаток.

Веб-сайти, що працюють на розумному пристрої з камерою, можуть зробити трюк.

Цей посібник показує вам покроковий процес створення власного зчитувача QR-коду.

Ви будете використовувати HTML і JavaScript, але найважливішою частиною є використання бібліотеки JS, яка може інтерпретувати QR-код. Хороша новина полягає в тому, що вам не доведеться створювати її з нуля, адже для цього існує безліч чудових бібліотек.

Створіть додаток для погоди.

Навичка вчитися: Кутова 8

Angular є одним з трьох найпопулярніших фронтенд-фреймворків разом з React та Vue.js. Зазвичай він використовується для створення додатків на основі форм (де вам потрібно зареєструватися, щоб створити обліковий запис), але також може використовуватися для створення ігор і навіть програм з елементами віртуальної реальності.

Існує дуже детальний, покроковий підручник з Medium, який вчить початківців, як створити прекрасну програму для погоди за допомогою Angular 8 (остання версія Angular). Програма погоди виглядає так:

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

Що чудово в цьому проекті, так це те, що ви відчуєте, як це - створювати корисну, адаптивну програму з нуля. Ви дізнаєтесь все: від встановлення Node.js та Angular CLI до тестування коду за допомогою LightHouse.

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

Зробіть це правильно, і у вашому портфоліо буде вражаючий погодний додаток.

Ви можете отримати доступ до підручника тут.

Незважаючи на те, що цей підручник зручний для початківців, вам все одно потрібно трохи знати про Кут. Якщо ви хочете вивчити Angular, найкраще почати з Angular.io.

Створіть та кодуйте власний веб-сайт портфоліо.

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

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

Розробка та кодування власного веб-сайту портфоліо дасть вам свободу демонструвати свою художню та технічну сторону одночасно.

Перший крок - продумати своє повідомлення чи фірмовий стиль . Які ваші основні послуги, кому ви хочете служити, і чому вони повинні обрати саме вас? (Детальніше про брендинг читайте тут.)

По-друге, створити імітаційний дизайн, який деталізує макет, кольори та типографіку.

Також продумайте тему. Це мінімалістично чи голосно і весело? Це монохромний чи він буде використовувати сміливі кольори? Потім складіть список потрібних вам сторінок. Це часто включає сторінку контактів, кілька публікацій у блозі, сторінку про мене та сторінку з умовами.

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

Де я можу потренуватися у розробці інтерфейсу?

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

Це чудові місця, щоб отримати допомогу, коли ви практикуєте інтерфейсну розробку:

  1. freeCodeCamp.org - це веб-сайт, наповнений безкоштовними підручниками з теорії веб-розробки, мов та найкращих практик. Тут також є чудова спільнота, яка може допомогти у ваших запитаннях.
  2. Сучасні HTML та CSS з самого початку - це курс Udemy Бреда Траверсі. Він наповнений корисною інформацією і дійсно може навчити вас усьому, що потрібно для початку роботи з цими мовами.
  3. Frontendmentor.io - Тут ви можете знайти безкоштовні та преміальні «виклики» розміру укусу, які ви можете зробити у вільний час, щоб розвинути свій набір навичок. Складність викликів варіюється від "молодших" до "просунутих". Ось приклади проблем, які ви знайдете тут:

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

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

Пам’ятайте, справа вся в практиці. ТЕ ПОТРІБНО будувати речі, щоб покращити свій набір навичок.

Не вчитися лише дивлячись.

Вчіться, будуючи.

Вчіться, роблячи.

- Кайл Прінслу (@study_web_dev) 24 червня 2020 р

Щасливого кодування!

Дякуємо за читання та ура,

Кайл

Слідуйте за мною у Twitter, щоб отримати додаткові поради.