Застрял на Уроке №6 Сетка.

Здравствуйте. Подскажите пожалуйста, я застрял на уроке №6, а именно (Сетки). Мне непонятно следующее, по шагам:

  1. В видео, изображён, новый html файл, ( http://prntscr.com/kal5uk ) где в head, аналогичные подключения как и в исходном файле (index.html). Вопрос: откуда и зачем создавать новый index.html и как его назвать? Где данный файл разместить и что мы в нём прописываем? Дело в том, что я проделываю всё аналогично, но первичное построение блоков остаётся на месте, изменений просто нет, как было колбаской, так и осталось после стилизации по данному уроку. Что я делаю не так, я просто уловить суть, в данном моменте не могу.

  2. Перед тем как вставить скриншот «Барбершопа», необходимо всё удалить и создать новый html файл, дело в том, что когда я задаю путь в css/style.css для отображения скриншота, поверх действующей вёрстки, ничего не добавляется и остаётся как есть. Вот скриншот style.css (http://prntscr.com/kalazj), результат после вставки скриншота (http://prntscr.com/kalbk8).

То-есть, определённые моменты, меня поставили в тупик в этом месте и я расстроен и двигаться далее не могу, пока не пойму, почему у меня не происходят должные изменения, если я всё делаю как описано в данном уроке.

Самое главное, я не могу понять, что это за новый html (http://prntscr.com/kald5x) куда данный файл поместить, как функционирует с основным index.html, ну с style.css, здесь всё понятно как связывается.

Касательно outline.css я вообще не понял, зачем он нужен, если служит и выполняет функции второго style.css. Запутался в этом моменте. Разъяснений, что и куда сохранять в уроке нет.

Буду Вам очень признателен, если Вы мне поможете понять, что я делаю или сделал не так. И как необходимо сделать. Спасибо, буду ждать Вашего ответа.