WEB-разработчик 2019

67 уроков
16 просмотров
22.7 ч.
6000 ₽

Личные консультации

Card image cap
Подробное код-ревью домашнего задания
360 минут

800 ₽

Card image cap
Проверка вашего стороннего проекта
1800 минут

1500 ₽

Card image cap
Частный урок по FrontEnd разработке
75 минут

1750 ₽


Программа курса: что вы изучите

1

Модуль 1. Погружение в тему создания web-продуктов. Изучение основ HTML и CSS

Эта секция позволит понимать весь процесс создания сайтов с нуля до полной реализации. Как практический итог - вы сможете создавать простые, но рабочие web - странички.
Про этот курс

00:02:48

Описание

В этом уроке мы поговорим о том, про что будет весь курс и что нас ждет впереди
Зачем нам этот модуль

00:02:35

Описание

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

Классификация сайтов. Этапы создания.

00:21:52

Описание

В этом уроке мы поговорим о том, что такое веб-сайт вообще и какие виды сайтов бывают.

Доска из урока - тут

Вопросы для интервью - тут

Ресурс для создания прототипов - тут

Ресурс для создания прототипов №2 - тут

Установка и настройка редактора кода

00:07:53

Описание

В этом уроке мы настроим редактор кода VSCode и установим окружение Node.js

VSCode - https://code.visualstudio.com/

Node.js - https://nodejs.org/en/

"Горячие клавиши" в VS Code - тут

Список необходимых плагинов - тут

Работа с Adobe Photoshop в вебе

00:21:13

Описание

В этом уроке мы научимся работать с программой Adobe Photoshop применительно к сфере веб-разработки: как работать с макетами, слоями, базовыми инструментами, как извлекать ресурсы из макетов и тд.

Photoshop для Windows - тут

Photoshop для Mac - тут

Вкратце про виды графики - тут

Работа с современными редакторами: Avocode, Zeplin, Figma...

00:20:34

Описание

В этом уроке мы будет работать с более современными и целенаправленными программами.

Avocode - https://avocode.com/

Zeplin - https://zeplin.io/

Psdetch - https://studio.psdetch.com/

Figma - https://www.figma.com/

Конвертирование в sketch + 30 дней бесплатного Avocode - https://avocode.com/convert-psd-to-sketch

Макет для дз - тут

Бонус. Что такое "сетки" и преобразование иконок в SVG формат

00:08:12

Описание

Vectorizer - https://www.vectorizer.io/

Convertio - https://convertio.co/ru/

Online-convert - https://www.online-convert.com/

Полная сетка в формате psd - тут

Мобильная сетка в формате psd - тут

Создаем свой первый проект. Основы HTML

00:19:33

Описание

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

Книга по верстке №1 - тут

Книга по верстке №2 - тут

Основные теги HTML на практике

00:39:48

Описание

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

Книга для домашнего задания - тут

Справочник HTML - https://webref.ru/html

Еще один справочник HTML - https://htmlreference.io/

Универсальные атрибуты - https://webref.ru/html/attr/common

Семантические теги HTML5

00:10:49

Описание

В этом уроке мы познакомимся с одним из самых значимых нововведений HTML5 - семантические теги.

Про HTML5 - http://htmlbook.ru/html5

Еще немного про HTML5 - https://html5book.ru/html-html5/

Основы CSS на практике

00:30:47

Описание

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

CSS цвета - https://www.rapidtables.com/web/css/css-color.html

Атрибут style - https://webref.ru/html/attr/style

Справочник CSS - https://webref.ru/css

Еще один справочник CSS - https://cssreference.io/

Много всего про CSS - https://sitehere.ru/tablica-stilej-css-v-udobnom-vide

Конвертер цвета - https://colorscheme.ru/color-converter.html

Книга по CSS - https://www.ozon.ru/context/detail/id/135656602/

Новая большая книга CSS - https://www.ozon.ru/context/detail/id/135731189/

Блочная модель CSS

00:12:53

Описание

В этом уроке мы начнем знакомится с блочной моделью CSS.

Схема из урока - тут

Developer Tool. Что это и как с ним работать?

00:13:37

Описание

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

Блочная модель CSS. Часть 2

00:18:51

Описание

В этом уроке мы узнаем, что за свойство такое display и как элементы разделяются на блочные, строчные и строчно-блочные.

Справочник из урока - тут

Display - тут

Позиционирование элементов в CSS. Принцип карточной колоды

00:21:14

Описание

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

Position - тут

Выравнивание элементов по вертикали. Верстка таблицами и float'ами

00:08:35

Описание

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

vertical-align - тут

Бонус. Единицы измерения CSS

00:10:28

Описание

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

