Від нуля до фронтового героя (частина 1)

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

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

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

Від нуля до фронтового героя (частина 2)

Повне керівництво по навчанню розробці фронтального medium.com

Основи HTML та CSS

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

Для початку прочитайте підручники з HTML та CSS від Mozilla Developer Network (MDN). MDN надає покрокові пояснення важливих концепцій HTML та CSS. Крім того, кожна глава займає лише сторінку, інтерактивні демонстраційні ролики пов’язані з CodePen та JSFiddle.

Після завершення цих підручників погляньте на курс «Зробіть веб-сайт» від CodeAcademy. Цей підручник займає лише кілька годин і є хорошим посібником для створення веб-сайтів з HTML та CSS. Якщо ви хочете більше, створення веб-форм - це ще один підручник CodeAcademy, який допоможе вам побудувати та укласти веб-форму.

Для практики з CSS спробуйте CSS Diner. Це весела гра-виклик CSS. Іншим важливим аспектом HTML та CSS є макети. LearnLayout - це інтерактивний посібник, який показує, як створювати макети за допомогою HTML та CSS.

Крім того, дізнайтеся, як використовувати шрифти Google з основами API шрифтів Google від CSSTricks. Типографіка - це фундаментальний будівельний блок інтерфейсів. Коли у вас є час, я настійно рекомендую вам прочитати цю безкоштовну онлайн-книгу "Професійна веб-типографія" Донні Труонга. Він навчить вас усьому, що вам потрібно знати про типографіку як розробник інтерфейсу.

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

Практика основ HTML та CSS

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

Експеримент 1

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

Використовуючи CodePen, ви вбиваєте двох зайців одним каменем. З одного боку, ви практикуєте HTML та CSS. З іншого боку, ви створюєте базовий портфель прогресу. Ми також збираємось використовувати Dribbble - сайт, сповнений дизайнерських натхнень.

Перейдіть до Dribbble і знайдіть дизайн, який досить простий для кодування за кілька годин. Для початку я вибрав декілька дизайнів: 1, 2, 3, 4 та 5. Я вибрав веб-дизайни, що працюють першими для мобільних пристроїв, оскільки вони менш складні, ніж їхні настільні аналоги. Однак сміливо обирайте і дизайн робочого столу.

Визначившись із дизайном, спробуйте кодувати його в CodePen. Якщо ви застрягли, пам’ятайте, що StackOverflow - ваш друг. Ще однією корисною практикою є відвідування таких веб-сайтів, як Medium, AirBnB та Dropbox, а також використання інструмента інспектора, щоб побачити, як вони досягають різних макетів та стилів. Крім того, погляньте на деякі ручки на CodePen. Я вибрав кілька хороших посилань:

  • Меню Інтерфейс програми
  • Віджет Twitter
  • Стаття Новини картки
  • Просте плоске меню

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

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

Експеримент 2

Сподіваємось, перший експеримент додав вам певної впевненості у написанні HTML та CSS. Для експерименту 2 ми розглянемо деякі веб-сайти, а потім кодуємо кілька їх компонентів.

Деякі веб-сайти використовують фреймворки CSS або затушовують їхні назви класів CSS, ускладнюючи читання їх вихідного коду. Ось чому я відібрав кілька добре розроблених веб-сайтів з легким для читання вихідним кодом.

  • Dropbox для бізнесу: Спробуйте відтворити розділ героїв
  • AirBnB: Спробуйте відтворити їх нижній колонтитул
  • PayPal: Спробуйте відтворити їх навігаційну панель
  • Інвізія: Спробуйте відтворити розділ реєстрації внизу сторінки
  • Смуга: Спробуйте повторити розділ їх платежів

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

Ви можете кодувати цей експеримент у CodePen або зберігати його локально. Якщо ви вирішите зберігати його локально, ви можете або завантажити цей приклад проекту як шаблон, або створити файли з нуля. Я пропоную використовувати редактор, такий як Atom або Sublime.

Також майте на увазі, що на будь-якому веб-сайті ви завжди можете побачити його HTML та CSS. Просто клацніть правою кнопкою миші сторінку або компонент на сторінці, клацніть перевірити , і з’явиться панель із HTML зліва та CSS праворуч. Після того, як ви закінчите або застрягнете, використовуйте інспектор, щоб побачити, як порівнюються ваші HTML і CSS.

Найкращі практики HTML та CSS

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

Семантична розмітка

Однією з найкращих практик HTML та CSS є написання семантичної розмітки. Хороша веб-семантика означає використання відповідних тегів HTML та значущих назв класів CSS для передачі структурного значення.

Наприклад, тег h1 повідомляє нам, що обгортаний ним текст є важливим заголовком. Іншим прикладом може бути тег нижнього колонтитула , який повідомляє нам, що елемент належить внизу сторінки. Для подальшого читання прочитайте Погляд на правильну семантику HTML5 і що робить для семантичного імені класу CSSTricks.

