Курс Frontend-розробник

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

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

Ким ви станете

Frontend-розробник створює інтерфейси, з якими взаємодіятимуть користувачі, верстає сайти за сучасними стандартами, віртуозно володіє JavaScript, HTML, CSS.

Це затребувана і високооплачувана професія, яка включає технічні та творчі компоненти. На позиції frontend-розробника можна робити інтернет кращим і зручнішим.

Програма

– Веб-розробка. Швидкий старт
– Основи HTML/CSS і PHP

Урок 1. Для чого потрібен PHP
Які можливості дає PHP; переваги перед іншими мовами і чому варто вибрати його; що буде на курсі: розглядаємо план курсу, який результат ми отримаємо, чого навчимося.

Урок 2. Встановлення та розгортання сервера на своєму комп’ютері
Як взаємодіють між собою веб-сервер, PHP інтерпретатор і база даних; завантажуємо готову збірку Open Server; обираємо версію PHP; обираємо версію apache; налаштовуємо доступ до локального сайту; як зрозуміти, що все налаштоване правильно і працює; використовуємо редактор коду Sublime Text, вбудований у збірку Open Server.

Урок 3. Як створювати веб-сторінки
Коротко розглядаємо, для чого потрібен html; розглядаємо основні теги: doctype, html, head, title, body, header, h1, footer, div, a, img та їхнє місце у веб-сторінці; демонструємо, як працюють ці теги; показуємо створені теги в панелі
“Інструменти розробника” в Google Chrome; створюємо посилання на головну сторінку та сторінку з магазином так, щоб можна було перейти до магазину та назад.

Урок 4. Створюємо макет нашого магазину
Розглядаємо CSS: що це таке, як підключити стилі до сторінки; пишемо хедер і розглядаємо, як його оформити за допомогою CSS.

Урок 5. Завершуємо оформлення шаблону
Закінчуємо писати хедер; додаємо решту частин макета з готового шаблону; переносимо необхідні частини макета з готового шаблону (HTML, CSS, JavaScript).

Урок 6. Основи PHP
Як використовувати PHP у нашому шаблоні; для чого потрібні змінні та як з ними працювати; які типи даних є в PHP, для чого вони потрібні.

Урок 7. Як зберігати безліч пов’язаних даних
Для чого потрібні масиви і як їх використовувати; кладемо інформацію про товар у масив.

Урок 8. Зберігання та обробка пов’язаних за змістом даних
Вкладені масиви; розміщуємо дані для нашого магазину у вкладених масивах; як отримати інформацію про товар із вкладеного масиву.

Урок 9. Працюємо з циклами
Що робити, якщо потрібно вивести на сторінку багато даних із масиву.

Урок 10. Як зробити сайт живим
Як зробити так, щоб програма змінювала поведінку залежно від різних умов; як зрозуміти, яку сторінку потрібно відкрити; використовуємо параметри адресного рядка для відкриття потрібної сторінки.

Урок 11. Як робити навігацію між сторінками
Робимо посилання на інші сторінки; організовуємо зручну структуру шаблону; виносимо окремі частини шаблону в інші файли; підключаємо інші сторінки залежно від параметрів в адресному рядку.

Урок 12. Створюємо каталог товарів
Виведення всіх товарів на сторінку; працюємо зі сторінкою товару; як у каталозі товарів створювати правильні посилання для кожного товару; виводимо дані про товар на окремій сторінці.

Урок 13. Розміщуємо сайт в інтернеті
Реєструємо ім’я для нашого сайту; завантажуємо файли на хостинг і перевіряємо працездатність сайту.

HTML/CSS . Інтерактивний курс

Урок 1. Основні поняття у веб-розробці
Знайомство, вступна інформація
налаштування visual studio code, гарячі клавіші, встановлення розширень.
Створення html-документа
Структура html-документа.
Види та атрибути тегів
Налагодження браузера.

Урок 2. Основи мови розмітки документів HTML
Списки в html
Спецсимволи та коментарі
Гіперпосилання (локальні, абсолютні, якорі)
Типи зображень для web;
Форми та їхні елементи.
Перегляд, редагування, пошук помилок через налагоджувач браузера

Урок 3. Основи мови оформлення стилів документа CSS
Введення в стилі
Способи підключення стилів
Селектори
Базові властивості стилів (px, %, background, color, border) частина 1
Базові властивості стилів (width, height, font, list-style, текст)
Вкладеність, спадкоємність, успадкування та групування властивостей

Урок 4. Основні теги для верстки, Псевдокласи та псевдоелементи
Основні теги div, span, створення блокової структури
Відступи в елементів
Обтічні елементи
Псевдокласи
Псевдоелементи
Таблиці

