Sketch vs. Figma vs. Adobe XD: какой инструмент дизайна лучше всего подходит для новичков?
Рано или поздно каждому дизайнеру приходится решать, с каким инструментом дизайна он будет работать до конца своей карьеры. Если вы находитесь в процессе поиска идеального инструмента дизайна или ищете замену, это руководство для вас.
Sketch раньше занимал трон как одно из самых универсальных дизайнерских приложений. До тех пор, пока не появились два новых претендента на престол — Figma и Adobe XD.
Приложения Figma и Adobe XD не только разработаны лидерами отрасли, но и предлагают несколько удивительных функций. Конечно, Sketch по-прежнему остается одним из лучших инструментов UX-дизайна, доступных сегодня.
Начинающим дизайнерам может быть сложно найти правильный инструмент для их работы. В этой статье мы попробуем дать четкий ответ на эту проблему, сравнивая Figma, Sketch и Adobe XD друг с другом.
Зачем использовать инструменты для UX и UI дизайна?
В каком-то смысле каждый дизайн — это пользовательский интерфейс. Разрабатываете ли вы веб-сайт, логотип или даже пост в социальной сети, вам нужно подумать о том, как пользователи воспринимают ваш дизайн, как они будут изучать контент; форматировать текст для удобства чтения; выбирать цвета и т. д… Это в основном и есть UX-дизайн.
Наличие подходящего инструмента для создания таких конструкций является обязательным для всех дизайнеров.
Инструменты дизайна, такие как Sketch и Figma, выводят процесс проектирования на новый уровень. Благодаря их расширенным возможностям, после того, как вы создадите веб-сайт или интерфейс мобильного приложения, вы сможете в режиме реального времени просмотреть проект, чтобы протестировать функции.
Короче говоря, не имеет значения, какой тип дизайна вы делаете, вы должны выбрать инструмент UX-дизайна, чтобы вам было лучше работать. И, что более важно, сделать ваши проекты удобными для пользователя.
Что такое Sketch?
С тех пор как Sketch был представлен в 2010 году, приложению удалось завоевать сердца и души многих дизайнеров. Он также выиграл несколько наград. Sketch хорошо известен как инструмент для разработки пользовательского интерфейса. Однако дизайнеры теперь используют его для различных других целей, даже для рисования иллюстраций и графического дизайна.
Sketch также имеет лояльное сообщество с широкой поддержкой. На платформе имеется множество ресурсов и расширений, предлагающих решения как для начинающих, так и для опытных дизайнеров.
Что такое Figma?
Figma появилась вскоре после выпуска приложения Sketch. Однако компании потребовалось много времени, чтобы довести приложение до уровня, на котором оно могло бросить вызов Sketch. Сегодня Figma так же хорош, как Sketch, и даже является отличной альтернативой для пользователей Windows.
Одной из самых уникальных черт Figma, которая отличает его от остальных, является то, что приложение работает в облаке. Вы можете получить доступ к инструменту и вашим проектам прямо из браузера с любого компьютера.
Что такое Adobe XD?
Adobe XD — новейший конкурент, объединенный в качестве альтернативы как Sketch, так и Figma. Adobe запустила UX design tool в 2017 году, удивив всех: инструмент бесплатный.
Adobe XD работает как инструмент дизайна и прототипирования. Он также имеет уникальные функции, предназначенные для совместной работы команды, что является основным преимуществом инструмента. Приложение также поддерживает платформы Windows и Mac.
Sketch vs. Figma vs. Adobe XD: основные отличия
В этом разделе мы сравним приложения, рассматривая конкретные функции и параметры. Давайте посмотрим, насколько хорошо разработано каждое из них.
Основные инструменты
Инструменты дизайна UX и UI имеют минимальную палитру инструментов. Поскольку большую часть работы можно выполнить простым перетаскиванием элементов из предварительно созданных библиотек, вы можете разработать весь проект, используя только инструмент перемещения.
Мы не ожидали многого в отделе инструментов от каких-либо приложений. Все они имеют только самое необходимое. Но Sketch лидирует в этой области.
Sketch предлагает множество инструментов для создания более продвинутых дизайнов. Особенно инструменты рисования весьма полезны для ручной работы с конкретными элементами в ваших проектах, такими как значки, кнопки и даже рисование иллюстраций.
Быстрое прототипирование
Прототипирование, пожалуй, самая важная особенность UX-дизайна. Возможность создавать реалистичные пользовательские интерфейсы как можно быстрее — главная особенность программного обеспечения для проектирования.
Sketch обладает лучшими инструментами и функциями для быстрого прототипирования. Он позволяет чрезвычайно легко собрать полный интерфейс приложения за несколько минут.
Figma и Adobe XD также имеют схожие функции, позволяющие значительно быстрее и проще создавать прототипы. Adobe XD даже имеет уникальную опцию под названием «Голосовое прототипирование», которая позволяет создавать прототипы для голосовых приложений.
Интерактивный дизайн
Одно из лучших применений инструментов UX-дизайна — это возможность тестировать свои проекты. Это означает, что вы на самом деле можете создавать проекты с интерактивными функциями, такими как нажимаемые кнопки, функциональные формы, жесты смахивания и другие взаимодействия с пользователем.
К счастью, у Figma, Sketch и Adobe XD есть функции для добавления взаимодействий. Хотя Figma и Adobe XD делают это намного проще. В Adobe XD даже есть опция, которая позволяет автоматически добавлять интерактивные элементы и анимацию в ваши проекты.
Добавив эти взаимодействия, вы можете протестировать интерфейсы своих мобильных приложений в реальной мобильной среде, используя приложения зеркального отображения, предоставляемые программным обеспечением. Как в Figma, так и в Adobe XD есть приложения для iOS и Android. Пока у Sketch есть официальное приложение только для iOS.
Библиотеки элементов
Все приложения располагают хорошими библиотеками готовых элементов. У вас не будет проблем с поиском готовых макетов для мобильных приложений, веб-приложений или любого другого дизайна интерфейса при использовании Sketch, Figma или Adobe XD.
Все они имеют большие коллекции библиотек каркасов, макетов и даже элементов дизайна, таких как кнопки, формы и многое другое. Здесь Figma занимает особое место благодаря функции «системы проектирования», которая позволяет создавать элементы с общей системой проектирования. Это фактически ускоряет весь процесс быстрого прототипирования.
Шаблоны, плагины и ресурсы
Благодаря широкому набору инструментов Sketch обладает самой большой и лучшей коллекцией ресурсов. В Sketch вы найдете тысячи удивительных готовых шаблонов, наборов пользовательского интерфейса, дизайнов приложений и многое другое.
В Sketch также есть множество полезных плагинов, которые интегрируются со сторонними инструментами, а также собственные расширения для добавления дополнительных функций для приложения.
В Figma и Adobe XD также есть множество шаблонов и ресурсов. У Figma есть много плагинов, но в Adobe XD доступно всего несколько. Поскольку оба приложения по-прежнему развиваются и дорабатываются, мы можем ожидать большего в будущем.
И Figma, и Adobe XD бесплатны для личного пользования. Adobe XD предлагает самый щедрый бесплатный план, который дает неограниченное количество прототипов и дизайнов. Вместе с 1 общим документом для редактирования с 2 редакторами. А также 2 ГБ облачного хранилища.
Бесплатный план Figma предоставляет неограниченное хранилище, но позволяет одновременно только 3 активных дизайнерских проекта с 2 активными редакторами.
Sketch стоит 99 долларов. Но если вы хотите получать обновления программного обеспечения и доступ к облачному хранилищу, вам придется оформить подписку на 79 долларов в год.
Совместные функции
Figma предлагает лучшие возможности для совместной работы в команде. Так как приложение может использовать любой, у кого есть ноутбук и браузер, вам будет проще сотрудничать с другими на разных платформах.
Adobe XD также предлагает множество полезных опций для совместной работы. Функция CoEditing приложения позволяет вам совместно работать над проектами, позволяя другим вносить изменения в режиме реального времени.
Sketch отстает в аспекте совместной работы команды. Вам нужно подписаться на ежемесячную подписку, чтобы поделиться своими файлами с командой, причем с ограниченными инструментами и возможностями.
Производительность и доступность
Figma занимает лидирующие позиции по производительности и доступности. Несмотря на то, что приложение доступно в браузере, оно работает достаточно плавно, а инструменты работают намного быстрее даже на недорогих компьютерах и ноутбуках.
Figma также является кроссплатформенным инструментом. Это означает, что вы можете использовать приложение независимо от того, на какой платформе вы работаете, и вы даже можете войти в приложение, чтобы редактировать свои проекты с любого компьютера.
Второе место занимает Adobe XD. Работает как на Windows, так и на Mac устройствах. Однако вам все равно нужно установить программное обеспечение на свой компьютер и зарегистрироваться для получения бесплатной учетной записи Adobe.
Sketch доступен только на устройствах Mac. Приложение работает быстрее, чем Adobe XD, и в некоторых областях работает лучше, чем Figma.
Какой инструмент дизайна лучше для вас?
Поиск подходящего приложения зависит от типа работы, которую вы делаете.
Если вы дизайнер, который занимается различными типами дизайна — от дизайна веб-сайтов до мобильных интерфейсов, Figma — отличный вариант. Приложение не только бесплатное, но и работает прямо в вашем браузере. И работает безупречно.
Adobe XD также является отличным вариантом для начала работы в области UX и дизайна пользовательского интерфейса. Особенно пригодится, если у вас уже есть приложения Creative Cloud, поскольку Adobe XD хорошо работает в сочетании с Photoshop и Illustrator.
Sketch остается лучшим UX дизайнерским приложением на Mac. Но эксклюзивность платформы – основная причина, по которой инструмент нельзя рекомендовать для всех. Тем не менее, если вы пользователь Mac, то инвестиции в приложение Sketch не пропадут даром.
4 причины победы Adobe XD над Sketch
Для тех кто не в курсе, Adobe XD, ранее Project Comet — инструмент проектирования основанный на векторе, был запущен в начале 2016 года.
В ноябре прошлого года я присоединился к команде проектировщиков из Red Ventures, чтобы посетить конференцию Adobe MAX в солнечном Сан-Диего. Мы изучили большое количество информации о том, что Adobe планирует на 2017 год, включая новые интересные возможности в Adobe XD.
После конференции я убежден, что Adobe XD — лучший инструмент на рынке для проектировщиков UX/UI в 2017 году. И бесспорно выигрывает у Sketch.
4 причины, по которым XD правильный инструмент для UI/UX дизайнеров
У вас уже оформлена подписка на Adobe CC
Более чем 90% профессионалов в мире используют продукты Adobe каждый день. С ежемесячной подпиской на Adobe Creative Cloud, доступ к XD уже включен — никакая дополнительная подписка не потребуется.
В то же время Sketch недавно представил новую структуру цен, которая требует от пользователя оформления годовой подписки для получения обновлений.
Adobe XD создан для команд
- Интеграция с библиотеками Creative Cloud
- URL адрес
- Руководство по стилю
- История изменений и управление версиями
- Совместная работа в реальном времени
- Совместимость
В то время как Sketch — приложение только для Mac, с Adobe XD без проблем смогут работать товарищи по команде, предпочитающие Windows.
Если вы работали со Sketch, то наверняка знакомы с его набором инструментов и бесконечными плагинами, которые обновляются каждую неделю. Плагины помогают, за исключением тех случаев, когда выходит обновление и всё ломается. Подобное несколько раз случалось со мной, и каждый раз приходилось искать решение по статьям и форумам.
С Adobe XD нет нужды в инструментах: Principle, Invision, Flinto и других плагинах. Большинство аналогичных действий можно выполнить в самом XD. Можно больше не зависеть, от того как третье лицо поддерживает свой софт при обновлении. И да, это настолько же здорово, насколько здорово это звучит.
- Создание анимированных прототипов, чтобы наметить пользовательский путь и взаимодействие элементов друг с другом.
- Функция Repeat Grid (создание повторяющихся элементов). Не совсем понятно о чём речь? Посмотрите
- Навигация в панели слоев, которая выделяет только слои в группе или выбранном объекте. Теперь вы безболезненно можете найти тот слой, которому забыли присвоить имя.
- Замена цвета в любой части документа по одному клику. (Смотрите с 55 секунды в этом видео)
- Редактирование символов в монтажной области и просмотр изменений, сделанных в режиме реального времени через все монтажные области. (Смотрите с 50:10 в этом видео)
Adobe XD быстр как молния
XD по-настоящему быстрый. Приложение задумывалось разработчиками как оперативное в работе и демонстрирует это. Особый акцент создатели сделали на реализации новых возможностей без увеличения объема дистрибутива. Даже загрузка большого файла не мешает приложению, справляться с любой задачей мгновенно.
Сопоставим это с тем, как медленно Sketch работает с большими файлами и при этом занимает 200ГБ в вашем MacBook. Так что и здесь XD явно преуспевает.
Adobe XD находится под управлением солидной компании, имеющей широкие возможности
За плечами у Adobe более 30 лет инвестирования в творческую индустрию, 6,6 миллиона глобальных пользователей и 14 154 сотрудника по всему миру. В их распоряжении невероятное количество ресурсов. Постоянное обновление каталога продуктов, имеющего возможность синхронизации с единой библиотекой.
Для сравнения Bohemian Coding, компания-учредитель Sketch, была основана в 2008 и насчитывает всего 20 сотрудников. Такое существование, схожее с небольшим магазином имеет свои преимущества. Но в такой ситуации для Sketch будет сложно конкурировать с масштабом и перспективой Adobe.
Владимир Синицын — преподаватель и координатор направления «Дизайн» в «Нетологии». Вы сможете освоить одну из самых востребованных профессий, повысить уровень своих знаний, освоите инструменты веб-дизайна и узнаете всё о проектировании интерфейсов. А также научитесь работать с инфографикой. Выбирайте курс по своему вкусу и записывайтесь!
Как без пиратства и покупки платного ПО пользоваться макетами Adobe XD
Формат файла Adobe XD представляет из себя архив, который содержит описание структуры макеты в виде JSON структуры, графических растровых и векторных файлов использованных при создании макета.
Стандартный метод — открыть в программе Adobe XD — нужна программа купленная за деньги (подписка).
Использовать сервис-конвертор XD2SKETCH.COM — за деньги (подписка или платное разовое использование).
Программу-сервис Avocode — за деньги.
Кроме того, некоторые программы работают только в среде Mac OS (Sketch — только MAC OS или веб-приложение)
И тому подобное.
Чтобы открыть макет Adobe XD бесплатно, можно воспользоваться бесплатной программой-сервисом Photopea — в этом случае видны все параметры объектов макета и даже доступ к CSS значениям реализован удобнее чем в Photoshop. А вот реализация извлечения растровых объектов из макета, для внедрения в вёрстку, немного подкачала, на мой вкус.
Чтобы получить объекты из файла Adobe XD, достаточно открыть его как Zip-архив, например с помощью архиватора 7-Zip. В результате получим несколько папок с ресурсами JSON, XML, и папкой с растровыми объектами: «resources».
Содержащиеся там файлы будут без расширений, но это решается просто переименованием, с добавлением соответствующего расширения. Если есть сомнения в том, какое расширение необходимо, достаточно открыть файл в программе Notepad++ или в другом тактовом редакторе. У файлов формата PNG в первой же строчке будет «‰PNG». У SVG-файлов будет так же видна вся XML структура присущая SVG-файлам.
Итого, файл макета открыт в Photopea — данные CSS доступны для переноса. Папочка с графикой для вставки в вёрстку — готова.
Кроме того, из Photopea можно сохранить в PSD, который открывается некоторыми бесплатными просмотровщиками и редакторами.
Возможно, подход не оригинальный. Но уж чем богаты.
Вероятно есть и более простые методы.
Web-технологии
293 поста 4.9K подписчиков
Правила сообщества
1. Не оскорблять других пользователей
2. Не пытаться продвигать свои услуги под видом тематических постов
3. Не заниматься рекламой
4. Никакой табличной верстки
5. Тег сообщества(не обязателен) pikaweb
Adobe XD бесплатный же
Сказ о том, как чел порвал жопу, чтобы зарабатывать не заплатив ни копейки за ПО в котором педалит =)
Собрались далекие от темы люди и пытаются убедить автора установить прогу обновив винду до 10ки. Обычные хомяки, хавают что дают, а не то что удобно.
ЗЫ: 10ка всё еще глючная
Как быстро написать слайдер на JS?
Во многих сайтах и программах уже давным — давно используются такие элементы взаимодейтсвия пользователем, как «Слайдер», по сути это одна большая фотография которую можно переключать с помощью стрелочек или по нажатию на клавиши. Удобно когда на экране мало места, а показать множество фотографий нужно.
Как же создать вот такой слайдер?
Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.
1. Пишем структуру
4. Заполняем объект
Пишем структуру
Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».
Пишем стили
Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.
Пишем скрипт
Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.
Заполняем объект
Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ‘ ‘ », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.
У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.
.neighborhood
Продолжение поста «Генератор градиентов и палитры по картинкам»
Прошло 3 месяца с первого поста про мой проект — Gradients.app, он про цвета и градиенты.
Расскажу про изменения и обновления за это время.
Вращение градиента
Вращение градиента появилось в мини-карточке, на подробной странице и при генерации нового градиента. Выбирайте нужный угол поворота и скачивайте градиент под выбранным углом. В мини-карточках градиент скачивается в размере 1920 на 1080 px.
Новый вид страницы градиента
Пользователь может задать размер градиента самостоятельно или выбрать уже готовые размеры. Максимальный размер градиента — 2000 на 2000 px. Изображение градиента скачивается если на него нажать.
Добавление градиента в общую ленту
Зарегистрированные пользователи могут добавить свои градиенты в общую ленту.
Сгенерируйте градиент → сохраните в профиль → перейдите в мои градиенты → отправьте в общую ленту.
Пользователю придёт письмо о добавлении в общую ленту и ссылка на градиент.
Генерация градиентов без грязных переходов
Случайная генерация градиентов теперь красивая, не появляются грязные переходы, а цвета рассчитываются по HSL модели.
Появился инструмент смешивания цветов
Можно выбрать до 4х цветов и два режима смешивания RGB и HSL.
Просто про режимы RGB и HSL:
Смешивая синий и желтый в RGB вы получите серый цвет, а в режиме HSL зеленый. В RGB между синим и желтым на цветовом круге серый цвет поэтому их сложение его и даст, а в HSL получится дуга т.к. цвета на разном уровне.
Появился генератор оттенков
Выбирайте цвет и количество оттенков от 3 до 36. Оттенки генерируются в сторону белого, серого и черного цвета.
Набор сочетаний цвета текста и фона
На мини-карточках есть цвет фона, текста и их контраст, чем он выше тем читаемость лучше.
Можно отсортировать наборы по контрасту, времени и просмотрам.
На подробной странице сочетания добавлен заголовок, абзац текста со всеми буквами алфавита и различные начертания шрифта.
Генерация сочетаний цвета текста и фона
К наборам добавил генерацию и для пользователей.
Пользователь может сгенерировать все цвета случайно или каждый по отдельности. Под цветами добавлены подсказки читаемости для заголовков и обычного текста по стандартам WCAG.
Огромное спасибо за комментарии в предыдущем посте, я всё записал и уже что-то добавил.
Буду рад критике и советам.
Генератор градиентов и палитры по картинкам
Делюсь своим проектом Gradients.app, занимаюсь им в свободное время и очень жду замечаний и предложений. Проект может пригодиться дизайнерам и иллюстраторам — тут про цвета и градиенты.
Набор градиентов
На сайте можно скачать градиенты разных размеров в PNG, скопировать цвета по отдельности и CSS-коды градиентов. Градиенты сортируются по цветам, скачиваниям и дате. Градиентов на сегодня 87, добавляю их самостоятельно, если у вас есть классные сочетания — буду рад их добавить.
Можно провалиться внутрь карточки градиента, там будет больше информации и разные размеры для скачивания. Для веб-дизайнера есть CSS-код градиента, а для иллюстраторов — цвета в RGB, CMYK, HEX и HSL.
Генератор градиентов
Можно делать градиенты самим: подбирать цвета, смотреть разные сочетания. Есть возможность выбрать от 1 до 5 цветов, скачивать в FHD, копировать CSS-код и рандомно менять цвета всего градиента или по отдельности.
Наборы палитр
Потом я добавил на сайт ещё один раздел — цветовые схемы. Загрузил картинки в разных стилях, с разными палитрами. Эти палитры можно использовать для оформления сайтов, графического дизайна или даже дизайна интерьеров.
Схемы можно отфильтровать по цветам и скопировать HEX-код каждого цвета палитры. На подробной странице схемы цвета применяются к небольшому web-шаблону: блоки, кнопки и другие элементы раскрашиваются под выбранную палитру.
Генератор палитры по фото
Ещё можно загрузить любую картинку или фотографию и определить палитру на ней. Изображение разбивается на 10 основных цветов. Есть подробные блоки с яркими, приглушенными, темными, светлыми и противоположными цветами. У всех цветов можно скопировать HEX-код.
Проект переведен на английский и частично на китайский язык.
Буду рад критике и идеям, может что-то вышло неудобно и непонятно.
Эффект неонового свечения текста HTML CSS
Всем привет, новое видео от меня!
Создаем эффект неонового свечения на тексте на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно применять для создания оригинальных заголовков на любом сайте. Легко поменять цвет свечения, скорость движения линии, которая скрывает текст, размер текста и т.д. Полностью гибкое решение.
Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.
Реакция на курсор
Дизайн контактных форм: поля ввода
С нуля до Frontend-разработчика. Начало
Всем привет,
произошел небольшой казус в прошлом посте (не знал всех правил редактирования постов, извиняйте), поэтому решил написать новый пост.
Как говорил ранее, все кто начинают обучение в веб-разработке сталкиваются с огромным количеством информации в сети и отсутствием практических навыков. Я не стал исключением.
Даже имея RoadMap и обучающие курсы, происходит так, что мы учим сухую теорию и когда дело доходит до собственного проекта, руки и голова забывает как писать код.
Пересмотрев уйму информации в интернете, а также повторяя код за лектором, решил остановиться и начать свой путь заново, почти с нуля.
Сейчас хотел бы посоветовать небольшой план для людей, которые только начинают свой путь в веб-разработку:
1) Думаю, самый народный способ изучить основы HTML и CSS это воспользоваться бесплатными курсами от HTML Academy.
Затем эти знания можно закрепить пройдя бесплатные задания на FreeCodeCamp. (Basic)
2) Советую скачать бесплатно курс, который писал здесь (п. 2)
!Либо можете найти ссылку на скачивание zip-файла в комментариях в этом посте!
Посмотрев первый модуль, вы уже отточите свои базовые знания + будет настроено пространство.
3) После этого сразу советую изучить препроцессор CSS (хотя его и ставят в середину обучения, считаю его надо учить сразу после основ). Про них можно узнать в модуле 2 — 025 из того курса, либо из любого другого видео на YouTube.
4) Изучаем основы Git/Github. Из курса Модуль 3 — 041, либо на YouTube. В начале необходимо уметь только пушать проекты в репозиторий. имхо)
+ также многие советуют выделять время на прочтение книг и изучения англа. Но я считаю, что лучше получать информацию с помощью интерактивных ресурсов (видео), а также стараться не распыляться на другие темы.
Сложно описать сколько времени у вас займет на обучение данного материала, но в среднем можно предположить 2/3 недели.
После этого можно уже с головой углубляться в верстку.
Мой план обучения на ближайшее время:
1) Практикуем верстку с помощью Bootstrap Grid (ее многие недолюбливают, но я хотел бы закрепить эти знания);
2) Продвинутая верстка с Flexbox без интерактива;
3) Стараемся настолько набить руку, чтобы могли сверстать почти любой проект без интерактива;
4) Основы JS;
5) Поверхностное изучения JQuery и добавления интерактива на сайты.
6) Продвинутый JS;
7) React.js
8) Создаем портфолио;
8) Стараемся устроиться на работу джуном.
План на следующую неделю:
1) Доделать проект из курса (модуль 2);
2) Найти и сверстать самостоятельно пару лендингов с помощью сетки + делать их «резиновыми».
Повторюсь, что постараюсь вести этот блог и создавать новые посты пока что каждую неделю, для структурирования знаний, получения фидбека, и возможно кому-то этот путь пригодиться)
Все получилось сумбурно, я еще дилетант в этом деле, так что рад любой критике и пожеланиям 🙂