Домашнее задание № 1
1. Заполнить анкету участника курса https://forms.gle/bLFyuQkRqHMBcai19 Заполняйте реальными данными, чтобы не получить сертификат о прохождении курса на имя Васи Пупкина;
2. Установить на своём компьютере следующие программы:
- Visual Studio Code (VSCode) https://code.visualstudio.com/
- Sublime Text 3. Можете скачать на официальном сайте https://www.sublimetext.com/
Либо можете установить с сайта https://sublimetext3.ru/ посмотрев как настраивается этот редактор и какие у него возможности. (ссылка на скачивание внизу страницы этого сайта).
- NodeJs https://nodejs.org/en/ версию 12.13.0 LTS
- Git https://gitforwindows.org/ скачиваем. При установке ставим галочки на Additional icons и On the Desktop чтобы иконка была у вас на рабочем столе. Все остальные настройки по умолчанию. Нажимаете Next и в конце Install.
- Rubyinstaller https://rubyinstaller.org/downloads/. Нажимаете на «DownLoad» и выбираете первый пункт Ruby+Devkit 2.6.5-1 (x64). Скачиваете и устанавливаете.
- PostImages https://postimages.org/app. Это инструмент для скриншотов. Скачать и установить, нажав на сайте на setup.exe
- Open Server https://ospanel.io/download/ Версия Ultimate. Учтите, что весит 1409 мб. Поэтому если у вас трафик не безлимитный, то можете установить MAMP https://www.mamp.info/en/downloads/
- WinRar https://www.win-rar.com/predownload.html?&L=4 для архивации домашних заданий при необходимости отправки в архивированном виде.
- FileZilla https://filezilla.ru/get Программа для отправки файлов на хостинг (удалённый сервер).
- Discord https://discordapp.com/. После прохождения анкеты я вышлю ссылку с приглашением в дискорд. Это мессенджер. Будем общаться в нём
- Figma https://www.figma.com/ Это профессиональный инструмент для создания дизайна сайтов. Макеты для сайтов будут в фигме. Мы будем в нём работать.
3. Установите необходимые плагины для VSCode:
ü All Autocomplete
ü Auto Close Tag
ü Auto Complete Tag
ü Auto Rename Tag
ü Beautify
ü Code Runner
ü GitLens — Git supercharged
ü Import Cost
ü JavaScript (ES6) code snippets
ü jshint
ü Live Server
ü Multiple clipboards for VSCode
ü Path Autocomplete
ü Sass
ü vscode-icons
ü ESLint
4. Настройте Яндекс-диск или Google-диск. Создайте папку для хранения Ваших домашних заданий и дайте мне доступ к ней по ссылке. Моя почта чтобы дать доступ saulovdmitriy@gmail.com. После выполнения дз пришлите ссылку в дискорде.
5. Сделайте скриншоты установленных программ на рабочем столе и установленных плагинов в VSCode
Задание по вёрстке.
Изучаем:
- создание проекта и его базовую структуру;
- написание тегов
<div></div> - тег блочной модели вёрстки
<ul></ul> - тег списка
<li></li> - тег пункта списка
<a href=”#”></a> - тег ссылки
- вложенность тегов друг в друга;
<div>
<div>
</div>
<div>
<ul>
<li>
<a href=”#”></a>
</li>
<li>
<a href=”#”></a>
</li>
</ul>
</div>
</div>
- изучаем свойства: https://htmlbook.ru/css
ü width – ширина
ü height – высота
ü color – цвет
ü padding – внутренний отступ элемента
ü margin – внешний отступ от элемента до других элементов
ü background-color – цвет заливки блока
ü border-radius – скругление блока
ü text-align – выравнивание текста по горизонтали
ü line-height - устанавливает интерлиньяж (межстрочный интервал) текста. Позволяет выровнять текст по высоте внутри блока. Один из приёмов выравнивания по вертикали.
ü display: flex – позволяет элементам встать один за другим в линию. Используем в меню и некоторых блоках. Глубоко не изучаем на сегодняшний день. Это отдельная тема урока.
ü text-decoration – позволяет декорировать наш текст (в нашем задании к уроку позволяет убрать подчёркивание у ссылок)
ü text-transform – позволяет изменять текст на все заглавные буквы или все маленькие
ü list-style-type: none – убираем чёрные точки пунктов меню
ü font-size – размер шрифта
Используем единицы измерения пиксели - px
- выравнивание элементов внутри блоков и блоков между собой с помощью свойств margin и padding
Выполняем:
Создаём папку с проектом. Даём название homework-1
Открываем VSCode. Затем открываем папку с проектом (File -> Open folder -> homework-1).
Создаём 2 файла:
· index.html
· style.css
В index.html нажимаем знак восклицания (!) и нажимаем на клавишу Tab на клавиатуре. Должно получиться следующее:
Если не получается, то в правом нижнем углу будет надпись Plain text (обычный текст) нужно будет на неё нажать и выбрать формат HTML. После этого ещё раз повторить создание структуры.
После тега <title>Document</title> подключите файл стилей c помощью тега <link>
<link rel="stylesheet" href="style.css">
Сохраните проект. Используйте сочетание горячих клавиш Ctrl + S
Создаём следующую структуру:
Див с классом block-1
Див с классом logotype
Тег списка с классом menu
Тег пункта списка с классом menu__list
Тег ссылки с классом menu__link и в атрибуте ставим заглушку #. Внутри тега ссылки пишем название ссылки Главная
Тег пункта списка с классом menu__list
Тег ссылки с классом menu__link и в атрибуте ставим заглушку #. Внутри тега ссылки пишем название ссылки Услуги
Тег пункта списка с классом menu__list
Тег ссылки с классом menu__link и в атрибуте ставим заглушку #. Внутри тега ссылки пишем название ссылки Новости
Тег пункта списка с классом menu__list
Тег ссылки с классом menu__link и в атрибуте ставим заглушку #. Внутри тега ссылки пишем название ссылки Контакты
Создаём див с классом block-2
Див с классом box-1 и текстом Текст 1
Див с классом box-2 и текстом Текст 2
Див с классом box-3 и текстом Текст 3
Не забывайте закрывать теги в нужных местах.
Смотрите внимательно пункт - вложенность тегов друг в друга;
Переходим в файл со стилями style.css
Стили пишутся следующим образом:
Если мы пишем стили для тегов, то точка впереди не ставится.
Точка ставится только перед классом.
Далее открывается фигурная скобочка и внутри пишется свойство, за ним двоеточие, после значение этого свойства. В конце строки ставится точкой с запятой. Затем закрывается фигурной скобочкой.
.class {
Название свойства: значение;
}
Для тега body
создаём заливку цветом #f09ff0;
Для класса block-1
display со значением flex
ширина 960 пикселей
высота 100 пикселей
заливка цветом #2196f3
внешний отступ от элемента снизу до других элементов 50 пикселей
Для класса logotype
ширина 80 пикселей
высота 80 пикселей
заливка цветом #222
внешний отступ до других элементов 10 пикселей
скругление 40 пикселей
Для класса menu
display со значением flex
внешний отступ сверху 42 пикселя
внешний отступ слева 330 пикселей
Для класса menu__list
Убираем чёрные точки пунктов меню
Для класса menu__link
Цвет ссылок #fff
Внутренний отступ 10 пикселей
Заливка цветом #adde4d
Внешний отступ 10 пикселей
Убираем подчёркивание ссылки
Трансформируем текст на все заглавные
Для класса block-2
display со значением flex
ширина 960 пикселей
высота 300 пикселей
заливка цветом #2196f3
Для класса box-1
Ширина 200 пикселей
Высота 100 пикселей
Заливка цветом #eee144
Внешний отступ 20 пикселей
Размер шрифта 20 пикселей
Для класса box-2
Ширина 150 пикселей
Высота 150 пикселей
Заливка цветом #adde4d
Внешний отступ 20 пикселей
Выравнивание текста по правому краю
Размер шрифта 30 пикселей
Для класса box-3
Ширина 120 пикселей
Высота 120 пикселей
Заливка цветом #84e6e2
Внешний отступ 20 пикселей
Выравнивание текста по центру
Скругление 60 пикселей
Выравнивание по вертикали 120 пикселей
Размер шрифта 15 пикселей
Всё использовано в ярких цветах чтобы вы обратили внимание где у вас внутренние отступы, внешние отступы. Заливка цветом у блоков чтобы видеть границы.
Написанное задание направлено на быстрое запоминание свойств и значений путём повторения. Используются практически одни и те же свойства.
В итоге должно получится следующее
В дальнейшем все свойства и приёмы будут использовать нами в вёрстке макетов.