Веб разработка с нуля - изучите HTML5 & CSS3 за 2 часа

Name: Веб разработка с нуля - изучите HTML5 & CSS3 за 2 часа
Rating: 4.1 (75 reviews)

Сделаем первый шаг на пути веб-разработчика: изучим HTML, CSS, GIT, сделаем свой первый сайт вместе!

Created byAnna Rus

Last updated 5/2020

Russian

What you'll learn

создавать свои web-страницы с помощью HTML5
разбираться в макетах от дизайнера
стилизовать с помощью CSS3
публиковать свои проекте в GIT

Course content

5 sections • 53 lectures • 2h 43m total length

Введение1:21
Подготовка к работе1:17
Знакомство с инструментами2:01

HTML Теги3:39
Структура HTML документа2:26
Атрибуты1:36
Ссылки5:23
Заготовку для проекта, который используется в лекции, можно скачать в этом же уроке
Ссылки
Списки2:42
Изображения4:51
Блочные и строчные элементы3:41
Навигация2:52
Делаем header2:55
Вырезаем изображения из Figma1:54
Делаем раздел "Our Service"4:24
Раздел "Our Clients"
Раздел "Our Team"
Раздел "Footer"3:12
Validator2:38
Консоль разработчки1:48

Селекторы5:41
Селекторы
Подключаем CSS1:28
Подключаем шрифт3:29
Переносим шрифты - body2:05
Перенос шрифтов - header & our service3:36
Доделать перенос шрифтов у раздела "Our Service" & "Our Team"
Подключаем normalize.css0:35
Вес селекторов4:20
Вес селекторов
Свойства селекторов - width & height5:34
Width
Свойство text-decoration1:23
Псевдоклассы для поведения (:hover, :focus, :active)3:49
Как задавать цвета5:33
Стилизуем ссылки2:40
Свойство background4:36
Свойство padding3:29
Свойства border1:25
Стилизуем кнопку3:56
Стилизовать кнопку contact us
Свойство margin1:28
Свойство display2:10
Flex-контейнеры3:20
Свойства для самостоятельного изучения:
flex-direction - https://webref.ru/css/flex-direction
flex-grow - https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow
Visually-hidden1:05
Задаем размеры для img2:40
Задать размеры изображениям в разделе "Our Service"
Задать размеры изображениям в разделе "Our Clients"
Задать размеры изображениям в разделе "Our Team" & Footer
Делаем Header - часть 18:07
Делаем header - часть 21:33
Position2:25
Псевдоэлементы3:22
Делаем заголовок для section5:07
Доделать заголовки в остальных section
Делаем раздел "Our service"10:57
Делаем раздел "Our Clients"5:30
Сделать раздел "Our team"
Сделать "Footer"

Что такое GitHub0:45
https://github.com/
Инструменты для работы с GIT1:18
Дистрибутив для Windows - https://git-scm.com/download/win
Дистрибутив для mac - https://git-scm.com/download/mac
Команда для Fedora - sudo dnf install git-all
Команда для Debian и Ubuntu - sudo apt install git-all
Навигация в терминале2:08
Навигация в терминале
Настраиваем GIT1:43
git config --list - смотрим наш конфиг
git config --global user.name "name" - задаем глобально имя
git config --global user.email mail@mail.com - задаем глобально почту
Как работают в GIT1:07
git add . - добавляем файлы в коммит
git commit -m 'descr' - создаем коммит
git push - пушим на сервер
Создаем репозиторий3:12
Пушим изменения в репозиторий1:51

Requirements

компьютер

Description

Привет, друзья! На этом курсе мы начнем делать первые шаги в мире веб разработки. Мы вместе

поймем как устроена web-страница;
посмотрим программы, которыми пользуются разработчики, и выберем подходящую себе;
разберемся в макетах от дизайнера;
научимся правильно расставлять HTML-теги и их атрибуты;
научимся делать стили (CSS, селекторы и свойства селекторов);
будем публиковать проекты на github, чтобы вы могли их показывать в дальнейшем.

Успехов в обучении!

Who this course is for:

начинающие веб-разработчики
студенты

Веб разработка с нуля - изучите HTML5 & CSS3 за 2 часа

What you'll learn

Explore related topics

Course content

Введение3 lectures • 5min

HTML14 lectures • 44min

CSS28 lectures • 1hr 41min

GIT7 lectures • 12min

BONUS1 lecture • 1min

Requirements

Description

Who this course is for: