Сложность
Сложность
Начинающий
Тип обучения
Тип обучения
Курс
Формат обучения
Формат обучения
Записанные лекции
Трудоустройство
Трудоустройство
Отсутствует
Сертификат
Сертификат
Да

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

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

О курсе

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

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

 

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

Мы начнем, с изучения базы 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

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

Приобретаемые навыки
2
CSS
4
SCSS
5
VSCode
7
UI/UX
8
Flexbox
9
БЭМ
10
JS
11
Bootstrap

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

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

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

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

Stepik — образовательная платформа и конструктор
онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем
в проведении олимпиад и программ переподготовки.
Наша цель — сделать образование открытым и удобным.

Помогаем учиться, а также создавать свои курсы и обучать


Первые учебные материалы были размещены на платформе в 2013 году. Сегодня среди охваченных курсами тем: программирование, информатика, математика, статистика
и анализ данных, биология и биоинформатика, инженерно-технические и естественные науки. Онлайн-курсы, размещенные на Stepik, неоднократно становились призерами конкурсов онлайн-курсов, а система автоматизированной проверки задач используется в ряде курсов на платформах Coursera и edX. Также Stepik активно развивает направление адаптивного обучения, где каждый сможет изучать материал, подобранный индивидуально под свой уровень знаний.

 

Stepik является также площадкой для проведения конкурсов и олимпиад — среди мероприятий — отборочный этап Олимпиады НТИ, онлайн-этап акции Тотальный диктант, международная олимпиада по биоинформатике.

 

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

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

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

Введение

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

Основы HTML и CSS

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

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

  1. О чем этот блок
  2. Классификация сайтов
  3. Правильная структура файлов и папок проекта
  4. Как использовать плагины VS Code
  5. Как работают семантические теги
  6. Как работать с цветом в верстке
  7. Как добавить изображение на сайт через тег IMG
  8. Как работает консоль разработчика в браузере
  9. Как создать меню и ссылки
  10. Теги списков UL и OL
  11. Как задавать отступы элементам с помощью margin и padding.
  12. Как работают блочные и строчные элементы
  13. Что такое "Cхлопывание margin"
  14. Правильная организация отступов в верске ч.1
  15. Как использовать "Псевдоклассы"
  16. Правильная организация отступов в верстке ч.2
  17. Как быстро сбросить кеш вашего браузера
  18. Как добавить изображение используя свойство background-image
  19. Позиционирование элементов на веб странице
  20. Как работает z-index
  21. Как добавить градиентную заливку через CSS
  22. Выравнивание элементов по горизонтали
  23. Box-sizing. Отступы внутри размера элемента.
  24. Единицы измерения CSS
  25. Селекторы CSS
  26. Тег span
  27. Can i use
  28. Normalize.css и Reset.css - Сброс стилей браузера
  29. Как добавить интерактивную карту на сайт
  30. Тег HR или как отрисовать линию
  31. Как использовать разные шрифты на сайте
  32. Как устанавливать шрифты на компьютер
  33. Загружаем сайт на реальный хостинг. Выбор и настройка домена.
  34. Как редактировать сайт загруженный на хостинг, через 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. Тест для получения сертификата об окончании курса

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

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

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

обновлено 06.09.2024 05:43
Верстка и веб разработка сайтов 2022 - с нуля! Web development

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

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