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

131 урок

Сложность

Продвинутый

Тип обучения

Курс

Формат обучения

Записанные лекции

Сертификат

Есть

Стоимость курса

1 990 ₽

Нет рассрочки

Привет!

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

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

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

Если это звучит знакомо, тогда этот курс для вас)

Вдохните жизнь в ваши сайты с помощью современной анимации через CSS

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

В этом курсе собраны лучшие практики по адаптивному дизайну

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

Изучите все тонкости и преимущества современных пре процессоров

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

Необходимая база по использованию NPM

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

Система контроля версий Git поможет вам в вашей разарботке

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

Вы сверстаете 2 современных сайта для своего портфолио

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

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

Я всегда на связи!

И будьте уверены, вы не останетесь одни, ведь после каждого небольшого урока, у вас будет возможность сравнить ваш код с моим или просто задать вопрос, ответы обычно не заставляют себя долго ждать.

Гарантия возврата денег!

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

Присоединяйтесь ко мне и вместе, мы изучим как то как создавать профессиональные, современные веб сайты.

До встречи на уроках!

Что вы получите после обучения

Навыки

Git и GitHub

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

Adaptive design

Node package manager

GRID CSS Project

Введение в CSS GRID

Школа

Stepik

4.6

60 отзывов

Stepik — образовательная платформа и конструктор онлайн-курсов.

Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки.

Наша цель — сделать образование открытым и удобным.

Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.

Платформа Stepik включает в себя конструктор бесплатных занятий и уроков. Создать интерактивный обучающий курс может любой зарегистрированный пользователь. При этом авторы обучающих материалов сохраняют авторские права. Сервис не имеет ограничений по числу обучающихся на курсе.

Stepik имеет обширные возможности по созданию онлайн-курсов, обучающих занятий и уроков с использованием текстов, видео, картинок, тестовых задач, в процессе выполнения которых можно вести обсуждения с остальными обучающимися, а также с преподавателем. Всего в Stepik присутствует 20 типов заданий, проверка которых может осуществляться как в автоматическом, так и в ручном режиме.

Большим преимуществом данной платформы является возможность встраивать созданные материалы на сторонние сайты, например, Moodle и Canvas.

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

Интерфейс платформы полностью русскоязычный, достаточно дружественный и интуитивно понятный. Платформа полностью бесплатна.

За каждый пройденный курс в Stepik обучающийся получает сертификат о прохождении. Получение сертификата также бесплатно.

Преподаватели

Дмитрий Фокеев

курсов

Создаю авторские онлайн курсы с 2016 года. Профессионально обучаю работе с графическими редакторами Adobe, преподаю дизайн и веб разработку.

Привет! Меня зовут Дима! Не хочу хвастаться, но придется) Обучил более 5000 студентов по всему миру на моих авторских онлайн курсах. Более 2000 реальных отзывов со средней оценкой 4,83 из 5.00! Я преподаю веб дизайн, веб разработку и необходимое ПО (Phhotoshop Illustrator, Figma). Мой опыт преподавания складывается из 5 лет репетиторства на фрилансе, а так- же преподавания через онлайн школы и курсы, на мировых площадках по дистанционному обучению. Студенты моих курсов, отмечают лучшие мои качества в том, как я подаю материал без зубрежки, весело и интересно.

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

Подготовка / Повторение / Первые анимации
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. До свидания!
Получите ваш сертификат
1. Тест для получения сертификата об окончании курса

Рейтинг курса

Может быть интересно

Образовал