Мы используем cookie для стабильной работы сервиса. Подробнее

Курс по верстке и веб разработке сайтов с нуля! Web development

ФорматОнлайн
Длительность4-5 часов в неделю
Объём10 занятий
По окончанииStepik
О курсе

Подробнее

Привет! Меня зовут Дима. И я предлагаю вам изучить то, как создавать современные, адаптивные веб сайты!   Если вы не писали ни одной строчки кода — этот курс для вас! Этот курс для абсолютных новичков, по этому мы начнем с самых основ и вместе, шаг за шагом, пройдем путь от установки редактора кода, до создания стильных, современных адаптированных под планшеты, телефоны и десктоп версии веб сайтов.   Изучим крепкую базу разработки и этапы создания сайтов! Мы начнем, с изучения базы HTML и СSS, и да, здесь не будет теории, ведь все знания мы будем применять сразу, на реальных проектах, живых задачах, и на протяжении всего курса будем создавать современные веб сайты. Мы будем изучать не просто HTML и CSS, мы изучим самые современные подходы к верстке, построению элементов и структуры веб сайтов согласно последним мировым стандартам современной разработки   Ваши сайты будет выглядеть отлично на всех устройствах! Вы научитесь, создавать, адаптивные, интерактивные элементы используя CSS, такие, как карусели, кнопки, модальные окна и многое много другое.   Вы изучите современные методологии, и техники для быстрой и качественной разработки! Конечно, в этом курсе мы изучим продвинутые техники такие как методология БЭМ, которая позволит нам создавать гибкие переиспользуемые элементы, для ускорения нашей работы в несколько раз. И да, знание этой методологии очень цениться работодателями. Мы изучим не только CSS, но и его продвинутые препроцессоры такие как SASS/ SCSS, которые используют все современные веб разработчики и IT компании.   Библиотека bootstrap, для быстрого создания сайтов, у вас в кармане! Дополнительно, мы изучим необходимую базу библиотеки Bootstrap, в которой собраны все компоненты веб сайтов, с помощью которых вы сможете создавать интерактивные адаптивные сайты практически не используя код.   Разработка сайтов в лучшем и современном программном обеспечении! Мы освоим передовую и бесплатную программу для веб-разработчиков, VS Code, разберемся с ее настройками, плагинами и хитростями, что сделает нашу работу по истине комфортной. Вы забудете то что программирование это сложно, нужна математика и необходима максимальная точность, ведь современные программы подскажут вам, где ошибки и какой код лучше использовать.   Вы научитесь создавать сайты "под ключ" И чтобы стать востребованным профессионалом на фрилансе или при устройстве на вакансию верстальщик, вы изучите основы программы Figma, в которой создают дизайн макеты всех современных сайтов, и изучать мы ее будем шаг за шагом, создавая свой собственный уникальный дизайн сайта портфолио, который вы сверстаете полностью до последней буквы кода, и выложите в сеть интернет. В конце курса, вы сможете не просто брать свои первые заказы, а сможете выполнять их под ключ начиная с создания дизайн макета сайта, и заканчивая выкладкой полностью готового сайта в сеть интернет.   Лучшая документация и ресурсы со всего интернета! Дополнительно, вы узнаете множество мест, где вы найдете необходимую информацию по веб разработке, популярные платформы для разработчиков, лучшие и самые современные пособия, стоковые площадки материалов для ваших будущих сайтов и многое много другое.   И если вас пугают такие слова как, HTML5 CSS3 Адаптивный дизайн, FlexBox, Bootstrap, SCSS не беспокойтесь — этот курс для абсолютных новичков к концу курса, вы будете чувствовать себя как рыба в воде во всех этих темах, даже если вы не написали ни одной строчки кода за всю свою жизнь.   Я всегда на связи! И будьте уверены, вы не останетесь одни, ведь после каждого небольшого урока, у вас будет возможность сравнить ваш код с моим или просто задать вопрос, ответы обычно не заставляют себя долго ждать.   Гарантия возврата денег! И если у вас все еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него если он вам не понравится в течение 30 дней.   Поддержка Автор курса отвечает на все вопросы в комментариях к урокам — ежедневно.   В современном мире, стать программистом, может каждый. Присоединяйтесь ко мне и вместе, мы изучим как то как создавать профессиональные, современные веб сайты. До встречи на уроках!
Требования

