Обучение адаптивному дизайну: недостающий компонент

1. «Введение в веб-дизайн» от Разработчиков Google (Introduction to Web Design by Google Developers)

Этот курс подробно описывает различные аспекты современного адаптивного веб-дизайна. Он дал мне множество ценных инструментов, в том числе:

• Как возник и почему нужен адаптивный веб-дизайн
• Точку зрения разработчиков браузеров на то, как браузеры обрабатывают файлы HTML и CSS
• Полезные ссылки на Chrome Developer Tools для лучшего понимания работы браузеров
• Объяснение медиа-запросов и их использования
• Подробное рассмотрение адаптивных изображений, включая элемент <picture> и иконки
• Использование гибкой типографики
• Понимание макро- и микромакетов

Казалось, курс охватывает все инструменты, которые мне нужны... но действительно ли это было ВСЁ, что нужно?

Чего-то всё-таки не хватало – какого-то ключевого компонента. И этим компонентом была я и мой образ мыслей. Была ли я уверена в своей способности эффективно использовать эти инструменты? Чувствовала ли я в себе силы и желание создавать адаптивный дизайн? Ответом было «нет», пока я не прошла ещё один курс.

2. «Освоение адаптивных макетов» Кевина Пауэлла (Conquering Responsive Layouts by Kevin Powell)

Чтобы дать вам представление о том, что я испытала на этом курсе, попробую сравнить его с обучением вождению. Обычный инструктор по вождению, как и обычный курс CSS, обучает вас так:

Но у Кевина другой подход:

После прохождения курса Кевина у меня возникло новое ощущение свободы и контроля. Я поняла, как заставить CSS работать так, как задумано. У меня появилась уверенность в том, что я могу сделать свои проекты по-настоящему адаптивными, и именно это я называю недостающим компонентом.

Стоит заметить, что курс Кевина не охватывает все существующие приёмы. В нём нет ни Developer Tools, ни гибкой типографики, ни элемента <picture> , ни даже CSS-сетки. Но дело вот в чём: инструменты – это одно, а образ мыслей – совсем другое. Курс Кевина уникальным образом преобразует ваш образ мыслей.

Вот те ценные моменты из курса Кевина, которые оказались очень полезными для меня:

• Особое внимание уделяется простоте создания адаптивного дизайна
• Постоянная моральная поддержка и придание уверенности
• Демонстрация написания адаптивного программного кода
• Применение передовых методов, таких как использование Emmet, именование классов (БЭМ) и принцип единственной ответственности
• Описание медиа-запросов и адаптируемого блока (flexbox)
• Акцент на базовых понятиях и их подробное объяснение
• Задачи по кодингу и их решения, которые помогают выявить те трудности, которые у вас возникают, и подтверждают ваши умения их решать
• Канал Discord, в который можно обратиться за помощью

3. Другие возможности для изучения адаптивного
веб-дизайна

Для полноты картины давайте вкратце рассмотрим другие возможности изучения адаптивного веб-дизайна. Хотя материалы в этом разделе имеют свои достоинства, они в основном посвящены различным инструментам, а не изменению вашего образа мыслей.

«Основы адаптивного веб-дизайна» от Google + Udacity

Опять же, в основном речь здесь идёт об инструментах, хотя в некоторой степени затрагивается и ваш образ мыслей. Это видеокурс, в отличие от упомянутого выше текстового курса от Разработчиков Google. Каждое видео длится примерно 1 минуту и посвящено определённому понятию. В курс также включены тесты и задачи по кодингу. Вот некоторые из рассматриваемых на курсе тем:

• Использование Developer Tools на компьютере и мобильных устройствах
• Понимание области просмотра (viewport) и соотношения логических и физических пикселей на устройстве (device pixel ratio)
• Минимальные размеры целей касания
• Медиа-запросы и точки останова
• Шаблоны адаптивного дизайна

В целом этот курс дал мне полезные приёмы и инструменты, которые не так легко найти в других местах. Содержание курса хорошо скомпоновано и легко доступно. Однако, когда нужно найти какую-то конкретную информацию, этот курс не так удобен для поиска, как курс от Разработчиков Google. Несмотря на свою полезность, он не дал таких же результатов, как курс Кевина «Освоение адаптивного дизайна».

«Адаптивный веб-дизайн»
от freeCodeCamp

Этот курс охватывает основы адаптивного веб-дизайна с использованием HTML и CSS. Он включает в себя уроки и задания по кодингу. Я его не проходила, но, судя по всему, он неплох.

«Веб-дизайн для всех: основы
веб-разработки и программирования» от Coursera

На этом курсе, разработанном Мичиганским университетом, рассматриваются основные понятия адаптивного дизайна, а также HTML, CSS и JavaScript. Я его не проходила; он, скорее, подходит для начинающих front-end разработчиков.

Веб-документы MDN:

Хотя материалы MDN Web Docs содержат обширный объём информации в разделах «Основы адаптивного веб-дизайна» и «Основы адаптивных изображений», мне эти данные показались сложными для восприятия. Похоже на кулинарный рецепт с десятками вариантов, за которыми «не видно» само блюдо. Эти материалы могут стать отличным источником справочной информации после того, как вы хорошо усвоите основы адаптивного дизайна.

Выводы

По моему опыту, эффективным оказался такой подход:
● курс, который даёт вам необходимые инструменты, как, например, курс Google, и
● курс «Освоение адаптивных макетов» Кевина Пауэлла, который преобразует ваш образ мыслей и даёт вам уверенность в использовании этих инструментов.

Успехов в дальнейшей учёбе!

Пожалуйста, поделитесь этой статьёй, если она вам понравилась, и я буду рада получить отклики в комментариях!