Розпродаж!

HTML і CSS Професійний курс частина 1

390 грн

 Ви економите: 800 грн (67%)
 Покваптеся! Закінчується через

Відео запис курсу HTML і CSS. На цьому курсі ви навчитеся робити справжні проєкти, такі ж за рівнем складності, як в індустрії. І будете робити їх правильно, щоб після навчання видавати результат високого рівня, за який компанії готові платити.

Безпечні платежі

Захист персональних даних

100% унікальні матеріали

Гарантія найкращої ціни

Разом дешевше на 20% (кількість курсів змінюється галочками)

HTML и CSS Профессиональный курс часть 1 + HTML и CSS Профессиональный курс часть 2 + + HTML5 и CSS3. Создание адаптивных сайтов - видеокурс + HTML5, CSS3, FlexBox верстка сайтов - видеокурс
Ціна за всі курси: 1,560 грн

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв'язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Відео запис курсу. На цьому курсі ви навчитеся робити справжні проєкти, такі ж за рівнем складності, як в індустрії. І будете робити їх правильно, щоб після навчання видавати результат високого рівня, за який компанії готові платити.

— Актуальные стандарты качества: не нужно переучиваться после курса.
— Понимание полного цикла работы верстальщика.
— Фундаментальные и структурированные знания необходимых технологий.
— Опыт работы с дедлайнами и планирования работы.

Зміст

1. Вступ (Теоретична лекція)Вступна лекція про роль і місце верстальника у світі веб-технологій.

— Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?
— IP-адрес, сервер и веб-сервер, «виртуальные хосты».
— Доменные имена, URL-адреса и система DNS.
— Загрузка и «сборка» веб-страницы.
— Особенности HTTP и HTTPS. Протоколы HTTP/1.1 и HTTP/2.
— Приёмы оптимизации веб-страниц.
— Инструменты веб-разработчика и рабочий процесс на интенсиве.
— Системы контроля версий.
— Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
— Немного о браузерах, браузерных движках и различиях между ними.

2. Розмітка (Теоретична лекція). Створимо логічну HTML-розмітку сторінок навчального та особистого проєктів. Попрактикуємося використовувати відповідні теги, задавати імена класів, оцінювати складність розмітки.

— Введение в HTML.
— Синтаксис HTML, типы HTML-тегов.
— Структура простейшего HTML-документа.
— Как работать со спецификацией HTML.
— Обзор HTML-тегов из личных проектов.
— Качественная разметка и стили кодирования.
— Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
— Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
— Модульность разметки или использование «пространств имён».
— Когда использовать <article>,<section> и <div>?

— Кодгайды для разметки.
— Алгоритмы создания разметки: «страница как документ», «страница как приложение», «дивянка».Создаём разметку главной страницы учебного проекта.

3.Фотошоп для верстальника (Практична лекція). Розберемо все необхідне для роботи верстальника у Фотошопі. Підготуємо графіку для проєктів.

— Типовые задачи верстальщика в Фотошопе.
— Настройка интерфейса Фотошопа.
— Работа со слоями, типы слоёв.
— Получение параметров текста.
— Измерение размеров блоков, отступов, получение информации о цвете.
— Получение параметров сложных декоративных эффектов: тени и прочее.
— Экспорт графики, работа с повторяющимися паттернами.
— Обзор форматов графики в вебе.
— Растровая графика — PNG, JPEG, GIF.
— Векторная графика — SVG.
— Как выбрать подходящий формат?
— Оптимизация графики.

Огляд альтернатив.

— Adobe Extract.
— Zeplin.
— Avocode.
— Sketch.
— Figma.

Розбір графічних макетів проєктів.

4. Доступність (Практична лекція). Навчимося робити інтерфейси зручні та доступні для всіх. Керування фокусом, важливість семантики, тестування і скрінрідери.

— Интерфейсы — не картинки.
— Какие есть слои интерфейса, кроме графики.
— Зачем нужные интерактивные элементы.
— Неочевидное использование интерфейсов.
— Понятие доступности.
— Что мешает пользоваться интерфейсами.
— Ежедневные ситуации недоступности.
— Физиологические и ментальные особенности.
— Взаимодействие с клавиатуры.
— Интерфейсы без указателя.
— Зачем нужен фокус на элементах.
— Как сделать элементы интерактивными.
— Значимые элементы.
— Зачем семантика и как не подхватить диватоз.
Чому не потрібно переробляти елементи.
— Кнопки и ссылки, в чём разница?
— Лейблы элементов.
— Кому нужны описания элементов.
— Разбор ошибок в реальных интерфейсах.
— Инспекторы доступности и скринридеры.

5. Вступ до CSS (Практична лекція). Розберемося з базовими механізмами CSS і почнемо стилізацію проєктів.

— Введение в CSS.
— Синтаксис CSS.
— CSS-селекторы, псевдоклассы и псевдоэлементы.
— Наследование, каскадность и приоритеты в CSS.
— Единицы измерения в CSS: абсолютные, относительные, для управления цветом.
— CSS-функции и директивы.
— Практика стилизации.
— Зачем нужна нормализация.
— Пространства имён и независимые компоненты.
— Стили кодирования для CSS.
— Работа с нестандартными шрифтами.
— Стилизация состояний интерактивных элементов.
— Начинаем стилизацию главной страницы учебного проекта.
— Задаём глобальные стили документа, описываем текстовые параметры элементов и состояния интерактивных элементов.

6. Сітки (Теоретична лекція). Розберемося з блоковою моделлю документа. Створимо сітки сторінок навчального та особистого проєктів.

— Поток документа и блочная модель документа.
— Понятие сетки и потока документа.
— Блочные и строчные элементы и их особенности.
— Свойства блочной модели: размеры, рамки и отступы.
— Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.
— Свойство display. Управление типом элементов.
— Создание сеток на флексбоксах.
— Введение во флексбокс.
— Флекс-контейнер, флекс-элементы, флекс-оси.
— Алгоритм расчёта размеров флекс-элементов.
— Выравнивание и распределение флекс-элементов вдоль осей.
— Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
— Особенности флексов при создании сеток.
— Создаём сетку главной страницы учебного проекта.

7. Декоративні елементи (Практична лекція). Познайомимося з прийомами створення декоративних елементів. Завершимо верстку головних сторінок навчального та особистого проєктів.

— Позиционирование.
— Относительное позиционирование.
— Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
— Фиксированное позиционирование.
— Управление порядком слоёв.
— Приёмы создания элементов интерфейса.
— Блочно-строчные элементы и их особенности.
— Борьба с пробелами между блочно-строчными элементами.
— Особенности флексов при создании элементов интерфейсов.
— Типовой приём «псевдоэлемент с абсолютным позиционированием».
— Использование CSS-графики для создания декоративных элементов.
— Завершаем вёрстку главной страницы учебного проекта.

8. Оформлення контенту (Практична лекція). Завершимо верстку внутрішніх сторінок і підготуємо проєкти до публікації. Почнемо готуватися до захисту особистого проєкту.

— Практикуемся в вёрстке элементов содержимого.
— Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать при наполнении страницы из CMS.
— Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
— Подготовим свёрстанный учебный макет к публикации или передаче заказчику.
— Разбираем типовые случаи переполнения и способы борьбы с ними.
— Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

9. Вступ до JavaScript (Практична лекція). Познайомимося з JavaScript, дізнаємося що таке Vanilla JS і оживимо деякі блоки верстки.

— Язык программирования JavaScript.
— Роль программирования в жизни верстальщика.
— Что такое DOM и зачем нам объект document.
— Зачем нужен объект window.
— Типовые случаи использования JavaScript.
— Как найти любой элемент на странице.
— Как реагировать на события, происходящие на странице.
— Как менять CSS-стили у элементов.
— Как использовать анимацию на странице.
— Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.

