Курс "Верстка"

Курс верстки дозволить вам вивчити основи створення веб-сторінок. Ознайомити з основними елементами HTML, структурою документа, тегами і атрибутами. Ми освоїмо стилізацію і розташування елементів за допомогою CSS, селектори, властивості класи, масиви і т.д. отримаємо навички по створенню адаптивного дизайну, роботі з медиазапросами і оптимізації веб-сторінок для різних пристроїв і браузерів.

  • Свій викладач
  • 2-3 рази на тиждень
  • 1,5-3 місяці
laptop
blop

Варіанти навчання

Курси стартують кожного місяця
Ми підберемо Вам групу або індивідуального педагога під Ваш рівень та напрямок

Індивідуальний дорослий курс

  • Індивідуально 2-3 рази на тиждень
  • Доступ до матеріалів курсу назавжди
  • Від півтора до восьми місяців

від 26 000 грн/курс

Записатись на пробне
початковий

Індивідуальний дорослий курс

  • Індивідуально 2-3 рази на тиждень
  • Доступ до матеріалів курсу назавжди
  • Від півтора до восьми місяців

від 36 000 грн/курс

Записатись на пробне
середній

Індивідуальний дорослий курс

  • Індивідуально 2-3 рази на тиждень
  • Доступ до матеріалів курсу назавжди
  • Від півтора до восьми місяців

від 43 500 грн/курс

Записатись на пробне
поглиблений

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

Тема: 1
Вступ до веб-розробки.+

  • Як працюють сайти. Backend і frontend. Верстка
  • Як виглядає і з чого складається код веб-сторінки
  • Встановлення редактора коду Sublime Text
  • Проста веб-сторінка на HTML. Теги та атрибути.
  • CSS-стилі. Селектори, параметри та значення

Тема: 2
Мова HTML+

  • Структура документа HTML5
  • Огляд і демонстрація роботи основних HTML-тегів
  • Верстка веб-форм. Поля і кнопки. Валідація форм
  • Таблиці і таблична верстка
  • Семантична верстка. Стандарти і валідність

Тема: 3
Історія та стандарти, базові елементи+

  • Історія розвитку Інтернету, поява служби WWW
  • Стандарти Інтернету та WWW
  • Терміни XHTML, синтаксис, Базова Web-сторінка.
  • Поділ елементів на блокові і лінійні
  • Організація структури Web-сторінки за допомогою заголовків H1, H2, H3, H4, H5 і H6, абзаців P розмічений текст PRE. Лінійні елементи посилення STRONG і емфазіс EM
  • Програмне забезпечення: редактори та оглядачі
  • Завдання: розмітка текстових документів.

Тема: 4
Основи css+

  • Синтаксис CSS та правила каскадності
  • Групування та успадкування стилів
  • Пріоритети стилів у CSS

Тема: 5
Селектори css+

  • Комбіновані селектори
  • Групування та успадкування стилів
  • Пріоритети стилів у CSS

Тема: 6
Посилання та шляхи+

  • Елемент а. завдання ресурсу за допомогою атрибутів href гаряча клавіша. Підказка
  • Відносні шляхи
  • Іменування папок
  • Абсолютні шляхи, протоколи та відповідні їм служби. Поняття URL
  • Розбиття документа на фрагменти імена закладок (мітка). Поняття URN та URL
  • Лінійні кадри. Посилання на кадр. Табличні кадри.
  • Завдання: організація посилань між файлами у кількох вкладених папках.

Тема: 7
Списки, символи, кодування, метадані+

  • Марковані списки. Нумеровані списки, Вкладення списків
  • Унікод
  • Символьні підстановки на основі номерів символів
  • Символьні підстановки на оснвове номерів символів шістнадцяткова система числення
  • Список імен і номер найбільш уживаних символ.
  • Мережеві пакети. Заголовки мережевих пакетів.
  • Заголовок Content-Type протоколу HTTP. Тип вмісту (MIME). Кодування
  • Введення в метадані. Перевизначення заголовків протоколу HTTP. Перевизначення заголовка Content-Type
  • Метадані AUTHOR, GENERATOR.
  • Принципи функціонування пошукових систем, реєстрація в пошукових системах.
  • Метадані KEYWORDS та CESRIPTION, правила підбору ключових слів, зіставлення опису і заголовка
  • Завдання: створення різних списків. Завдання кодування подброр ключових слів, опис сторінки

Тема: 8
Вступ у CSS. Представлення блокових Елемент+

  • Що таке каскадні таблиці стилів
  • Модель представлення блоних елементів як полів
  • Синтаксик правил. Властивість border, одиниця вимірювання
  • Атрибут style. Властивості margin і padding. Докладний роз'яснення моделі подання.
  • Переповнення блоку
  • Обтікання. Заборона обтікання.
  • Методи розміщення елементів на сторінці
  • Методи розміщення елементів на сторінці
  • Створення панелі навігації
  • Верстка вертикально і горизонтального меню
  • Методологія взаємодії елементів всередині блоку Relative, Absolut, Flex, Fixed, etc
  • Завдання: перші кроки з оформлення сторінок атрибутом style.

