Базовый курс по созданию сайтов с помощью html и css

Начать этот курс бесплатно

Как мы обучаем?

Базовый курс предназначен для тех, кто делает первые шаги в создании веб-сайтов. Он состоит из 13 коротких видеолекций и 14 интерактивных заданий, которые позволят научиться элементарным принципам веб-разработки с нуля. Это иллюстрированное введение, изложенное простыми словами, станет вашим проводником в мир веб-проектов.

- Вы познакомитесь с базовыми тегами языка html;

- сможете выбрать удобные инструменты для веб-разработки;

- научитесь менять оформление вашей будущей интернет-страницы с помощью таблицы стилей css; - узнаете, как создавать меню и списки в html; - научитесь вставлять картинки и ссылки на свою страницу;

- научитесь верстать слоями и использовать классы;

- поэкспериментируете с цветами и шрифтами;

- узнаете, как добавить красивый фон и привлекательные кнопки;

- познакомитесь с основными принципами верстки интернет-страниц

Курс содержит серию практических заданий, выполнив которые вы сможете создать свой первый сайт.

  • 13 видео

  • 14 интерактивов

  1. 1

    Создание своего сайта. Введение.

    Видео лекция

    Вступительные слова к курсу по созданию продающего сайта от cleverbear.ru

  2. 2

    Теги в html

    Видео лекция

    Первый урок по созданию своего сайта. Учимся писать теги.

  3. 3

    Учимся писать теги

    Интерактивное задание

    Написать тег h1 с содержимым "Ягоды, собранные с любовью"

  4. 4

    Учимся использовать тег style

    Видео лекция

    Учимся стилизовать теги с помощью тега style

  5. 5

    Тег style

    Интерактивное задание

    Сделайте цвет параграфа серым с помощью тега style.

  6. 6

    Учимся создавать базовую html разметку

    Видео лекция

    Изучаем теги html, head, body.

  7. 7

    Базовая разметка

    Интерактивное задание

    Добавьте недостающие теги так, чтобы html код был корректным.

  8. 8

    Выбираем инструменты для веб-разработки

    Видео лекция

    Скачиваем sublimetext на sublimetext.com и настраиваем его для работы.

  9. 9

    Списки в html

    Видео лекция

    Создаем разметку меню сайта с помощью списков. Изучаем вложенные списки с помощью тегов ol и ul.

  10. 10

    Списки

    Интерактивное задание

    Создайте нумерованный список и внутри него обычный.

  11. 11

    Добавляем картинки и ссылки в html

    Видео лекция

    Учимся использовать теги и в html разметке

  12. 12

    Практикуем тег <a>

    Интерактивное задание

    Напишите тег h2 c содержимым "поиск" и сделайте так, чтобы он являлся ссылкой на сайт ya.ru

  13. 13

    Практикуем тег <a> и тег <img>

    Интерактивное задание

    Вставьте картинку с адресом /files/image.jpg и сделайте так, чтобы она являлась ссылкой на сайт cleverbear.ru

  14. 14

    Изучаем тег div и классы в html

    Видео лекция

    Учимся верстать слоями и использовать классы в при создании html страницы

  15. 15

    Блочные теги. Классы

    Интерактивное задание

    Создать слой с классом red, указать ему красный цвет фона и высоту в 40px.

  16. 16

    Изучаем margin padding и border

    Видео лекция

    Создаем основную структуру сайта с помощью margin, padding и border. Изучаем box-model.

  17. 17

    Практикуем margin padding

    Интерактивное задание

    Указать у верхнего блока margin снизу — 20px и padding — 10px. У блока с классом content указать padding равный 40px, а у нижнего блока указать верхний margin — 20px, а padding равный 20px;

  18. 18

    Практикуем border

    Интерактивное задание

    Указать у верхнего блока border толщиной 3px черного цвета, а у нижнего сделать верхнюю границу красного цвета толщиной 5px.

  19. 19

    Типографика и шрифты в CSS

    Видео лекция

    Учимся работать с текстом и шрифтами в CSS. Изучаем свойства text-align, font-family, font-size

  20. 20

    Типографика и шрифты

    Интерактивное задание

    Укажите у контента внутри блока с классом vinni выравнивание по правому краю, размер шрифта равный 18px и шрифт Georgia из семейства serif.

  21. 21

    Margin: 0 auto и свойство background в CSS

    Видео лекция

    Создаем блоки container, распологаем их по центру страницы и создаем фоновую картинку в CSS с помощью свойства background.

  22. 22

    Учимся создавать контейнеры и фоновое изображение

    Интерактивное задание

    Создайте блок, шириной 240px, расположите его по центру и задайте ему фоновую картинку, расположенную по адресу /files/bg.jpg

  23. 23

    Создаем привлекательную кнопку с помощью CSS

    Видео лекция

    Изучаем псевдоклассы hover и active для создания интерактивной кнопки

  24. 24

    Создаем кнопку из ссылки

    Интерактивное задание

    Создайте кнопку, у которой отступы сверху и снизу равны 14px, а справа и слева — 50px. Укажите у нее цвет фона #c0392b, белый цвет текста, размер шрифта 26px, уберите подчеркивание ссылки и задайте границу снизу цветом #333 и шириной 3px.

  25. 25

    Изучаем псевдоклассы :hover и :active

    Интерактивное задание

    С помощью псевдокласса hover измените цвет фона кнопки при наведении на #e04331 и с помощью псевдокласса active уберите нижнюю границу кнопки при нажатии.

  26. 26

    CSS свойство float

    Видео лекция

    Изучаем свойства float и clear с помощью которых создаем меню сайта и текстовые блоки

  27. 27

    Учимся использовать float

    Интерактивное задание

    Расположите красные квадраты горизонтально, а синий квадрат под красными с помощью свойств float и clear.