Конвенції про іменування CSS

Наступна важлива найкраща практика для CSS - це правильні правила іменування. Хороші правила іменування, такі як семантична розмітка, передають значення та допомагають зробити наш код передбачуваним, читабельним та ремонтопридатним. Про різні конвенції іменування ви можете прочитати у статті OOCSS, ACSS, BEM, SMACSS: що це таке? Що мені використовувати?

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

Скидання CSS

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

Підтримка крос-браузера

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

Препроцесори та постпроцесори CSS

З моменту запровадження CSS у 1990-х роках CSS пройшов довгий шлях. Оскільки системи UI стають дедалі складнішими, люди придумали інструменти, відомі як препроцесори та постпроцесори для управління складністю.

Препроцесори CSS - це розширення мови CSS, які додають навороти, такі як змінні, міксини та успадкування. Двома основними препроцесорами CSS є Sass і Less. У 2016 році Sass, як правило, використовується більш широко. Bootstrap, популярний адаптивний фреймворк CSS, також переходить з Less на Sass. Крім того, коли більшість людей говорять про Сасс, вони насправді говорять про SCSS.

Постопроцесори CSS застосовують зміни до CSS після того, як він був написаний від руки або складений препроцесором. Наприклад, деякі постпроцесори, такі як PostCSS, мають плагіни, які автоматично додають префікси постачальника браузера.

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

Сіткові системи та реагування

Сіткові системи - це структури CSS, які дозволяють складати елементи по горизонталі та вертикалі.

Структури сітки, такі як Bootstrap, Skeleton та Foundation, надають таблиці стилів, які керують рядками та стовпцями в макетах. Хоча фреймворки сітки корисні, важливо також зрозуміти, як працюють сітки. Розуміння CSS Grid System та Don't Overthink Grids - чудові огляди.

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

Детальніше про медіа-запити можна прочитати в розділі Вступ до медіа-запитів. Окрім того, оскільки ми вступили в еру мобільних телефонів, ознайомтесь із «Введенням у запити щодо медіа-перших медіа».

Практика найкращих практик HTML та CSS

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

Експеримент 3

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

Вміння ефективно рефакторувати код - це важлива навичка розробника інтерфейсу. Створення якісного коду - це ітераційний процес. Архітектури CSS: рефактор Ваш CSS є гарною відправною точкою для рефакторингу коду.

Ось декілька речей, які слід задати собі під час рефакторингу коду.

  • Назви ваших класів неоднозначні? Через 6 місяців ви все одно зрозумієте, що означає назва вашого класу?
  • Ваш HTML та CSS семантичний? Подивившись на свій код, чи зможете ви швидко розпізнати структурний та реляційний сенс?
  • Ви повторно використовуєте той самий шістнадцятковий код кольору знову і знову у своєму коді? Чи мало б сенс переробляти його на змінну Сасса?
  • Чи працює ваш код так само добре в Safari, як у Chrome?
  • Чи не могли б ви замінити частину коду вашого макета такою сітковою системою, як скелет?
  • Ви часто використовуєте ! Важливий прапор? Як ви можете це виправити?

Експеримент 4

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

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

Для початку дотримуйтесь статті Adham Dannaway, My (Simple) Workflow To Design and Develop a Portfolio Website

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

Будьте в курсі

Хоча HTML і CSS найближчим часом не вийдуть з моди, важливо бути в курсі інтерфейсу.

Нижче наведено перелік веб-сайтів, блогів та форумів, які приємно читати та є інформативними.

  • CSSTricks
  • Журбальний журнал
  • Новини дизайнера
  • Nettuts +
  • Майстер CSS

Дізнайтеся на прикладі

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

Стиліди

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

  • Mapbox
  • Самотня планета
  • Відділ продажів
  • MailChimp

Конвенційні кодекси

Правила коду, розроблені для того, щоб зробити ваш код читабельним та обслуговуваним. Деякі з цих посилань, такі як Настанови CSS, є вказівками для написання кращих HTML та CSS, тоді як інші посилання, такі як внутрішні набори інструментів CSS Github, є прикладами якості.

  • Керівні принципи CSS
  • Внутрішній набір інструментів CSS і вказівки Github
  • Посібник стилів CSS AirBnB

Загорнути

Сподіваємось, до кінця цієї статті ви вже знайомі з HTML і CSS і маєте кілька проектів. Найкращий спосіб вивчити фронтенд - це будувати проекти та експериментувати. Пам’ятайте, кожен розробник з інтерфейсу повинен десь починати. І краще починати сьогодні, аніж завтра.

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

Від нуля до фронтового героя (частина 2)

Повне керівництво по навчанню розробці фронтального medium.com

PS Якщо вам сподобалась ця стаття, це мало б означало, якщо натиснути кнопку "Рекомендувати" або поділитися з друзями.

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