Что нужно для старта

  • Никаких предварительных знаний не требуется
Результат

Что вы получите

  • Вы узнаете как создавать сайты на языках HTML и CSS
  • Научитесь размещать свой сайт в сети интернет
  • Изучите HTML5
  • Изучите CSS3
  • Получите необходимые знания для использования библиотеки Bootstrap
  • Научитесь работать с препроцессором SASS/SCSS
  • Изучите методологию БЭМ
  • Научитесь создавать адаптивные сайты, которые будут выглядеть отлично на любом устройстве
  • Научитесь создавать дизайн сайтов
  • Изучите базу программы Figma
  • Научитесь работать в программе VS Code
  • Поймете все этапы разработки сайтов
  • Изучите современные стандарты позиционирования элементов сайта
  • Изучите технологию Flexbox
Аудитория

Для кого этот курс

  • Для начинающих веб разработчиков
Содержание

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

10 занятий
ТемаЧто внутри
01Введение

- О чем этот курс
- Подготовка. Скачиваем материалы. Как проходить курс
- Оставайтесь со мной на связи.

02Основы HTML и CSS

- О чем этот блок
- Создаем первый веб сайт!
- Как работают теги HTML и стили CSS
- Теги Head и Body. Правильная структура веб страницы
- Как работают теги заголовка и описания, в теге head.
- Как работает тег "контейнер' - div
- Как работать с классами в верстке
- Как подключить лист со стилями к файлу html
- ПРАКТИКА: Создайте и стилизуйте несколько тегов div
- Пример преподавателя. "Практика: создайте и стилизуйте несколько

03Мини-курс по ChatGPT для обучения и работы (Опционально)

- Обзор нейросетей
- Лучшие модели искусственного интеллекта на сегодня
- Как оплатить подписку на Chat GPT
- Обзор тарифов Chat GPT
- Программа Chat GPT на разные операционные системы
- Используем Chat GPT для обучения
- Используем Chat GPT для программирования
- Где еще полезен Chat GPT
- Как показывать экран чату GPT
- Генерация изображений с помощью Chat GPT и не только
- Advanced Voice mode в Chat GPT
- Как работает Copilot от GitHub

04Погружение в HTML и CSS

Подробности будут доступны на странице курса

05Работа в Figma. Мини курс Figma free.

- О чем этот блок
- Об обновлении интерфейса Figma
- О чем мини курс?
- Подготовка. Скачиваем материалы
- Какой размер у сайта?
- Как сохранить свой проект
- Как работать с сетками и направляющими
- Бриф с заказчиком.
- Mood board и поиск вдохновения
- Создаем wireframe проекта
- Стоковые площадки. Где найти идеальное фото?
- Как работать с изображениями в figma
- Иерархия элементов в figma
- Как работать с цветом в figma
- Разница UX и UI
- Как создавать текст в figma
- Линии и обводка фигур
- Как группировать элементы
- Поиск и установка новых шрифтов
- Как работать с иконками
- Как работать с градиентом
- Как работатет инструмент subtract
- Стоковая площадка по иконкам. Поиск иконок
- Как работать с масками слоя
- Как использовать рыбный текст в figma
- Как добавлять эффекты к элементам
- Экспорт из figma и передача в разработку
- Обновление 2023.Где вкладка inspect?!
- Dev mode стал платным
- Поздравляю с завершением мини курса!

06Продвинутая верстка SASS / БЭМ / FlexBox

- О чем этот блок
- Препроцессор SASS ч.1
- Препроцессор SASS ч.2
- Как решать ошибки
- FlexBox. Новый способ позиционирования элементов.
- Методология БЭМ и как ее использовать
- Используем FlexBox и БЭМ в новом проекте
- Как превратить растровый логотип в векторный с помощью Illustrat
- Закругление / Поворот / Тени для элементов
- Что такое иконочные шрифты
- Создаем первую кнопку
- Используем модификатор БЭМ. Новое свойство overflow
- Min/Max - Height/Width
- Практика. Создаем вторую секцию сайта
- Практика. Создаем третью секцию сайта
- Практика. Создаем footer сайта
- Добавляем якорные ссылки на навигационное меню
- Что такое fav-icons, и как их установить в свой проект

07Адаптивная верстка

