Основы вёрстки сайтов

все курсы

Программирование

4.5

1 отзыв

5 недель,

начало 25 апреля

Сложность

Начинающий

Тип обучения

Курс

Формат обучения

С проверкой домашнего задания

Трудоустройство

Отсутствует

Стоимость курса

23 000 ₽

есть рассрочка

Что ожидать от обучения?

Насыщенная программа
20 обучающих модулей, 100+ часов обучения.

Личный наставник
Практикующий разработчик на Node.js будет отвечать на любые вопросы и делать ревью.

Готовое портфолио
Вы разработаете серверную часть для корпоративного приложения

Доступ к материалам
Не ограничен рамками курса. Вы можете продолжить учиться когда захотите.

Slack чат
Общение с преподавателями и одногруппниками в уютной и дружелюбной атмосфере.

Сертификат
Диплом с уникальным ID, подтверждающий уровень ваших знаний.

Ламповая атмосфера
Никаких скучных и занудных “дядек“, как в других школах. В Loftschool вас будут учить в атмосфере rock-and-roll.

Начало карьеры
После обучения вы сразу же готовы к старту карьеры в веб-индустрии.

Каждая неделя обучения включает:
2-3 обучающих модуля
1 групповую практику
Задание
30-минутную консультацию

Что вы получите после обучения

Приобретаемые навыки

CSS

Flexbox

HTML+CSS

Вёрстка

Макетирование

Шрифты

Emmet

Figma

GitHub

HTTP

DNS

Анимация в CSS

FTP

GitHub Pages

VSCode

БЭМ

Perfect Pixel

Workflow

Сертификат, ссылками на который можно делиться с другими людьми

Вас будут обучать

Арсений

курс

Дают знания, а не ответы.Любят объяснять и умеют доносить сложную информацию понятным языком.Требовательны к качеству вашего кода: вы не сдадите ДЗ, пока ваш код не станет идеальным.Хорошо понимают других людей и умеют находить подход к любым ученикам.Всегда готовы прийти на помощь.

Дают знания, а не ответы.

Владимир Сабанцев

курсов

Главный преподаватель профессии «Веб-разработчик» в LoftSchool

Всем привет! Я frontend-разработчик и главный преподаватель профессии «Веб-разработчик» в школе онлайн обучения LoftSchool. В разработке я уже больше 7 лет, а в преподавании 4 года. С 2015 года на наших курсах по веб-разработке я обучил больше 2000 человек.

Образовательная организация

Loft School

4.3

13 отзывов

Добро пожаловать в LoftSchool - уникальный образовательный ресурс от самого быстроразвивающегося IT сообщества рунета и СМИ - LoftBLog. Здесь помогают стать востребованным IT специалистом или фрилансером, чтобы работать удаленно из любой точки мира.

LoftSchool — образовательная площадка, специализирующаяся на профессиях в IT-сфере. На рынке образования с 2012 года. Преподаватели и наставники школы практикующие специалисты из таких компаний, как Mojang, Avito и других. Образовательные программы на платформе поделены на профессии, интенсивы и видеокурсы.

Обучение программированию с нуля онлайн с личным наставником. Школа онлайн образования Loftschool обучает: web разработке, php, javascript, seo, интернет маркетингу, android разработке.

Программа курса

Неделя 1 — Работа с хостингом, HTML

— Знакомимся со своим личным наставником и группой.
— Учимся работать с панелью хостинга и с файлами через FTP.
— Делаем разметку для первой страницы проекта.
— Размещаем результат работы в сети Интернет и сдаём на проверку наставнику.

Открытие курса

VSCode. Обзор редактора
1. Введение (00:49)
2. Страница проекта (00:49)
3. Краткий обзор редактора (01:23)
4. Начало работы. Цветовые схемы (02:22)
5. Горячие клавиши (01:53)
6. Командная панель (02:56)
7. Настройки (04:19)
8. Навигация по коду (06:52)
9. Настройка горячих клавиш (02:20)
10. Сниппеты (05:00)
11. Панель поиска (01:53)
12. Расширения (06:30)
13. Расширение CSS Peek (02:49)

