Автор: Денис Булига
що таке верстка:
Верстка -це створення веб-сторінок за допомогою спеціальних мов. Верстка-це також цікава, постійно змінюється область діяльності в створенні сайтів.
Це процес перекладу макета сайту, створеного дизайнером в графічній програмі, в HTML в сторінку. При цьому використовуються спеціальні мови, які для цього призначені: HTML, CSS, JavaScript.
Відповідно, верстальник - це людина, яка займається кодуванням HTML-сторінки.
Верстальник-це професія, в якій можна постійно розвиватися, і ***дуже багато суміжних професій у веб-розробці нерозривно пов'язані з версткою. *****
CSS сітка-вищий пілотаж у верстці:
CSS сітка — це потужна нова технологія в верстці. Вона дозволяє швидко створювати динамічні, чуйні, Сучасні макети на чистому CSS с.при цьому код чистіше і простіше в підтримці, в порівнянні з традиційними методами верстки.
розташування сітки — це нова модель макета, яка володіє потужними здібностями контролювати розміри і розташування блоків, а також їх вмісту.
Вона являє собою набір горизонтальних і вертикальних ліній, які утворюють сітку, що складається з рядів і колонок. Технологія заснована на поділі простору для макета на стовпці і рядки, а також на використанні передбачуваної поведінки розмірів. сітка дозволяє точно позиціонувати і масштабувати блоки контенту в областях сітки, одержуваних при перетині цих стовпців і рядків. Таким чином, отримуємо дуже гнучку поведінку верстки при адаптації.
можливості CSS сітка:
Фіксовані і гнучкі розміри смуг фіксовані і гнучкі розміри смуг
Ви можете створити сітку з фіксованими розмірами смуг — наприклад, використовуючи пікселі. Ви також можете створити сітку з гнучкими розмірами, використовуючи відсотки або нову одиницю виміру-фр, призначену для цієї мети
розташування елемента розташування елемента
Ви можете розміщувати елементи в заданому місці, використовуючи номери рядків, імена, або шляхом прив'язки до області. Сітка також містить алгоритм управління розміщенням елементів, які не мають явної позиції в сітці
створення додаткових смуг для зберігання контенту створення додаткових смуг для зберігання контенту
З решітки ви можете визначити явну сітку з макетом, але специфікація також стосується вмісту, розміщеного за межами оголошеної області. При необхідності додаються додаткові рядки і стовпці
управління вирівнюванням управління вирівнюванням
CSS сітка містить функції, що дозволяють точно, легко і інтуїтивно зрозуміло контролювати, як саме елементи вирівнюються після розміщення в області сітки, і як вирівнюється весь Макет сітки
Управління контентомуправління контентом, що перекривається
CSS Сітка дозволяє помістити в одну клітинку сітки більше одного елемента. Також області можуть частково перекривати один одного. Управління перекривається контентом можна зручно контролювати за допомогою властивості z-Індекс
*********************** Уроки курсу:
Блок 1. Верстка макета Цільова Сторінка (6 годин 36 хвилин)
Урок 1. Огляд PSD-макета і готової верстки Цільова Сторінка 4: 59
Урок 2. Експорт зображень для верстки з Adobe Photoshop CC 2018 7: 27
Урок 3. Встановлення Node Js, Gulp CLI та ініціалізація проекту 7: 07
Урок 4. Початок створення автоматизованої збірки за допомогою ковток 4 27: 22
Урок 5. Створення додаткових завдань з автоматизації 19: 17
Урок 6. Підготовка до верстки та детальний огляд проекту 15: 55
Урок 7. Створення HTML-розмітки для шапки сайту 7: 25
Урок 8. Повна стилізація шапки сайту 18: 52
Урок 9. Створення розмітки для блоку банера 4: 58
Урок 10. Стилізація банера і написання власного міксина 22: 48
Урок 11. HTML - структура блоку з перевагами 7: 14
Урок 12. Повна стилізація переваг 21: 11
Урок 13. HTML-розмітка блоку з роботами 8: 04
Урок 14. Написання стилів для блоку робіт 32: 53
Урок 15. Доступність інтерактивних елементів та адаптація блоку робіт 14:05
Урок 16. Написання структури для інформаційного блоку 3: 37
Урок 17. Повна стилізація інформаційного блоку 16: 15
Урок 18. Створення розмітки для блоку скілів 5: 37
Урок 19. Стилізація блоку зі скіллами 20:08
Урок 20. Анімація ліній блоку прогресу 13: 34
Урок 21. HTML-структура блоку новин 7: 51
Урок 22. Повна стилізація блоку з новинами 42: 25
Урок 23. HTML-розмітка блоку каруселі 4: 35
Урок 24. Стилізація каруселі і підключення плагіна Совина карусель 30: 45
Урок 25. HTML-розмітка блоку контактів 7: 09
Урок 26. Повна стилізація блоку контактів 20: 17
Урок 27. Повна реалізація підвалу 4: 30
Блок 2. Верстка головної сторінки сайту студії (6 годин 25 хвилин)
Урок 1. Огляд макета 3: 56
Урок 2. Експорт SVG з Adobe Illustrator 2: 37
Урок 3. Підготовка до верстки 6: 54
Урок 4. HTML-розмітка шапки сайту 10: 21
Урок 5. Стилізація шапки сайту 33: 58
Урок 6. Адаптивний сайт 10: 49
Урок 7. Покращення типографіки 10: 42
Урок 8. Створення розмітки для блоку меню 3: 32
Урок 9. Стилізація блоку меню 25: 15
Урок 10. Доопрацювання меню 13: 29
Урок 11. HTML-розмітка блоку проектів 19: 15
Урок 12. Стилізація блоку проектів. Частина 1 17: 09
Урок 13. Стилізація блоку проектів. Частина 2 18: 53
Урок 14. Стилізація блоку проектів. Частина 3 44: 25
Урок 15. Адаптація блоку проектів 32: 22
Урок 16. HTML-розмітка блоку студіо 16: 26
Урок 17. Стилізація блоку студіо. Частина 1 23: 08
Урок 18. Стилізація блоку студіо. Частина 2 12: 22
Урок 19. Адаптація блоку студіо 19: 32
Урок 20. HTML-розмітка блоку з новинами 6: 47
Урок 21. Стилізація блоку новин 12: 46
Урок 22. Адаптація блоку новин 8: 34
Урок 23. Розмітка підвалу 3: 13
Урок 24. Повна стилізація підвалу сайту 16: 43
Урок 25. Підключення Google maps 12: 16
бонуси:
Бонус 1. Преміум-курс "Підручник з основ HTML для початківців"
Бонус 2. Преміум-курс "підручник з основ CSS для початківців"
Бонус 3. Преміум-курс "Верстка сайту для початківців"
Бонус 4. Преміум-курс " HTML5. Основи "
Бонус 5. Преміум-курс " CSS3. Основи "
Бонус 6. Преміум-курс "Теорія і практика адаптивної верстки"
Бонус 7. Преміум-курс "Макет сітки CSS"
Бонус 8. Преміум-курс "Flexbox"
Бонус 9. Преміум-курс"зухвалість"
Бонус 10. Міні-курс "Кам'яна кладка"
доп. бонуси:
- Курс " Верстка-Майстер. Від теорії до верстки популярних шаблонів " вартістю 7970 руб.
- Курс " Веб-дизайнер-професіонал. Створення затребуваних макетів " вартістю 5970 руб.
<ширина iframe= " 500 "Висота=" 300 " src="
**********
Посилання
https://privatelink.de/?https://webformyself.com/grid/