Відгуки Працевлаштування Контакти
Куратор курсу
Ростислав Суслов
  • Front-end Developer
  • 4+ років сфері IT;
  • Є провідним спеціалістом у проектах компанії;
  • Верстає неверстаюче і анімує неанімоване;
Про що курс Front-end(HTML/CSS + JS)

Курс Front-end(HTML/CSS + JS)  — це доволі легкий спосіб увійти до IT-індустрії. Під час навчання ви познайомитеся з останньою версією мови HTML5 і стилів CSS3. Завдяки цим технологіям ви зможете створювати стильні інтерактивні веб-сторінки, які будуть основою майбутнього сайту.

В курсі ви охопите всі аспекти створення сайту: від макетів у PSD-форматі до адаптивного документа. Головний наголос під час навчання буде ставитися на практику та виконання домашніх завдань.

Front end курси будуть ідеальними для
  • Тих, хто хоче навчитися створювати сайти
  • Веб-дизайнерів
  • Графічних дизайнерів
  • Контент-менеджерів
Програма курсу Front-end(HTML/CSS + JS)
38
Занять
19:00 - 21:00
Час занять
4,5
Місяці
  1. Знайомство, вступна інформація.

    Перший кодінг.

    Знайомство

    Що таке IT загалом і яке місце займає front-end у веб-розробці.

    Етапи розробки проекту. Огляд інструментів розробки.

    Структура HTML документа. Основні теги CSS властивості

  2. Принципи роботи HTML та CSS. Figma. Практика.

    Внутрішні стиль.
    Три методи підключення CSS
    Рендеринг сторінок.
    Блокові-малі.
    Особливості HTML5. Поняття кросбраузерності та валідності
    Figma для fornt-end розробника
    CSS властивості”

  3. Специфіка css. FTP. Практика.

    Селектори.
    Специфіка css. Фаг !important
    Значення селектора, вага від типу звернення
    Посилання. Багатосторінкові сайти
    FTP. Робота із сервером.
    Коментування коду
    CSS властивості

  4. Пути, импорт сбросс стилей. Методология BEM. Практика.

    Абсолютный и относительный путь
    Импорт стилей
    Сброс стилей по-умолчанию.
    CSS reset.
    Изображения, как часть контента
    Методология BEM. Нейминг классов. Назначенеие, актуальность, плюсы и минусы.
    CSS свойства

  5. Таблиці, flexbox layout. Практика. Робоче оточення

    Верстка таблиць
    Flexbox layout.
    Робоче оточення або що має бути встановлене. Приклади використання
    CSS властивості”

  6. Flexbox layout. Псевдоэлементы. Позиционирование элементов

    Flexbox layout.
    Позиционирование элементов, свойство position. static, relative, absolute, fixed, sticky: детальное рассмотрение каждого поведения
    Псевдоэлементы after и before.
    Навык гуглить.
    CSS свойства

  7. hover, :active, :focus. Спрайти.

    CSS псевдоклас :hover, :active, :focus. Порядок зйомки.
    Концепція спрайт. Технічне застосування. Призначення, актуальність, плюси та мінуси.
    Семантична верстка
    Верстка навігація соціальних мереж із застосуванням спрайтів.
    Квіткоутворення. rgb. hex. Альфаканал та непрозорість
    Навичка гуглити.
    CSS властивості”

  8. Шрифти, змінні css, функція calc()

    Підключення шрифтів. Що таке безпечні шрифти?
    google fonts огляд, застосування.
    Псевдоклас: root
    Використання змінних у CSS. Призначення, актуальність, плюси та мінуси.
    Функція calc() математичні операції CSS
    Навичка гуглити.
    CSS властивості

  9. Псевдокласи. Селектори атрибутів

    Псевдокласи: first,: last,: nth-child. Приклади використання практично.
    Звернення до силектора, різноманітність методів.
    Синтаксис селекторів атрибутів
    Вендорні префікси.
    Адаптивний шрифт (px, rem, em, vw). Робота з макетами
    CSS властивості

  10. Формы. Javascript cтарт. JQuery. jQuery-Mask

    Формы. Назначение, принцип работы.
    Атребуты тега input.
    Теги для вёрстки форм.
    Стилизация элементов форм
    Что такое JQuery.
    Презентация плагина jQuery-Mask.js
    Реализация маски ввода номера телефона средствами jQuery-Mask.js
    CSS свойства

  11. Стилізація тега select. jQuery Nice Select. Градієнти. Паралакс

    Презентація плагіна jQuery Nice Select
    Підключення до проекту jQuery Nice Select
    Стилізація checkbox/radio
    Лінійні та радіальні градієнти. Приклад використання.
    Паралакс.
    CSS властивості

  12. Гумова верстка. Медіазапит.

    Верстка таблиці тегів.
    Гумова верстка, приклади та правила.
    Медіа-запити. Використання медіавиражень. Актуальні брекпоінти.
    mobile/desctop first. Призначення, актуальність, плюси та мінуси.
    Адаптуємо таблицю тегів

  13. Фреймворк bootstrap5 знайомство

    Презентація фреймворку bootstrap5
    Підключення. Вивчення розмітки та breakpoints.
    Використання компонентів.
    Розсмілення класів.
    Структура розмітки bootstrap5. Система сіток.

     

  14. bootstrap5 адоптивна верстка

    Поглиблене вивчення системи сіток та структури розмітки.
    Адоптація. Детальний аналіз застосування шести точок скидання фреймворку
    Кастомізація компонентів під потреби проекту

  15. Властивість перетворення. Анімація.

    Детальний аналіз якості transform і його значень.
    Ключові кадри Keyframes.
    Keyframes + transform.
    Анімація “Розкадрування”.
    Застосування фреймворку bootstrap у розмітці лекції.

  16. SVG. Анимация SVG. Слайдер slick.js

    SVG в HTML. Введение.
    Стилизация SVG объектов.
    Анимарование SVG объектов.
    Анимация по заданной траэктории
    Презентация сладера.
    Подключение. Применение. Натсройка. Стилизация
    Применение фреймворка bootstrap в разметке лекции

  17. Анімація wow.js та animate.css. aos.js, Слайдер slick.js

    Презентація бібліотеки wow.js Підключення. Розбір атребутів. Застосування.
    Презентація бібліотеки animate.css Підключення. Розбір атребутів. Застосування.
    Презентація бібліотеки aos.js Підключення. Розбір атребутів. Застосування.
    Застосування фреймворку bootstrap у розмітці лекції.

  18. fullPage.js

    Презентація jqeary плгін fullPage.js
    Підключення. Розбір атребутів. Застосування.
    Застосування фреймворку bootstrap у розмітці лекції.

  19. jquery.multiscroll.js

    Презентація jqeary плгін jquery.multiscroll.js
    Підключення. Розбір атребутів. Застосування.
    Застосування фреймворку bootstrap у розмітці лекції.

  20. Start VanillaJS. Фреймворк PaperCSS

    Фреймворк PaperCSS.
    Презентація фреймворку PaperCSS
    Підключення. Вивчення розмітки та breakpoints.
    Використання компонентів.
    Розсмілення класів.
    Структура розмітки bootstrap5. Система сіток.
    Практичне застосування PaperCSS.

    Javascript start.
    Типи даних
    Взаємодія: alert, prompt, confirm. console.log()
    Змінні var, const, let
    метод queryselector()
    Стилі та класи

     

  21. Javascript. Фреймворк Neomo. Робота DOM деревом. Цикл forEach. Отримання атребутів. Рух миші. Реалізація складного інтерактивного SVG об'єкта

    Фреймворк Неомо.
    Презентація фреймворку Neomo
    Підключення. Вивчення розмітки та breakpoints.
    Використання компонентів.
    Розсмілення класів.
    Структура розмітки Neomo. Система сіток.
    Практичне застосування Neomo.

    Метод QuerySelectorAll отримання колекції.
    цикл forEach перебір масиву
    getAttribute повертає значення зазначеного data-* атрибутів
    рух миші: mouseover/out, mouseenter/leave
    властивість innerText
    Реалізація складного інтерактивного SVG об’єкта із застосуванням javascript

  22. Javascript. Фреймворк Bulma. Конструкція if, else if, else. медіавирази. window, onload, onresize, innerWidth.

    Фреймворк Bulma.
    Презентація фреймворку Bulma
    Підключення. Вивчення розмітки та breakpoints.
    Використання компонентів.
    Розсмілення класів.
    Структура розмітки Bulma. Система сіток.
    Практичне застосування Bulma.

    медіавираження в js. Призначення, актуальність, плюси та мінуси використання.
    Конструкція if, else if, else.
    onload
    resize та innerWidth
    практична робота Освоюємо

  23. Бібліотека lottie.js, анімація на json

    Що таке json і навіщо він потрібний.
    Бібліотека lottie.js
    Презентація фреймворку lottie.js
    Підключення.
    Практичне застосування lottie.js
    Реалізація анімації із застосуванням формату json

  24. Git, Node.js, Gulp, Sass, Include. Видача складання проекту. Старт проекту

    Що таке node.js, npm, Gulp. Принципи взаємодії.
    Огляд популярних плагінів для Gulp.
    Ідеальність верстки. PerfectPixel.
    Огляд плагінів.
    Що таке Git. Принципи роботи. Git Bush.
    git clone, add, commit, push
    Верстка проекту.

  25. Git, Gulp, Sass.URL-encoder for SVG. Генератор HTML-дерева. Верстка проекту.

    Синтаксис scss. Переваги та актуальність.
    git branch, checkout, gitk, відкат комміту
    Переміщення файлами в командному рядку.
    Генератор HTML-дерева
    URL-code для SVG.
    Верстка проекту.

  26. Git, Gulp, Include. Верстка проекту

    Include. Переваги та актуальність.
    git merge
    Верстка проекту в різних гілках, мерж гілок.

  27. Git, Gulp, API. Оптимізація зображень. Верстка проекту. VSC - Configure Users Snipets

    VSC – Configure Users Snipets. створення власних сніпетів.
    Підключення API TinyPNG
    Верстка проекту.
    GitHub Pages
    Командна робота з гітом

  28. Git, Gulp, мовна панель vannila.js таби. Верстка проекту.

    Мовна панель vannila.js
    Верстка проекту.
    Командна робота з гітом
    Підготовка до співбесіди
    code review учнів

  29. Git, Gulp, vannila.js Таби. Верстка проекту.

    Таби vannila.js
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів

  30. Git, Gulp, vannila.js burger-menu. Верстка проекту.

    Burger-menu vannila.js
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів

  31. Git, Gulp, vannila.js акордеон. Верстка проекту.

    Акордеон vannila.js
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів

  32. Git, Gulp, vannila.js scroll-to-top. Верстка проекту.

    Кнопка scroll-to-top vannila.js
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів

  33. Git, Gulp, vannila.js fixed-header. Верстка проекту.

    vannila.js fixed-header
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів

  34. Git, Gulp, vannila.js відстеження блоку на сторінці. Верстка проекту.

    vannila.js відстеження блоку на сторінці. Заклик до дії.
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів

  35. Заняття з Program Manager

    Принцип управління проектами/продуктами в ІТ

    Комунікація та ролі у класичному менеджменті

    Особливості команди та комунікації в Agile

    SCRUM як методологія трансформер

    Estimates або як оцінювати завдання

    Kanban

  36. Оптимізація проекту. Pagespeed оптимізація. Markup Validation Service. Генератор HTML-дерева. Верстка проекту

    Pagespeed оптимізація
    Оптимізація СSS
    Оптимізація JS
    Оптимізація зображень
    Знайомство із сервісом validator.w3.org
    Виправлення помилок HTML
    Контроль класнеймінгу методології BEM

  37. Розмова з кар'єрним менеджером

    Як і де шукати роботу для початківця і які інструменти при цьому використовувати;
    Як правильно зробити резюме і яка інформація у ньому є надважлива, а що буде зайвим;
    Як створити профіль на Linkedin, щоб його могли побачити потенційні роботодавці;
    7 порад, які допоможуть пройти онлайн співбесіду набагато успішніше;
    Q&A.

  38. Огляд популярних фреймворків та CMS.Випуск.

    React, Angular, Vue, Wordpres, Opencart. Карта зростання

    Література та рекомендації з глибокого самостійного вивчення розглянутих тем.

    Вручення дипломів. Випуск.