Устройство интернета
1. Устройство интернета (31:46)

Работа с GitHub Pages
1. GitHub Pages. Работа из браузера (05:24)
2. Работа с хостингом timeweb (16:28)

HTML
1. Введение (06:08)
2. Первая веб-страница (01:05)
3. Структура документа (01:28)
4. Голова документа (02:59)
5. Полезные расширения редактора (07:04)
6. Разметка текста (03:57)
7. Правила написания кода (03:13)
8. Списки (01:06)
9. Потомки и родители (02:41)
10. Форматирование кода (05:30)
11. Атрибуты (02:54)
12. Абсолютные и относительные пути (07:56)
13. Ссылки (06:29)
14. id и class (05:36)
15. Якорь (02:23)
16. Формы. Основные элементы (12:33)
17. Тег Label (01:18)
18. Формы. Специфические элементы (04:13)
19. Отправка формы на сервер (05:13)
20. Валидация (03:51)
21. Теги таблиц (05:47)
22. Emmet (07:23)
23. Панель разработчика (04:40)

БЭМ. Разметка элементов страницы
1. Принцип разметки (04:40)
2. Использование классов (04:36)
3. BEM (05:46)
4. Разметка страницы (07:36)
5. Разметка содержимого (11:20)

Неделя 2 — CSS, работа с макетом, Perfect Pixel

— Стилизуем элементы главной страницы.
— Изучаем свойства позиционирования и поведение блочной модели.

Figma для верстальщика
1. Figma. Интерфейс (04:37)
2. Figma. Организация проектов (01:32)

CSS. Работа со стилями
1. Теория (06:59)
2. Подключение стилей (03:25)
3. Работа с цветом (05:06)
4. Селекторы тегов и атрибутов (05:29)
5. Мультиселекторы (05:32)
6. Универсальные селекторы (03:21)
7. Приоритет селекторов (06:30)
8. Псевдоклассы (07:32)
9. Псевдоклассы порядка (05:36)
10. Псевдоэлементы (02:19)

Работа со шрифтами
1. Безопасные шрифты (02:13)
2. Бесплатные шрифты (03:02)
3. Конвертирование шрифтов (06:19)
4. font-face (08:05)
5. Наследуемые свойства (03:51)
6. Общие стили текста (05:25)

Блочная модель
1. Теория (03:59)
2. Строчное и блочное поведение (03:49)
3. Свойство display (01:18)
4. Блочная модель (05:11)
5. Составные свойства (02:59)
6. Единицы измерения (03:38)
7. Выравнивание inline-block (01:15)
8. Свойства позиционирования (05:36)
9. Приоритет отображения (04:07)
10. Верстка. Как делать не нужно (05:07)
11. Perfect Pixel (08:32)

Стилизация проекта
1. Приветственная секция (06:08)
2. Настройка шрифтов (03:42)
3. Приветственная секция. Стилизация (13:14)
4. Приветственная секция. Perfect Pixel (07:22)
5. Активный пункт меню (03:38)
6. Секция предложений. Разметка (03:06)
7. Секция предложений. Стилизация (08:44)
8. Секция предложений. Модификаторы (06:16)
9. Секция предложений. Perfect Pixel (02:45)
10. Секция новостей. Разметка (06:04)
11. Переключатель страниц (05:45)
12. Секция о банке. Разметка (08:35)
13. Футер (07:58)
14. Завершение работы (04:02)

Неделя 3 — Flexbox, БЭМ-нейминг

— Изучаем свойства флексбокса и применяем их к главной странице.
— Пишем разметку для оставшихся страниц проекта.
— Приводим верстку в состояние Perfect Pixel.

Вопрос-ответ

