Веб вёрстка для чайников

Опубликовано: 27 Октябрь 2024
на канале: Hacker School
6,840
232

1 Вводный модуль. 00:00:00
1.1. Как работают сайты. Backend и frontend. Вёрстка.
1.2. Как выглядит и из чего состоит код веб-страницы.
1.3. Установка редактора кода Sublime Text
1.4. Простая веб-страница на HTML. Тэги и атрибуты.
1.5. CSS-стили. Селекторы, параметры и значения.

2 HTML. 00:47:57
2.1. Структура HTML5-документа.
2.2. Обзор и демонстрация работы основных HTML-тэгов.
2.3. Вёрстка веб-форм. Поля и кнопки. Валидация форм.
2.4. Таблицы и табличная вёрстка.
2.5. Семантическая вёрстка. Стандарты и валидность.

3 Основы CSS. 02:39:05
3.1. Как можно задавать стили. Селекторы.
3.2. Отступы, поля, размеры и единицы измерения.
3.3. Inline- и block- элементы, свойство display.
3.4. Обтекание, позиционирование и слои.
3.5. Блочная верстка
3.6. Цвета, шрифты, фон и границы.

4 Основы JavaScript 05:03:35
4.1. Что такое JavaScript и как его подключать к веб-странице
4.2. Библиотека jQuery. Управление стилями элементов
4.3. Обработка событий
4.4. Работа с DOM, изменение, добавление и удаление элементов
4.5. Отображение и скрытие элементов, анимация
4.6. Работа с сетью, получение и отправка данных
4.7. JavaScript-фреймворки

5 Адаптивность и кроссбраузерность. 06:48:32
5.1. Ширина экрана и резиновость сайта
5.2. Media-запросы
5.3. Flexbox
5.4. Шаги адаптивности и сетки
5.5. Разнообразие браузеров и их особенности
5.6. Инструменты проверки и обеспечения адаптивности и кроссбраузерности.

6 Оформление. 08:04:49
6.1. Фон, прозрачность и градиенты.
6.2. Границы, аутлайны и тени.
6.3. Шрифты и оформление текста. Типографика и спецсимволы
6.4. Стили указателей.
6.5. Изображения. Форматы, сжатие, спрайты, iconfonts. Favicon.
6.6. Рисование на веб-странице. SVG и Canvas.

7 Advanced CSS. 09:38:56
7.1. Сложные селекторы. Свойство important.
7.2. Псевдо-классы и псевдо-элементы.
7.3. Транформации, переходы и анимации.
7.4. Стандарты именования в CSS. Методология БЭМ.
7.5. Библиотеки стилей - Bootstrap, Semantic UI, Material UI
7.6. Шаблонизаторы (Twig, Haml) и препроцессоры (SASS, LESS, Stylus).

8 Инструменты верстальщика. 10:26:35
8.1. Размещение своих работ в Интернете. Домен и хостинг.
8.2. Инструменты командной разработки. Таск-трекеры и Git.
8.3. Сборщики, минификаторы и оптимизаторы проектов
8.4. Инструменты прототипирования.
8.5. Инструменты прототипирования.

Методичка + ДЗ + Инструкции: https://disk.yandex.ru/d/prwfMZeMQ5VZOg


Телеграмм канал: https://t.me/Hacking_School666

Донат Visa: 4890 4947 6096 6986
Ethereum (ERC20): 0x95c2c0a2de94840543d5f6ec69cdba9ff6f34692
Bitcoin(BTC): 3Bxr8E73NjWnQTv2Hoxm49gitNgCYZkfUR
Dogecoin(DOGE): DQMvdBLNF6HptH5kRok66KQcePvYS4eQrp
Cardano (ADA): DdzFFzCqrht9NC4q3LGk2GoY2LTSo6ipoPaxj8G43mcCacKwbtNeJNuVEwMHsTAvw7pLyA1zAv6AwYEFfsxzEmKzvocRSsVRAVSFQVyr