Курс веб розробка та створення сайтів

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

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

Опануй усе, що необхідно для створення web-сайтів і почни заробляти на цьому!

Чого ви навчитеся

– Дізнаєшся основи web-розробки: що таке web-сайт, навіщо він потрібен, цикли створення і багато іншого
– Навчишся працювати з графічними редакторами в контексті верстки: Photoshop, Zeplin, Figma, Avocode…
– Навчишся працювати з графікою для web’a, зокрема з SVG
– Дізнаєшся і зрозумієш, як використовувати HTML і CSS у реальних проєктах (теорія, справжня практика)
– Дізнаєшся про основи JS і Jquery, навчишся застосовувати їх у своїх проєктах
– Навчишся працювати з Git і GitHub
– Навчишся працювати з Bootstrap 4 і з технологією FlexBox
– Навчишся використовувати препроцесори Sass/Scss/Less у своїх проєктах
– Навчишся створювати мобільну адаптацію сайтів і застосунків
– Навчишся використовувати методологію БЕМ
– Зрозумієш, як створювати багатосторінкові сайти і принципи посадки під CMS (системи управління сайтами)
– Навчишся автоматизувати процеси за допомогою планувальника завдань Gulp
– Навчишся оптимізувати швидкість роботи сайтів і проводити валідацію верстки за стандартами w3c
– Навчишся працювати з безліччю готових плагінів, встановлювати гео-карти на сайті, працювати зі шрифтами і багато іншого….
– Всі отримані знання даються в сучасному форматі та одразу закріплюються на практиці
– Бонус: отримаєш кілька реальних макетів для практики

Вимоги

Бажання освоїти створення сайтів і почати заробляти на цьому. Жодної іншої попередньої підготовки: все що потрібно ми налаштуємо і вивчимо.

Опис

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

Для кого підійде цей курс?

– Якщо ви нічого не знаєте про створення сайтів, але хочете почати
– Якщо ви новачок в html/css, хочете швидко їх освоїти і почати застосовувати в роботі
– Якщо у вас був досвід у цій сфері кілька років тому, адже web-технології дуже швидко змінюються і вдосконалюються

Що всередині курсу?

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

– ми вивчимо основи web-розробки: що таке web-сайт, навіщо він потрібен, цикли створення та багато іншого

– ми навчимося працювати з графічними редакторами в контексті верстки: Photoshop, Zeplin, Figma, Avocode…

– ми навчимося працювати з графікою для web’a, зокрема з SVG

– ми дізнаємося і зрозуміємо як використовувати HTML5 і CSS3 в реальних проєктах

– ми дізнаємося основи JS і Jquery, навчимося застосовувати їх у своїх проєктах

– ми навчимося працювати з Git і GitHub

– ми навчимося працювати з Bootstrap 4 і з технологією FlexBox

– ми навчимося використовувати препроцесори Sass/Scss/Less у своїх проєктах

– ми навчимося створювати мобільну адаптацію сайтів і додатків

– ми навчимося використовувати методологію БЕМ

– ми зрозуміємо, як створювати багатосторінкові сайти і принципи посадки під CMS (системи управління сайтами)

– ми навчимося автоматизувати процеси за допомогою планувальника завдань Gulp

– ми навчимося оптимізувати швидкість роботи сайтів і проводити валідацію верстки за стандартами w3c

– ми навчимося працювати з безліччю готових плагінів, встановлювати гео-карти на сайті, працювати зі шрифтами та багато іншого…

Як бонус буде надано кілька реальних макетів для самостійного закріплення отриманих знань.

Чому варто почати своє навчання вже зараз?

Створення сайтів (верстка) – дуже затребувана на ринку праці навичка, яка до того ж ще й добре оплачується. Мало того, що вивчивши всю дану вам інформацію, ви вже зможете створювати свої продукти і працювати як на фрілансі, так і в web-студії, а й ви закладете базу для подальшого навчання. Володіючи цими навичками, ви зможете освоїти будь-яку CMS (WordPress, ModX…) зсередини, зможете зрозуміти й вивчити, як працює backend частина, і зможете створювати візуальну частину застосунків, написаних на JavaScript фреймворках і бібліотеках (адже там скрізь використовують верстку, як і на звичайних сайтах, зокрема й на мобільних застосунках).

