[Петриченко] WEB-разработчик 2020 (2020)

[Ho Lee Fuk]

Автор: Петриченко

Название: WEB-разработчик 2020 (2020)

Описание:

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

Что внутри курса?

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

- мы изучим основы web-разработки: что такое web-сайт, зачем он нужен, циклы создание и многое другое

- мы научимся работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode...

- мы научимся работать с графикой для web'a, в том числе с SVG

- мы узнаем и поймем как использовать HTML5 и CSS3 в реальных проектах

- мы узнаем основы JS и Jquery, научимся применять их в своих проектах

- мы научимся работать с Git и GitHub

- мы научимся работать с Bootstrap 4 и с технологией FlexBox

- мы научимся использовать препроцессоры Sass/Scss/Less в своих проектах

- мы научимся создавать мобильную адаптацию сайтов и приложений

- мы научимся использовать методологию БЭМ

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

- мы научимся автоматизировать процессы при помощи планировщика задач Gulp

- мы научимся оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c

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

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

Чему вы научитесь:

- Узнаешь основы web-разработки: что такое web-сайт, зачем он нужен, циклы создания и многое другое

- Научишься работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode...

- Научишься работать с графикой для web'a, в том числе с SVG

- Узнаешь и поймешь как использовать HTML и CSS в реальных проектах (теория + настоящая практика)

- Узнаешь основы JS и Jquery, научишься применять их в своих проектах

- Научишься работать с Git и GitHub

- Научишься работать с Bootstrap 4 и с технологией FlexBox

- Научишься использовать препроцессоры Sass/Scss/Less в своих проектах

- Научишься создавать мобильную адаптацию сайтов и приложений

- Научишься использовать методологию БЭМ

- Поймешь, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)

- Научишься автоматизировать процессы при помощи планировщика задач Gulp

- Научишься оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c

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

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

Бонус: получишь несколько реальных макетов для практики

Требования:

- Желание освоить создание сайтов и начать зарабатывать на этом

- Никакой другой предварительной подготовки: все что нужно мы настроим и выучим

Для кого подойдет этот курс?

- Если вы ничего не знаете про создание сайтов, но хотите начать

- Если вы новичок в html/css, хотите быстро их освоить и начать применять в работе

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

Почему стоит начать свое обучение уже сейчас?

Создание сайтов (верстка) - очень востребованный на рынке труда навык, который к тому же еще и хорошо оплачивается. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS (WordPress, ModX...) изнутри, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на jаvascript фреймворках и библиотеках (ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях).

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

- Для тех людей, кто вообще не знаком с темой создания сайтов

- Для тех людей, кто уже делал свои первые попытки создания сайтов

Материалы курса:

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

Зачем нам этот модуль

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Зачем нам этот модуль

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

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

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

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

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

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

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

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

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

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

Pixel Perfect верстка

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

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

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

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

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

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

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

Зачем нам этот модуль

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

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

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

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

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

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

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

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

Как можно освоить jаvascript?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее:

Скачать:

Качать без ограничений Купить доступ за ₸3.000,00