Что нужно для web-дизайна? Две программы:

• web-браузер
• текстовый редактор

Какой браузер подойдет?

• Google Chrome – стандарт качества. Если мало оперативной памяти и открыто много вкладок, будет тормозить и зависать. Решение: закрой вкладки!
• Яндекс.Браузер, основан на движке Blink от Google. Значит, использовать Chrome или Яндекс.Браузер для веб-дизайнера – одно и то же: страницы выглядят одинаково. Только браузер от Яндекса будет больше тормозить и навязывать свои сервисы.
• Microsoft Edge последних версий, если уже стоит и не получается поставить Google Chrome. Тоже основан на движке от Google.
• Apple Safari, если операционная система – macOS.
• Mozilla Firefox – в любых операционных системах, в том числе Linux.

Какой текстовый редактор подойдет?

• Microsoft Visual Studio Code (VS Code) или свободный аналог VSCodium. Не требует прав администратора для установки.
  Не спутай с Microsoft Visual Studio!
• Есть онлайн-версия, можно использовать на планшете или смартфоне! Для проектов, выложенных на Github Pages, можно использовать встроенную онлайн-версию редактора github.dev
  Русский язык настраивается после установки: нажать Ctrl+Shift+P, начать вводить Display Language, выбрать Configure Display Language (Настройка языка интерфейса).
  Если мало оперативной памяти, тормозит и зависает. Решение: закрой открытые файлы!
• Sublime Text.
• Notepad++ – легкий и быстрый: можно открывать десятки файлов одновременно.
  Проблема: сложно настроить автодополнение кода Emmet. Настройка Emmet.
• AkelPad – ультралегкий и быстрый, можно открывать десятки файлов одновременно.
  Проблема: сложно настроить подсветку синтаксиса и автодополнение кода Emmet.

Не подойдут:

• Браузер Internet Explorer. Он встроен в старые версии ОС Windows и в нем ничего толком не работает, но им до сих пор многие пользуются. Нужен профессионалам для тестирования сайтов.
• Текстовый редактор Notepad (блокнот), текстовый процессор Microsoft Word. Они не для web-дизайна!

Можно задизайнить сайт на смартфоне?

Можно: современный смартфон – это полноценный компьютер. Но долго и утомительно, если не подключить полноценные клавиатуру (например, по bluetooth) и экран.
Проверка работы сайта в мобильном браузере – важный этап тестирования.
Выбор мобильных браузеров тот же: Chrome, Firefox, Яндекс.Браузер. Есть даже Edge.

В качестве текстового редактора подойдет онлайн-версия Visual Studio Code.

Как работать: клавиатурные сокращения и автодополнение кода

В программах на персональном компьютере для частых действий используются клавиатурные сокращения. Частые действия снабдим подсказками, куда нажимать. Клавиша Ctrl в операционных системах от Apple – это ⌘.

• Открыть текстовый редактор, создать файл (Ctrl+N) и сразу сохранить (Ctrl+S) с расширением html и css. Теперь редактор знает, с каким типом файла работает.
• В редакторе с поддержкой Emmet для файла html: напечатать «!» (без кавычек), нажать ⏎ Enter. Появится разметка документа html пятой версии. Так работает автодополнение кода. Наполнить содержимым, сохранить (Ctrl+S).
  Шпаргалка по Emmet.
• В браузере открыть: новое окно (Ctrl+N) или новую вкладку (Ctrl+T). Открыть файл (Ctrl+O), выбрать html-файл.
• Просмотр кода web-страницы – Ctrl+U
• Визуальный инспектор кода вызывается сочетанием клавиш Ctrl+Shift+C
• Консоль разработчика – нажатие F12. Работает как калькулятор и здесь можно программировать на JavaScript. Если Mac, см. Консоль разработчика.
• Мало места в окне – полноэкранный режим при нажатии на F11
• Быстрое переключение между окнами – Alt+Tab, между вкладками – Ctrl+Tab
• Поиск – Ctrl+F, замена – Ctrl+H
• Закрытие вкладки – Ctrl+W
• Переносить по словам (все содержимое файла на экране) – Alt+Z
• Все зависло и не отвечает – вызвать диспетчер задач (Ctrl+Shift+Esc), дождаться появления окна, снять задачу
• Изменить размер шрифта в VS Code – Ctrl+Shift+P, начать набирать слово zoom Editor Font Zoom In – увеличить, Zoom Out – уменьшить
• HTML в Visual Studio Code, ссылки на популярные расширения (на английском)

Хостинг (куда выложить файлы для доступа по сети)

• Готовые web-проекты выкладывают на хостинг, который поддерживает все использованные технологии. HTML, CSS и JavaScript поддерживаются везде без исключения, потому что это технологии фронтенда. PHP, Python и другие технологии бэкенда поддерживаются не везде.
• lite.host – бесплатный хостинг с поддержкой языка PHP. После подтверждения регистрации по номеру телефона можно выкладывать файлы.
• Бесплатный хостинг для программистов (и не только): GitHub. Вся история изменений для каждого файла запоминается и хранится при помощи системы контроля версий Git. Только статические страницы, PHP и другие технологии бэкенда не заработают.
• GearHost: .NET and PHP Cloud Hosting годится для проектов с использованием PHP.
• Большой список бесплатных сервисов хостинга с PHP и MySQL.

Проверка, тестирование и обмен кодом

• Codepen.io (работают сокращения Emmet). После регистрации примерами можно делиться (например).
  В окно HTML вставляется код из тега <body>.
  В окно CSS копируется содержимое стилевого файла и/или содержимое html-тега <style>.
  Окно JavaScript можно скрыть.

Проверка разметки HTML и стилей CSS на ошибки

• Markup Validation Service на сайте Консорциума Всемирной паутины.
  Validate by URI – проверка страницы по указанному адресу; Validate by File Upload – проверка загруженного файла; Validate by direct input – проверка вставленного в поле кода.
• Сервис проверки CSS (на русском языке).
• Проверка кода на JavaScript описана в разделе Web-разработка.

Иструменты прототипирования веб-страниц

При создании веб-страницы обычно используют макет: векторный рисунок, обладающий различными свойствами. При создании макета продумывают работу сайта как интерфейса, какой он будет создавать пользовательский опыт взаимодействия. Для этого часто используют векторный онлайн-редактор Figma или аналоги. Например, Pixso.