Верстка и веб разработка сайтов. Продвинутый уровень Web Develop [Stepik] [Дмитрий Фокеев] [Повтор]

Верстка и веб разработка сайтов. Продвинутый уровень Web Develop [Stepik] [Дмитрий Фокеев] [Повтор]

*Будет выдана последняя версия курса (на данный момент версия от 12.04.2023),
после завершения складчина будет поддерживаться, в библиотеку будут добавляться все вышедшие обновления

Верстка и веб-разработка сайтов.
Продвинутый уровень Web Develop​

Этот курс сделает вас настоящим "PRO" верстальщиком веб сайтов! Освойте современные методы создания CSS анимаций, работу с GRID CSS и продвинутые методы адаптации сайтов. Бонус: работа с Git и NPM​

​

Чему вы научитесь
- По окончании курса вы будете владеть всеми современными способами верстки и создания сайтов.
- Вы научитесь использовать CSS анимации на своих сайтах
- Вы узнаете продвинутые способы адаптивного дизайна
- Вы изучите продвинутые техники работы с препроцессором SASS
- Вы научитесь использовать систему контроля версий Git
- Вы изучите систему создания сайтов на CSS GRID
- Вы узнаете современные способы верстки сайтов


О курсе

Привет!

Меня зовут Дима. И я предлагаю вам окунуться в самые глубины создания и верстки веб сайтов!

Этот курс для тех кто уже знает основы, но хочет перейти от хорошего уровня создания сайтов к отличному

Курс для тех, кто владеет базой HTML и CSS, но знает, что внутри осталось еще множество техник, приемов разработки и технологий, которые используют настоящие pro-девелоперы



Вдохните жизнь в ваши сайты с помощью современной анимации через CSS
Мы начнём с того что внесём динамики в наши сайты, то есть займёмся анимацией. Изучим, как на чистом CSS анимировать кнопки, тексты и заголовки, научимся создавать анимацию карточек, создадим динамичное навигационное меню, и все это без единой строчки JS кода, только чистый CSS.



В этом курсе собраны лучшие практики по адаптивному дизайну
Вы научитесь новым способам и трюкам адаптивного дизайна ваших сайтов, используете новые методы определения и записи медиа запросов и научитесь адаптировать все элементы страницы, изменяя всего лишь одно CSS свойство, чтобы ваш сайт выглядел как никогда лучше на любом мобильном устройстве



Изучите все тонкости и преимущества современных пре процессоров
Вы узнаете, как ускориться в создании сайтов в несколько раз, используя по полной возможности препроцессора SASS, такие как миксины, переменные и функции.



Необходимая база по использованию NPM
Также NPM пакеты с необходимыми каждому про разработчику плагинами внутри, дадут нам возможность создавать и оптимизировать сайты как никогда быстро и качественно .



Система контроля версий Git поможет вам в вашей разарботке
Дополнительно вы изучите необходимую базу по работе с системой контроля версий git, чтобы у вас всегда была возможность вернуться к нужной версии вашего сайта, независимо от того как сильно вы напортачили при последнем абдейте сайта)



Вы сверстаете 2 современных сайта для своего портфолио
Этот курс построен на практике и разбит на небольшие видео уроки, в которых мы будем шаг за шагом создавать 2 больших современных проектах, основанных на системе float - чтобы вы могли поддерживать старые проекты и конечно на системе GRID CSS, которая позволяет создавать лейауты невероятной сложности.

И конечно, эти проекты будет не стыдно показать своим потенциальным заказчикам или будущим работодателям.


Программа курса

Спойлер

Подготовка / Повторение / Первые анимации

1. Привет!) Скачиваем материалы к курсу
2. Устанавливаем и настраиваем необходимое программное обеспечение
3. Новое свойство clip-path. Начинаем создавать первую секцию сайта
4. Если у вас не работает scout-app
5. Практика: Создайте свою фигуру с помощью Clip-path
6. Выравнивание элементов по вертикали абсолютным позиционированием
7. Знакомство с @KeyFrames. Создаем первую анимацию.
8. Backface-visibility и создание кнопок через псевдо-классы
9. Анимируем кнопку с помощью псевдо-элементов
10. Animation-fill-mode. Запуск анимации из определенной точки.
11. 3 принципа веб разработки
12. Используйте REM вместо PX

Git и GitHub