Caniuse - https://caniuse.com/

Классификация - http://htmlbook.ru/content/edinitsy-izmereniya

Еще немного про величины - тут

Практика. Создаем сайт на чистом HTML и CSS

01:08:11

Описание

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

Про background - https://cssreference.io/backgrounds/

Макет и шрифты для практик - скачать тут

Технология Flexbox и применение её на макете

00:13:53

Описание

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

Caniuse - https://caniuse.com/

Подробная статья про flexbox - https://html5.by/blog/flexbox/

Шпаргалка по Flexbox - https://habr.com/ru/post/313938/

Flexbox на примере игрального кубика - https://habr.com/ru/post/259783/

Игра для быстрого освоения flexboх - https://flexboxfroggy.com/#ru

Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание

00:33:49

Описание

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

background-position - тут

Ссылка на эталонный вариант верстки в следующем уроке. Сначала поработайте самостоятельно :)

Сброс стилей reset.css/normalize.css

00:09:04

Описание

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

Normalize.css - https://necolas.github.io/normalize.css/

Статья про reset.css - https://habr.com/ru/post/45296/

Статья про normalize.css - тут

Ресурс для подключения сторонних файлов (cdn) - https://cdnjs.com/libraries/normalize

Репозиторий с домашними заданиями - https://github.com/yankovalenko94/Webdev2019

Подключение шрифтов на сайт

00:30:55

Описание

В этом уроке мы научимся подключать шрифты тремя различными способами к нашим проектам.

font-family - https://developer.mozilla.org/ru/docs/Web/CSS/font-family

Шрифты от google - https://fonts.google.com/

Найти и скачать любые шрифты - https://webfonts.pro/

Сервис для конвертации шрифтов - https://transfonter.org/

Про форматы шрифтов - тут


2

Модуль 2. Ускорение работы в несколько раз

После данной секции вы сможете использовать современные препроцессоры CSS - SASS/SCSS/LESS, библиотеку Bootstrap 4, систему БЭМ, научитесь адаптировать свои сайты под любое устройство и работать в команде.
Зачем нам этот модуль

00:01:03

Описание

В этом уроке я расскажу, зачем нам этото модуль.

Библиотека Bootstrap 4

00:34:28

Описание

В этом уроке мы познакомимся с самой популярной библиотекой для верстки - Bootstrap версии 4.

Bootstrap на русском - https://getbootstrap.ru/docs/v4-alpha/

Документация Bootstrap - https://getbootstrap.com/

Практика. Новый проект с использованием сетки Bootstrap 4

01:03:11

Описание

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

Скачать макет - тут

Препроцессоры. SASS/SCSS/LESS

00:30:43

Описание

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

Проверить предыдущее домашнее задание - тут

Документация SASS на английском - https://sass-lang.com/

Документация SASS на русском - https://sass-scss.ru/documentation/

SASS/SCSS компилятор scout-app - https://scout-app.io/

Компилятор Koala - http://koala-app.com/

Настройки плагина для VSCode SASS Compiler - тут

LESS: программируемый язык стилей - https://habr.com/ru/post/136525/

Если у вас ошибка при компиляции SASS кода

00:02:55

Описание

Если вы сталкиваетесь с ошибкой компиляции - проверьте отступы в коде.

 

Вендорные префиксы в CSS

00:04:06

Описание

В этом уроке мы познакомимся с вендорными префиксами в CSS

Статья №1 - тут

Статья №2 - тут

Практика. Продолжаем работу и используем препроцессор SASS

00:31:40

Описание

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

Конвертация css в sass - https://css2sass.herokuapp.com/

CSS Transform - https://html5book.ru/css3-transform/

Проверить предыдущее домашнее задание - тут

Псевдоклассы и псевдоэлементы в CSS

00:17:11

Описание

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

Документация - https://webref.ru/css#pseudo-class

Классификация и описания - https://html5book.ru/psevdoklassy/

Transition - https://webref.ru/css/transition

Проверить предыдущее домашнее задание - тут

Практика. Используем псевдоэлементы и псевдоклассы в проекте

00:42:32

Описание

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

list-style-image - http://htmlbook.ru/css/list-style-image

Проверить предыдущее домашнее задание - тут

Как работать с иконками. Иконочные шрифты

00:20:18

Описание

В этом уроке мы научимся правильно использовать иконки в проектах и работать с иконочными шрифтами

Ресурс для поиска иконок - https://seeklogo.com/

FontAwesome - https://fontawesome.com/

Создать свой иконочный шрифт - https://icomoon.io/app/#/select

Еще один ресурс с иконками - https://www.flaticon.com/

Адаптация проектов под различные устройства

00:17:31

Описание

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

