# Неделя #1: Хостинг. Работа с путями

# Задачи на неделю:

  1. Внимательно изучить все материалы первой недели:

    • Видеокурс «VSCode. Обзор редактора».
    • Видеокурс «Устройство интернета».
    • Видео-урок «Работа с GitHub Pages»
    • Видеокурс «HTML».
    • Воркшоп «БЭМ. Разметка элементов страницы».

  2. Выбрать макет для реализации на этом курсе (можно выбрать один из предложенных):

  3. Создать аккаунт на GitHub и необходимые репозитории в нем.

  4. Написать разметку для Главной страницы проекта.

  5. Загрузить в репозиторий и опубликовать выполненные задания.

  6. Познакомиться с наставником и коллегами.

  7. Не бояться искать вопросы в сети и экспериментировать с решениями!

# 🗓 Вторник

  1. Установить редактор кода. На курсе вам представлен видеокурс по работе с VSCode: мы рекомендуем ознакомиться с его работой за время обучения.

  2. Подобрать комфортную для работы цветовую схему редактора

  3. Посмотреть видео-курс по работе с редактором VSCode и пройти тест.

  4. Установить скриншотер (потребуется для работы с наставником или коллегами)

    Joxi / Monosnap / Lightshot / Яндекс.Диск

# 🗓 Среда

  1. Посмотреть видеокурс «Устройство интернета» и пройти тест к нему.
  2. Посмотреть видео-урок «Работа с GitHub Pages»
  3. Зарегистрировать аккаунт на GitHub
  4. Создать репозиторий для будущего проекта (название можно выбрать произвольно).

# 🗓 Четверг

Посмотреть видеокурс HTML и пройти тест.

Выбрать 1 из 3 макетов, над которым вы будете работать во время курса.

Выполнить Задание #1 и отправить его на проверку наставнику.

# Задание #1:

Загрузить на хостинг (GitHub Pages) необходимые файлы и папки, чтобы получилась следующая структура

.
├─ folder
│  └─ inner
│     └─ index.html
└─ img
   ├─ img1.png
   └─ img2.png

# Реализация

В файл index.html вставить 2 картинки при помощи тега <img>

Путь к первой картинке должен быть абсолютным, а ко второй - относительным

Также в файл вставить тег <h1> и тег <p> с произвольным содержанием

# Результат

  • Итогом работы будет считаться:

  • ссылка на веб-ресурс вида: http://%имя-вашего-аккаунта%.github.io/%имя-проекта%/folder/inner

В котором отображены 2 картинки и текстовое содержание тегов <h1> и тег <p>

Картинки могут быть произвольные, формата jpg либо png

Подсказка: если у вас не получается выполнить задание, то попробуйте пересмотреть видео #12 в видеокурсе HTML.

Обратите внимание

Стоит сразу взять себе за правило никогда не использовать в именах файлов и директорий следующие вещи:

  • Кириллицу
  • Пробелы
  • Буквы разных регистров
  • Транслит

Т.е стараться называть файлы латинскими буквами, английским языком и в нижнем регистре (иногда некоторые соглашения в командах диктуют называть файлы с большой буквы, но это скорее - исключение). Если в имени несколько слов, то используйте знак нижнее подчеркивание "_", либо тире "-".
К примеру, название файла user-avatar-preview.jpg - отличное название, а
cartinka Dla-polZovatela11.png - не очень.

# 🗓 Пятница

Посмотреть воркшоп «БЭМ. Разметка элементов страницы»

Начать работать над Заданием #2.

# Задание #2:

# Реализация

  • Для данного проекта нужно создать отдельный репозиторий в вашем аккаунте GitHub (и привязaть к нему GitHub Pages)

  • Верстка всей страницы не лежит прямиком в <body> , а должна быть обернута каким-либо блоком, например, тегом <div> с классом .wrapper

  • Элементы, имеющие одну смысловую нагрузку и представленные несколькими экземплярами (меню, иконки соц. сетей и т.п ), размечаются в виде списка с использованием тегов <ul> и <li>

  • Элементы, отображающие информацию одного и того же типа, должны быть размечены идентично, т.е. разметка их элементов и их классы - совпадают

  • Страничку назвать index.html и загрузить в репозиторий GitHub.

# Результат

  • ссылка на главную страницу вида: http://%имя-вашего-акканута%.github.io/%имя-проекта/

  • HTML документ содержит разметку для главной страницы (теги и верные имена классов для них)

Обратите внимание

  • Главной страницей сайта считается та страница, на которую попадает пользователь после прохождения авторизации либо после перехода по ссылке из приветственной страницы, как правило, содержит важный для пользователя контент и остальные внутренние страницы похожи на нее по своей структуре.

  • Выполнить разметку страницы — создать в HTML-коде необходимые для последующей стилизации блоки, теги, и соответствующие имена классов к ним.

В качестве хостинга мы предлагаем работать с GitHub Pages, так как это бесплатный и современный сервис. Но если вы хотите научиться работать с хостингом в "традиционном" понимании, то нужно выполнить следующие шаги:

  • Посмотреть видеокурс «Работа с хостингом» и пройти тест.

  • Выбрать и оплатить хостинг (либо найти бесплатный)

  • Зарегистировать домен и привязать к хостингу

  • Установить ПО для работы с хостингом (любой FTP-клиент)

    FileZilla / Cyber Duck / Total Commander

# Выходные

  • Выполнить Задание #2.

  • Сдать проект на проверку.

  • Задать вопросы, которые появились за время выполнения, и в случае необходимости записаться на индивидуальный созвон.

# Результат

Неделя #2: Разметка и стилизация →