10. Найкращі практики (Теоретична лекція). Дізнаємося як правильно застосовувати практичні знання, як вчитися новому і розвиватися в професії.

— Совместимая вёрстка.
— Прогрессивное улучшение.
— Постепенная деградация.
— Цена совместимости.
— Независимые слои улучшения.
— Реальное тестирование.
— Многообразие браузеров и устройств.
— Инспекторы, эмуляторы, виртуальные машины.
— Слабые устройства и медленные сети.
— Минификация, сжатие, оптимизация.
— Эмпатия, приоритеты, сначала контент.
— Корневые технологии.
— Веб-стандарты и фантазийные велосипеды.
— Ваниль против библиотек и фреймворков.
— Мода, хайп, вечное и светлое.
— Развитие в профессии.
— Как не потерять актуальность знаний.
— Обмен знаниями, события, выступления.
— Пограничные дисциплины.

11. Як не загубитися на ринку праці. Працевлаштування, пошук замовлень, оцінка роботи

— Какая вообще бывает работа?
— В офисе
— На фрилансе
— Поиск работы
— Как оценивать себя и проходить собеседования

Чи потрібна реєстрація?

Ні, реєстрація не обов'язкова. Просто заповніть усі поля під час оформлення замовлення і ваш акаунт створиться автоматично. Дані, які ви ввели на сторінці оплати (пошта, пароль), потім можна використовувати для входу на сайт.

Як оплатити обраний курс?

Наш сайт приймає оплату за допомогою платіжної системи Way For Pay. Усі операції на нашому сайті безпечні і проходять з використанням шифрованого SSL з'єднання. Ми не збираємо і не зберігаємо ваші платіжні дані. Платіжна система повністю гарантує безпеку платежів.

Наразі доступні такі способи оплати:

  • Банківська картка (будь-яка)
  • Приват24
  • G pay
  • Apple pay
  • Каса Visa
  • Masterpass
  • Мгновенная рассрочка и оплата частями для владельцев карт ПриватБанку
  • Розстрочка для власників карток Monobank, Ощадбанк, Райффайзен, А-Банк, ОТР Банк, Глобус Банк, Sportbank

 

1. На странице курса нажмите «Купить»
2. Затем в открывшейся вкладке нажмите «Оформление заказа»
3. На странице оформления заполните все поля и нажмите «Купить»
4 Автоматично відкриється сторінка платіжної системи.
5. Виберіть спосіб оплати.
6. Введіть дані та дотримуйтесь інструкцій платіжної системи.
7. Після успішної оплати ви будете автоматично направлені на сторінку, де зможете отримати доступ до курсу. Так само вам буде надіслано лист із посиланням на курс.

Якщо жоден з перерахованих способів оплати вам не підходить, напишіть нам: info@siluette.com.ua або скористайтеся чатом у правому нижньому кутку сторінки нашого сайту. Ми обов'язково допоможемо.

Як отримати оплачені матеріали?

Для того, чтобы получить материалы — просто заполните все поля при оформлении заказа (включая поле — Создать пароль учетной записи).

Після оплати - система автоматично направить вас в особистий кабінет у розділ ①"Завантаження". Тут буде список ваших оплачених матеріалів і посилання на скачування②.

Або натисніть у правому верхньому кутку сайту пункт Мій акаунт, введіть пошту і пароль, який ви придумали, коли оформляли замовлення. У розділі Завантаження є посилання на скачування.

Скільки часу будуть доступні матеріали?

Ссылка на ваш курс будет доступна в течении 90 дней со дня оплаты. За это время вы должны скачать все материалы на свое устройство. После окончания этого срока ссылки могут стать неактивными. Это связано с нововведениями компаний, предоставляющих услуги облачного хранилища. Если вы не успели скачать купленные курсы, напишите нам на почту — info@siluette.com.ua

Відгуки

Відгуків немає, поки що.

Будьте першим, хто залишив відгук “HTML и CSS Профессиональный курс часть 1”“

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *