Відеокурс по веб-розробці сайту студії Максима Драгана
План відеокурсу
Частина І
0. Введення.
1. Створення та заповнення ТЗ (технічного завдання) (Бріф) сайту. Ідеї.
2. Веб-дизайн.
Теорія.
2.1. Основи-веб-дизайна.
Колір.
Шрифти. Типографіка.
Іконографіка.
2.2. Основи роботи в Figma (Photoshop).
Практика.
2.3. Розробка веб-дизайну сайта власної студії.
--- Суміжні сайти.
2.3.1. Створення прототипу сайту студії.
--- Вибір виду сайту: лендінг, многосторінковий сайт.
--- Розробка шапки сайту.
---- Створення логотипу.
---- Розробка меню сайту.
--- Розділи (блоки) сайту:
---- Про мене. Резюме.
---- Портфоліо.
---- Переваги роботи зі мною.
---- Послуги.
---- Магазин.
---- Блог (повідомлення, статті, новини).
---- Спонсорувати.
--- Футер.
2.3.2. Створення макету сайта.
--- Підбір кольорової гами сайту.
--- Підбір та створення фотографій, ілюстрацій, 3D-ілюстрацій.
--- Підбір та створення іконок для сайту.
--- Вибір шрифтів.
# Копірайтінг. Написання тексту для розділів сайту.
2.4. Створення мокапу розробленного сайту студії, розміщення його на behance.
Домашнє завдання:
1. Вибрати тему та вид сайту, який ви хочете розробити та визначитися з його розділами.
2. Створити прототип та макет власного сайту.
3. Створити мокап власного сайту та розмістити його на behance.
3. Верстка.
Теорія.
3.1. Основи верстки.
Практика.
3.2. Верстання сайту студії та розміщення його на github.
Домашнє завдання:
1. зверстати власний сайт та розмістити його на github.
4. Додавання власного проекту до свого портфоліо та пошук роботи в веб-студії чи фрілансі.
Домашнє завдання:
1. Додати власний проект до свого портфоліо та пошук роботи в веб-студії чи фрілансі.
Частина ІІ
1. Верстка.
node
gulp
sass
2. Фронтенд (React).
Компоненти
состояния
пропс
3. Бекенд.
Вибір CMS системи: WordPress та Django (Python).
4. Хостинг та домен сайту.
Безкоштовні хостинги.
Перенесення сайту с локального серверу на хостинг.
5. SEO-оптимізація.
6. Захист та безпека сайту. Надійність.
7. Наповнення та підтримка сайту.
________________________________________________________________________
Відеокурс (курс). Текст
Частина І
0. Введення.
Задача відеокурсу – це навчитися розробляти веб-сайти для
власного користування або подальшої роботи в цій сфері.
Відеокурс складається з введення та відеоуроків, в кінці
кожного з яких задається домашнє завдання.
В першому відеоуроці вибирається тема, вид та створюються розділи
сайту.
Домашнє завдання першого відеоуроку - це вибрати тему та
вид сайту, який ви хочете розробити та визначитися з його розділами.
У другому відеоуроці створюється веб-дизайн сайту.
Домашнє завдання другого відеоуроку - це створення
прототипу та макету сайту.
У третьому відеоуроці верстається сайт та викладається він на github.
Домашнє завдання третього відеоуроку - це зверстати сайт
та виложити його на github.
В кінці відеокурсу ставиться задача підготувати мокап сайту
та викласти його на behance.
Останнє домашнє завдання – це підготувати мокап та виложити
його на behance.
Сценарій введення
https://mpdragan.blogspot.com/p/blog-page_60.html
Відеопрезентація (презентація) введення до відеокурсу
1. Створення та заповнення ТЗ (технічного завдання) (Бріф) сайту. Ідеї.
2. Веб-дизайн.
Теорія.
2.1. Основи-веб-дизайна.
Колір.
Шрифти. Типографіка.
Іконографіка.
2.2. Основи роботи в Figma (Photoshop).
Figma
Сітка
Відзеркалення по горизонталі, по вертикалі
Упорядочення слоїв, фреймів - групування - Gtll+G
Практика.
2.3. Розробка веб-дизайну сайта власної студії.
--- Суміжні сайти.
2.3.1. Створення прототипу сайту студії.
https://mpdragan.blogspot.com/2021/07/blog-post_20.html
--- Вибір виду сайту: лендінг, многосторінковий сайт.
--- Розробка шапки сайту.
---- Створення логотипу.
---- Розробка меню сайту.
--- Розділи (блоки) сайту:
Сайт створюється як лендінг з розділами, які потім переходять на сторінки по кнопці Детальніше.
---- Про мене. Резюме.
---- Портфоліо.
---- Переваги роботи зі мною.
---- Послуги.
---- Магазин.
---- Блог (повідомлення, статті, новини).
---- Спонсорувати.
--- Футер.
2.3.2. Створення макету сайта.
--- Підбір кольорової гами сайту.
--- Підбір та створення фотографій, ілюстрацій, 3D-ілюстрацій.
--- Підбір та створення іконок для сайту.
--- Вибір шрифтів.
# Копірайтінг. Написання тексту для розділів сайту.
2.4. Створення мокапу розробленного сайту студії, розміщення його на behance.
Домашнє завдання:
1. Вибрати тему та вид сайту, який ви хочете розробити та визначитися з його розділами.
2. Створити прототип та макет власного сайту.
3. Створити мокап власного сайту та розмістити його на behance.
3. Верстка.
Теорія.
3.1. Основи верстки.
Html5
1) Структура сайту (сторінки).
VsCode
Створення файлу index.html.
emmet - !tab
<!DOCTYPE html>
Теги - парні, одинарні
<html>
<head>
<meta>
</head>
<body></body>
</html>
<h1>...<h6>
<p>
<br>
<ul><li>
<a>
<img>
Семантика
<header>
<nav>
<section>
<footer>
id, class
БЕМ
Css3
Створення файлу style.css.
Підключення його
Обнулення. reset.css
font-family
font-size
font-weitgh
color
background-color
float
flex
# - id
. - class
img url
Javascript
Jquery
Практика.
3.2. Верстання сайту студії та розміщення його на github.
Домашнє завдання:
1.Зверстати власний сайт та розмістити його на github.
4. Додавання власного проекту до свого портфоліо та пошук роботи в веб-студії чи фрілансі.
Домашнє завдання:
1. Додати власний проект до свого портфоліо та пошук роботи в веб-студії чи фрілансі.
Частина ІІ
1. Верстка.
node, npm
gulp
sass
git
2. Фронтенд (React).
Компоненти
состояния
пропс
3. Бекенд.
Вибір CMS системи: WordPress та Django (Python).
4. Хостинг та домен сайту.
Безкоштовні хостинги.
Перенесення сайту с локального серверу на хостинг.
5. SEO-оптимізація.
6. Захист та безпека сайту. Надійність.
7. Наповнення та підтримка сайту.
Комментариев нет:
Отправить комментарий