- О чем этот блок
- Какие существуют типы верстки
- Как работает мета тег viewport
- Под какие размеры нужно адаптировать сайт
- Адаптация под планшетную версию ч.1
- Практика: Адаптируйте сайт под следующую версию.
- Пример преподавателя. Адаптация следующей версии под планшет
- Как работают единицы измерения EM/REM VH/VW
- Свойство transition. Создаем гамбургер для мобильной версии сайт
- Создаем гамбургер для мобильной версии сайта ч.2
- Знакомство с JS. Создаем гамбургер для мобильной версии сайта ч.
- Speed test готового сайта

08Библиотека bootstrap

- О чем этот блок
- Что такое bootstrap
- Как подключить bootstrap в свой проект
- Какие настройки содержит в себе bootstrap
- Как задавать свои стили в bootstrap
- Свойство Object-fit и как создать слайдер в bootstrap
- Как модифицировать слайдер в bootstrap
- Как менять цвета в bootstrap
- Как изменить скорость слайдера в bootstrap
- Типичные ошибки и проблемы с работой в bootstrap
- Как менять компоненты bootstrap. Меняем иконки на слайдере
- Система сеток bootstrap. Bootstrap-grid
- Как решать задачи возникающие в процессе верстки

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

- Прощальное слово

10Получите ваш сертификат

- Тест для получения сертификата об окончании курса

01Введение

- О чем этот курс
- Подготовка. Скачиваем материалы. Как проходить курс
- Оставайтесь со мной на связи.

02Основы HTML и CSS

- О чем этот блок
- Создаем первый веб сайт!
- Как работают теги HTML и стили CSS
- Теги Head и Body. Правильная структура веб страницы
- Как работают теги заголовка и описания, в теге head.
- Как работает тег "контейнер' - div
- Как работать с классами в верстке
- Как подключить лист со стилями к файлу html
- ПРАКТИКА: Создайте и стилизуйте несколько тегов div
- Пример преподавателя. "Практика: создайте и стилизуйте несколько

03Мини-курс по ChatGPT для обучения и работы (Опционально)

- Обзор нейросетей
- Лучшие модели искусственного интеллекта на сегодня
- Как оплатить подписку на Chat GPT
- Обзор тарифов Chat GPT
- Программа Chat GPT на разные операционные системы
- Используем Chat GPT для обучения
- Используем Chat GPT для программирования
- Где еще полезен Chat GPT
- Как показывать экран чату GPT
- Генерация изображений с помощью Chat GPT и не только
- Advanced Voice mode в Chat GPT
- Как работает Copilot от GitHub

04Погружение в HTML и CSS
05Работа в Figma. Мини курс Figma free.

- О чем этот блок
- Об обновлении интерфейса Figma
- О чем мини курс?
- Подготовка. Скачиваем материалы
- Какой размер у сайта?
- Как сохранить свой проект
- Как работать с сетками и направляющими
- Бриф с заказчиком.
- Mood board и поиск вдохновения
- Создаем wireframe проекта
- Стоковые площадки. Где найти идеальное фото?
- Как работать с изображениями в figma
- Иерархия элементов в figma
- Как работать с цветом в figma
- Разница UX и UI
- Как создавать текст в figma
- Линии и обводка фигур
- Как группировать элементы
- Поиск и установка новых шрифтов
- Как работать с иконками
- Как работать с градиентом
- Как работатет инструмент subtract
- Стоковая площадка по иконкам. Поиск иконок
- Как работать с масками слоя
- Как использовать рыбный текст в figma
- Как добавлять эффекты к элементам
- Экспорт из figma и передача в разработку
- Обновление 2023.Где вкладка inspect?!
- Dev mode стал платным
- Поздравляю с завершением мини курса!

06Продвинутая верстка SASS / БЭМ / FlexBox

- О чем этот блок
- Препроцессор SASS ч.1
- Препроцессор SASS ч.2
- Как решать ошибки
- FlexBox. Новый способ позиционирования элементов.
- Методология БЭМ и как ее использовать
- Используем FlexBox и БЭМ в новом проекте
- Как превратить растровый логотип в векторный с помощью Illustrat
- Закругление / Поворот / Тени для элементов
- Что такое иконочные шрифты
- Создаем первую кнопку
- Используем модификатор БЭМ. Новое свойство overflow
- Min/Max - Height/Width
- Практика. Создаем вторую секцию сайта
- Практика. Создаем третью секцию сайта
- Практика. Создаем footer сайта
- Добавляем якорные ссылки на навигационное меню
- Что такое fav-icons, и как их установить в свой проект

