Відгуки Блог Працевлаштування Контакти
Куратор курсу
Ростислав Суслов
  • 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

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

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

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

Для вступу на курс фронтенду ви повинні
  • На базовому рівні вміти користуватися Photoshop
  • Володіти англійською мовою на базовому рівні
  • Впевнено користуватися будь-якими операційними системами
А раптом мені буде важко і я нічого не зрозумію?
Наше навчання html css з нуля, тому навіть не маючи уявлення про цю професію ти зможеш її освоїти, але... буде важко, тому що верстка сайтів це майже програмування!

Від тебе потрібна велика старанність і бажання дізнаватися про щось нове. Ми в свою чергу гарантуємо цікаві курси верстки сайтів, теоретичний матеріал, що легко запам'ятовується, і багато практики! Твоє бажання + наша методика викладання = ти стаєш затребуваним верстальником сайтів.💪
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-курси Lemon School
    Залиш заявку і ми допоможемо знайти твій напрямок в IT 🚀


      Курси HTML, CSS, Frontend у Києві – навчання верстці сайтів

      Дане навчання передбачає освоєння такої IT професії як Верстальник сайтів. Крім верстки, ви дізнаєтеся основи Фронтенд розробки, тобто – мова програмування JS (JavaScript). Пройшовши курси верстальників (HTML/CSS) в 🍋 Лемон Скул у Києві ви станете першокласним та затребуваним спеціалістом у будь-якій IT компанії. Курси Фронтенд дають підґрунтя для освоєння розробки сайтів.

      Одне не може жити без іншого, тому в будь-якому випадку, якщо ви хочете почати свою кар’єру в IT, то вам необхідно HTML і CSS навчання. Це також називається як верстка сайту. Ви як майбутній верстальник за допомогою HTML розмітки вказуєте, де на веб-сторінці повинні знаходитися певні елементи, і як ці сторінки будуть пов’язані між собою. Навчання CSS дозволить вам надати розміченим елементам фарби, стилю. Щоб усе це на сайті працювало – натискалися кнопки, відкривалося меню, загалом відбувалися якісь дії, вам необхідно впровадити код JS. Щоб вміти це робити, потрібно пройти курси Фронтенд розробника.

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

      Що ви вивчите на курсі html / css верстки та frontend?

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

      • Робитимете робочі сайти на основі розробленого дизайнером макета;
      • Чи зможете адаптувати сайт під різні браузери та розміри екрана;
      • Будете робити мобільні версії сайтів;
      • Навчіться вбудовувати в сайти інтерактивні форми та «невидимі» інструменти статистики;
      • Станете створювати красиві сайти з анімованим дизайном;
      • Навчіться робити інтерактивні сайти.

      Це далеко не все, що дають курси HTML CSS та Front end. Перед вами один із самих🔥 насичених курсів, який дає повноцінний вхід у професію. Якщо ви хочете в процесі навчання створити власний сайт, записуйтесь на курси HTML/CSS від Lemon. Навчальні проекти можна сміливо розміщувати в портфоліо або використовувати за призначенням.

      Де працювати після курсів верстки у Києві?

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

      1. Ви зможете працювати верстальником або фронтенд розробником віддалено. Брати замовлення щодо створення сайтів на основі макета (раніше намальованого дизайну) або навіть без нього.
      2. Після курсів верстки ви навчитеся створювати конкурентні сайти, зможете працювати практично в будь-якому IT агентстві.
      3. Крім айти студій верстка тексту із зображеннями також потрібна в друкарнях та бюро перекладів. Остання з наведених послуг може виконуватись віддалено.

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

      Хто може записатися на курси верстальника?

      З розробленим у Lemon.School курсом верстки сайтів впораються навіть новачки та прості користувачі ПК. Навчання верстці HTML і CSS починається з освоєння базових понять, цьому відводяться перші 2-3 уроки.

      Є багато домогосподарок та пенсіонерів, які не маючи попередньої підготовки успішно закінчують курс по верстці та проходять навчання html з нуля.💪 Щоб робити сайти, зараз не обов’язково програмувати. Більшість роботи проходить у зручних програмах, де відразу ж відображається результат ваших дій.

      Фронтенд та верстка сайтів – формат навчання

      На курсах верстальника у київській філії LEMON.SCHOOL ми запросили викладача з досвідом роботи у створенні сайтів, у керівництві над командою веб-студії, з досвідом викладацької діяльності.

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

      Краще відвідувати всі заняття, активно спілкуватися з викладачем та виконувати домашні завдання. Але якщо ви пропустили – нічого страшного. Наздогнати матеріал можна з відеозапису минулого уроку. Крім навчання в класі доступні курси front end та версти онлайн.

      IT-школа Lemon School видає сертифікати, які визнаються багатьма роботодавцями в Україні та за її межами. Але для цього необхідно успішно пройти фінальний іспит.

      Курси з верстки сайтів із практикою

      У нашій ІТ-школі студенти тренуються не на маленьких навчальних прикладах. Ви будете робити реальні проекти та зустрічатися з реальними завданнями та складнощами. Приготуйтеся до інтенсивної роботи.

      Можливо, якщо ви відучилися у ВНЗ або колись слухали просто лекції з підвищення кваліфікації, такі заняття видадуться надто складними та глибокими. Деякі зі студентів справді бояться, що не витримають темпу навчання та не зможуть засвоїти весь матеріал. Але боятися не варто. Курси HTML верстки вимагатимуть від вас сумлінності, а викладач завжди допоможе розібратися у матеріалі.

      Щоб добре засвоїти знання:

      • Постарайтеся відвідувати курси з HTML/CSS без перерв, не пропускаючи жодного заняття;
      • Уважно слухайте викладача і не соромтеся ставити запитання;
      • Виконуйте завдання до кінця, навіть якщо на це піде більше часу;
      • Читайте додаткову літературу на тему, але попередньо обговоріть це з викладачем;
      • Постарайтеся кілька разів повторити вдома те, що вивчили на занятті.

      Головна порада: вирішіть, навіщо ви записалися на курси верстки сайтів, які саме проекти ви хочете виконувати за допомогою навичок, в яких галузях і компаніях плануєте працювати.

      Наші front end developer курси в Києві організовані для того, щоб допомогти вам в отриманні затребуваної та оплачуваної роботи. Записуйтесь без вагань, отримуйте нову професію чи доповнюйте вже відомі навички!

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


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