WEB-разработчик 2022
Этот курс направлен на подробное обучение созданию сайтов, без воды, но главное, что здесь мы немедленно применяем все знания на практике.
Это значит, что вы получите весь материал для работы и мы вместе будем создавать реальные проекты шаг за шагом.
Для кого подойдет этот курс?
-
Если вы ничего не знаете про создание сайтов, но хотите начать
-
Если вы новичок в html/css, хотите быстро их освоить и начать применять в работе
-
Если у вас был опыт в этой сфере несколько лет назад, ведь web-технологии очень быстро меняются и совершенствуются
Что внутри курса?
Мы с вами пройдем путь от установки своего первого редактора кода до создания полноценных, полностью функционирующих и расположенных в интернете сайтов. Мы будем изучать теоретическую часть и сразу же применять её на реальных проектах. Все ссылки на ресурсы, дополнительные материалы и бонусные макеты для практики будут предоставлены внутри курса.
На все вопросы внутри курса отвечаю лично как можно быстрее. Так же есть телеграм канал для вопросов и обсуждений. Все обновления курса бесплатны и в автоматическом режиме.
-
мы изучим основы web-разработки: что такое web-сайт, зачем он нужен, циклы создание и многое другое
-
мы научимся работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode…
-
мы научимся работать с графикой для web’a, в том числе с SVG
-
мы узнаем и поймем как использовать HTML5 и CSS3 в реальных проектах
-
мы узнаем основы JS и Jquery, научимся применять их в своих проектах
-
мы научимся работать с Git и GitHub
-
мы научимся работать с Bootstrap 4/5 и с технологией FlexBox
-
мы научимся работать с технологией CSS Grid
-
мы научимся использовать препроцессоры Sass/Scss/Less в своих проектах
-
мы научимся создавать мобильную адаптацию сайтов и приложений
-
мы научимся использовать методологию БЭМ
-
мы поймем, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)
-
мы научимся автоматизировать процессы при помощи планировщика задач Gulp
-
мы научимся оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
-
мы научимся работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое…
-
мы создадим с ваш личный сайт-портфолио
В виде бонуса будут предоставлены несколько реальных макетов для самостоятельного закрепления полученных знаний.
Почему стоит начать свое обучение уже сейчас?
Создание сайтов (верстка) – очень востребованный на рынке труда навык, который к тому же еще и хорошо оплачивается. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS (WordPress, ModX…) изнутри, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках (ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях).
Модуль 1. Погружение в тему создания web-продуктов. Изучение основ HTML и CSS
В этом уроке мы настроим редактор кода VSCode и установим окружение Node.js
В этом уроке мы научимся работать с программой Adobe Photoshop применительно к сфере веб-разработки: как работать с макетами, слоями, базовыми инструментами, как извлекать ресурсы из макетов и тд.
В этом уроке мы будет работать с более современными и целенаправленными программами.
В этом уроке мы создадим свой первый проект, разберемся, какие файлы и папки он может содержать и рассмотрим базовые основы языка разметки HTML.
В этом уроке мы познакомимся и начнем применять самые основные теги HTML.
В этом уроке мы познакомимся с одним из самых значимых нововведений HTML5 - семантические теги.
В этом уроке мы познакомимся с языком стилей - CSS и начнем применять его на практике.
В этом уроке мы начнем знакомится с блочной моделью CSS.
В этом уроке мы научимся работать с одним из самых полезных инструментов для веб-разработчика.
В этом уроке мы узнаем, что за свойство такое display и как элементы разделяются на блочные, строчные и строчно-блочные.
В этом уроке мы научимся работать с позиционированием элементов на страницы при помощи свойства position.
В этом уроке мы разберем, зачем нужна табличная верстка, обтекание элементов и как выравнивать строчно-блочные элементы по вертикали.
В этом дополнительном уроке мы рассмотрим как применять различные единицы измерения в CSS, в том числе и современные.
В этом уроке мы поговорим про специфичность селекторов в css
В этом уроке мы начинаем верстку реального макета, используя чистый HTML и CSS.
В этом уроке мы научимся работать с технологией flexbox и сразу же применим её на нашем макете
В этом уроке мы заканчиваем предыдущую верстку на чистом HTML и CSS и готовимся к выполнению домашнего задания.
В этом уроке мы научимся использовать файлы "сброса" стилей для корректного отображения во всех браузерах.
В этом уроке мы научимся подключать шрифты тремя различными способами к нашим проектам.
Модуль 2. Ускорение работы в несколько раз
В этом уроке мы познакомимся с самой популярной библиотекой для верстки - Bootstrap версии 4.
В этом уроке мы поговорим про обновление этой библиотеки и как оно нас касается
В этом уроке мы начнем создавать новый проект с использованием всех изученных технологий.
В этом уроке мы познакомимся с понятием препроцессоров, как их правильно использовать и зачем.
Если вы сталкиваетесь с ошибкой компиляции - проверьте отступы в коде.
В этом уроке мы познакомимся с вендорными префиксами в CSS
В этом уроке мы продолжим верстать макет, но уже применяя препроцессор SASS
В этом уроке мы научимся работать с псевдоклассами и псевдоэлементами в CSS
В этом уроке мы продолжим работу над проектом, используя полученные знания
В этом уроке мы научимся правильно использовать иконки в проектах и работать с иконочными шрифтами
В этом уроке мы научимся адаптировать проекты под различные устройства и познакомимся с такими понятиями как фиксированная, резиновая, адаптивная и отзывчивая верстка.
В этом уроке мы познакомимся с понятием Pixel perfect верстка
В этом уроке мы на полную мощность начнем использовать колоночную верстку из библиотеки Bootstrap
В этом уроке мы начнем адаптировать наш проект под любое устройство
В этом уроке мы продолжаем адаптировать наш проект под любое устройство
В этом уроке мы установим локальные ссылки и фивиконку на наш сайт.
В этом уроке мы поговорим про такое понятие, как User Experience (UX)
В этом уроке мы познакомимся с такими понятиями как хостинг, домен и кеш. Опубликуем наш сайт в интернете и поработаем с GitHub Pages.
Модуль 3. Необходимые технологии для веб-разработчика и продвинутая практика
Использование систем контроля версий - это важный навык. Они применяются как для небольших проектов, так и для крупнейших в мире сервисов. Они помогают не потерять результат работы, позволяют работать нескольким разработчикам сразу над одним проектом и наглядно отслеживать и показывать результат работы.
В этом уроке мы познакомимся с СКР - Git и сервисом для хранения своих репозиториев - GitHub.
В этом уроке мы научимся работать с GitHub репозиториями с разных компьютеров.
В этом уроке мы научимся работать с планировщиком задач Gulp и настроим его для работы с проектом
В этом уроке мы познакомимся с методологией БЭМ
В этом уроке мы начинаем новый проект с использованием всех изученных техник и технологий
В этом уроке мы разберем ошибку, когда не отображаются картинки
В этом уроке мы познакомимся с формами на сайтах, что они могут содержать и как их правильно использовать
В этом уроке мы познакомимся с языком программирования JavaScript
В этом уроке мы познакомимся с тем, как создавать слайдеры на сайтах. Научимся использовать плагин slick-слайдер.
В этом уроке мы познакомимся с альтернативными вариантами создания слайдеров
В этом уроке мы начнем создавать табы на сайте.
В этом уроке мы продолжаем создавать табы на странице, подключаем скрипты и "оживляем" их
В этом уроке мы будем создавать Google и Яндекс карты на сайте
В этом уроке мы научимся создавать модальные окна на сайтах при помощи плагинов и вручную
В этом уроке мы подробно настроим валидацию у наших форм
В этом уроке мы научимся создавать маски ввода номера на сайтах
В этом уроке мы познакомимся с понятием "Локальный сервер" и установим его для дальнейшей работы
В этом уроке мы будем настраивать отправку писем из форм нашего сайта
В этом занятии мы разберем самые частые ошибки, возникающие на предыдущем уроке
В этом уроке мы реализуем элемент, который позволяет переместиться в самое начало страницы и настроим скрипт для плавного скролла
В этом уроке мы научимся создавать красивы и динамичные анимации при помощи CSS3
В этом уроке мы научимся использовать библиотеки для анимаций, в том числе и для их активации в нужный момент
В этом уроке мы поговорим про обновление библиотеки анимаций animate.css
В этом уроке мы научимся проводить валидацию нашей верстки при помощи официального валидатора
В этом уроке мы загрузим наш сайт на реальный хостинг, узнаем, как работать с FTP-менеджерами и что такое SSL-сертификат
В этом уроке мы заканчиваем работу над нашим сайтом, оптимизируем скорость загрузки и донастраиваем gulpfile.js
Модуль 4. CSS Grid и сайт-портфолио
В этом уроке поговорим о чем будет этот модуль и чем мы тут будем заниматься.
В этом уроке мы поговорим про CSS Grid и создадим свою первую сетку
В этом уроке мы поговорим про единицу гибкости и функцию repeat()
В этом уроке мы поговорим про такие понятия как явные и неявные гриды
В этом уроке мы поговорим про важную функцию minmax()
В этом уроке мы поговорим про расположение грид-элементов по нашему усмотрению
В этом уроке мы поговорим о том, как можно выравнивать наши элементы внутри сетки
В этом уроке мы поговорим про подсетки, именованные области, как это все использовать и адаптировать.
В этом уроке мы поговорим про интересные и полезные особенности meta-тэгов и favicon. Как его создавать в реальных проектах.
В этом уроке мы будем говорить про настройку проекта
В этом уроке мы сверстаем первый экран проекта
В этом уроке мы сверстаем первый экран проекта
В этом уроке мы сверстаем второй экран проекта, используя CSS Grid
В этом уроке мы сверстаем третий экран проекта
В этом уроке мы реализуем скрипт пересчета процентов