Інструменти які ви вивчите на курсі HTML / CSS
PHOTOSHOP
HTML/CSS
JAVASCRIPT
VISUAL STUDIO CODE
POSTCSS
GIT И GITHUB
BOOTSTRAP
JQUERY
image
Не зміг потрапити на заняття ?
  • ми розглядаємо та адаптуємо виниклу ситуацію кожної групи індивідуально
  • ми здійснюємо відеозапис усіх лекцій, вони доступні після заняття у твоєму особистому кабінеті
  • наші викладачі завжди на зв’язку та мають план Б по додатковим навчальним матеріалам, ти точно не будеш мсумувати при свічках
Навіть у темні часи у нас не забрати бажання навчатися !
Для вступу на курс фронтенду ви повинні
  • На базовому рівні вміти користуватися Photoshop
  • Володіти англійською мовою на базовому рівні
  • Впевнено користуватися будь-якими операційними системами
А раптом мені буде важко і я нічого не зрозумію?
Курс з html і css з нуля дійсно може бути занадто складним для тих, хто ніколи не чув про верстку сайтів або не володіє англійською на достатньому рівні. Зрештою, ви майже програміст, тут не може бути легко. Але онлайн-навчання з фронтенда точно буде по плечу мотивованим хлопцям, які знають, навіщо їм професія Frontend-розробника.