Урок 5. Основи позиціювання, робота з Flexbox
Властивість display
Що таке flexbox (горизонтальне та вертикальне розташування)
Порядок відображення, багаторядковість, зміщення окремого блоку
Задавання гнучких розмірів для блоків
Position: relative та absolute

Урок 6. Робота з макетом дизайну у форматі Figma
Що таке макет і які види макетів бувають
Знайомство з програмою Figma, нарізка макета
Визначення розмірів блоків, створення блокової структури
Додавання стилів з макета
Створення сайту за макетом. Частина 1
Створення сайту за макетом. Частина 2

Урок 7. Основи створення адаптивного сайту
Гнучкі розміри блоків, адаптивного сайту
Емуляція мобільних пристроїв
Медіа-запити
Притиснення підвалу до нижньої частини екрана
Практика створення адаптивного сайту
Практика створення адаптивного сайту частина 2

Урок 8. Стандарти web і допоміжні інструменти
Інструменти розробника. Частина 1
Завантаження проєктів на сервер
Кросбраузерність
Знайомство з Boostrap
Знайомство з препроцесором Sass
Практичне використання препроцесора Sass

Основи програмування

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

Урок 1. Знайомство з курсом
Про ведучого курсу. Як організовано курс? Які програми будуть написані?

Урок 2. Підготовка до навчання
Правильний настрій. Результативна мотивація. Важливі особисті якості.
Дорогі колеги, докладніше про необхідні для програміста якості ви зможете дізнатися з вебінару.

Урок 3. Перша програма
Вибір мови програмування. Підготовка браузера. Програма “Hello, world!”.

Урок 4. Змінні
Встановлення зручного редактора коду. Знайомство зі змінними. Простий калькулятор.

Урок 5. Типи даних
Типи даних. Операції з різними типами даних. Перетворення типів даних.

Урок 6. Алгоритми та блок-схеми
Алгоритмічне мислення. Візуальні блок-схеми.

Урок 7. Оператор розгалуження if
Вибір варіантів у програмі. Оператор розгалуження if. Гра в загадки.

Урок 8. Логічні операції
Комплексні умови вибору. Логічні І, АБО. Гра “Злі птахи”.

Урок 9. Цикли do, while
Цикли do і while. Гра в російську рулетку.

Урок 10. Цикл for
Цикл for. Фінансовий калькулятор.

Урок 11. Масиви
Великі набори даних і масиви. Гра в рулетку.

Урок 12. Функції
Функції. Підготовка до написання гри “Black Jack (21)”.

Урок 13. Гра “Black Jack”. Частина 1
Написання повноцінної гри. Основа – роздача карт і підрахунок очок.

Урок 14. Гра “Black Jack”. Частина 2
Завершення написання гри. Визначення результатів і переможця.

Урок 15. Кар’єра програміста
Огляд основних напрямків у програмуванні. Як обрати мову програмування? Чого вчитися далі?

HTML5 і CSS3.

Сучасні засоби Web-розробки
Основа веб-технології – це HTML/CSS Це базовий фундамент, який слугує основою для створення сучасних веб-сайтів і є першим етапом для вивчення інших технологій програмування для глобальної мережі Internet. Будь-яка значуща організація має своє представлення в глобальній мережі. Це вимога часу і вимога ринку. Без урахування сучасних реалій світу неможливо домогтися конкурентоспроможності, а отже, і успіху. Саме зв’язка HTML/CSS дає можливість верстати макети, створювати і редагувати статичні сайти. Технологія програмування, що вивчається на цьому курсі, дає змогу закласти довгострокову основу і закріпитися в цій галузі на ринку праці.

Урок 1. HTML5: Семантичні елементи.
Огляд HTML5, Нові семантичні елементи HTML5, Новий спосіб структурування сторінок. Семантика текстового рівня. Налаштування редактора, практичні приклади застосування семантичних тегів, для створення структури сайту. Знайомство з плагінами, що прискорюють верстку сайту.

Урок 2. Позиціонування елементів, Практична верстка.
Позиціонування елементів, розташування елементів на сторінці (позиціонування елементів по вертикалі, по горизонталі). Розглянемо найпопулярніші css генератори, які вони бувають, для чого застосовують кожен з них.

Урок 3. HTML5 форми. Додавання Аудіо та Відео на сторінку.
Розглянемо і детально розберемо на практичних прикладах ці особливості. Удосконалення традиційних форм (додавання підказок, фокусування на елементі тощо). Перевірка форм на помилки заповнення. Нові типи елементів (адреси електронної пошти, URL-адреси тощо). Додамо в наш проєкт відео- та аудіоінформацію, подивимося, як усе це реалізується на практиці. Розглянемо роботу тегів.