Тема: 9
Шрифти та текст+

  • Різниця між шрифтовим і текстовим оформленням
  • Різниця між шрифтовим і текстовим оформленням
  • Текст. Відступ червоного рядка. Вирівнювання тексту
  • Розрив рядка і його заборона, Розстановка переносів
  • Інтерліньяж, міжсимвольний інтервал.
  • Оформлення тексту. Перетворення тексту
  • Написання текстів для Web
  • Оформлення заголовків, кернінг
  • Колір грифта і фону, відстань між буквами і рядками
  • Базова лінія, вирівнювання елементів між собою і всередині блоків
  • Метадані KEYWORDS та CESRIPTION, правила підбору ключових слів, зіставлення опису і заголовка

Тема: 10
Кольори тексу і фону. Практика. Зображення+

  • Фізична сутність кольору, сприйняття кольорів людина
  • Підбір кольорів, їх сполучуваність.
  • Завдання кольору для тексту і фону, нюанси
  • Варіанти завдання кольору в CSS
  • Зображення, робота з Adobe ImageReady. Графічні формати
  • Формати JPEG
  • Формат GIF. Прозорі області. Анімація
  • Формат PNG. Попупрозорі області
  • Підсумок по вибору формату
  • Вставка зображень в Web-сторінку
  • Фонове зображення
  • Налаштування фонового зображення, властивість Background
  • Градієнт
  • Тіні
  • Рамка світіння
  • Розмиття
  • UI генератори
  • Переклади, стандартні рішення в анімаціях

Тема: 11
Розташування елементів. Каскадні таблиці стилів+

  • Відносне зміщення. Взаємоіснування властивостей position, relative, і float
  • Аболютне розміщення. Взаємоіснування властивостей position, absolute; і float
  • Пошарове розташування елементів. Властивість z-index
  • Використання елемента STYLE для розділення оформлення та наповнення. Найпростіший селектор
  • Селектори по ієрархії. Поняття каскаодності
  • Клас. Спрощення структури сторінки
  • Відмова від атрибута style за рахунок використання ідентифікатор
  • Зовнішні таблиці стилів, їх співіснування з внутрішніми і вкладеним стилем
  • Завдання: реорганізація сторінок під елемент STYLE і зовнішні таблиці стилів

Тема: 12
Таблиця+

  • Внутрішня структура таблиці. Шапка, тіло і підсумок: рядки і осередки
  • Об'єднання осередків
  • Оформлення таблиць. Використання КЛАСІВ і 4 селекторів по ієрархії
  • Використання таблиць для табулированнх даних і для оформлення Web-сторінок. Атрибут sumary.
  • Карти посилань.
  • Застаріла таблична верстка
  • Завдання: додавання таблиць в Web-проект

Тема: 13
Медіазапити+

  • Що таке медіа запит?
  • Методи, завдання медіазапитів
  • Логічекіе оператори
  • And
  • if
  • Кома
  • Not
  • Only
  • Вибираємо тип носія. Перевіряємо параметри пристрій.
  • Метат тег viewport
  • Стратегії використання медіазапитів
  • На які розміри і типи екрану варто орієнтуватися

Тема: 14
Псевдокласи. Покажчик миші. Оформлення списків. Застарілі методи+

  • Псевдокласи тексту. Створення буквиці
  • Псевдокласи посилань. Підбір кольорів для посилань
  • Покажчик мищи
  • Оформлення списків. Маркер, його тип і розташування. Малюнок в якості маркера
  • Оформлення нумерованих списків
  • Списки визначень. Використання та оформлення списків визначень
  • Застарілі методи оформлення. Колірна гамма, шрифти, текст, таблиці, списки, зображення
  • Псевдокласи кнопок. Стандартні рішення
  • Псевдокласи картинок
  • Підключаємо анімації
  • Тривалість анімації
  • Знайомство з бібліотеками анімацій
  • Бібліотека Animate CSS
  • Підключаємо бібліотеку. Стандартні рішення.
  • Практика в оформленні різних блоків сайту
  • Завдання: налаштування посилань, покажчика миші і списків. Списки визначень. Оформлення декількох блоків.

Тема: 15
Підсумок по базовій верстці+

  • Розділення наповнення та оформлення
  • Ініціатива доступності Web
  • Розміщення Web-сторінок в Інтернеті

Тема: 16
Адаптивність та кросбраузерність+

  • Ширина екрану і" гумовість " сайту
  • Media-запити
  • Flexbox
  • Кроки адаптивності та сітки
  • Різноманітність браузерів і їх особливості
  • Інструменти перевірки та забезпечення адаптивності та кросбраузерності

Тема: 17
Flex box+

  • Модуль макета гнучкого контейнера
  • Основне поняття
  • Контейнер
  • Елемент
  • Порядок відображення елементів і орієнтація
  • Направление главной оси
  • Напрямок головної осі
  • Управління багаторядковістю
  • Гнучкість
  • Коеф. зростання
  • Коеф. стиснення
  • Базовий розмір
  • Багаторядкове вирівнювання Flex елементів
  • Вирівнювання. По поперечній осі. По вертикалі