07Адаптивная верстка

- О чем этот блок
- Какие существуют типы верстки
- Как работает мета тег viewport
- Под какие размеры нужно адаптировать сайт
- Адаптация под планшетную версию ч.1
- Практика: Адаптируйте сайт под следующую версию.
- Пример преподавателя. Адаптация следующей версии под планшет
- Как работают единицы измерения EM/REM VH/VW
- Свойство transition. Создаем гамбургер для мобильной версии сайт
- Создаем гамбургер для мобильной версии сайта ч.2
- Знакомство с JS. Создаем гамбургер для мобильной версии сайта ч.
- Speed test готового сайта

08Библиотека bootstrap

- О чем этот блок
- Что такое bootstrap
- Как подключить bootstrap в свой проект
- Какие настройки содержит в себе bootstrap
- Как задавать свои стили в bootstrap
- Свойство Object-fit и как создать слайдер в bootstrap
- Как модифицировать слайдер в bootstrap
- Как менять цвета в bootstrap
- Как изменить скорость слайдера в bootstrap
- Типичные ошибки и проблемы с работой в bootstrap
- Как менять компоненты bootstrap. Меняем иконки на слайдере
- Система сеток bootstrap. Bootstrap-grid
- Как решать задачи возникающие в процессе верстки

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

- Прощальное слово

10Получите ваш сертификат

- Тест для получения сертификата об окончании курса

Документ после выпуска

Stepik

Организатор

Автор курса

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

Отзывы о курсе

Оставьте отзыв

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

Напишите ваш коментарий, не менее 30 символов

Нажимая кнопку, вы даете согласие на обработку персональных данных

Оставьте заявку

Консультант ответит на вопросы о курсе «Курс по верстке и веб разработке сайтов с нуля! Web development» и поможет разобраться в деталях обучения.

Комментарий ...

Нажимая кнопку, вы даете согласие на обработку персональных данных

Информация обновлена 3 сентября 2026 г.

Продолжить выбор

Похожие курсы

Vue.js 3, Vue Router и Pinia
Vue.js 3, Vue Router и Pinia

В этом курсе мы изучим Vue, Vue Router и Pinia, создавая два полноценных приложения. Мы сделаем приложение для отображения прогноза погоды и Saas сервис хранения веб закладок. Это…

Онлайн15 занятий
3 999 ₽
Вёрстка на HTML & CSS для начинающих
30 минут в день
Вёрстка на HTML & CSS для начинающих

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

Онлайн8 занятий
490 ₽
Node js для Front End
4 месяца
Node js для Front End

Backend разработка на Node.js: Express.js, NestJS фреймворки. Работа с базами данных PostgreSQL, MongoDB. Создание REST API, аутентификация и авторизация. WebSockets для реального…

ОнлайнСредний
100 000 ₽от 5 555 ₽/мес на 18 мес.
Создание и анимация сайта
15 ак.ч.
Создание и анимация сайта

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

Онлайн8 занятий
Цена по запросу
React Native и Expo Router
React Native и Expo Router

В этом курсе мы изучим React Native и Expo Router написав полноценное мобильное приложение с авторизацией и нативными возможностями. Этот курс подойдёт тем, кто хочет погрузиться…

Онлайн16 занятий
3 999 ₽
Веб разработка - переподготовка
−40%2 месяца
Веб разработка - переподготовка

Курс профессиональной переподготовки «Веб разработка» по всей России. ✓ Дистанционное обучение ✓ Получение диплома с бесплатной доставкой ✓ Цена 32 980 руб.

Онлайн5 занятий
Текстовые уроки
54 980 ₽−40%
32 980 ₽
Начать без затрат

Бесплатные курсы

Основы веб-разработки
Бесплатно1 час
Основы веб-разработки

Здесь вы познакомитесь с основами верстки, программированию на JavaScript. Курсы этого трека помогут освоить все ключевые навыки, которые нужны фронтенд-разработчику для создания…

Онлайн1 занятийНачальный
Домашние задания
Бесплатно