Html/css-специалист [Genius Space] [Дмитрий Рябовол]

[Принц]

Складчина: Html/css-специалист [Genius Space] [Дмитрий Рябовол]
Html/css-фахівець [Дмитро Рябовол]
Язык украинский




Освойте современную IT-профессию, получите массу ценных навыков и начните зарабатывать уже через 2 месяца на крутых проектах и любимом деле.

Кто такой HTML/CSS-специалист?

HTML-верстальщик — это тот, кто превращает нарисованный дизайнером макет в живой сайт, переводит картинку-макет на язык, понятный любому браузеру.

Этот курс точно для тебя, если ты:

Мечтаешь стать IT-специалистом — но не имеешь технического образования
Желаешь освоить новую профессию — и зарабатывать от 1000$, путешествовать и работать из любой точки мира
Хочешь стать HTML/CSS верстальщиком — но не понимаешь, как начать свой путь, чтобы быстрее получить результат
Мама в декрете — которая ищет дополнительный заработок, который сможет совмещать с семьёй
Офисный сотрудник — который устал от рутинной работы, хочет свободы, развития и финансового роста
Студент — который ищет себя и дело, в котором сможет реализовать свой потенциал и получать прибыль
Преимущества быть HTML/CSS разработчиком:

Работа в крупных IT-компаниях, свободный график, соц. пакеты и другие бонусы от компаний
Профессия, которая быстро осваивается
Перспектива развития в любом IT-направлении
Большой растущий спрос на специалистов во всём мире
Высокая зарплата (около 1000 $ на старте и до 3000 $ - 4000 $ через 1-2 года)
Перспектива изучения разных продуктов и направлений, технологий
Формат обучения:

Изучаем видеоурок
Знакомимся со всеми дополнительными материалами, чек-листами и шаблонами
Внедряем в жизнь все инструменты
Повышаем свой доход
Программа:

Модуль 1. Разработка интерфейсов с нуля

Что нужно знать
Для чего нужна эта профессия
Что такое веб
Пути развития
Результат:

Освоите базовые навыки о работе веб-сайта и узнаете, как загружается веб-страница.
На занятии разберём, чем занимается HTML/CSS специалист и какие направления развития доступны после прохождения курса.
Модуль 2. Начало работы

Настройка среды
Программы для работы
Загрузка первого сайта
Результат:

Загрузите программы для начала работы и настроите комфортную среду разработки для дальнейшего обучения.
На занятии разберём, как загрузить первую страницу в интернет и как сдавать домашнее задание.
Модуль 3. Введение в HTML

Теги и атрибуты
Семантика
Работа с текстом
Изображения
Интерактивные элементы
Списки
Результат:

Узнаете об основах HTML, как работают теги и атрибуты.
На занятии выполним первую разметку сайта для современной пекарни «SHOP bakery», разберём, как работать с изображениями и интерактивными элементами.
Модуль 4. Продолжение HTML

Инструменты разработчика
Таблицы
Символьные подстановки
Медиаконтент, фрейм
Оформление и валидация кода
Результат:

Продолжите изучать HTML и работать с инструментами разработчика в браузере.
На занятии выполним разметку таблицы, добавим на сайт карту с Google Maps и видео с YouTube.
Модуль 5. Введение в CSS

Подключение стилей
Синтаксис, селекторы
Каскадность и специфичность
CSS переменные
Результат:

Узнаете, как подключать стили к HTML-странице, и впервые измените внешний вид сайта.
На занятии разберём, как правильно писать стили, поговорим о каскадности, специфичности и наследовании стилей. Также добавим первые CSS-переменные.
Модуль 6. Шрифты

Подключение шрифтов
Локальные шрифты
Оформление текста
Результат:

Узнаете, как работают шрифты в браузере.
На занятии подключим шрифты из сервиса Google Fonts на сайт, а также загрузим шрифты локально в проект. Также добавим базовые стили шрифта к текстовым элементам.
Модуль 7. Блочная модель

Геометрия элемента
Типы элемента
Структурные псевдоклассы
Результат:

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

Основные концепции
Flex-контейнер и flex-элемент
Практическое применение
Результат:

Научитесь гибко размещать элементы с помощью раскладки флексов.
На занятии сделаем первую флекс-разметку и разместим элементы в соответствии с макетом.
Модуль 9. Раскладка CSS Grid

Основные концепции
Grid-контейнер
Grid-элемент
Практическое применение
Результат:

На этом занятии мы научимся работать с декором в CSS, а также рассмотрим, какие есть типы изображений. Разберём, как добавлять различные декоративные эффекты и элементы.
Основные темы: типы изображений, фон и градиент, тень элемента, псевдоэлементы.
Модуль 10. Декоративные эффекты

Типы изображений
Фон
Градиенты
Тень
Псевдоэлементы
Результат:

Поймёте, какие бывают типы изображений и как добавлять декоративные эффекты на сайт. Например, тень, градиент, или фоновое изображение элемента.
Также на занятии поработаем с псевдоэлементами для добавления декоративных элементов.
Модуль 11. Графика

Растровая графика
Векторная графика. SVG
Добавление SVG на страницу
SVG-спрайт
Результат:

Освоите навыки работы с растровой и векторной графикой на сайте.
На занятии разберём, как добавлять SVG иконки на страницу и правильно их использовать.
Модуль 12. Позиционирование

Типы позиционирования
Свойство overflow
Наложение элементов
Результат:

Узнаете, как позиционировать элементы на странице. Например, сделать шапку сайта фиксированной в верхней части, или разместить текст поверх изображения.
Также на занятии поговорим о порядке наложения элементов друг на друга и управлении отображением содержимого элемента.
Модуль 13. Анимация

Трансформация
Переходы
Анимация
Результат:

Добавите первую плавную анимацию на сайт.
На занятии приобретём навыки работы с вращением, масштабированием и искривлением элементов. Также добавим плавные переходы смены цвета при наведении.
Модуль 14. Создание веб-форм

Основы работы
Элементы форм
Группировка полей
Результат:

Создадите первую форму на сайте.
На занятии узнаем, как работают формы, и выполним разметку полей ввода на странице.
Модуль 15. Валидация веб-форм

Виды валидации
Проверка введённых значений
Псевдоклассы состояния
Результат:

Добавите проверку введённых значений в полях формы.
Научитесь делать поля обязательными для заполнения и добавите валидацию полей по разным критериям.
Модуль 16. Препроцессоры

Препроцессор SASS, SCSS
Вложенные правила
Директивы
Вендорные префиксы
Результат:

Освоите навыки работы с препроцессором.
На занятии разобьём файл стилей на отдельные файлы для визуальной структуры и удобной навигации по проекту.
Модуль 17. CSS Методологии

Зачем нужны методологии
Методология БЭМ
Блок, элемент, модификатор
Результат:

Узнаете, как добавляют имена классов для HTML-элементов, когда над проектом работает целая команда, и измените названия классов в соответствии с методологией БЭМ.
На занятии рассмотрим основные методологии для удобства будущей поддержки сайта.
Модуль 18. Адаптивность и адаптивная графика

Типы и виды вёрстки
CSS media запросы
Стратегии Mobile и Desktop first
Адаптив и ретинизация фоновых и контентных изображений
Результат:

Сделаете страницу красивой для отображения на мобильных устройствах и планшетах.
На занятии разберём, с помощью чего можно сделать адаптивную вёрстку. Также выполним разметку мобильного меню на сайте.


Спойлер: Оригинал
Опануйте сучасну IT-професію, отримайте масу цінних навичок та почніть заробляти вже через 2 місяці на крутих проектах та улюбленій справі.

Хто такий HTML/CSS-фахівець?

HTML-верстальник — це той, хто перетворює намальований дизайнером макет в живий сайт, переводить картинку-макет на мову, зрозумілу будь-якому браузеру.

Цей курс точно для тебе, якщо ти:

Мрієш стати IT-фахівцем — але не маєш технічної освіти
Бажаєш освоїти нову професію — і заробляти від 1000$, подорожувати та працювати з будь-якої точки світу
Хочеш стати HTML/CSS верстальником — але не розумієш, як почати свій шлях, щоб швидше отримати результат
Мама у декреті — яка шукає додатковий заробіток, який зможе поєднувати із сім'єю
Офісний співробітник — який втомився від рутинної роботи, хоче свободи, розвитку та фінансового зростання
Студент — який шукає себе і справу, в якій зможе реалізувати свій потенціал та отримувати прибуток
Переваги бути HTML/CSS розробником:

Робота у великих ІТ-компаніях, вільний графік, соц. пакети та інші бонуси від компаній
Професія, що швидко освоюється
Перспектива розвитку в будь-якому IT-напрямку
Великий зростаючий попит на фахівців у всьому світі
Висока ЗП (близько 1000 $ на старті і до 3000 $ - 4000 $ через 1-2 роки)
Перспектива вивчення різних продуктів та напрямків, технологій
Формат навчання:

Вивчаємо відео урок
Ознайомлюємося з усіма додатковими матеріалами, чек-листами та шаблонами
Втілюємо в життя усі інструменти
Підвищуємо свій дохід
Програма:

Модуль 1. Розробка інтерфейсів з нуля

Що потрібно знати
Для чого потрібна ця професія
Що таке веб
Шляхи розвитку
В результаті:

Опануєте базові навички про роботу веб-сайту і дізнаєтесь, як завантажується веб-сторінка.
На занятті розберемо, чим займається HTML/CSS фахівець та які напрямки розвитку доступні після проходження курсу.
Модуль 2. Початок роботи

Налаштування середовища
Програми для роботи
Завантаження першого сайту
В результаті:

Завантажите програми для початку роботи і налаштуєте комфортне середовище розробки для подальшого навчання.
На занятті розберемо, як завантажити першу сторінку в інтернет, і як здавати домашнє завдання.
Модуль 3. Введення у HTML

Теги та атрибути
Семантика
Робота з текстом
Зображення
Інтерактивні елементи
Списки
В результаті:

Дізнаєтесь про основи HTML, як працюють теги та атрибути.
На занятті виконаємо першу розмітку сайту для сучасної пекарні «SHOP bakery», розберемо, як працювати із зображеннями і інтерактивними елементами.
Модуль 4. Продовження HTML

Інструменти розробника
Таблиці
Символьні підстановки
Медіаконтент, фрейм
Оформлення і валідація коду
В результаті:

Продовжите вивчати HTML, і працювати з інструментами розробника в браузері.
На занятті виконаємо розмітку таблиці, додамо на сайт мапу з Google Maps та відео з YouTube.
Модуль 5. Введення в CSS

Підключення стилів
Синтаксис, селектори
Каскадність і специфічність
CSS змінні
В результаті:

Дізнаєтесь, як підключати стилі до HTML сторінки і вперше зміните зовнішній вигляд сайту.
На занятті розберемо, як правильно писати стилі, поговоримо про каскадність, специфічність і наслідування стилів. Також додамо перші CSS-змінні.
Модуль 6. Шрифти

Підключення шрифтів
Локальні шрифти
Оформлення тексту
В результаті:

Дізнаєтесь, як працюють шрифти в браузері.
На занятті підключимо шрифти із сервісу Google Fonts на сайт, а також завантажимо шрифти локально в проект. Також додамо базові стилі шрифту до текстових елементів.
Модуль 7. Блокова модель

Геометрія елемента
Типи елемента
Структурні псевдокласи
В результаті:

Зрозумієте, що таке блокова модель елемента і як браузер відображає блокові і рядкові елементи.
На занятті додамо зовнішні і внутрішні відступи до секцій, кнопок, посилань, заголовків і т.д.
Модуль 8. Flexbox

