3.9 из 5
3.9
69 отзывов на Udemy

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

Сделаем первый шаг на пути веб-разработчика: изучим HTML, CSS, GIT, сделаем свой первый сайт вместе!
Инструктор:
Anna Rus
655 студентов зачислены
создавать свои web-страницы с помощью HTML5
разбираться в макетах от дизайнера
стилизовать с помощью CSS3
публиковать свои проекте в GIT

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

  • поймем как устроена  web-страница;

  • посмотрим программы, которыми пользуются разработчики, и выберем подходящую себе;

  • разберемся в макетах от дизайнера;

  • научимся правильно расставлять HTML-теги и их атрибуты;

  • научимся делать стили (CSS, селекторы и свойства селекторов);

  • будем публиковать проекты на github, чтобы вы могли их показывать в дальнейшем.

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

Введение

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

HTML

1
HTML Теги
2
Структура HTML документа
3
Атрибуты
4
Ссылки

Заготовку для проекта, который используется в лекции, можно скачать в этом же уроке

5
Ссылки
6
Списки
7
Изображения
8
Блочные и строчные элементы
9
Навигация
10
Делаем header
11
Вырезаем изображения из Figma
12
Делаем раздел "Our Service"
13
Раздел "Our Clients"
14
Раздел "Our Team"
15
Раздел "Footer"
16
Validator
17
Консоль разработчки

CSS

1
Селекторы
2
Селекторы
3
Подключаем CSS
4
Подключаем шрифт
5
Переносим шрифты - body
6
Перенос шрифтов - header & our service
7
Доделать перенос шрифтов у раздела "Our Service" & "Our Team"
8
Подключаем normalize.css
9
Вес селекторов
10
Вес селекторов
11
Свойства селекторов - width & height
12
Width
13
Свойство text-decoration
14
Псевдоклассы для поведения (:hover, :focus, :active)
15
Как задавать цвета
16
Стилизуем ссылки
17
Свойство background
18
Свойство padding
19
Свойства border
20
Стилизуем кнопку
21
Стилизовать кнопку contact us
22
Свойство margin
23
Свойство display
24
Flex-контейнеры

Свойства для самостоятельного изучения:

flex-direction - https://webref.ru/css/flex-direction

flex-grow - https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow

25
Visually-hidden
26
Задаем размеры для img
27
Задать размеры изображениям в разделе "Our Service"
28
Задать размеры изображениям в разделе "Our Clients"
29
Задать размеры изображениям в разделе "Our Team" & Footer
30
Делаем Header - часть 1
31
Делаем header - часть 2
32
Position
33
Псевдоэлементы
34
Делаем заголовок для section
35
Доделать заголовки в остальных section
36
Делаем раздел "Our service"
37
Делаем раздел "Our Clients"
38
Сделать раздел "Our team"
39
Сделать "Footer"

GIT

1
Что такое GitHub

https://github.com/

2
Инструменты для работы с GIT

Дистрибутив для 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



3
Навигация в терминале
4
Навигация в терминале
5
Настраиваем GIT

git config --list - смотрим наш конфиг

git config --global user.name "name" - задаем глобально имя

git config --global user.email mail@mail.com - задаем глобально почту


6
Как работают в GIT

git add . - добавляем файлы в коммит

git commit -m 'descr' - создаем коммит

git push - пушим на сервер

7
Создаем репозиторий
8
Пушим изменения в репозиторий

BONUS

1
BONUS: Рекомендации по дальнейшим шагам

Промокод - 473505124ab

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
8eab3aa8d11f55f865a2d8e4263b6986
3-дневная гарантия возврата денег

Включает

3 часов видео по запросу
Полный пожизненный доступ
Доступ с мобильного и ТВ
Сертификат об окончании
Веб разработка с нуля – изучите HTML5 & CSS3 за 2 часа
Цена:
0,16 ₽ 1,190 ₽