Для кого цей курс:

– Для тих людей, хто взагалі не знайомий з темою створення сайтів
– Для тих людей, хто вже робив свої перші спроби створення сайтів

Матеріали курсу

Модуль 1. Занурення в тему створення web-продуктів. Вивчення основ HTML і CSS

– Класифікація сайтів. Етапи створення.
– Встановлення та налаштування редактора коду
– Робота з Adobe Photoshop в інтернеті
– Робота з сучасними редакторами Avocode, Zeplin, Figma…
– Бонус. Що таке “сітки” і перетворення іконок в SVG формат
– Створюємо свій перший проект. Основи HTML5
– Основні теги HTML на практиці
– Семантичні теги HTML
– Основи CSS на практиці
– Блокова модель CSS
– Developer Tool. Що це і як з ним працювати?
– Блокова модель CSS. Частина
– Позиціонування елементів у CSS. Принцип карткової колоди
– Вирівнювання елементів по вертикалі. Верстка таблицями і float’ами
– Бонус. Одиниці виміру CSS
– Практика. Створюємо сайт на чистому HTML і CSS
– Технологія Flexbox і застосування її на макеті
– Практика. Закінчуємо сайт на чистому HTML і CSS домашнє завдання
– Скидання стилів reset.css/normalize.css
– Підключення шрифтів на сайт

Модуль 2. Прискорення роботи в кілька разів

– Бібліотека Bootstrap 4
– Практика. Новий проєкт з використанням сітки Bootstrap 4
– Препроцесори. SASS/SCSS/LESS
– Якщо у вас помилка при компіляції SASS коду
– Вендорні префікси в CSS
– Практика. Продовжуємо роботу і використовуємо препроцесор SASS
– Псевдокласи і псевдоелементи в CSS
– Практика. Використовуємо псевдоелементи і псевдокласи в проєкті
– Як працювати з іконками. Іконочні шрифти
– Адаптація проектів під різні пристрої
– Pixel Perfect верстка
– Адаптація за допомогою Bootstrap 4
– Практика. Адаптація проекту. Частина
– Практика. Адаптація проєкту. Частина
– Локальні посилання та favicon
– UX. Допрацьовуємо дрібниці
– Публікуємо сайт в інтернеті. Домен. Хостинг. GitHub Pages і скидання “кешу”

Модуль 3. Необхідні технології для веб-розробника і просунута практика

– Система контролю версій Git і сервіс GitHub
– Як працювати з GitHub з різних комп’ютерів, gitignore і Git Kraken
– Планувальник завдань Gulp
– Методологія БЕМ
– Практика. Створюємо новий проєкт, використовуючи Gulp, БЕМ…
– Якщо у вас не працюють картинки
– Форми на сайтах
– Знайомимося з мовою програмування JavaScript
– Як можна освоїти JavaScript?
– Практика. Створюємо слайдер на сайті. Slick-слайдер
– Якщо у вас не працюють скрипти
– Практика. Альтернативні варіанти слайдерів
– Практика. Створюємо таби на сайті. Частина 1
– Практика. Створюємо таби на сайті. Частина 2
– Створюємо інтерактивні карти на сайті
– Практика. Створюємо модальні вікна на сайті
– Валідація форм
– Маска введення номера на сайті
– Локальні сервери
– Практика. Відправлення листів з сайту
– Плавний скрол по посиланнях і елемент “вгору”
– Анімації на сайтах за допомогою CSS
– Бібліотеки для роботи з анімаціями
– Валідація сайту
– Завантажуємо сайт на реальний хостинг. Налаштування домену, що таке FTP і SSL
– Оптимізація швидкості завантаження сайту, доопрацювання gulpfile