Skip to content

deivan/start-as-frontender

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Навчальний курс з фронтенд розробки для початківців

Мінімальні навички - базове знання будь-якої мови програмування (бажано - джаваскріпт).

Зміст курсу (кількість годин)

Lesson 01 - HTML і CSS (12-16)

Як працює браузер. Структура сайту та його вигляду у HTML
Історія розвитку браузерів, проблема кроссбраузерності. 
Що таке тегі та як ними оперувати через консоль браузеру.
Атрибути тегів, ідентіфікатори, класи.
Фрейми - особливий спосіб звернутися до іншого сайту.
Як працюють каскадні таблиці стилів.
Як звернутися до тегу, класу, ідентіфікатору. Правила селекторів, псевдокласи.
Позиціювання блоків та особливості цього процесу.
Найпростіша подія, яку можно обробити - псевдоклас :hover.
Керування шрифтами та кольорами.
Як зробити випадаючий список через стилі.

Lesson 02 - Корисні стилеві фреймворки Bootstrap, FontAwesome (6-8)

Навіщо воно треба та як підключити
Принцип організації розміщення контенту - контейнери, строки та колонки
Концепція GridLayout
Вбудована респонзивність шляхом обробки медіа-запитів
Медіа об'єкти за допомогою типу flex
Набір готових компонентів для полегшення роботи
Як користуватись спеціальними сімволами FontAwesome

Lesson 03 - Javascript у HTML (4-6)

Як підключити скріпти до сторінки
Javascript. Історія та особливості розвитку. Strict Mode.
Синтаксичні правила мови
Принципи йменування змінних. Скоупи та їх властивості.
Несувора типизація - доброта чи дорога у пекло?
З нами вже ЕСМА-2015, ЕСМА-2016 і десь дуже поруч - вже й ЕСМА-2021!

Lesson 04 - Початкові знання про Javascript (4-6)

Особливості зведення типів даних та порівняння даних різного типу.
Умовні оператори, їх ланцюжки. Тренарний оператор - не такий страшний, як його малюють.
Побітові операції та логіка.
Цикли. Команди сontinue й break в циклах. 
Функції та конструктори, прототипна спадковість.
Сінхронність та асінхронність, проміси та колбекі.

Lesson 05 - Програмування на JavaScript (4-6)

Масиви даних та об'єкти. Перебір елементів масиву та об'єкта у циклі у стилі ЕСМА-2015. Фільтри!
Потік виконання скрипту (флоу). Події (івенти) та керування ними
Відкладені функції setInterval і setTimeout. Особливості застосування
Як побороти дати та час з допомогою об'єкту Date
Математичні функції та точність калькулювання
Взаємодія с новими вікнами, передавання даних між ними
Кукі та локальне сховище
Обробка помилок, логіювання та конструкція try-catch

Lesson 06 - Застосування технології Flex (4)

Основні принципи роботи з побудуванням розміткі за технологією Flex. Компоненті та їх айтеми
Використання технологыъ Flexgrid
Практична робота з побудови сторінки товарів магазину за технологією Flex

Lesson 07 - Використання бібліотеки jQuery та jQueryUI (12-16)

Це бібліотека, а не фреймворк. Вона наврядше помре, і ось чому
Принципи відбірки елементів, загортання елементів, додавання та видалення елеметів у ДОМ.
Як обробляються події, функції-колбеки подій, обгортання серії подій у цикл
Запити даних за технологією AJAX та обробка результатів
Отримання табличних даних, їх відображення та засоби сортування на прикладі реальної системи даних
Основні компоненті та віджети бібліотеки jQueryUI та приктичне їх застосування
Як користуватися плагінами jQuery, особливості застосування. Як працює плагін покроково на прикладі плагіна Final Countdown

Lesson 08 - Wordpress - чудовий засіб для створення нескладного веб-сайту без глибоких знань програмування (4)

Чому саме Wordpress? Бо простий для юзера, безкоштовний, з потужною підтримкою та купою корисних плагінів та віджетів
Як розгорнути Wordpress на практичному прикладі
Структура Wordpress-сайту, головна та стрічка новин, сайдбари, локалізація
Додаємо віджети та компоненти, змінюємо тему
Створюємо свою тему для подальшого розповсюдження

Lesson 09 - Вивчення JSON, JSONP, REST на прикладі сервісів Google Maps API

Підключення сервісу та отримання API-key
Мапа та засоби керування мапою
Маркери та інфовікна, обробка подій
Геокодування та отримання маршрутів, відображення результатів

Lesson 10 - Створення веб-аплікацій з допомогою фреймворка Vue.js (4-6)

Особливості фреймворку, схожесть та відмінність з Ангулар.
Головний модуль аплікації та його компоненти. Зв'язок даних між ними.
Звернення до мережевих ресурсів, фільтрація та ордерінг табличних даних
Застосування бібліотеки Vuetify для поліпшення зовнішнього вигляду контенту

Lesson 11 - Чарівні анімаціі через застосування стилів CSS3 (2-3)

Атрибути каскадних табліць стилів що відповідають за аніміційні та трансформаційні ефекти
Огляд десяти приклідів та детальний розбір як це працює

Lesson 12 - Вивчення роботи веб-сокетів на прикладі побудування чат-клієнту (2-3)

Розбір коду нескладного чат-серверу що написаний на Node.js
Покрокове побудування клієнту, відладка

Lesson 13 - концепція модулів у Javascript, збиральник Webpack (2-3)

Що таке модулі, у чому їх гідність та як використовувати
Принципи роботи сучасних збиральників файлів, можливі трансформації та корисні результати

Lesson 14 - Отримання та передача даних через Fetch API

Робота з промісамі та async...await
Перехват та обробка помилок
Паралельні запити для прискорення обробки, аналіз результатов

Практичні завдання до курсу

Вони є поділеними на гілки цього репозиторія, наприклад lesson01-01, для перехіду до завдання достатньо лише переключитися на гілку.

About

Training course for newbe frontend developers

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages