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

Кодер · 1 сентября, 2015

Автор (режиссер): Юрий Ключевский
Жанр: Верстка, HTML5, CSS3
Доп. материалы: Есть

Продолжительность: 17:10:31
Качество видео: PCRec

Размер: 14.8 гб.

Видео: AVC/H.264, WMV1, 1920x1080, ~774-3303 kbps
Аудио: AAC, WMA, 2 ch, 126-128 kbps, VBR

Описание:
Вы научитесь собирать сайты с нуля! Вы сможете верстать страницы для десктопа и мобильных устройств, узнаете как работать с чужим кодом и правильно публиковать сайты в сети, соберете портфолио из 2-3 сайтов.

Урок 1. Основные понятия в веб-разработке
Как работает интернет, Что такое сайт, Что представляет собой веб-страница, Виды сайтов, Процесс разработки сайта, Что такое гипертекст, теги и атрибуты, Подготовка рабочего места, Простой пример HTML странички, Пример сложной веб-страницы, Горячие клавиши для перемещения по документам

Урок 2. Основы языка разметки документов HTML
Структура HTML документа, Основные теги оформления текста, Спецсимволы, Комментарии в HTML, Гиперссылки, Типы изображений для web, Загрузка изображений на страницу, Списки, Формы и их элементы. Создание таблиц, Объединение ячеек, Вложенные таблицы, Стилевое оформление таблиц

Урок 3. Основы языка оформления стилей документа CSS
Что такое CSS, Синтаксис CSS, Способы объявления CSS, Селекторы (id, class, tag), Селекторы атрибутов, Основные свойства стилей, Вложенность, наследование и группирование свойств, Приоритеты применения стилей, Псевдоклассы и псевдоэлементы

Урок 4. Верстка слоями (блочная верстка) - часть 1
Основные теги для верстки (div и span), Отступы элементов (margin и padding), Обтекаемые элементы, Позиционирование блоков, Создание структуры страницы с помощью блоков, Создание меню на основе блочной модели

Урок 5. Верстка слоями (блочная верстка) - часть 2
Создание основной разметки сайта, Применение overflow и clear в реальной вёрстке, Заполнение разметки частями макета, Приёмы позиционирования элементов, Использование модульной сетки в структуре макета, Резиновая и адаптивная верстка для мобильных устройств

Урок 6. Работа с макетом дизайна в формате PSD
Основные функции программы Photoshop, Выделение основных частей макета, Нарезка макета, Верстка макета сайта при помощи модульной сетки

Урок 7. Стандарты web и вспомогательные инструменты
Проблема «кроссбраузерности», Стандарты HTML/CSS, Валидация страниц, Будущее за стандартами HTML5 и CSS3, Грамотная, универсальная верстка, Файловая система проекта, Знакомство с фреймворком Twitter Bootstrap

Бонусы

Спойлер

Professija verstal'shhika - 2015.torrent

Кодер · 20 марта, 2018

Профессия-Верстальщик (2017)

Автор (режиссер): Сергей Белоусов
Жанр: HTML

Продолжительность: 02:01:09
Качество видео: PCRec

Описание:
Это модуль, где вы скачаете и установите весь необходимый для работы софт, поймете что такое верстка и изучите HTML разметку страницы. И уже начнете практиковаться верстая свой online дневник на чистом HTML. В результате этого модуля, вы будете владеть HTML, знать как строится базовая разметка страниц и уметь верстать самые простые сайты.

Примечание: Здесь только модуль по HTML

Спойлер

prof_verst.torrent

Кодер · 12 июля, 2019

Базовый и Продвинутый курс для верстальщиков [2019, RUS]

Год выпуска: 2019
Производитель: Типичный верстальщик
Сайт производителя: http://tpverstak.ru/training-profi/
Автор: Анна Блок
Продолжительность: 14:30:14
Тип раздаваемого материала: Видеоурок
Язык: Русский

Описание: В течении месяца на базовом курсе мы верстаем сайт, используя технологии HTML/CSS. Именно он и станет первой работой для Вашего портфолио! А Во время продвинутого - мы будем верстать сайт на практике при помощи Gulp и SCSS.

Программа базового курса

Стартовая лекция.
- Разбор основ программы Adobe Photoshop;
- Работа с изображениями;
Начало работы. Основы HTML
- Подготовка проекта к верстке;
- Структура html-документа (html, head, body) ;
- Обзор популярных тегов HTML;
- Обзор семантических тегов HTML.
Основы HTML
- Идентификаторы и классы;
- Aтрибуты для input и textarea;
- Отличия между button и a;
- Ссылки для социальных сетей;
- Работа с почтой и скайпом;
- Работа с git.
Подключение CSS, работа с текстом
- Подключение CSS к документу HTML;
- Структура CSS-файлов;
- Способы подключения шрифтов на страницу;
- Форматирование текста при помощи CSS;
- Стили для работы со шрифтами;
- Разные типы записи цвета в CSS документе;
Размещение объектов CSS
- Селекторы, которые стоит знать и применять;
- Типы позиционирования элементов;
- Установка favicon на страницу.
Стилизация элементов CSS
- Стилизация ссылок и кнопок;
- Работа со списками;
- Работа с after и before;
Виды сеток CSS
- Центрирование объектов в документе;
- Отступы padding и margin;
- Flexbox CSS;
- CSS Grid;
Фон и изображения CSS
- Цвет фона;
- Загрузка изображения через CSS;
- Повтор изображения;
- Создание градиента в CSS;
- Фильтры в CSS.
Рамки и обводки CSS
- Создание рамок CSS;
- Создание радиусов CSS;
- Создание теней;
- Создание внешних рамок CSS;
Оживляем сайт с CSS
- Переходы в CSS;
- Трансформации в CSS;
- Создание анимаций при помощи CSS3
Адаптивность CSS
- Проверка HTML и CSS на валидность;
- Медиа-запросы;
- Основные правила создания адаптивного сайта;
- Отличия резиновой верстки от адаптивной.
Векторные изображения
- Сохранение SVG-изображений в Illustrator;
- Создание SVG через теги;
- Base64;
- Cоздание паттернов SVG.
Верстка email-писем
- Правилам верстки email;
- Создание на примере;
- Сервисы, для выгрузки своего шаблона;
- Кроссбраузерная верстка.
Основы jQuery
- Библиотеки JavaScript;
- Добавление библиотеки jQuery на страницу;
- Основные селекторы;
- Фильтры jQuery;
- Отобразить и спрятать объект с jQuery.
Основы jQuery
- Обзор плагина jQuery UI;
- События наведения и смещения указателя мыши;
- Распространенные задачи, решаемые с помощью jQuery.
Популярные плагины для работы
- Слайдеры;
- Галерея изображений.
CSS-препроцессоры
- Подробный обзор SASS;
- Краткий обзор LESS;
- Краткий обзор Stylus;
- Какой препроцессор выбрать для работы?
Создание сайта на бесплатном хостинге Github
- Краткое описание систем контроля версий. Для чего они нужны?
- Регистрация на сайте Github;
- Создание репозитория;
- Наполнение репозитория файлами.
CSS-фреймворки
- Что такое CSS-фреймворки?
- Какие CSS-фреймворки существуют на сегодняшний день?
- Bootstrap: какую версию выбрать?
- Обзор элементов Bootstrap.
Про работу и заказчиков
- Как найти свой первый заказ или устроиться на работу, если ты новичок;
- Выясним, что лучше подойдет именно тебе: офис, удаленная работа или фриланс;
- Самоорганизация и работа в команде: рассмотрим популярные сайты и приложения по управлению проектами;
- Список актуальных фриланс-бирж.

Hide

Программа продвинутого курса

Работа с макетом
Детальный обзор учебного макета
Работа с изображениями (PNG и SVG);
Разметка сайта
Методология БЭМ
Создание разметки сайта HTML5
Работа с Git для публикации кода
Настройка окружения и сборщики проектов
Установка Node.js;
Обзор сборщиков (Gulp, Grunt);
Установка Gulp 4 для проекта.
CSS препроцессоры
Обзор CSS-препроцессоров (SASS, Less, Stylus);
Программы компиляции и плагин VS Code;
Использование на практике SCSS.
Система контроля версий (Git)
Основы Git;
Работы с Git;
Создание Git репозитория;
Ветвления Git.
Canvas, работа с SVG
Основы Canvas
Обзор основных параметров
Основы SVG
Самостоятельное построение SVG изображение без посторонних программ
Оптимизация SVG-изображений из графических программ
Flexbox и Grid CSS
Основы Flexbox
Основы Grid CSS
Что уместнее использовать в 2019 году?
Анимации и переходы для оживления сайта
Основы использования @keyframes
Создание плавных переходов
Работа с SVG
Интерактивные карты Google и Yandex
Как установить интерактивную карту на сайт?
Какую карту выбрать?
Стилизация карт
Работа с API карт
Счетчики аналитики, sitemap
Что такое счетчики аналитики и зачем они нужны?
Методы установки счетчиков
Настройка счетчиков
Что такое Sitemap?
Генерация файла Sitemap
Основы PHP и mySQL
Основы PHP
Основы mySQL
Форма отправки
Валидация форм
Оптимизация работы сайта
Валидация файлов HTML и CSS
Определение скорости загрузки сайта
Исправление ошибок
Оптимизация изображений и кода
Оплата на сайт
Как установить оплату на сайте?
Автоматическая генерация кнопок для оплаты
Список сайтов, предоставляющие услуги онлайн-касс
WordPress
Что такое Wordpress и кому подходит?
Структура файлов
Создание собственного шаблона
Обзор полезных плагинов
Основы JavaScript
Основные термины и синтаксис
Что такое console.log
Как работать с консолью
Переменные и значения
Основы JavaScript
Массивы
Циклы
Условные операторы
Операторы сравнения
Логические операторы
jQuery, jQuery UI и дополнительные плагины
Основы jQuery
Работа с плагином jQuery UI
Для чего стоит использовать jQuery?
Создание слайдера для сайта на практике.
Адаптивность
Что такое @media
Создание media запросов
Что такое Mobile First верстка?
Выбор площадки для работы
Офис: плюсы и минусы
Удаленная работа: плюсы и минусы
Фриланс: плюсы и минусы
Обзор площадок
Откуда стоит начать свой поиск заказчиков?
Поиск работы
Обзор крупнейшей площадки по поиску работы;
Обзор региональных площадок;
Linkedn: как оформить свой профиль, чтобы HR сами находили вас.