Тема: 18
Advanced CSS+

  • Складні селектори. Властивість !Important
  • Псевдо-класи та псевдо-елементи
  • Трансформації, переходи та анімації
  • Стандарти іменування в CSS. Методологія БЕМ
  • Бібліотеки стилів: Bootstrap, Semantic UI, Material UI
  • Шаблонізатори (Twig, Haml) і передпроцесори (SASS, LESS, Stylus)

Тема: 19
Ведення власних проектів+

  • Пошук жебраки
  • Методики монетизації проектів
  • Фріланс та власний бренд
  • Біржі та робота в команді
  • Аналіз, тестування та вдосконалення продуктів
  • Взаємозв'язок дизайну та програмування
  • Конверсія і побудова воронок продажів
  • Відкладання і виявлення багів

Тема: 20
Основи JavaScript+

  • Що таке JavaScript і як його підключити до веб-сторінки
  • Бібліотека JQuery. Управління стилями елементів
  • Обробка подій.
  • Відображення і приховування елементів, анімація.
  • Відображення і приховування елементів, анімація.
  • Робота з мережею, отримання і відправка даних
  • JavaScript-фреймворки

Тема: 21
Оформлення веб-проекту+

  • Фон, прозорість та градієнти
  • Межі, аутлайни і тіні
  • Шрифти та оформлення тексту. Типографіка і спецсимволи
  • Стилі покажчиків
  • Зображення, формати, стиснення, спрайти, iconfonts
  • Favicon
  • Малювання на веб-сторінці. SVG і Canvas

Тема: 22
Інструменти верстальника+

  • Розміщення своїх робіт в Інтернеті. Домен та хостинг
  • Інструменти командної розробки. Таск-трекери та Git
  • Збирачі, мініфікатори та оптимізатори проектів
  • Інструменти прототипування
  • Інші середовища розробки. NetBeans, WebStorm
  • Дипломна робота

Як записатись на курси

Обираємо напрямок

Онлайн або стаціонар

Навчаємося і практикуємося

Оформлюємо портфоліо

Отримуємо сертифікат

Шукаємо вакансії серед партнерів

1

Вибір напрямку

Вибираємо форму навчання, знайомимося з викладачем і встановлюємо всі необхідні програми

2

Старанно вчимося і практикуємося

Проходимо всі практики та теорію, оформлюємо портфоліо робіт

3

Пошук роботи

Формуємо резюме, готуємо портфоліо до перевірок, використовуємо всі доступні платформи та пропозиції від наших партнерів

Сертифікат Мій Комп'ютер

Підтвердить, що ви пройшли курс, а також стане додатковим аргументом при влаштуванні на роботу

Сертифікат Мій Комп'ютер — зразок 1
Сертифікат Мій Комп'ютер — зразок 2

Записатись на курс або отримати безкоштовну консультацію

Натискаючи кнопку, я погоджуюсь на обробку персональних даних та з правилами користування

Популярні питання до IT школи

- Які у вас є форми навчання? +

Ви можете обрати один з наших численних офісів або взяти свого викладача в скайпі або дискорді. Якість освіти однакова в обох випадках, всі теми вивчаються до засвоєння учнем. Практика опрацьовується для отримання навичок, необхідних під час роботи у великих компаніях.

- Скільки тривають курси? +

Кожен курс має різну тривалість. Курси для дітей займають 1,3–1,5 року. Дорослі напрямки, зазвичай, займають від 2 до 6 місяців, зі своїм викладачем. Деякі складні дисципліни вимагають освоєння двох курсів, наприклад Fullstack програмування.

- Як дізнатись вартість навчання за кожним курсом? +

Оскільки ми представлені у різних містах, вартість дещо відрізняється для кожного випадку. Будь ласка, зателефонуйте нам або скористайтесь зручною соціальною мережею, щоб дізнатися актуальні ціни на будь-який з наших курсів.

- Які у вас є варіанти і способи оплати? +

Ви можете сплатити кількома способами. При відвідуванні будь-якого офісу ви можете укласти договір навчання на місці та сплатити готівкою. Якщо ви займаєтеся онлайн, ви можете сплатити курс у банку за наданими реквізитами або переказом на картку ПриватБанку. Ми перерахуємо вартість у зручну валюту, якщо ви мешкаєте за кордоном.

- Чи допомагаєте ви з працевлаштуванням? +

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

Статті

Студенти Академії Мій Комп'ютер за навчанням

Про академію Мій Комп'ютер

Працювати треба не 12 годин, а головою. — Стів Джобс

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

Можемо запропонувати навчання за напрямками:

  • Веб-дизайн
  • Растрова графіка, векторна графіка та анімація
  • Програмування для дітей
  • UI/UX дизайн
  • Python
  • Frontend
  • Backend
  • JavaScript
  • 3ds Max + Corona + AutoCAD
  • SEO + SMM

Написати нам

Контакти

Зв'яжіться з нами зручним способом або замовте дзвінок від нашого менеджера:

Телефони:

Пошта:

Слідкуйте за нами: