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-фрилансер

Цену установит организатор
Скрытая ссылка