А з нашого боку – гарантуємо, що курс верстки онлайн дасть вам все необхідне для впевненого старту в It. Звісно, ​​буде складно. Але в такі моменти ми радимо візуалізувати ось це айтішне життя на Балі - і тоді у вас відкриється навіть не друге, а третє дихання.💪
Lemon School це IT курси від IT компанії ART LEMON
Тільки практикуючі викладачі
  • 420+
    Випусків
  • 7200+
    Випускників
  • 8640+
    Занять
  • 17280+
    Годин занять
Професія веб-розробника має наступні переваги
  • Вона дає легкий вхід до IT
  • Завжди затребувана
  • На старті з/п від $600
  • У ній є зростання по вертикалі та по горизонталі
  • Можна випендрюватися, адже ви майже програміст
  • Ви зможете працювати віддалено або в офісі
Записатися на IT-курси Lemon School
Залиш заявку і ми допоможемо знайти твій напрямок в IT 🚀


    Диплом, який ти використовуєш у своєму портфоліо. Для твоєї мами ми зробимо роздруківку другого примірника :)
    По закінченню html навчання ти отримаєш:
    • знання щоб адаптувати верстку під будь-які пристрої
    • можливість робити сайти стильними, за рахунок анімацій, іноді навіть тривимірних
    • Досвід роботи на фрілансовой майданчиках
    Вчися сьогодні – плати пізніше!
    Не маєш можливості заплатити за курси html css у Києві повністю? Навчання у нас стало доступнішим! Тепер ти можеш оплатити абсолютно будь-який курс на 6 платежів.
    13 300 ГРН
    /
    6 МІСЯЦІВ
    =
    2 217 ГРН / МІС

    IT змінює життя.

    Ми вже 5 років повністю змінюємо життя наших студентів.

    Ми абсолютно точно знаємо, що завдяки нашим спеціальностям ти зможеш успішно стартанути в кар’єрі верстальника сайтів 🚀

    Наші випускники
    Записатися на IT-курси Lemon School
    Залиш заявку і ми допоможемо знайти твій напрямок в IT 🚀


      Курси з верстки онлайн

      Фронтенд-розробка або верстка сайтів – на сьогодні популярна професія з низьким порогом входу в IT. Щоб стати верстальником швидко, достатньо закінчити курси Frontend онлайн і буквально за кілька місяців ви вже зможете займати позицію Junior з мінімальною зарплатою в $600. Навчитися цієї професії ви можете і самостійно, але спеціалізовані курси від нашої школи Lemon School мають свої переваги. Про них ми й поговоримо нижче.

      Чому вчать онлайн курси з верстки сайтів у Lemon School?

      Навчання верстці сайтів онлайн має кілька етапів:

      • вивчення розмітки HTML;
      • вивчення стилів CSS;
      • навчання тому, як користуватися програмами Figma та Adobe Photoshop для нарізування макетів;
      • вивчення адаптивної та кросбраузерної верстки.

      Крім цього, на нашому курсі ви також вивчите основи такої мови програмування як JavaScript, після чого ви станете справжнім фронтенд-розробником.

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

      Якщо вас цікавить дана професія, ви можете записатися на курси HTML CSS з онлайн навчанням в нашій школі.

      ⌛Тривалість: 2,5 місяці, 22 заняття, 66 годин
      ☝ Формат навчання: онлайн
      🤑 Розстрочка: оплата частинами
      ⚡ Бонус: допомога з працевлаштуванням
      💰 Вартість курсу: 10200 грн
      📲 Дзвони: 099-496-96-66

      Frontend курси онлайн: що ви вмітимете після навчання?

      Верстка сайтів є проміжною ланкою між дизайном та програмуванням. Frontend розробник курси онлайн познайомлять вас як взаємодіяти між цими двома стихіями. На самому початку роботи над проектом ви отримаєте від дизайнера макет, після цього за допомогою мови розмітки (HTML) та таблиць стилів (CSS) ви конструюватимете майбутній сайт. Сама собою мова розмітки не є мовою програмування. HTML дозволяє лише зв’язати одну сторінку з іншою за допомогою лінків, а також розмістити всі необхідні елементи у потрібному місці. CSS додає фарби, форми, всілякі заокруглення на кнопках та інші красиві елементи.

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

      Для верстальника найголовніше це зробити так, щоб користувач зміг максимально просто і комфортно переглядати веб-сторінку. Це стосується не тільки комп’ютерів, телефонів, планшетів, але й різних браузерів, програмного забезпечення, версії ПЗ і так далі. Наприклад якщо верстка крива, то на Андроїд телефонах сайт може виглядати нормально, а на iOS що говориться він “попливе”. У школі Лемон Скул ви дізнаєтесь як користуватися скриптами, як враховувати тип пристрою, його операційну систему та зможете верстати якісні сайти.

      Курси верстки онлайн: кому підійдуть?

      Навчання HTML і CSS онлайн буде ідеальним, якщо ви:

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

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

      Що краще – курси HTML/CSS онлайн чи самостійне навчання?

      Деякі люди, замість того, щоб пройти курси фронтенд розробника онлайн, вибирають навчатися вдома самостійно. Це не похвально, але є нюанс: коли ви вчитеся без досвідченого наставника, ви легко можете заплутатися в інформації, коді, не розуміти, звідки у вас з’являються помилки і не знати, як їх виправити. Навчання HTML та CSS з нуля онлайн у школі проходить під уважним контролем досвідченого викладача, практика з великим досвідом роботи, тому ви можете бути на 100% впевнені в тому, що ваші знання будуть максимально повними та відповідними до всіх трендів верстки.

      Якщо поглянути на статистику, то при самостійному вивченні верстки йде приблизно 12 місяців, тоді як на наших дистанційних курсах по HTML і CSS ви станете повноцінним фронтендом розробником вже за 2,5 місяці.

      Курси HTML/CSS онлайн: як проходить навчання?

      Сьогодні не всі мають можливість відвідувати оффлайн-навчання в IT-школах, саме тому ми пропонуємо вам піти на HTML CSS онлайн курси. Ми підготували вам серію вебінарів з наступними домашніми завданнями. Так, на перший погляд, може здатися, що вчитися фронтенду дистанційно досить складно… Але ми знаємо страхи студентів і можемо впевнено сказати, що ми завжди прийдемо на допомогу. Наші викладачі будуть постійно на зв’язку з вами відповідати на всі питання, а програма навчання створена таким чином, що ви без особливих труднощів зможете пройти HTML курси онлайн з усіх куточків світу.

      Чи підійдуть курси HTML та CSS онлайн для новачків?

      Курси фронтенд онлайн підходять навіть для тих, хто раніше не знав про існування цієї професії. Єдине, ви повинні впевнено користуватися комп’ютером, а решті ми вас навчимо! Дистанційні курси верстки – це ідеальна можливість знайти сучасну, високооплачувану професію і працювати як на велику компанію в штаті, так і віддалено на фрілансі.

      4.2/5 - (52 votes)
      Записатися на IT-курси
      Допоможемо, підкажемо і знайдемо твій напрямок в сфері IT. Залишай заявку для безкоштовної консультації або запису на курс.


        Закрыть
        [contact-form-7 404 "Не знайдено"]
        Закрыть
        Адміністратор школи
        Іраклій
        Телефон:
        +38 (099) 496-96-66
        Графік роботи:
        з 10:00 до 18:00
        Закрыть
        Закрыть
        Спасибі! Ваша заявка була відправлена
        Якщо ви вже точно вирішили записатися на даний курс, у Вас є можливість оплатити курс online, і заощадити 5% від вартості курсу.
        Закрыть
        Закрыть
        Закрыть
        Закрыть
        Закрыть