Сложность
Сложность
Начинающий
Тип обучения
Тип обучения
Курс

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

3 490 ₽
нет рассрочки

Привет!

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

Если вы не писали ни одной строчки кода — этот курс для вас!

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

Изучим крепкую базу разработки и этапы создания сайтов!

Мы начнем, с изучения базы HTML и СSS, и да, здесь не будет теории, ведь все знания мы будем применять сразу, на реальных проектах, живых задачах, и на протяжении всего курса будем создавать современные веб сайты.

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

Ваши сайты будут выглядеть отлично на всех устройствах!

Вы научитесь, создавать, адаптивные, интерактивные элементы используя CSS, такие, как карусели, кнопки, модальные окна и многое много другое.

Вы изучите современные методологии, и техники для быстрой и качественной разработки!

Конечно, в этом курсе мы изучим продвинутые техники такие как методология БЭМ, которая позволит нам создавать гибкие переиспользуемые элементы, для ускорения нашей работы в несколько раз. И да, знание этой методологии очень ценится работодателями.

Мы изучим не только CSS, но и его продвинутые препроцессоры такие как SASS/ SCSS, которые используют все современные веб разработчики и IT компании.

Библиотека bootstrap, для быстрого создания сайтов, у вас в кармане!

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

Разработка сайтов в лучшем и современном программном обеспечении!

Мы освоим передовую и бесплатную программу для веб-разработчиков, VS Code, разберемся с ее настройками, плагинами и хитростями, что сделает нашу работу поистине комфортной.

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

Вы научитесь создавать сайты "под ключ"

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

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

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

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

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

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

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

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

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

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

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

Лучшая документация и ресурсы со всего интернета!

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

И если вас пугают такие слова как, HTML5 CSS3 Адаптивный дизайн, FlexBox, Bootstrap, SCSS не беспокойтесь — этот курс для абсолютных новичков к концу курса, вы будете чувствовать себя как рыба в воде во всех этих темах, даже если вы не написали ни одной строчки кода за всю свою жизнь.

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

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

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

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

В современном мире, стать программистом, может каждый.

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

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

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

Приобретаемые навыки
2
Адаптивная верстка
3
Работа в Figma
4
Основы HTML и CSS
5
Продвинутая верстка SASS / БЭМ / FlexBox
6
Библиотека bootstrap
7
Веб-разработка сайтов
8
Git и GitHub
9
Продвинутая верстка - CSS/SASS
10
Adaptive design
11
Node package manager
12
GRID CSS Project

Вас будут обучать

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

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

Образовательная организация

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

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

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

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

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

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

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

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

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

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

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

1. Верстка и веб разработка сайтов 2022 - с нуля! Web development

Введение
1. О чем этот курс
2. Подготовка. Скачиваем материалы. Как проходить курс
3. Оставайтесь со мной на связи. (/lesson/701440?unit=701510)
Основы HTML и CSS
1. О чем этот блок (/lesson/679803?unit=678460)
2. Создаем первый веб сайт! (/lesson/679804?unit=678461)
3. Как работают теги HTML и стили CSS (/lesson/679806?unit=678463)
4. Теги Head и Body. Правильная структура веб страницы
5. Как работают теги заголовка и описания, в теге head.
6. Как работает тег "контейнер' - div
7. Как работать с классами в версте
8. Как подключить лист со стилями к файлу html
9. ПРАКТИКА: Создайте и стилизуйте несколько тегов div
10. Пример преподавателя. "Практика: создайте и стилизуйте несколько
Погружение в HTML и CSS
1. О чем этот блок
2. Классификация сайтов
3. Правильная структура файлов и папок проекта
4. Как использовать плагины VS Code
5. Если у вас не работает плагин Go Live
6. Как работают семантические теги
7. Как работать с цветом в верстке
8. Как добавить изображение на сайт через тег IMG
9. Как работает консоль разработчика в браузере
10. Как создать меню и ссылки
11. Теги списков UL и OL
12. Как задавать отступы элементам с помощью margin и padding.
13. Как работают блочные и строчные элементы
14. Что такое "Cхлопывание margin"
15. Правильная организация отступов в верстке ч.1
16. Как использовать "Псевдоклассы"
17. Правильная организация отступов в верстке ч.2
18. Как быстро сбросить кеш вашего браузера
19. Как добавить изображение используя свойство background-image
20. Позиционирование элементов на веб странице
21. Как работает z-index
22. Как добавить градиентную заливку через CSS
23. Выравнивание элементов по горизонтали
24. Box-sizing. Отступы внутри размера элемента.
25. Единицы измерения CSS
26. Селекторы CSS
27. Тег span
28. Can i use
29. Normalize.css и Reset.css - Сброс стилей браузера
30. Как добавить интерактивную карту на сайт
31. Тег HR или как отрисовать линию
32. Как использовать разные шрифты на сайте
33. Как устанавливать шрифты на компьютер
34. Загружаем сайт на реальный хостинг. Выбор и настройка домена.
35. Как редактировать сайт загруженный на хостинг, через VS Code
Работа в Figma. Мини курс Figma free.
1. О чем этот блок
2. О чем мини курс?
3. Подготовка. Скачиваем материалы
4. Какой размер у сайта?
5. Как сохранить свой проект
6. Как работать с сетками и направляющими
7. Бриф с заказчиком.
8. Mood board и поиск вдохновения
9. Создаем wireframe проекта
10. Стоковые площадки. Где найти идеальное фото?
11. Как работать с изображениями в figma
12. Иерархия элементов в figma
13. Как работать с цветом в figma
14. Разница UX и UI
15. Как создавать текст в figma
16. Линии и обводка фигур
17. Как группировать элементы
18. Поиск и установка новых шрифтов
19. Как работать с иконками
20. Как работать с градиентом
21. Как работатет инструмент subtract
22. Стоковая площадка по иконкам. Поиск иконок
23. Как работать с масками слоя
24. Как использовать рыбный текст в figma
25. Как добавлять эффекты к элементам
26. Экспорт из figma и передача в разработку
27. Поздравляю с завершением мини курса!
Продвинутая верстка SASS / БЭМ / FlexBox
1. О чем этот блок
2. Препроцессор SASS ч.1
3. Препроцессор SASS ч.2
4. FlexBox. Новый способ позиционирования элементов.
5. Методология БЭМ и как ее использовать
6. Используем FlexBox и БЭМ в новом проекте
7. Как превратить растровый логотип в векторный с помощью Illustrat
8. Закругление / Поворот / Тени для элементов
9. Что такое иконочные шрифты
10. Создаем первую кнопку
11. Используем модификатор БЭМ. Новое свойство overflow
12. Min/Max - Height/Width
13. Практика. Создаем вторую секцию сайта
14. Практика. Создаем третью секцию сайта
15. Практика. Создаем footer сайта
16. Добавляем якорные ссылки на навигационное меню
17. Что такое fav-icons, и как их установить в свой проект
Адаптивная верстка
1. О чем этот блок
2. Какие существуют типы верстки
3. Как работает мета тег viewport
4. Под какие размеры нужно адаптировать сайт
5. Адаптация под планшетную версию ч.1
6. Практика: Адаптируйте сайт под следующую версию.
7. Пример преподавателя. Адаптация следующей версии под планшет
8. Как работают единицы измерения EM/REM VH/VW
9. Свойство transition. Создаем гамбургер для мобильной версии сайт
10. Создаем гамбургер для мобильной версии сайта ч.2
11. Знакомство с JS. Создаем гамбургер для мобильной версии сайта ч.
12. Speed test готового сайта
Библиотека bootstrap
1. О чем этот блок
2. Что такое bootstrap
3. Как подключить bootstrap в свой проект
4. Какие настройки содержит в себе bootstrap
5. Как задавать свои стили в bootstrap
6. Свойство Object-fit и как создать слайдер в bootstrap
7. Как модифицировать слайдер в bootstrap
8. Как менять цвета в bootstrap
9. Как изменить скорость слайдера в bootstrap
10. Типичные ошибки и проблемы с работой в bootstrap
11. Как менять компоненты bootstrap. Меняем иконки на слайдере
12. Система сеток bootstrap. Bootstrap-grid
13. Как решать задачи возникающие в процессе верстки
До новых встреч!
1. Прощальное слово
Получите ваш сертификат
1. Тест для получения сертификата об окончании курса

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

Подготовка / Повторение / Первые анимации
1. Привет!) Скачиваем материалы к курсу
2. Устанавливаем и настраиваем необходимое программное обеспечение (/lesson/717078?unit=717938)
3. Новое свойство clip-path. Начинаем создавать первую секцию сайта (/lesson/717079?unit=717939)
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. Тест для получения сертификата об окончании курса

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

4
рейтинг
0
0
0
0
0

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

обновлено 10.09.2023 04:21
Профессия веб верстальщик. Web разработка и создание сайтов 2022

Профессия веб верстальщик. Web разработка и создание сайтов 2022

Оставить отзыв
Поделиться курсом с друзьями