Статья про медиа-запросы - https://html5book.ru/css3-mediazaprosy/

Проверить предыдущее домашнее задание - тут

Pixel Perfect верстка

00:03:44

Описание

В этом уроке мы познакомимся с понятием Pixel perfect верстка

Плагин для проверки верстки - тут

Адаптация при помощи Bootstrap

00:11:21

Описание

В этом уроке мы на полную мощность начнем использовать колоночную верстку из библиотеки Bootstrap

Та самая документация - https://getbootstrap.com/docs/4.3/layout/grid/

Практика. Адаптация проекта. Часть 1

00:42:15

Описание

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

Макет для работы - тут

Практика. Адаптация проекта. Часть 2

00:44:45

Описание

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

Файл JavaScript - тут

Локальные ссылки и favicon

00:05:46

Описание

В этом уроке мы установим локальные ссылки и фивиконку на наш сайт.

Сервис для создания favicon - https://pr-cy.ru/favicon/

Как подключить favicon - тут

UX. Дорабатываем мелочи

00:06:36

Описание

В этом уроке мы поговорим про такое понятие, как User Experience (UX)

Расширение для тестирования мобильных устройств - тут

Проверить домашнее задание - тут

Публикуем сайт в интернете. Домен. Хостинг. GitHub Pages и сброс "кеша"

00:12:19

Описание

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

GitHub. Регистрироваться и создавать репозиторий тут - https://github.com/

GitHub Pages - https://pages.github.com/

Про разницу в доменных именах - тут


3

Модуль 3. Необходимые технологии для веб-разработчика и продвинутая практика

После данного модуля вы сможете использовать систему контроля версий Git и сервис GitHub, систему БЭМ, препроцессор SCSS, планировщик задач Gulp, основы JS, Jquery плагины на их основе. По факту - все, что нужно для создания полноценных продуктов.
Зачем нам этот модуль

00:01:09

Описание

Про этот модуль.

Система контроля версий Git и сервис GitHub

00:22:23

Описание

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

В этом уроке мы познакомимся с СКР - Git и сервисом для хранения своих репозиториев - GitHub.

Git - https://git-scm.com/

Документация по Git - тут

GitHub - https://github.com/

Обучение Git'у и его возможностям - https://githowto.com/ru

Как работать с GitHub с разных компьютеров, gitignore и Git Kraken

00:15:52

Описание

В этом уроке мы научимся работать с GitHub репозиториями с разных компьютеров.

Git Kraken - https://www.gitkraken.com/

Файл gitignore (скрытый файл, положить в проект) - тут

Планировщик задач Gulp

00:38:29

Описание

В этом уроке мы научимся работать с планировщиком задач Gulp и настроим его для работы с проектом

Node.js - https://nodejs.org/en/

Gulp - https://gulpjs.com/

Gulp-sass - https://www.npmjs.com/package/gulp-sass

Browser-sync - https://www.browsersync.io/

Browser-sync npm - https://www.npmjs.com/package/browser-sync

gulp-autoprefixer - https://www.npmjs.com/package/gulp-autoprefixer

gulp-clean-css - https://www.npmjs.com/package/gulp-clean-css

gulp-rename - https://www.npmjs.com/package/gulp-rename

Gulpfile для скачивания - тут

Методология БЭМ

00:13:36

Описание

В этом уроке мы познакомимся с методологией БЭМ

Документация БЭМ - https://ru.bem.info/methodology/

Практика. Создаем новый проект, используя Gulp, БЭМ...

00:37:11

Описание

В этом уроке мы начинаем новый проект с использованием всех изученных техник и технологий

Макет для работы - тут

Шрифт из макета - тут

Если у вас не работают картинки

00:02:10

Описание

В этом уроке мы разберем ошибку, когда не отображаются картинки

 

Формы на сайтах

00:32:03

Описание

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

Типы input - http://htmlbook.ru/html/input/type

Кнопки на основе инпутов - тут

Проверить предыдущее домашнее задание - тут

 

Знакомимся с языком программирования JavaScript

00:31:10

Описание

В этом уроке мы познакомимся с языком программирования JavaScript

Ресурс для изучения JS - https://learn.javascript.ru/

Проверить предыдущее домашнее задание - тут

Практика. Создаем слайдер на сайте. Slick-слайдер

00:34:50

Описание

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

Slick - https://kenwheeler.github.io/slick/

Документация Jquery - тут

Если у вас не работают скрипты

00:03:14

Описание

Если у вас не работают скрипты в проекте

Практика. Альтернативные варианты слайдеров

00:30:09

Описание

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

Owl Carousel - https://owlcarousel2.github.io/OwlCarousel2/

