Резюме героя #

О проекте #

Добро пожаловать в мир веб-разработки!

Этот урок — твоя первая ступенька в программировании. Даже если ты пока знаешь про сайты только то, что их можно «гуглить», — ничего страшного! Мы начнем с простого: сделаем сайт-визитку твоему любимому персонажу, который можно показать друзьям и коллегам (можешь сделать и самому себе, я только за).

Чему научишься #

Верстка - это база всего web фронтенда. Следующие уроки, как и реальная работа фронтенд разработчиком, обязывают знать ее основы. В этом уроке ты освоишь:

Основы HTML: Это как каркас дома, без него ничего не построишь.
Основы CSS: А это декор, который превращает скучную коробку в стильный лофт.
Адаптивную верстку. Сайт должен классно выглядеть на бабушкином телефоне и на 4К мониторе дотера.
Взаимодействие с Figma. Сервис, в котором создаются чертежи сайтов.

Материалы для подготовки #

Последовательный список материалов в разделе Список задач ниже.

Техническое задание #

Макет сайта #

Следуй макету. Обращай внимание на отступы, цвета и высоту блоков. Они должны быть точно воспроизведены на сайте, чтобы сайт выглядел аккуратно и профессионально. Все отступы блоков кратны 4
Задний фон. Используй свой градиент для фона, если считаешь, что цвета из макета не подходят твоему персонажу
Шрифт. На всем сайте используется шрифт Play. Жирность, прозрачность и цвет должны соответствовать макету
Адаптивность. Где возможно, используй flexbox, вместо фиксированных размеров. Сайт должен хорошо смотреться на устройствах с различной шириной экрана от 1000 до 2000+ пикселей. Контент должен ужиматься на маленьких экранах и НЕ растягиваться больше 1300px на больших.
Внешние ресурсы. Все ссылки должны быть кликабельными, но не забывай следовать макету (т.е. цвет ссылок должен быть белым) и открываться в новой вкладке
Публикация. После выполнения задания публикуй проект на GitHub и присылай ссылку в чат проекта. Я с удовольствием дам обратную связь

Заметки #

На макете оставлены комментарии-подсказки (shift+C для активации). Используй их, если буксуешь с решением
Если испытываешь трудности с реализацией какой-либо секции можешь обращаться к прохождению или к готовым работам в конце страницы

Список задач #

Задания построены так, чтобы ты двигался маленькими шагами и сразу видел результат. Это снижает тревожность, помогает не перегореть и держать фокус. Эти задачи лучше выписать в заметки или напоминания и отмечать, чтобы легче видеть прогресс

Изучение технологий #

HTML #

Пройти курс Основы HTML и CSS.
Установить редактор кода.

Редактор кода - это блокнот на стероидах. Я предлагаю использовать один из двух популярных.
Webstorm. Просто скачиваешь и работаешь, не требует доп. настроек. Обзор. Есть два варианты скачивания
Официальный. Не доступен из РФ.
Альтернативный с моего облака. Скачай версию для своей ОС
VS Code. Для тех, кто любит много настроек. В этом проекте можно сразу приступить к работе, в последующих понадобится ставить плагины. Инструкция по настройке тут

Посмотреть курс HTML c нуля и повторить за автором. Видео разбито по таймкодам, воспринимай их как подзадания и иди маленькими шажочками

CSS #

Изучить подробнее инструменты разработчика (до 8 минуты). Они пригодятся для удобной работы с HTML и CSS.
Посмотреть курс CSS для начинающих и повторить за автором. Видео разбито по таймкодам, воспринимай их как подзадания и иди маленькими шажочками

CSS Flexbox #

Посмотреть практический курс по Flexbox
Помочь лягушкам найти кувшинки: Flexbox Froggy

Git #

В этом проекте тебе пригодится всего 2 команды: git commit -m 'сообщеиние коммита' и git push. Остальное понадобится позже

Посмотреть теорию Основы GIT и Что такое GitHub?
Установить GIT. Видео с подробными шагами и настройкой для Windows
Пройти первые три задания в тренажере
1. Знакомство с git commit
2. Ветвление в Git
3. Слияния веток в Git

Выполнение проекта #

Некоторые пункты ссылаются на видео, но пересматривать видео не всегда удобно, обращайся к текстовой документации:
HTML
CSS
Шпаргалка по Flexbox
Рекомендую читать пару тем в день. Многое из материалов понадобится в будущих проектах

Посмотреть Figma для разработчика, изучить ТЗ и макет
Открыть редактор кода, создать index.html и styles.css файлы. Подключить файл стилей в html файл (см. раздел CSS п.2), открыть index.html в браузере
Подключить нормализующие стили (см. CSS п.6). Файл можно взять тут
Добавить градиентный фон на страницу (см. CSS п.13 и п.14)

Левый блок #

Создать контейнер левой панели, задать ему размеры и фон
Добавить скругление углов контейнера. Подробнее
Вставить фотографию и разместить её по центру. Подробнее
Добавить ФИО и должность
Подключить шрифт Play для всей страницы. (см. CSS п.10)
Настроить отступы между фото, именем и должностью. Должны быть кратны 4px
Создать контейнер для контактов
Сверстать один контактный блок
Создать остальные контактные блоки: скопировать HTML конструкцию из п.12, поменять текст и иконки
Проверить внутренние и внешние отступы для блока контактов
Сделать ссылки кликабельными, убрать подчеркивание и задать белый цвет
Добавить атрибуты для открытия ссылок в новой вкладке. Подробнее
Создать блок специализации
Создать блок языков
Создать блок соц. сетей
Проверить отступы, шрифты и соответствие макету левого блока

Правый блок #

Создать контейнер для правой панели, задать ему размеры и фон
Создать элемент правого блока на основе блока “Обо мне”
1. Создать блок заголовка с фиксированной шириной (темный блок с белым текстом)
2. Добавить центрированную линию с помощью flex выравнивания или абсолютного позиционирования
3. Добавить контейнер для контента блока и добавить текст
Добавить блок “Опыт” на основе п.2
Добавить блок “Образование”
Добавить блоки “Навыки” и “Хобби”
1. Создать круг навыка. Есть подсказка в макете
2. Проверить и настроить размеры и цвета круга
3. Добавить текст процентов внутрь круга с помощью flex
4. Добавить название навыка под круг
5. Использовать наработки из пунктов выше для остальных навыков
Проверяем адаптивность всего сайта. Как проверить адаптивность сайта. Интересует только первый раздел с Google Chrome

Публикация #

Зарегистрироваться на GitHub
Создать репозиторий на GitHub
Загрузить свой проект на GitHub следуя шагам на странице репозитория или этой инструкции

Готовые работы #

Обратная связь и контакты #

По любым вопросам пиши в чат Испытания багами, и подписывайся канал @js_is_easy