Уроки HTML, CSS / Делаем сайт визитку за 5 минут! - от ИТ профессионала
Как за 5 мин сделать сайт визитку с классным задним фоном?!
В этом видео я рассказываю, как за буквально за 5 минут сделать сайт визитку с классным задним фоном. Это действительно 5 минут, если оставить только все важное. Сделать можно быстро и потратить на это минимум времени!
Обязательно используем удобные инструменты для редактирования веб страниц – такие, как например редактор Brackets с двумя дополнениями: Emmet – для ускорения написания кода HTML и Beautify – для красивого оформления кода.
Для создания сайта визитки воспользуемся фреймворком Bootstrap.
Делаем следующие:
1. Открываем пример с сайта фреймворка Bootstrap - Prices.
2. Кликаем Правой кнопкой мыши – Посмотреть код страницы.
3. Весь код страницы копируем.
4. В редакторе Brackets вставляем скопированный код и сохраняем страницу на рабочий стол в свою папку site2 под именем .
5. Открываем страницу в браузере – двойной клик по файлу .
6. Видим, что она отобразилась без оформления – значит не подгрузились CSS стили. В код подключения стилей добавляем url сайта Bootstrap – это делаем в двух местах.
7. Сохраняем – и видим, что теперь страница правильно отображается.
8. Теперь меняем название компании – прямо в коде редактируем текст и сохраняем.
9. Добавляем телефон вместо правой части меню.
10. Редактируем заголовок h1 страницы – меняем его на свой.
11. Редактируем абзац, следующий за заголовком h1.
12. Сохраняем и проверяем что на экране тот текст, который мы ввели.
13. Теперь выбираем картинку для заднего фона, я для демонстраций взял картинку с Яндекс Картинок.
14. Для того, чтобы текст на картинке читался и был виден, саму картинку необходимо сделать либо светлой, либо темной. Для этого использовался онлайн редактор фотошоп. Редактор - меню Корекции - пункт Уровни. Двигая ползунок влево – получаем картинку в светлых тонах, двигая в право – картинку в темных тонах. Затем картинку сохраняем в той же папке что и файл.
15. Для определения заднего фона сайта используется назначение стиля на тег body.
16. Для живого просмотра наших изменений – это можно делать в отладчике страницы. Нажимаем правой кнопкой мыши и выбираем пункт «Исследовать элемент».
17. Тегу body назначили следующие стили:
background-image: url();
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
18. Сохранили и проверили – все ОК. Теперь у нас рабочий сайт визитка с классным задним фоном.
Подписывайтесь на наш канал в YouTube:
Вступайте в нашу группу ВК:
Задавайте вопросы – постараюсь ответить 😊
Удачи в таких классных начинаниях!
7 views
134
27
5 months ago 00:32:16 1
СОЗДАНИЕ МУЗЫКИ В FL STUDIO. Самый понятный урок.
5 months ago 00:28:38 1
Как играть: Ария - Беспечный ангел на гитаре | Разбор+Табы+Соло | Видеоурок
5 months ago 00:12:57 1
Глагол to be в прошедшем времени. Английская грамматика. Видеоуроки Myefe.
5 months ago 00:07:16 1
Metallica - Nothing else matters. Как играть 2 часть (видео урок)
5 months ago 00:02:38 1
Обычный автобус Аккорды Армейская песня Разбор на гитаре Бой Текст
5 months ago 00:23:25 1
Как легко играть: THE LAST OF US на гитаре | Подробный разбор
5 months ago 00:29:12 1
Как играть: ДДТ - ЭТО ВСЁ на гитаре | обучающий урок
5 months ago 00:16:04 1
Урок 1/2 игры НА ГИТАРЕ ДЛЯ НАЧИНАЮЩИХ. Игра на гитаре с нуля Просто, Легко и Интересно!
5 months ago 00:18:12 1
Урок 1/1 игры НА ГИТАРЕ ДЛЯ НАЧИНАЮЩИХ. Игра на гитаре с нуля Просто, Легко и Интересно!
5 months ago 00:07:00 1
Уроки французского #64: Местоимения. Прямое и косвенное дополнение (2)
5 months ago 00:23:33 1
Урок#124: Conditionnel passé / Условное наклонение прошедшего времени. Французский язык
5 months ago 00:05:49 1
Разминка для детей перед тренировкой по гимнастике дома. Онлайн урок по художественной гимнастики
5 months ago 00:23:45 1
ДОЛГОЖДАННЫЕ НОВОСТИ!!! ПРО ВСЁ-ВСЁ-ВСЁ!!! С ПРИВЕТОМ ИЗ МАЙКОПА!!!
5 months ago 00:12:39 12
Методы изучения природы
5 months ago 00:06:10 1
МАГНИТНАЯ ИНДУКЦИЯ 11 класс физика сила Ампера сила Лоренца
5 months ago 00:28:17 1
Урок “Карандашный рисунок из фотографии в фотошопе“.
5 months ago 00:32:08 1
Шляпка спицами для кукол Паола Рейна и игрушек амигуруми
5 months ago 00:00:56 1
Как вы запихиваете в жизнь близких негатив #shorts
5 months ago 00:01:00 1
Будут скрипеть, но жить #shorts
5 months ago 00:13:44 1
Строение голосового аппарата. Гортань и голосовые связки🗣