Як стати frontend-розробником і все таки робити сайти

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

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

Фахівцям і критиці - рада. Якщо зверніть мою увагу на недоробки, буду вдячна за підказки та поради.

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

1. Створення ідеї сайту, визначення з видом і структурою сайту, знання видів сайту (статичний / динамічний, адаптивний / чуйний дизайн), визначення з контентом (текст, графіка, фото) - цей пункт суто ознайомчий, з цього можна почати розуміння основної інформації про сайтах.

2. Сервер, хостинг, домен - також розуміти, як це працює, який хостинг вибрати, і тд.

3. Проектування сайту

3.1. Навігація сайту, карта сайту - створення основної структури, отрисовка основних блоків (можна тут подивитися, як працюють препроцесори, або як малювати вручну).

3.2. Юзабіліті (вивчити хоча б основні принципи ергономічного розташування елементів сайту)

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

4.1. Отрісовка макета в Photoshop

4.1.1. Основні інструменти малювання, техніка, гарячі клавіші.

4.1.3. Шрифти, кольори

4.2. Фреймворки (використання додаткових бібіліотека може заощадити час при розробці проекту - дизайні, верстці)

4.2.4. Material Design

5. Розробка - починаємо оживляти дизайн

5.2. Структура і зберігання файлів (створення директорій, приміщення файлів в певні папки, іменування файлів)

6. Верстка / нарізка макета сайту - трансформація дизайну в HTML / CSS. Ось і дісталися до основної частини нашої роботи.

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

6.2. CSS - те ж саме, тільки можна вивчити ще і застосування препроцесорну мов SASS і LESS.

6.4. JQuery - їм потрібно володіти більше ніж добре.

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

6.6. Git - сюди ж помістила і систему управління версіями. Стане в нагоді працюючим в команді.

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

8. Наповнення сайту контентів, робота з адмінкой, тестіровка сайту, запуск - завершальні основні моменти, з ними теж пов'язана чимала частина нашої роботи.

9. Ну і наостанок, засоби автоматизації, такі як Emmet, Jade, володіння командним рядком, Gulp і Grunt, але це вже після перших 8 пунктів, і ще сюди можна додати СЕО-оптимізацію, але це все ж не наша зона роботи.

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

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

З приводу 5.1 - я не впевнений, але багато чув, що для голої верстки Brackets дуже непоганий - він на льоту показує зміни в браузері, він по CTR + щось показує всі пов'язані з елементом стилі в проекті, він щось там вміє з фотошопом (тягати з ПСД кольору / градієнти). Якщо пробували - мені було б цікаво дізнатися ваш відгук. Якщо немає - мої непогані Джунь, які пішли в фронт-енд, давали хороші відгуки. Спробуйте, можливо.

Отмечусь щодо 6.6 GIT - навіть працюючи соло, я захоплююся, наскільки це зручно. Варто витратити годинку на "розібратися" і ви побачите переваги для будь-якого проекту - дрібного сольного або ж великого командного. Крім того, початківцям шукачам в плюс акк на Гітхабе etc з прикладами напрацювань

9. Ви згадали те, що я забув - Gulp і Grunt. На високому рівні потрібно знати і вміти

Розкрити гілка 1

Розкрити гілка 0

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

Схожі статті