Чого ви навчитеся?
- Кодування сторінки на основі візуального дизайну
- Модульний підхід до створення стилів
- Методи створення та використання компонентів
- Багато методів оптимізації роботи
- Безліч корисних хитрощів для роботи з CSS та HTML
- Практичне використання інструментів Sass, Gulp та NPM
- Створення макетів за допомогою flexbox
- Методологія БЕМ
Обравши цей курс, ви дізнаєтеся набагато більше!
Увага! Ви отримаєте інструкції щодо завантаження та код від нас на адресу, вказану під час оформлення замовлення. електронною поштою не пізніше наступного робочого дня після отримання платежу. |
Для кого цей курс?
Цей курс розроблений для тих, хто хоче навчитися створювати веб-сайти за допомогою HTML та CSS. Дізнайтеся, як створювати структуру та стилі веб-сайту на основі візуального дизайну.
Отримайте знання та захопливі навички! Вивчіть різноманітні цікаві техніки, які щодня використовують сучасні фронтенд-розробники. Використовуйте все це для створення різноманітних проектів як для власних потреб, так і для потреб ваших клієнтів.
Повна структура HTML та CSS
Під час цього курсу ви навчитеся створювати повноцінні стилі та структури з нуля. Ми не використовуватимемо бібліотеки під час створення веб-сайтів, що допоможе нам контролювати весь код та розуміти всі механізми та концепції.
Три універсальні проекти
Під час навчання ви створите три різні вебсайти:фасад магазинуі два різнихвізитні картки компаніїЦі проекти дадуть вам практичні навички, які неодмінно стануть у пригоді в майбутньому. Кожен з них також можна буде розробляти, модифікувати та впроваджувати як фронтенд для будь-якого бекенд-рішення.
Модульна структура
Модульна структура допоможе спростити розробку сторінок. Цей курс приділяє особливу увагу цій темі. Також буде пояснено, як розділити компоненти, які можна використовувати повторно. Ви дізнаєтеся, як організовувати стилі за допомогою шарів. Це дозволить вамнабагато легше контролювати код.
Важливим аспектом будь-якого проєкту є правильний підхід до найменування та організації елементів. Цей тренінг ознайомить вас зі знайомими...методологіяБЕМ, що допоможе вам у цих категоріях.
Сучасна верстка з використанням flexbox
За допомогою цього курсу ви навчитеся використовувати інноваційні методифлексбоксі створювати повністю адаптивні вебсайти з макетом стовпчастої сітки. Я покажу вам, як створити цілу стовпчасту сітку з нуля, використовуючи мінімальний код та без використання будь-яких бібліотек чи фреймворків.
Сучасний робочий процес
Це навчання допоможе вам опанувати всі необхідні інструменти, які повинен знати кожен сучасний фронтенд-розробник. Ви навчитеся писати стилі за допомогоюSASS, побудова вихідних файлів завдякиКовтокі як контролювати залежності за допомогоюНПМ.
Зміст1. Вступ
- Як використовувати файли 00m 48s
- Що вам слід знати 03 хв. 04 с
- Загальні припущення 03 хв 30 с
- Основні інструменти 05 хв 19 с
2. Клінічний проект - Частина 1- Початковий огляд проекту 07 хв 00 с
- Почнемо з SASS 04 хв 43 с
- Ковток та ковток 06 хв 19 с
- Компіляція завдань та стилю Gulp 07 хв 52 с
- Багатошарова структура стилю 07 хв 41 с
- Які шари ми будемо використовувати 08 хв 40 с
3. Стилі в глобальних шарах - Основні змінні 08 хв 36 с
- Які змінні ще потрібні 11 хв 22 с
- Корисні міксини 07 хв 40 с
- Загальний шар 04 хв 41 с
- Стихії - тіло 05 хв 37 с
- Елементи - текст 05 хв 53 с
- Елементи - решта 06 хв 40 с
4. Макет - об'єкти - Концептуальний макет 07 хв 01 с
- Давайте створимо контейнер 06 хв 40 с
- Концепція вірша - рядок 05 хв 38 с
- Давайте створимо вірш 06 хв 37 с
- Колони - принцип роботи 10 хв 12 с -
- Колони для IE10 та IE11 04 хв 24 с
- Давайте заповнимо решту колонок 06 хв 36 с
5. Компонентний шар - Як ми створюємо компоненти - BEM 09 хв 15 с
- Компонент кнопки - Початкові стилі 06 хв 36 с
- Компонент кнопки - Варіанти 09 хв 51 с
- Компонент заголовка 07 хв 42 с
- Інші варіанти заголовків 04 хв 31 с
- Навігаційний компонент 07 хв 14 с
- Поле значка компонента 09 хв 37 с
- Мітка компонента 02 хв 36 с
- Список компонентів 04 хв 11 с
6. Шар Комунальні послуги - Що належить шару 03m 57s
- Зразки комунальних послуг 07 хв 21 с -
7. Шаблони – основний вміст - Клініка - заголовок, частина 1, 07 хв 20 с
- Клініка - заголовок, частина 2, 08 хв. 01 с
- Клініка - заголовок, частина 3, 09 хв. 40 с.
- Останні елементи заголовка 04 хв 56 с -
- Про компанію - новий шаблон 06 хв 45 с
- Про компанію - основні стилі 07х20
- Розділ переваг компанії 06 хв. 55 с
- Список записів - html 05 хв 54 с
- Список постів - стиль 08 хв 26 с
- Прикраса у списку учасників 06 хв 49 с
- Локатор - попередня робота 06 хв 16 с
- Локатор - продовження 09 хв 54 с
- Клініка - Зміст футера 08 хв 41 с
- Клініка - стилі футера 12 хв 38 с
8. Проєкт магазину – Вступ - Короткий огляд проекту 02 хв 34 с
- Як використовувати існуючий код 03m 19s
- Нові значення змінних 06 хв 49 с
- Магазин - Element Properties 03 хв 58 с
- Ґудзики для магазину - Основи 04 хв 45 с
- Ґудзики для магазину - інші 08м 36с
- Йду до магазину 03 хв 27 с
- Вхідний компонент 09 хв 04 с
- Навігаційний компонент у магазині 04 хв 17 с
- Компонент значків у магазині 04 хв. 09 с
- Пагінація - стилі 04 хв 02 с
- Вибір продукту 04 хв 58 с
- Картка продукту - етап 1 09 хв 39 с
- Картка продукту - етап 2 09 хв 49 с
- Кнопка «Додати до кошика» 08 хв 32 с
9. Шаблони для магазину - Заголовок магазину - Топ 09 хв 04 с
- Геройський блок для магазину 07 хв 32 с
- Інші стилі заголовків у магазині 07 хв 12 с
- Список продуктів 09 хв 34 с
- Акції - структура 09 хв 16 с
- Акції - стилі 07 хв 22 с
- Акції - додаткові стилі 07 хв 24 с
- Інформаційний бюлетень - Основи 07 хв 38 с
- Інформаційний бюлетень – різні стилі 07 хв 42 с
- Магазин - інформаційний розділ 04 хв 31 с
- Магазин - Вміст футера 09 хв 26 с
- Магазин - Стилі нижнього колонтитула 06 хв 23 с
- Інші стилі футерів у магазині 07 хв 37 с
10. Проект шахти - Швидкий старт проекту 02 хв 00 с
- Давайте відредагуємо базові значення 06 хв 12 с
- Стилі для глобальних елементів 04 хв 51 с
- Ґудзики в останньому проекті 06 хв 04 с
- На шляху до останнього проєкту 04 хв 02 с
- Списки та компонент icon-box 08 хв 56 с
- Введення та навігація 04 хв 12 с
- Найновіший проєкт - Заголовок сайту 05 хв 56 с
- Останній проєкт - геройський підрозділ, 10 хв 28 с
- Секція боксу 02 хв 53 с
11. Ми завершуємо останній проект
- Пропозиції роботи - компонент 11 хв 35 сек.
- Пропозиції роботи - шаблон 10 хв 57 с
- Розділ «Вистава» – Структура 05 хв 27 с
- Розділ «Видатні статті» – Стиль 06 хв 25 с
- Розділ інформаційного бюлетеня в останньому проекті 05 хв. 40 с.
- Розділ розсилки - стилі останніх проектів 11 хв 40 с
- Нижній колонтитул в останньому проекті 07 хв 31 с
- Фінальні елементи проекту 03 хв 08 с
- Кінець 00 хв 24 с
|