1. О чем этот блок
2. Базовые команды в терминале
3. Как редактировать файлы через терминал
4. Устанавливаем систему git на наш компьютер
5. Как запустить гит в определенном проекте
6. Создаем первый коммит
7. Отправка проекта GitHub
8. Если у вас ошибка при отправке вашего проекта на GitHub
9. Ошибка с логином при попытке отправить проект на GitHub
10. Практика: создайте собственный репозиторий
11. Как удалить репозиторий GitHub
12. Как скачивать репозитории из GitHub
13. Эмулируем работу 2-х разработчиков на одном репозитории
14. Как вывести информацию о коммитах в терминал. Git log
15. Что такое ветки
16. Как создавать ветки и перемещаться по ним.
17. Закрываем пробел из начала мини курса с обозначениями -u и -M
18. Ошибка не сохраненного коммита при checkout
19. Как перекинуть созданные изменения на новую ветку
20. Как перекинуть несколько коммитов на новую ветку
21. Что такое состояние открепленной головы. Detached HEAD
22. Как восстановить конкретный файл из прошлого коммита
23. Продвинутый git log и git show
24. Как объединять ветки с помощью Git merge. Способ Fast-forward
25. Как удалять ветки
26. Как удалить файлы директории из состояния untracked
27. Git reset --hard. Способ жесткого отката к коммиту
28. Второй способ найти подвисший коммит с помощью ORIG_HEAD
29. Git reset --soft
30. Git commit --amend изменение комментария прошлого коммита
31. Git reset --mixed
32. Разница git reset и git restore
33. Введение в git diff. Вывод разницы нескольких коммитов в консоль
34. Практический пример применения git diff
35. Как вывести схему веток в терминал. Git log --graph
36. Объединяем ветки с помощью git merge. Способ "Истинное слияние"
37. Как откатиться назад после слияния
38. Как скопировать определенный коммит с помощью git cherry-pick
39. Слияние веток с помощью git rebase
40. Что лучше git rebase или git merge
41. Как использовать файл .gitignore
42. Заключительное слово

Продвинутая верстка - CSS/SASS

1. О чем этот блок
2. Как работают SASS переменные
3. Как работают миксины
4. Как добавлять аргументы для миксинов
5. Что такое шаблоны SASS
6. Как работают SASS функции
7. Организация файлов SASS большого проекта
8. 3 способа позиционирования элементов
9. Как работает float
10. Создаем собственную систему grid
11. Применение градиента к тексту. Backgroud-clip
12. Как создавать символы с помощью HTML
13. Анимируем и доделываем вторую секцию
14. Как создавать собственные иконочные шрифты
15. Используем свойство perspective для отражения перспективы элемен
16. Как работает blending mode в CSS
17. Доделываем секцию с карточками
18. Как закруглить текст с помощью свойства shape-outside
19. Как работают CSS фильтры
20. Как добавить видео на страницу
21. Знакомимся с тегом form и его содержимым
22. Анимируем форму
23. Делаем собственные radio button с помощью CSS
24. Создаем footer сайта
25. Создаем навигационное меню на чистом CSS ч.-1
26. Настраиваем переходы скорости анимаций, с помощью cubic-bezier
27. Анимируем гамбургер

Adaptive design

1. О чем этот блок
2. Как создают адаптивные сайты
3. Создаем миксин с медиа правилами
4. Адаптация проекта ч.1
5. Адаптация проекта ч.2
6. Адаптация проекта ч.3
7. Что такое адаптивные изображения
8. Как адаптировать изображения в HTML
9. Адаптируем HTML изображения в нашем проекте
10. Адаптация CSS изображений
11. Несколько финальных правок сайта

Node package manager

1. О чем этот блок
2. Что такое node.js и npm
3. Готовим к использованию первый npm пакет
4. Запускаем первый npm пакет
5. Используем gulp в нашем проекте
6. Как открыть сайт на мобильном телефоне

Введение в CSS GRID

1. О чем этот блок
2. Подготовка
3. Как создать шаблон сетки. Grid template
4. Как работают единицы измерения fr
5. Как переместить элемент в другую ячейку
6. Размещение нескольких элементов в одной ячейки
7. Практика: Создайте layout сайта
8. Пример преподавателя. Создаем layout
9. Как переименовать каждую линию в сетке grid
10. Как создать шаблон сетки с помощью схемы имен
11. Что такое явные и не явные гриды
12. Как выравнивать элементы внутри ячеек
13. Как выравнивать сетку внутри контейнера
14. Min-Max content
15. Auto-fill и Auto-fit. Размеры ячеек исходя из контента
16. Заключение. Grid garden

GRID CSS Project

1. О чем этот блок
2. Подготовка
3. Создаем шаблон grid сетки ч.1
4. Создаем шаблон grid сетки ч.2
5. Как работают SVG спрайты
6. Доделываем вторую секцию сайта
7. Создаем секцию "Баннер" ч.1
8. Создаем секцию "Баннер" ч.2
9. Создаем секцию с карточками
10. Создаем галерею
11. Создаем footer
12. Делаем "Гамбургер"
13. Создаем header ч.1
14. Создаем header ч.2
15. Адаптируем сайт

До новых встреч!

1. До свидания!

Что вы получаете
- Вы узнаете продвинутые способы верстки сайтов на языках HTML и CSS
- Вы научитесь использовать CSS анимации на своих сайтах
- Вы узнаете продвинутые способы адаптивного дизайна
- Вы научитесь создавать "гибкие, резиновые сайты"
- Вы изучите продвинутые техники работы с препроцессором SASS
- Вы узнаете как использовать NPM пакеты при разработке сайта
- Вы узнаете приемы которые ускорят ваш рабочий процесс в несколько раз
- Вы научитесь использовать Gulp в своих проектах
- Вы научитесь использовать систему контроля версий Git
- Вы узнаете как размещать версии проектов на GitHub
- Вы изучите систему создания сайтов на CSS GRID
- Вы узнаете современные способы верстки сайтов



Скрытая ссылка