Tiny Slider - https://github.com/ganlanyuan/tiny-slider

Слайдер от Bootstrap - https://getbootstrap.com/docs/4.3/components/carousel/

Условные комментарии в html - http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii

Ролик про Jquery и её актуальность - https://www.youtube.com/watch?v=ENGZC0bwjEM

Практика. Создаем табы на сайте. Часть 1

00:31:59

Описание

В этом уроке мы начнем создавать табы на сайте.

Проверить предыдущее домашнее задание - тут

Практика. Создаем табы на сайте. Часть 2

00:37:16

Описание

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

Скрипт с табами - https://denis-creative.com/jquery-tabs/

Bootstrap табы - https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior

Статья про calc() - тут

Создаем интерактивные карты на сайте

00:20:13

Описание

В этом уроке мы будем создавать Google и Яндекс карты на сайте

Конструктор Яндекс карт - https://yandex.ru/map-constructor/

VPN плагин - тут

Проверить предыдущее домашнее задание - тут

Практика. Создаем модальные окна на сайте

00:37:56

Описание

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

Модальное окно от Bootstrap - https://getbootstrap.com/docs/4.3/components/modal/

magnific-popup - https://dimsemenov.com/plugins/magnific-popup/documentation.html

Документация Jquery - тут

Проверить предыдущее домашнее задание - тут

Валидация форм

00:22:42

Описание

В этом уроке мы подробно настроим валидацию у наших форм

Плагин для валидациии - https://jqueryvalidation.org/

Проверить предыдущее домашнее задание - тут

Маска ввода номера на сайте

00:05:29

Описание

В этом уроке мы научимся создавать маски ввода номера на сайтах

Скачиваем маску тут - https://plugins.jquery.com/maskedinput/

Документация - тут

Проверить предыдущее домашнее задание - тут

Локальные сервера

00:08:07

Описание

В этом уроке мы познакомимся с понятием "Локальный сервер" и установим его для дальнейшей работы

Open Server - https://ospanel.io/

MAMP - https://www.mamp.info/en/

Практика. Отправка писем с сайта

00:18:45

Описание

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

Php Mailer Документация - https://github.com/PHPMailer/PHPMailer

Папка для скачивания со скриптом - тут

Плавный скролл по ссылкам и элемент "вверх"

00:11:21

Описание

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

Скрипт плавного скролла - тут

Анимации на сайтах при помощи CSS3

00:12:05

Описание

В этом уроке мы научимся создавать красивы и динамичные анимации при помощи CSS3

Документация по анимациям - https://html5book.ru/css3-animation/

Проверить несколько предыдущих заданий - тут

Библиотеки для работы с анимациями

00:11:09

Описание

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

Animate.css - https://daneden.github.io/animate.css/

wow.js - https://wowjs.uk/

Валидация сайта

00:07:34

Описание

В этом уроке мы научимся проводить валидацию нашей верстки при помощи официального валидатора

Валидатор - https://validator.w3.org/

Плагин валидации для VSCode - тут

Проверить предыдущее домашнее задание - тут

Загружаем сайт на реальный хостинг. Настройка домена, что такое FTP и SSL

00:14:48

Описание

В этом уроке мы загрузим наш сайт на реальный хостинг, узнаем, как работать с FTP-менеджерами и что такое SSL-сертификат

Статья про SSL - https://hostenko.com/wpcafe/tutorials/wordpress-ssl-https/

Как создать субдомен - https://hosting-ninja.ru/rating/linkhost/videouroki.html?video=7

Регистрируемся и приобретаем домен/хостинг по этой ссылке - тут

Проверить предыдущее домашнее задание - тут

Оптимизация скорости загрузки сайта, доработка gulpfile

00:38:10

Описание

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

Google Pagespeed - https://developers.google.com/speed/pagespeed/insights/

Сжатие изображений - https://imagecompressor.com/ru/

Еще один сервис для сжатия - https://tinypng.com/

gulp-htmlmin - https://www.npmjs.com/package/gulp-htmlmin

gulp-imagemin - https://www.npmjs.com/package/gulp-imagemin

gulp-scss-starter для быстрого старта проектов - https://github.com/andreyalexeich/gulp-scss-starter

Virtualbox для установки виртуальной машины - https://www.virtualbox.org/

Сервис для тестирования кроссбраузерности/кроссплатформенности - https://www.browserstack.com/

Проверить последнее домашнее задание - тут

Что делать дальше?

00:01:27

Описание

Спасибо, что прошли этот путь до конца вместе со мной :)

Макет №1 - тут

Макет №2 - тут

Топовый хостинг link-host - тут

Получить 25$ от меня на онлайн-кошелек Payoneer - тут



Начните обучение сегодня