Основні концепції
Flex-контейнер і flex-елемент
Практичне застосування
В результаті:

Навчитесь гнучко розміщати елементи за допомогою розкладки флексів.
На занятті зробимо першу флекс-розмітку, і розмістимо елементи у відповідності з макетом.
Модуль 9. Розкладка CSS Grid

Основні концепції
Grid-контейнер
Grid-елемент
Практичне застосування
В результаті:

На цьому занятті ми навчимося працювати із декором в CSS, а також розглянемо, які є типи зображень. Розберемо, як додавати різні декоративні ефекти і елементи.
Основні теми: типи зображень, фон і градієнт, тінь елемента, псевдоелементи.
Модуль 10. Декоративні ефекти

Типи зображень
Фон
Градієнти
Тінь
Псевдоелементи
В результаті:

Зрозумієте, які бувають типи зображень і як додавати декоративні ефекти на сайт. Наприклад, тінь, градієнт, або фонове зображення елемента.
Також, на занятті попрацюємо із псевдоелементами для додавання декоративних елементів.
Модуль 11. Графіка

Растрова графіка
Векторна графіка. SVG
Додавання SVG на сторінку
SVG-спрайт
В результаті:

Опануєте навички роботи із растровою і векторною графікою на сайті.
На занятті розберемо, як додавати SVG іконки на сторінку і правильно їх використовувати.
Модуль 12. Позиціонування

Типи позиціонування
Властивість overflow
Накладання елементів
В результаті:

Дізнаєтесь, як позиціонувати елементи на сторінці. Наприклад, зробити шапку сайту фіксованою у верхній частині, або розмістити текст поверх зображення.
Також, на занятті поговоримо про порядок накладання елементів один на одний і керування відображенням вмісту елемента.
Модуль 13. Анімація

Трансформація
Переходи
Анімація
В результаті:

Додасте першу плавну анімацію на сайт.
На занятті набудемо навичок роботи із обертанням, масштабуванням і викривленням елементів. Також додамо плавні переходи зміни кольору при наведенні.
Модуль 14. Створення веб-форм

Основи роботи
Елементи форм
Групування полів
В результаті:

Створите першу форму на сайті.
На занятті дізнаємось, як працюють форми, і виконаємо розмітку полів введення на сторінці.
Модуль 15. Валідація веб-форм

Види валідації
Перевірка введених значень
Псевдокласи стану
В результаті:

Додасте перевірку введених значень у полях форми.
Навчитесь робити поля обов'язковими для заповнення і додасте валідацію полів за різними критеріями.
Модуль 16. Препроцесори

Препроцесор SASS, SCSS
Вкладені правила
Директиви
Вендорні префікси
В результаті:

Опануєте навички роботи із препроцесором.
На занятті розіб'ємо файл стилів на окремі файли для візуальної структури і зручної навігації по проєкту.
Модуль 17. CSS Методології

Навіщо потрібні методології
Методологія БЕМ
Блок, елемент, модифікатор
В результаті:

Дізнаєтесь, як додають імена класів для HTML-елементів, коли над проєктом працює ціла команда, і зміните назви класів відповідно методології БЕМ.
На занятті розглянемо основні методології для зручності майбутньої підтримки сайту.
Модуль 18. Адаптивність і адаптивна графіка

Типи і види верстки
CSS media запити
Стратегії Mobile і Desktop first
Адаптив і ретинізація фонових та контентних зображень
В результаті:

Зробите сторінку красивою для відображення на мобільних пристроях і планшетах.
На занятті розберемо, за допомогою чого можна зробити адаптивну верстку. Також виконаємо розмітку мобільного меню на сайті.


Обучает Дмитрий Рябовол

Markup developer at Studytube
Markup developer at Studytube
Разработчик UI интерфейсов
5+ лет опыта на украинских и зарубежных проектах
HTML/CSS преподаватель
Блогер, web-фрилансер
Цену установит организатор




СКАЧАТЬ

Для просмотра скрытого содержимого вы должны зарегистрироваться