Проект 0: Домашняя страница

Цели

• Более уверенное использование HTML и CSS, для дизайна и стилизации веб-страниц.
• Получить опыт в работе с git, GitHub и GitHub Pages, тем самым приобретая навыки развертывания в интернете веб-страниц.
• Научиться использовать SCSS, для написания более сложных таблиц стилей.

Получение Помощи

Если вам понадобится помощь в работе над проектом, можете спокойно воспользоваться следующими ресурсами (их не так много :D):

• Группа в телеграмме, ссылку можно получить у TF.

С чего начать

git и GitHub

Если у вас еще нет аккаунта на GitHub'е, направляйтесь сюда https://github.com/join и создайте учетную запись. Этот аккаунт будет вашей звездой, направляющей вас в океане знаний к прекрасному причалу иррудиции, где вас будут ожидать задания, которые вы далее будете отправлять и получать за это редчайшие дублоны. Другими словами, через эту учетную запись вы будете работать с заданиями, отправлять их и получать оценки.

Также вам нужно будет удостовериться, что на вашем компьютере установлен git. Перейдите по ссылке с *инструкцией* от GitHub'а, для установки и настройки git'а (если он, конечно, еще у вас не установлен) и подключите к вашему git'у учетную запись GitHub'а (указав никнейм и email).

GitHub Classroom (Виртуальный класс от Гитхаба)

На этом курсе мы будем использовать GitHub Classroom (Виртуальная Аудитория), для выдачи проектов и собирания готового к проверке материала. Для того, чтобы начать работу над "Проект 0":

1. Нажмите сюда, чтобы попасть на страницу GitHub'овской аудитории (GitHub Classroom), дабы вы могли приступить к выполнению задания.
2. Нажмите на зеленую кнопку “Accept this assignment” (Принять задание). Таким образом вы создадите Github'овский репозиторий для вашего проекта. Имейте ввиду, что git'овский репозиторий - это всего лишь место, где будет храниться ваш код и благодаря которому вы сможете отслеживать вносимые вами изменения, которые, несомненно, со временем будут иметь место быть.
3. Нажмите на следующую за данным текстом ссылку “Your assignment has been created here” (Ваше задание было создано и находится здесь), которая перенаправит вас на страницу GitHub'овского репозитория, где и будет храниться ваш проект. GitHub'у понадобится всего лишь несколько секунд для того, чтобы закончить создание вашего репозитория.
4. В правом верхнем углу страницы репозитория нажмите на кнопку "Fork" (Ответвление/Развилка/Вилка), а затем (если вас попросят) кликните на ваш никнейм. Так вы создадите ответвление (Fork) вашего проектного репозитория, т.е. версию репозитория, которая будет принадлежать именно вашему GitHub аккаунту.
5. Теперь вы должны видеть новый заголовок GitHub репозитория, а именно username/project0-username, где username (никнейм) является вашим GitHub'овским никнеймом. Это будет репозиторий, куда вы будете отправлять (push) весь ваш код, в процессе разработки проекта. Работая над проектом, не пытайтесь публиковать (push) вашу работу напрямую в репозитории makeweb50/project0-username: всегда публикуйте (push) свой код в вашем репозитории username/project0-username.
6. Далее, давайте настроим функию GitHub Pages (Страницы ГитХаб) для вашего репозитория. Нажмите на вкладку “Settings” (Настройки), которую вы найдете на странице репозитория. Прокручивайте страницу вниз, пока не увидите “GitHub Pages” (Страницы Гитхаб). Установите “Source” (Источник) на “master branch” (ветка master или главная ветка) и кликните на “Save” (Сохранить).
7. Если вы еще раз, находясь на той же странице, прокрутите вниз к "Github Pages" (Страницы Гитхаб), то увидите URL (ссылку), на которой будут (скоро) обитать ваши GitHub страницы! Но сперва, нам понадобится добавить немного HTML в ваш репозиторий.

Ваша Первая Веб-страница