Отзывы о курсе

  • Avatar

    Миша Левчук

    Получил письмо с обновлением и добавлением нового курса. Отлично! Так держать! Вы мегамолодцы за то, что продвигаете идею таких уроков, и еще больше респект за то, что делаете это по своему, не копируя других!

  • Avatar

    Сергей

    Здравствуйте, cleverbear! Хочу вас поблагодарить за такое доходчивое объяснение основных вещей по HTML. Замечательный курс для начинающих! Для примера: на работе я потратил часа 3 на серфинг только для того, чтоб понять с чего начинать учить и так толком и не разобрался, а после тех же 3-х часов, как я наткнулся на ваш сайт (именно столько мне понадобилось, чтобы пройти все 27 уроков), я уже примерно представляю что хочу и куда копать за этим. Так держать! С нетерпением жду новых курсов!

  • Avatar

    Чингиз

    Добрый день! Курсы очень понравились. Объясняют легким и доступным языком. Все просто и понятно. За рекомендацию Sublime Text отдельное спасибо! Уже взял на вооружение. Единственное что хотелось бы добавить, так это материалы к обучению. Например, если хочу сразу перейти на тему float, можно было скачать уже весь html текст и начинать работать, вместо того чтобы заново печатать. Удачи вам в будущем!

  • Avatar

    Дмитрий

    Спасибо большое за проделанную вами работу. Мне понравилась идея Cleaver Bear и я с удовольствием прошел базовый курс по созданию сайтов. Особенно мне понравилось то, что сразу после просмотра видео есть возможность потренироваться во встроенном редакторе. Правда, из данного курса явно не следует, что нужно создавать такой же промо-сайт параллельно просмотру уроков. Но я все равно его сверстал. И мне не совсем понятно, зачем вашему проекту нужен курс по построению массового продукта. На мой взгляд, он не имеет отношения к созданию сайтов и веб-разработке. Очень хотелось бы, чтобы на сайте появились курсы более продвинутого уровня, а также курсы по PHP, по веб-дизайну. А в дальнейшем и по Javascript, jQuery и т.д.