Як би ви хотіли працювати у провідних світових компаніях, одночасно впливаючи на красиву інтерфейсну розробку?
У сучасному Інтернеті існує великий попит на видатних художників, і цей посібник покаже вам, як почати.
І оскільки люди, які працюють у програмному забезпеченні, є одними з найбільш винагороджених осіб, варто подумати про те, щоб отримати цю нову навичку. Ніколи не знаєш, з часом це може обернутися для тебе кар’єрою.
Перший розділ цього посібника присвячено відповідям на нагальні запитання щодо розробки інтерфейсу. Якщо ви знаєте про обов’язки, зарплати та інші аспекти фронтенд-розробника, то можете пропустити 2-гу частину. Другий розділ цього посібника присвячено ресурсам, навчальним посібникам і порадам.
Що таке інтерфейсна розробка?
Інтерфейсна веб-розробка — це практика використання HTML, CSS і JavaScript для створення унікальних веб-програм. Такі програми, як веб-сайти, мобільні веб-сайти, а також мобільні програми та Прогресивні веб-програми.
Ви також можете подумати про це так: кожен веб-сайт, який ви переглядаєте, включно з цим, певним чином створено розробником інтерфейсу. Принаймні на стороні клієнта.
Те, що колись вимагало великих інструментів і фреймворків, тепер можна зробити за допомогою рідних специфікацій.
Хоча інтерфейс є одним із найдоступніших шляхів розробки веб-сайту, він також може бути одним із найскладніших.
Технологія створення веб-сайтів постійно змінюється, а це означає, що розробники повинні регулярно адаптувати свої навички до останніх практик. Це може бути втомливим для початківця, але стає краще через рік чи два надійної практики розробки.
Чи можете ви навчитися розробці інтерфейсу безкоштовно?
Ви абсолютно можете!
Вивчати веб-розробку стає набагато легше, головним чином завдяки величезному притоку нових ресурсів, навчальних посібників і проектів з відкритим кодом.
Такі проекти, як freeCodeCamp, допомагають мільйонам людей писати код для своїх перших програм. І Блог freeCodeCamp сповнений захоплюючих статей не лише про інтерфейс, а й про інші аспекти веб-розробки. Варто додати в закладки!
Виглядає складно? З практикою стає легше!
Хоча мета цього посібника — допомогти вам навчатися безкоштовно, ми не можемо не помітити переваги платних курсів.
Існує багато стартапів, які обслуговують цілеспрямовану аудиторію, і ми висвітлимо деякі дивовижні платформи курсів, які навіть дадуть вам сертифікат наприкінці всього цього.
Яка середня зарплата для front-end розробника?
Інтерфейсний розробник із попереднім досвідом може розраховувати на оплату понад 100 000 доларів на рік, якщо живе в США.
Це непогане число!
Молодші розробники можуть розраховувати на заробіток від 60 000 доларів і вище.
Та й зарплати в Європі також здаються досить прийнятними; Німеччина має в середньому 50 000 доларів на рік.
Варто відзначити те, що популярність віддаленої роботи вибухнув за останні роки, а це означає, що розробники прагнуть вирівняти свою оплату за всіма напрямками до міжнародних стандартів. Це додаткова причина подумати про те, щоб стати фронтенд розробником!
Як знайти роботу front-end розробника?
Технічно про роботу слід говорити в останню чергу. Спочатку ви повинні накопичити навички, а потім думати про потенційні можливості. Але, оскільки ця публікація структурована як посібник, ви завжди можете повернутися та переглянути цей розділ для довідки.
Кількість віддалених робочих місць зростає безпрецедентними темпами. Зрештою, кому не подобається ідея працювати вдома, а ще краще прямо з пляжу?
Ось список найпопулярніших дошок вакансій для фронтенд-розробників:
Це дещо скорочений список сайтів, які надають рекомендації щодо пошуку вашої наступної початкової роботи. Інші альтернативи, які у вас є, — це працювати над особистим проектом у надії зробити його прибутковим або витрачати свій час на позаштатні концерти.
Ресурси: з чого почати.
Наведені нижче ресурси розповідають про те, як почати роботу. У цьому відношенні ми використовуємо досить лінійний підхід. І з тієї простої причини, що існує величезна кількість ресурсів.
Щоб ви швидко почали працювати, ми зосереджені на платформах і інтерфейсних інструментах, які вплітаються в сучасний робочий процес. У результаті ви можете вивчити синтаксис кодування від базового до середнього, одночасно розуміючи інструменти, які керують робочим процесом сучасного розробника.
Настійно рекомендуємо вам не поспішати з цими ресурсами, оскільки вони підготують вас до курсів і навчальних посібників у другій частині цього посібника.
Codecademy
Якщо ви витратите навіть кілька хвилин на пошук ресурсів, щоб навчитися кодувати, то Codecademy, безсумнівно, стане одним із ваших перших хітів. Ця платформа для навчання коду добре відома та обслуговує понад 100 мільйонів людей протягом семи років.
На той час Codecademy була досить революційною з її динамічним та інтерактивним інтерфейсом кодування. І хоча багато хто пішов тим самим шляхом, Codecademy зберегла послідовний послужний список.
Сьогодні ви можете отримати сертифікат після завершення, і багато хто використовував цей сертифікат, щоб отримати роботу в стартапі вищого рівня; як молодший розробник, не менше.
Весь час є аргумент, що Codecademy недостатньо.
З точки зору досвідченого розробника — звичайно, можливо, ця платформа занадто проста. Але якщо ви лише вивчаєте розробку інтерфейсу, то немає нічого більшого задоволення, ніж слідування покроковим інструкціям із результатами в реальному часі.
Codecademy пропонує курси з HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL і Java.
Вивчіть макет CSS
Як інтерфейсний розробник, ви збираєтеся витрачати розумну кількість часу на роботу з макетом. Макет — це канва, на якій ви структуруєте веб-сайт. Цей текст блогу розміщено всередині рядка, який є частиною більшого контейнера.
І це стосується всіх дизайнів веб-сторінок. Використовуючи Learn CSS Layout, ви можете отримати фундаментальне розуміння того, як працюють контейнери та рядки, а також як ви можете розташувати вміст саме там, де вам це потрібно.
Додаткові інструменти, які ви можете досліджувати Flexbox Froggy для Flexbox основи і Сітка Сад для Сітка основи, відповідно.
Макет є досить важливою темою для розуміння, тому витратите кілька годин на глибоке занурення у ваш досвід макета. Найкращий спосіб навчання – це практика.
Bootstrap
Коли ви зрозумієте, як працюють макети, настав час провести конкретні експерименти. Звичайно, ви можете спробувати розробити власний інтерфейс користувача як свій перший проект, але це може вас більше відлякати, ніж спонукати продовжувати.
Отже, вам потрібно дізнатися про фреймворк або два. Фреймворк – це простий спосіб розпочати будь-яку веб-розробку. Вам надано інструменти та документацію, щоб почати створювати інтерактивні веб-сайти з першого дня. І одним із найкращих, які коли-небудь це можна було зробити, є Bootstrap.
Створюйте адаптивні мобільні проекти в Інтернеті за допомогою найпопулярнішої у світі бібліотеки зовнішніх компонентів. Bootstrap — це набір інструментів із відкритим кодом для розробки за допомогою HTML, CSS і JS.
Bootstrap активно використовується в усій мережі Інтернет і, без сумніву, є одним із найпопулярніших інтерфейсних фреймворків у світі.
Чорт, хороший відсоток сайтів, які ви відвідуєте щодня, використовують деякі функції Bootstrap.
Однією з фантастичних речей Bootstrap є як швидко ви можете почати. Сторінки документації повні прикладів і випадків використання. І найголовніше те, що система макета Bootstraps розроблена з урахуванням адаптивного дизайну. Таким чином, ваші сайти на основі Bootstrap автоматично стають зручними для мобільних пристроїв.
І якщо вам подобається те, що може запропонувати Bootstrap, ось додаткові ресурси про популярні інтерфейсні фреймворки:
Інтерфейсний контрольний список
Незважаючи на технологію, яку ви використовуєте для створення веб-сайтів, ви все одно повинні дотримуватися певних правил і норм. Звичайно, можна ігнорувати такі вимоги, але ціною користувацького досвіду та цифрової сумісності.
Front-End Checklist — чудовий інструмент, за допомогою якого ви можете вказати URL-адресу свого веб-сайту, а платформа перевірить ваш сайт на предмет найкращих практик у інтерфейсній розробці. Це включає перевірку того, чи ви оптимізували свої зображення та чи дотримуєтесь ви найкращих практик SEO.
Ви повинні спробувати використовувати цю програму стільки часу, скільки вам потрібно, щоб зрозуміти, які сучасні вимоги висуваються до професійних веб-сайтів і програм. Крім того, працювати з ненав’язливим і плавним інтерфейсом користувача – одне задоволення.
Vue.js
Vue.js — чудовий приклад, який показує, як невелика ідея/концепція може перетворитися на одну з найвідоміших речей у світі. Дійсно, Vue.js вразив інтерфейсну спільноту.
Цей прогресивний фреймворк допомагає розробникам створювати чудові інтерфейси користувача за допомогою HTML і JavaScript.
Фреймворк повністю підтримується спільнотою — як з фінансової сторони, так і з боку розробки.
Це чудовий приклад того, як відкрите програмне забезпечення може об’єднуватися й робити великі речі. І, як інтерфейсний розробник, ви повинні вивчати більше з відкритим кодом і чому це важливо.
Ось кілька настійно рекомендованих матеріалів про Vue.js:
І останнє, але не менш важливе, перегляньте різні проекти, створені за допомогою Vue.js, на сайті Вітрина Vue.js веб-сайт.
Основи інтерфейсу
Усе, що ми розглядали досі, здебільшого було безкоштовним і з відкритим кодом. Все, що вам потрібно, це схопити себе Піднесений текст, і ви можете бути на шляху до інтерфейсних експериментів, і ви абсолютно повинні бути! Читання підручників і документації фреймворку – це лише половина успіху.
Справжнє навчання відбувається у вашому текстовому редакторі та браузері. Єдиним недоліком цього підходу є те, що він не зовсім систематичний. Ви працюєте в режимі «вільний для всіх», і результати можуть відрізнятися залежно від вашої здатності дисциплінувати себе.
Якщо ви не вирішите інвестувати, а під інвестуванням я маю на увазі витратити символічну суму на придбання будь-якої з інтерфейсних книг у Книга окремо. Ці хлопці є одними з найкращих у галузі, і ветерани інтерфейсних розробників неодноразово рекомендують їхні книги.
У розділі «Основи інтерфейсу» є книга про SVG, CSS, HTML, JavaScript і Sass, яка є ідеальною відправною точкою для сучасних робочих процесів інтерфейсу.
GitHub
GitHub — це ваш цифровий офіс для програмування та розробки. Це найбільша платформа з відкритим вихідним кодом у світі, на якій розміщено більшість найпопулярніших фреймворків та інструментів.
За допомогою GitHub ви можете розміщувати свої проекти та запрошувати інших людей надсилати свої внески. І ви можете самостійно подавати внески в інші проекти.
Ви також можете дослідити GitHub і все, що він може запропонувати. Наприклад, GitHub є домом для знаменитих списків Awesome, які є величезними колекціями посібників, ресурсів, інструментів та іншого матеріалу для певних фреймворків і технологій.
наприклад, Чудовий список інтерфейсу що містить актуальну інформацію про останні речі, які потрібно знати про інтерфейс і куди він спрямований.
Переповнення стеку
Stack Overflow має сумнозвісну репутацію найсуворішого сайту програмування запитань і відповідей у світі. І це дійсно так.
Користувачі Stack Overflow легковажно ставляться до питань, які не були досліджені чи належним чином проаналізовані. І хоча це може відштовхувати вас, це допомагає створити сильне відчуття мети.
Розумієте, щоразу, коли користувач надсилає відповідь на запитання, інші користувачі можуть виступити та проголосувати за цю відповідь. У підсумку ви отримуєте кілька «перевірених» відповідей, які детально відповідають на запитання користувачів. В результаті ієрархія сайту залишається чіткою та послідовною.
Як початківець інтерфейсний розробник, ви захочете використовувати Stack Overflow, щоб зрозуміти певні теми, а також поставити запитання, якщо потрібно. Однак для більшості початківців ви зможете знайти стислі відповіді за лічені секунди.
Навчальні посібники та курси: набуття контролю над екосистемою.
Перший розділ був повністю присвячений ресурсам і платформам, які допоможуть вам почати роботу. Ви повинні витратити розумну кількість часу на кожен ресурс, який ми перерахували, щоб ви могли реально відчути, чого очікувати від інтерфейсної розробки.
Зробивши все це, ви можете звернути увагу на підручники та курси. Це більш строго організовані ресурси з сильним акцентом на навчанні.
Фронтальна розробка — це набір інструментів, фреймворків, бібліотек, програмного забезпечення для тестування та багато іншого. Але нехай вас не лякає сам масштаб цього!
Варто зазначити, що деякі з наведених нижче курсів не є безкоштовними. Однак ми запевняємо вас, що наведені нижче рекомендації є абсолютно найкращими.
Крім того, такі платформи, як Frontend Masters, допоможуть вам швидко ознайомитися з усіма технологіями, які використовуються в найуспішніших стартапах світу.
Мета цієї публікації полягає не в тому, щоб популяризувати зовнішню розробку як хобі, а в тому, щоб надати вам відчутні ресурси, щоб ви могли бути на шляху до створення кар’єри на основі всього свого навчання.
Веб-документи MDN
MDN (Mozilla Developer Network) так чи інакше збирається познайомитися з вами. Ця платформа веб-документації повністю присвячена просуванню того, як працює Інтернет. Тут ви можете дізнатися про інструменти розробника, веб-технології та саму веб-розробку.
Коли ви шукаєте щось конкретне в CSS або HTML, найчастіше MDN з’являється як перший результат у Google та інших пошукових системах. Посібники, специфікації та загальна інформація структуровані таким чином, щоб це було зрозуміло розробникам інтерфейсу.
Інтерфейсні курси edX
Як було сказано раніше в цьому посібнику, дотримання суворої навчальної програми є більш лінійним способом навчання та адаптації. А щоб розпочати навчання на курсах, ознайомтеся з тим, що пропонує edX. Ви можете не тільки отримати сертифікати після завершення, але й навчатися у бажаному темпі.
Курси edX ретельно структуровані, з чітким акцентом на допомозі студентам зрозуміти основи кожної теми курсу. На даний момент ви можете вивчати такі технології, як JavaScript, HTML5, CSS3 тощо.
Якщо ви хочете отримати повний інтерфейсний сертифікат, вам доведеться зробити скромні інвестиції в розмірі 500 доларів США, але це також дає вам прямий доступ до викладачів курсу тощо. Численні компанії використовували edX, щоб зареєструвати своїх співробітників у цій конкретній програмі.
Майстри фронтенду
Frontend Masters схожий на досвід навчання. Курси, які ви можете знайти на цій платформі, надзвичайно ретельні, з акцентом на довгому змісті та проектно-орієнтованому навчанні.
Тут ви можете дізнатися про такі технології, як React, Vue, Angular, Node.js та багато іншого. Якість виробництва є надзвичайно високою, тому ви можете насолоджуватися досвідом, подібним до того, що ви отримуєте на справжньому курсі Bootcamp.
Як зареєстрований користувач, ви можете відстежувати свій прогрес на вчитися сторінки. Ця сторінка відстежує ваш прогрес у навчанні, показуючи відсотки для кожної технології окремо, а також відсотки для цілих стеків. Це цікавий спосіб підтримувати мотивацію.
І останнє, але не менш важливе: наявність у вашому резюме завершених курсів Frontend Masters не залишиться непоміченим вашим роботодавцем.
Яйцеголовий
Egghead дуже схожий на згадану вище платформу, але виділяється більш твердими та стислими уроками. Наприклад, урок «Створення динамічних списків у Flutter за допомогою ListViews» триває лише 2 хвилини, хоча він дає достатньо навчального матеріалу, щоб по-справжньому зрозуміти концепцію.
Egghead надає навчальні посібники та курси з фреймворків, бібліотек, мов, інструментів і платформ. Хочете дізнатися про мобільну розробку? Не проблема, у Egghead є навчальний матеріал для iOS, Android та інших платформ.
Річна ціна становить скромні 250 доларів США, але це надає вам доступ до кожного окремого курсу та посібника, знайденого на сайті. Ви також можете обговорити кожен урок з іншими учасниками спільноти. Інвестиція варта того!
CSS-трюки
Кріс Койєр є абсолютною легендою в спільноті CSS. Він не тільки підтримує CSS-Tricks більше десяти років, але також є співзасновником CodePen — популярна платформа для обміну кодом для веб-розробників.
Одне, на що ви можете розраховувати щодо CSS-Tricks, це те, що він постійно оновлюється, а історії публікуються на основі актуальних тем і технологій. У результаті ви можете швидко вдосконалити свої навички, використовуючи навчальні посібники, надані багатьма авторами сайту.
Коротше кажучи, це корисний сайт, який можна зберігати в закладках і перевіряти раз на день. Ви отримаєте величезну користь від самих посібників, а також від рекомендацій, які до них додаються.
скотч
Scotch — це як навчальний ресурс, так і місце для останніх подій у веб-розробці. Існуючи з 2014 року, сайт зібрав величезну кількість прихильників разом із тисячами безкоштовних посібників із веб-розробки.
Шотландські автори зосереджуються на таких технологіях, як Vue, React, Laravel, Angular, JavaScript, Node.js тощо. І не думайте, що це якісь підроблені підручники.
Здебільшого ви збираєтеся створювати реальні та відчутні програми. Наприклад, чи хотіли б ви навчитися створювати клон Twitter Vue і Adonis? Не проблема, просто запишіться на безкоштовний курс, і все буде готово.
Чудовий сайт, і я не можу рекомендувати його для будь-яких нових і існуючих інтерфейсних розробників!
Поради: якщо немає боротьби, немає прогресу.
Оскільки ви дійшли так далеко, ви можете побалувати себе деякими з наступних порад. Хоча фронтенд — це вигідний вибір кар’єри, він передбачає досить круту криву навчання та неабиякий головний біль, поки ви розглядаєте поточний графік.
Тим не менш, за рівнем можливостей ви можете залучити – це варте важкої боротьби!
Навчайтеся в межах розумного.
Чому ти вчишся програмувати? Ви хочете отримати кращу роботу? Чи хотіли б ви створювати креативні веб-сайти? Згадай свою причину, бо вона стане в нагоді. Це стане в нагоді в ті дні, навіть тижні, коли ти б’єшся головою об стіну — сумніваєшся, чи варто щось із цього того.
Знайдіть своє плем’я.
Ви захочете налагодити принаймні кілька зв’язків з однодумцями і навіть наставниками, якщо це можливо. Коли я пішов позичити підручник з Pascal у вчителя CS у моїй старій школі, він був дуже доброзичливим і відкритим до ідеї допомогти мені з будь-якими проблемами, які можуть виникнути. Розгляньте подібний шлях, або знайшовши місцеву спільноту, або знайшовши інших розробників в онлайн-спільнотах. Набагато легше вчитися, коли хтось показує пальцем, куди потрібно дивитися.
Уникайте всього вчитися.
Не покладайте на себе тягар необхідності знати все. Коли справа доходить до інтерфейсу, почати з HTML5 і CSS3 більш ніж достатньо. JavaScript — це як вишенька на торті, тому будьте обережні з кількістю глазурі, яку ви отримуєте, оскільки ви можете роздутися! Опанувавши основи, досліджуйте нові області, теми та рамки. Маленькі та компактні навчальні укуси є ключовими тут.
Якщо ви хочете дізнатися більше, читайте ця публікація Алі Шпіттел де вона ділиться понад 25 порадами для нових розробників.
Виходь туди
Чого ти чекаєш? Вийдіть і почніть вчитися! Переконайтеся, що ви переглядаєте цей посібник із зовнішньої розробки кожні кілька місяців, щоб отримати нові оновлення та поради.
Удачі!