Отлично, теперь давайте добавим простую веб-страницу в ваш репозиторий. Сперва, находясь на вашей главной странице репозитория (https://github.com/username/project0-username), кликните на зеленую кнопку “Clone or download” (Клонировать или скачать). Скопируйте ссылку под заголовком “Clone with HTTPS” (Клонировать вместе с HTTPS) в ваш буфер обмен (если вам не чужд SSH, вы можете воспользоваться и им).

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

git clone repository_url project0

где repository_url - это ссылка, которую вы только что скопировали с GitHub'а. Вас попросят ввести никнейм и пароль от вашей учетной записи GitHub'а

Если вы не хотите каждый раз, клонируя репозиторий, вводить логин и пароль от вашей учетной записи GitHub'а, вы можете, если хотите, подключиться к GitHub'у через SSH. Больше инфы об этом вы найдете *здесь*.

Выполните команду cd project0, чтобы попасть в ваш репозиторий. Теперь, выполните

touch index.html

чтобы создать новый файл index.html в вашем репозитории. Откройте файл, используя ваш любый текстовый редактор: среди них может быть Atom, Sublime Text и VS Code. Затем добавьте в ваш html-файл следующий контент:

<!DOCTYPE html>
<html>
<head>
<title>Моя Веб-страница</title>
</head>
<body>
Привет, мир!
</body>
</html>

Потом сохраните ваш файл index.html.

Хорошо, пришло время опубликовать ваш HTML-файл в ваш GitHub'овский репозиторий! В вашем терминальном окне, находясь в папке project0, запустите команду:

git add index.html

чтобы дать знать git'у, что вы хотите включить index.html в ваш следующий commit (коммит/сохранение/фиксация) для данного репозитория. Давайте выполним:

$ git commit -m "Add first webpage"

чтобы коммитнуть ваши изменения в этот репозиторий. Строка, идущая после -m, представляет из себя ваше коммитное сообщение, короткое описание изменений, внесенных вами через данных коммит. Написание сжатого, информативного коммитного сообщения, позже поможет вам в работе со старыми версиями вашего кода!

Теперь, давайте опубликуем (push) наши изменения в online-среду. Выполните:

$ git push

и ваш коммит опубликуется/будет помещен (push) на GitHub и развернется на GitHub Pages (Страницах Github). Если вы зайдете на GitHub'овскую страницу с репозиторием и затем перейдите по GitHub Pages link (ссылке на Страницы GitHub), которая ранее была для вас сгенерирована, перед вами должна появиться страница, которая содержит только "Привет, Мир!” с заголовком “Моя Веб-страница”. Теперь ваша страница находится в интернете!

Требования

Отлично, пришло время сделать веб-сайт и он будет таким, каким вы хотели бы его видеть. Создайте личную веб-страницу, где была бы информация о вас, какое-нибудь ваше увлечение или же тема, которая вам более других нра :D . Вид, дизайн и атмосферу сайта можете реализовывать как хотите, но общая тема сайта должна отвечать следующим требованиям:

• Ваш сайт должен содержать как минимум четыре различных .html страниц, включая возможность переходить с какой-либо страницы на любую другую веб-страницу вашего сайта, с помощью одной или большего числа гиперссылок.
• Ваш веб-сайт должен включать хотя бы один список (упорядоченный или неупорядоченный), минимум одну таблицу и одно изображение.
• Ваш сайт должен содержать хотя бы один файл с таблицей стилей (CSS).
• Ваша(и) таблица(ы) стилей должна(ы) содержать хотя бы пять различных CSS-свойств и хотя бы пять различных типов CSS-селекторов. Вы должны использовать хотя бы один раз селектор #id, а также как минимум селектор .class.
• Ваша(и) таблица(ы) стилей должна(ы) включать как минимум один адаптивный @media запрос, который будет работать так, что стиль вашего сайта будет меняться под меньшего размера экраны.
• На вашем сайте вы должны применить Bootstrap 4, задействую хотя бы один Bootstrap'овский component (компонент) и используйте как минимум два Bootstrap'овских столбца, для размещения элементов в соответсвии Bootstrap’овской grid-моделью.
• Ваши таблицы стилей должны содержать как минимум одну SCSS переменную, один пример реализации SCSS вложенности (nesting) и хотя бы один пример реализации SCSS наследования.
• В файл README.md, включите короткое описание вашего проекта, что хранится в каждом файле и (по желанию) какую-нибудь еще дополнительную информацию о вашем проекте, которую вы хотели бы сообщить нашим сотрудникам.

Имейте ввиду, что не все вышеприведенные требования были разобраны на Лекции 0, некоторые будут рассмотрены на Лекции 1.

FAQи

Здесь будут публиковаться ответы на часто задаваемые вопросы!

Как Отправить

Шаг 1 из 2

1. Перейдите на страницу GitHub'а, где находится ваш репозиторий username/project0-username (заметка: не перепутайте с репозиторием makeweb50/project0-username).
2. На правой стороне экрана кликните по кнопке "Pull request" ("Принятие изменений").
3. Обязательно удостоверьтесь, что “base fork” (основной fork) - это makeweb50/project0-username и “head fork” (головной fork) - это username/project0-username.
4. Кликните по “Create pull request”.
5. На следующей странице вам опять придется нажать на кнопку “Create pull request”.

Шаг 2 из 2

Заполните данную форму!

Поздравляем! Вы завершили Проект 0.