Lemon School

Front-end (HTML/CSS + JS)

14 200 UAH за курс
4 місяців
Для початківців
Frontend
Цей курс навчить тебе верстати сайти з нуля — від HTML і CSS до адаптивної верстки та Bootstrap. Тут розберешся з Git, Gulp, JavaScript та попрацюєш над реальним проектом. Після курсу зможеш претендувати на позицію junior front-end розробника.

Про курс

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

Основи HTML та CSS

На цьому курсі починають з основ веб-розробки. Перші заняття присвячені знайомству з інструментами, структурою HTML-документа та базовими CSS-властивостями. Студенти одразу переходять до практики, вивчають принципи рендерингу сторінок і роботу з Figma для front-end розробника. Тут розглядають методи підключення стилів, селектори та специфікацію CSS.

Робота з макетами та методології

Далі курс охоплює роботу з шляхами до файлів, імпорт стилів та скидання стандартних налаштувань. Студенти освоюють методологію BEM для неймінгу класів - розуміють її призначення, переваги та недоліки. Цей блок включає верстку таблиць, вивчення Flexbox та позиціонування елементів. Також розглядають псевдоелементи та навичку ефективного пошуку інформації.

Стилізація та форми

Ця частина програми присвячена CSS-псевдокласам станів, концепції спрайтів та кольороутворенню. Студенти вчаться підключати шрифти, працюють з Google Fonts, CSS-змінними та функцією calc(). Особлива увага приділяється псевдокласам, селекторам атрибутів та адаптивним одиницям виміру. Завершується блок версткою форм, їх стилізацією та знайомством з jQuery для реалізації масок введення.

Адаптивна верстка та Bootstrap

Студенти освоюють гумову верстку, медіа-запити та актуальні брекпоінти. Вчаться працювати за підходами mobile-first та desktop-first. Знайомляться з фреймворком Bootstrap 5 - від підключення до використання компонентів і системи сіток. Поглиблено вивчають адаптацію за допомогою точок скидання фреймворку та кастомізацію компонентів під потреби проекту.

Анімація та робота з плагінами

Цей модуль охоплює властивості transform та CSS-анімацію з використанням Keyframes. Студенти працюють з SVG - від стилізації до анімації об'єктів по заданій траєкторії. Знайомляться з популярними бібліотеками анімації: wow.js, animate.css та aos.js. Навчаються використовувати слайдери та плагіни для створення скрол-ефектів, зокрема fullPage.js та multiscroll.js.

JavaScript та альтернативні фреймворки

Студенти починають вивчати Vanilla JS та альтернативні CSS-фреймворки: PaperCSS, Neomo та Bulma. Вчаться працювати з DOM-деревом, циклами, умовними конструкціями та медіа-виразами. Практикують створення складних інтерактивних SVG-об'єктів. Знайомляться з бібліотекою lottie.js для роботи з JSON-анімаціями.

Інструменти розробника та верстка проекту

Цей блок присвячений професійним інструментам: Git, Node.js, Gulp та Sass. Студенти вчаться налаштовувати робоче середовище, використовувати плагіни для автоматизації та працювати з системою контролю версій. Паралельно починають верстку власного проекту, використовуючи вивчені технології та методології.

JavaScript компоненти та оптимізація

Студенти реалізують типові інтерактивні елементи на чистому JavaScript: мовні панелі, таби, бургер-меню, акордеони, кнопки скролу та фіксовані хедери. Кожен компонент відпрацьовується на практиці під час верстки основного проекту. Паралельно продовжують роботу з Git та Gulp, готуються до співбесід та отримують code review.

Управління проектами та кар'єра

Завершальні заняття включають лекцію з Project Manager про принципи управління проектами в IT, Agile, SCRUM та Kanban. Студенти оптимізують свої проекти для швидкості завантаження, валідують розмітку та знайомляться з популярними фреймворками і CMS. Кар'єрний менеджер допомагає з підготовкою резюме, профілю в LinkedIn та підготовкою до співбесід.

Додаткові можливості

Курс включає безкоштовні заняття з IT-англійської, додаткові навчальні матеріали, консультації з кар'єрним менеджером та лекцію від Project Manager. Випускники отримують диджитал-диплом для LinkedIn, який підтверджує їхні навички front-end розробки.

Що включено

Видається диплом/сертифікат
Гнучкий графік
Реальний проект у портфоліо
Супровід ментора