Flexbox
1. Введение (00:45)
2. Флекс-контейнер (01:43)
3. Выравнивание по главной оси (01:37)
4. Выравнивание по поперечной оси (01:50)
5. Выравнивание отдельного элемента (01:09)
6. Флекс-элемент – контейнер (00:53)
7. Направление осей (03:18)
8. Многострочный контейнер (02:54)
9. Выравнивание многострочного контента (01:25)
10. Пропорции (02:46)
11. Пропорции при сжатии (01:24)
12. Базовый размер (04:02)
13. Порядок элементов (02:40)

Построение лейаута и БЭМ-нейминг
1. Введение (03:28)
2. Viewport (04:54)
3. Normalize (02:38)
4. Блок обертка (04:20)
5. Контейнер (09:17)
6. Футер (04:25)
7. Структура файлов (17:20)
8. Поведение блочной модели (07:19)
9. Общие стили (09:04)
10. Текстовое содержимое (08:36)
11. Классы-модификаторы (14:10)
Flexbox. Реализация проекта
1. Приветственная секция (08:28)
2. Секция предложений (02:15)
3. Секция предложений. Примеси (05:21)
4. Секция предложений. Элементы (02:51)
5. Секция новости (03:19)
6. Завершение верстки страницы (07:46)
7. Страница услуг. Хедер (11:45)
8. Страница услуг. Секция (08:45)
9. Страница услуг. Ховер (04:08)
10. Страница услуг. Секция партнеры (09:17)
11. Страница услуг. Футер (03:55)

Неделя 4 — CSS-анимации

— Подключаем иконки к проекту с применением спрайтов.
— Реализуем динамические элементы страниц.
— Дорабатываем проект.

Частые приемы верстки
1. Центрирование (06:56)
2. Текст в одну строку (04:13)
3. Фигуры. Круг (01:14)
4. Фигуры. Эллипс (03:36)
5. Фигуры. Треугольник (03:19)
6. Фигуры. Треугольник без заливки (06:08)
7. Фигуры. Трапеция (01:00)
8. Фигуры. Параллелограмм (01:29)
9. Фигуры. Элементы (05:56)
10. Градиент (07:43)
11. Пунктирная линия (04:32)
12. Фон в полоску (01:19)
13. Выпадающее меню (09:43)
14. Спрайты (12:01)
15. Элементы форм (07:06)

Анимации CSS
1. Свойство transition (02:58)
2. Свойство transition-property (02:21)
3. Временная функция (04:50)
4. Эластичные анимации (00:46)
5. Свойство transition delay (01:22)
6. Составное свойство transition (02:05)
7. Неочевидные моменты transition (02:50)
8. Свойство transform (05:12)
9. Отмена трансформации (01:50)
10. Изменение координат трансформации (03:41)
11. Свойство animation (07:23)
12. Свойство animation-iteration-count (00:57)
13. Свойство animation-direction (01:58)
14. Свойство animation-fill-mode (02:44)
15. Свойство animation-play-state (03:13)
16. Анимация секвенцией (06:17)

Анимации. Реализация проекта
1. Отзывы. Разметка (04:31)
2. Отзывы. Стилизация (06:12)
3. Отзывы. Сетка (02:32)
4. Секция-разделитель (03:00)
5. Форма. Поля (03:35)
6. Форма. Контроллы (09:18)
7. Приветственная страница (03:35)
8. Анимации. Банк (06:29)
9. Анимации. Путешествия (03:24)
10. Анимации. Видеопродакшн (02:38)

Неделя 5 — Защита выпускного проекта

— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.
Вопрос-ответ

Рейтинг курса

4.5

рейтинг

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

1 отзыв

по рейтингу

по дате

Мне понравилось.

Достоинства: Логика, срок, наставник. Недостатки: JS нужен перед Vue Закончила обучение по верстке. Было 3 курса (основы верстки, веб для начинающих и vue). Хочу отметить хорошую структуру курсов, проработанность, продуманность, большую отзывчивость ребят-наставников и приличные знания. По цене - средне. По срокам - интенсив и надо много успеть за полтора месяца. Это курсы для тех, кто готов...