Вот дерево с 3 уровнями, чтобы начать свой путь в качестве веб-разработчика.
Конечно все это очень субъективно, и вы можете определить свой план. Существует много различий между регионами, странами и так далее. Но этот дает хотя бы некоторый уровень обзора.
Что мы ожидаем от каждого уровня?
Давайте определим наши ожидания. Ваши ожидания могут отличаться.
Уровень 1 — новые базовые теги, может редактировать контент на готовом HTML-сайте, может правильно форматировать текст, может вставлять что-то встраиваемое (youtube, google map), может использовать git для себя (мастер, 1 вкладчик). Он может сделать несколько простых сайтов, и это может выглядеть хорошо (на его персональном компьютере). Не отдельная единица, для успеха требуется некоторое руководство.
Уровень 2 — плюс-минус отдельная единица (или отдельная для малых и средних проектов). Он может создать прекрасный макет с нуля для небольшого или среднего проекта, и он будет отлично смотреться во всех современных браузерах. Уметь работать с шаблонизаторами, уметь ими пользоваться (если предоставлен другой код). Может хорошо планировать свою работу, документировать, что было сделано и как это использовать, может оценивать время. Поймите важность стиля кода. Поймите, почему существуют сеточные системы и CSS-фреймворки. Может сам собрать необходимую информацию от дизайнеров или с мокапов. Он может взаимодействовать с малыми и средними командами. Он может создавать ветки и тянуть запросы.
Уровень 3 — может разработать блочную систему для большого проекта с нуля. Знайте, как избежать дублирования кода и проблем, когда его код будет использоваться другими разработчиками. Он может разложить сложные проблемы и четко определить задачи. Он может применить хоть одну современную методологию (БЭМ, например). Он может сделать сайт молниеносно быстрым. Хорошо разбираюсь в паре современных шаблонизаторов. Может создавать скрипты сборки для автоматизации процесса комбинирования CSS/HTML/js. Может хорошо проводить код-ревью и обучать других фронтендеров.
Точное объяснение блоков
Большинство блоков представляют тот или иной набор навыков. Его можно заменить на аналогичный. Вы можете использовать любую IDE, любую CMS или что-то еще. Я просто указываю некоторые популярные, с которыми вы можете начать работу «прямо сейчас» (много сопутствующих предложений работы). Может быть много предложений работы для других навыков в вашей области. Я пытался сделать универсальную схему, которая будет работать для большинства регионов.
1-й уровень
HTML — знание основных тегов и атрибутов. Понимание того, как писать HTML (что такое «тег», «свойство» и т. д.)
Типографика — правильное форматирование текста. Текст — основа (почти) каждого проекта. Добавляйте без пробелов, где это необходимо, жирный шрифт, курсив, сокращения и т. д. Используйте какой-нибудь типограф или аналогичный сервис, поймите, почему +1234567 лучше, чем +1 234 567.
Шрифты (можно отложить) — сложнее, чем кажется; Новичкам рекомендую использовать системные шрифты. Возможность загружать шрифты, переходить к другому, оптимизировать внешний вид/скорость, минимизировать время рендеринга для пользовательских шрифтов.
Семантика — возможность найти правильный тег для правильного использования. Понимание того, почему существует так много тегов.
Мультимедиа — типы мультимедиа могут отображаться на странице.
Iframe — импорт сторонних виджетов (видео, аудио, карты и т. д.).
Аудио, видео (можно отложить) — изначально можно решить с помощью iframe. Понимание того, какие типы мультимедиа поддерживаются браузерами, как спроектировать плеер и т. д.
Изображения — графические форматы, как они работают в браузерах. Плюсы и минусы разных форматов
Растровые — jpg, png, gif. Понимание различий и возможность выбрать правильный (возможно, оптимизировать их).
SVG(можно отложить) — плюсы/минусы/ограничения, как использовать.
Таблицы (необязательно, хорошо для электронных писем) — но сами таблицы следует изучать в разделе «HTML» :-)
CSS 1 — шрифты, цвета, выравнивание, размеры
CSS 2.1 — блокирует поведение, позиционирование, дизайн
Селекторы — простые селекторы по тегу, классу, вложенному элементу. Простые псевдоселекторы, такие как :hover.
Именование — как называть классы, чтобы избежать проблем в будущем.
Блоки — как разделить макет на отдельные блоки, как реализовать эти блоки в HTML и дизайне с помощью CSS.
Браузеры (можно отложить) — какие браузеры существуют, какая разница.
Инструменты разработчика (можно отложить) — используйте инструменты браузера, чтобы определить, почему что-то выглядит не так, как «отлаживать» CSS.
Редакторы кода — какие редакторы существуют и почему они существуют. Notepad++ и SublimeText здесь просто для примера, как и всем известные. Знайте, как установить основные настройки, такие как табуляции, новые строки, набор символов и так далее.
VCS (система контроля версий) — я считаю, что это необходимо, по крайней мере, для вас самих. Почему они существуют, и какие типы.
Git/Bitbucket — возможность использовать хотя бы одну из популярных платформ для git.
Checkout/commit/push/pull — базовых операций достаточно для личного использования.
Шкатулка — для временного хранения не нужных в данный момент вещей
10 работ — минимум 10 работ с разным дизайном. Может быть, это просто отформатированный текст или что-то в этом роде. Но они должны использовать максимум ваших текущих знаний.
Уровень 2
CSS 3 — градиенты, тени, скругления, фильтры, преобразования и т. д.
Расширенные селекторы — комбинированные селекторы с использованием типа «+», nth-child, shadow-dom, before/after и т. д.
Flexbox — понимать модель, уметь ее использовать
Анимации (опционально) — переход, анимация. Преимущества/против/ограничения.
Сетки — зачем они существуют, как их использовать, какие готовые решения существуют. В качестве примера вы можете взглянуть на «Flexbox grid» или любой другой.
Фреймворки — зачем они нужны, как использовать. Я настоятельно рекомендую хорошо изучить хотя бы один из них. Очень полезно для прототипирования. Значительно повысить качество проекта без дизайнеров (внутренний проект, например).
препроцессоры CSS (можно отложить) — более организованный и чистый код, примеси, переменные и т. д. Попробуйте разные, такие как SASS, LESS, Stylus.
Медиа-запросы (можно отложить) — показывать правильный стиль в зависимости от условий (устройство, размер экрана, версия для печати и т.д.)
Электронные письма (по желанию) — полезный навык; Существуют десятки почтовых систем с некоторыми отличиями, и главная цель — чтобы ваше письмо хорошо выглядело в любой из них, на любом устройстве. Уметь проходить фильтры и не попасть в спам.
Полифиллы — узнайте, как использовать современную семантику с обратной совместимостью. Знайте плюсы/минусы.
Кроссплатформенность — понять жарко сделать сайт не только для Windows, Mac и Linux, но и для SmartTV, PS, kindle и так далее.
Мобильная версия (можно отложить) — ознакомьтесь с ограничениями мобильной платформы. Используйте пространство с умом.
Оптимизация (можно отложить) — понять «цену» разных техник. Понимание фаз браузера для отображения сайта пользователю
Загрузка (можно отложить) — оптимизация, связанная с размером, кешем, объединением ресурсов и т. д.
Paint(можно отложить) — оптимизация рендеринга после (в процессе) загрузки
SEO (можно отложить) — хотя бы базовое понимание поисковых систем. Способность помочь им понять ваш сайт, что важно и так далее
Шаблоны — как повторно использовать код, как группировать элементы, как собирать страницы. Очень важно понимать как серверный, так и клиентский рендеринг. Существуют также шаблоны на чистом языке, такие как прямые части кода PHP. Части перед механизмом шаблонов выходят за рамки.
PHP(можно отложить) — понимать базовый синтаксис и иметь возможность вносить небольшие изменения, связанные с дизайном страницы.
CMS(можно отложить) — знать, какие CMS существуют, зачем они созданы. Научитесь писать шаблоны хотя бы для одного из них (рекомендуется Wordpress)
Javascript (можно отложить) — базовый синтаксис, понимание простых обработчиков событий и простых манипуляций с DOM.
jQuery (можно отложить) — узнайте, как сэкономить много времени для малого/среднего проекта, используя готовые плагины для общих задач.
NodeJS (можно отложить) — научитесь запускать простейший сервер, обслуживать статические файлы, рендерить на стороне сервера. Может быть, использовать экспресс или около того.
Сборка систем (можно отложить) — как собрать проект из файлов CSS/HTML. Настоятельно рекомендую хотя бы взглянуть на несколько разных систем (ворчание — глоток).
Стиль кода — почему люди соглашаются с некоторыми стилями, изучают хотя бы один и начинают его использовать (взгляните на Airbnb или любой другой современный js-фреймворк, такой как Vue).
DRY/KISS/SOLID (можно отложить) — важные теории разработки, кардинально влияющие на поддержку проекта в будущем.
OOCSS (необязательно) — что такое объектно-ориентированный CSS? Почему и как использовать? В той или иной форме используется в большинстве проектов (но без понимания того, что они используют :-D). В идеале, научиться его проектировать. Это может быть очень полезно для больших проектов.
Документация (можно отложить) — понять, как и что документировать. Начните документировать. Настоятельно рекомендуется синтаксис уценки.
Планирование — научитесь оценивать время, просто взглянув на изображение, определите порядок работ.
Декомпозиция (можно отложить) — разделить большую задачу на маленькие. Это сложнее, чем кажется.
Цели настройки (можно отложить) — уметь писать задачи так, чтобы другие разработчики (в том числе и более низкого уровня, чем вы) смогли их понятно понять.
IDE (можно отложить) — зачем существуют IDE, как ими пользоваться. Изучение любой IDE равносильно изучению какого-либо языка программирования (иначе вы не будете использовать его возможности). Я лично использую только текстовые редакторы и запускаю IDE только для действительно больших проектов.
Ветвление — управление ветвями в git.
Объединить — узнайте, как объединять ветки с конфликтами слияния.
Fetch/Rebase (необязательно) — что это? Узнайте, как и когда использовать
Графические редакторы — разбираемся в их типах, в чем разница между векторными и растровыми. Уметь читать в них мокапы от дизайнера. Уметь выбирать правильный шрифт, размер, цвет и другие параметры, чтобы сайт выглядел именно так, как просит дизайнер.
Доступность в Интернете — крайне важно, если вы хороший человек. Сделайте свой сайт доступным для людей с ограниченными возможностями.
Региональные различия (необязательно) — слева направо, справа налево и другие странности арабского (или любого другого) рынка. Есть десятки забавных вещей.
50 работ — к концу «уровня 2» у вас должно быть около 50 различных проектов, которые показывают ваши навыки. (Если это проект с 20 совершенно разными макетами, считайте его за 20).
Уровень 3
На схеме эта часть выглядит как самая маленькая, но на самом деле она самая большая, потому что в этот момент вы должны знать все, что «можно отложить».
Адаптивный/отзывчивый — высший уровень; объединить все свои знания! Проект должен выглядеть потрясающе в любом месте и на чем угодно.
Изящная деградация/Прогрессивное зачарование — чем это хорошо, как пользоваться. Использовать.
Gitflow (или другая модель ветвления) — иметь возможность использовать некоторые передовые методы, быть в состоянии объяснить другому разработчику, как использовать git, как объединять ветки, как проводить проверку кода (HTML/CSS )
BEM (необязательно) — изучите методологию, которая дает возможность создавать неограниченное количество крупных проектов таким образом, чтобы с минимальной синхронизацией разные команды могли использовать блоки друг друга. Существует множество методологий, которые дают тот же/лучший результат. В этот момент времени вы услышите о некоторых из них и сможете сделать правильный выбор.
100 работ — звучит неплохо, как по мне. Они должны показать различные навыки, которые у вас есть. Но вы можете иметь в портфолио всего одну работу (состоящую из разных частей), которая покажет, что вы ничего не боитесь.
Кроме того, я планирую просмотреть эту схему с дополнительными сведениями о потоке до 17 мая в 20:00 по тихоокеанскому стандартному времени. (https://www.youtube.com/watch?v=mj-Jclhy9Qg)
Спасибо за чтение и хорошего дня.
