Сегодня мы разберем, как создать первый проект по верстке. Первым делом нужно организовать систему папок и файлов, чтобы потом не потеряется в наших проектах.
1) Создаем общую папку проекта, можете назвать ее как-нибудь на свое усмотрение, либо же чтобы передавало суть проекта к примеру я создам папку с названием"FirstProject", здесь я как раз передаю суть проекта, то есть "ПервыйПроект".
2) Заходим в проект и создаем папку для исходников. Исходники - это различные материалы необходимы для работы - это макеты дизайна, техническое задание, шрифты и прочие материалы. Я назову папку "Sourse", что и означает исходник. Рядом создаем рабочую папку проекта с тем же названием, что и сам проект. Тут же можно создать текстовый файлик назовём его "info.txt", туда я записываю разную информацию о проекте(Бюджет, сроки, контакты, правки и т.д.)
3) Вернемся к проекту, заходим в него и создаем ряд папок для удобной организации файлов. Создаем "css" где впоследствии будем хранить каскадные таблицы стилей. Папку "js" где будем хранить наши скрипты и еще две папки, "img" для картинок и иконок, и "fonts" для хранение подключаемых шрифтов. С папками покончено и теперь мы можем создать первый "Html" файл => index.html.
4) Перенесем наш проект в редактор кода, я использую "sublime text 3". Открываем наш "index.html" двойным кликом и мы готовы кодить. Сейчас мы напишем минимум кода, но с каждой новой статьей будем увеличивать объем.
5) Используем сочетание клавиш "shift + 1" и нажимаем "Tab", у нас появляется шаблон для сайта. Серым текстом я написал комментарий по каждой строчке кода.
6) Наш маленький "index.html" настроен и полностью готов к работе, мы можем написать какое-нибудь первое приветствие. Внутри тела "body" создаем тег "h1" (заголовок) и нажимаем "tab". Мы видим, что у нас появилось две надписи <h1> и </h1> это означает что у данной записи есть открывающий и закрывающий тег, о разновидностях тегов можно посмотреть здесь. Между тегами можем написать текст и сохраняем документ нажав "Ctrl + S" в редакторе кода.
7) Далее мы переходим в наш проект который мы создали на нашем диске и открываем наш файлик с помощью любого браузера. Мы видим, что в теле страницы отобразился наш текст, который мы написали внутри тега-заголовка "h1", а сверху в заголовке окна браузера мы должны увидеть содержимое тега "title".