- 29, Mar 2023
- #1
Название:Курс по обучению HTML5 CSS3 верстке сайтов с нуля до профи за 4 недели
Автор:Юрий Ключевский
Обучение ВЕРСТКЕ САЙТОВ HTML5 + CSS3 основы создания сайтов за 4 недели
Никаких скучных теорий
только необходимые
практические навыки
и стажировка
Программа курса
7 уроков за 21 день
Как работает интернет. Что такое сайт. Что представляет собой веб-страница. Виды сайтов. Процесс разработки сайта. Что такое гипертекст. Теги и атрибуты. Подготовка рабочего места. Простой пример HTML странички. Пример сложной веб-страницы. Горячие клавиши для перемещения по документам.
Практика
Структура HTML документа. Основные теги оформления текста. Спецсимволы. Комментарии в HTML. Гиперссылки. Типы изображений для web. Загрузка изображений на страницу. Списки. Формы и их элементы. Создание таблиц. Объединение ячеек. Вложенные таблицы. Стилевое оформление таблиц.
Практика
Что такое CSS. Синтаксис CSS. Способы объявления CSS. Селекторы (id, class, tag). Селекторы атрибутов. Основные свойства стилей. Вложенность. наследование и группирование свойств. Приоритеты применения стилей. Псевдоклассы и псевдоэлементы
Практика
Основные теги для верстки (div и span). Отступы элементов (margin и padding). Обтекаемые элементы. Позиционирование блоков. Создание структуры страницы с помощью блоков. Создание меню на основе блочной модели.
Практика
Создание основной разметки сайта. Применение overflow и clear в реальной вёрстке. Заполнение разметки частями макета. Приёмы позиционирования элементов. Использование модульной сетки в структуре макета. Резиновая и адаптивная верстка для мобильных устройств.
Практика
Основные функции программы Photoshop. Выделение основных частей макета. Нарезка макета. Верстка макета сайта при помощи модульной сетки.
Практика
Проблема «кроссбраузерности». Стандарты HTML/CSS. Валидация страниц. Будущее за стандартами HTML5 и CSS3. Грамотная, универсальная верстка. Файловая система проекта. Знакомство с фреймворком Bootstrap.
Практика
Описание далееБонусные материалы 4 дополнительных урока Способы ведения проекта и взаимодействие верстальщика с командой. Как подходить к поиску работы. Подготовка портфолио и составление резюме. Знакомимся с работой на фриланс биржах. Практика
Углубляемся в CSS. Селекторы атрибутов, псевдоселекторы. Возможности и спецэффекты CSS3: Переходы и анимация. Трансформация объектов. Тени. Градиенты. Практика
Знакомимся с HTML5 тегами для семантической разметки страницы. Внедряем инструменты для ускорения верстки. Оптимизируем рабочий процесс так чтобы максимально ускорить процесс верстки. Препроцессор LESS. Плагины. Ускорение вашей работы до 50%. Практика
Создание спрайтов изображений, подключение веб- шрифтов. Шрифтовые иконки. Использование модальных окон. Практика
Знакомимся с динамическими элементами: Слайдер, Вкладки, Лайтбокс, Галерея изображений. Практика
Этапы разработки проектов. Ведение, сдача, и поддержка проектов. Подготовка к собеседованию. Стратегия работы на фрилансе. Практика
Ваше резюме после обучения Так может выглядеть ваше резюме после обучения и стажировки. Должность: HTML верстальщик Ключевые навыки:
Результат в конце обучения короткая выжимка о курсе Прохождение курса
ПРИОБРЕТЕННЫЕ НАВЫКИ
ТЕХНОЛОГИИ
Никаких скучных теорий
только необходимые
практические навыки
и стажировка
Программа курса
7 уроков за 21 день
Как работает интернет. Что такое сайт. Что представляет собой веб-страница. Виды сайтов. Процесс разработки сайта. Что такое гипертекст. Теги и атрибуты. Подготовка рабочего места. Простой пример HTML странички. Пример сложной веб-страницы. Горячие клавиши для перемещения по документам.
Практика
- Настройка рабочей среды.
Структура HTML документа. Основные теги оформления текста. Спецсимволы. Комментарии в HTML. Гиперссылки. Типы изображений для web. Загрузка изображений на страницу. Списки. Формы и их элементы. Создание таблиц. Объединение ячеек. Вложенные таблицы. Стилевое оформление таблиц.
Практика
- Создаем первую HTML страницу.
- Наполняем ее информацией.
Что такое CSS. Синтаксис CSS. Способы объявления CSS. Селекторы (id, class, tag). Селекторы атрибутов. Основные свойства стилей. Вложенность. наследование и группирование свойств. Приоритеты применения стилей. Псевдоклассы и псевдоэлементы
Практика
- Подключаем стили к странице.
- Оформляем страницу с помощью CSS.
Основные теги для верстки (div и span). Отступы элементов (margin и padding). Обтекаемые элементы. Позиционирование блоков. Создание структуры страницы с помощью блоков. Создание меню на основе блочной модели.
Практика
- Верстаем макет с помощью блоков.
- Учимся делать структуру страницы.
Создание основной разметки сайта. Применение overflow и clear в реальной вёрстке. Заполнение разметки частями макета. Приёмы позиционирования элементов. Использование модульной сетки в структуре макета. Резиновая и адаптивная верстка для мобильных устройств.
Практика
- Осваиваем блоки, позиционирование, обтекание.
- Используем сетку для верстки страницы.
Основные функции программы Photoshop. Выделение основных частей макета. Нарезка макета. Верстка макета сайта при помощи модульной сетки.
Практика
- Работаем в Photoshop.
- Экспортируем графику для верстки.
Проблема «кроссбраузерности». Стандарты HTML/CSS. Валидация страниц. Будущее за стандартами HTML5 и CSS3. Грамотная, универсальная верстка. Файловая система проекта. Знакомство с фреймворком Bootstrap.
Практика
- Тестируем верстку.
- Верстаем страницу с Bootstrap фреймворком.
Описание далееБонусные материалы 4 дополнительных урока Способы ведения проекта и взаимодействие верстальщика с командой. Как подходить к поиску работы. Подготовка портфолио и составление резюме. Знакомимся с работой на фриланс биржах. Практика
- Оформляем структуру проекта.
- Делаем портфолио и составляем резюме.
Углубляемся в CSS. Селекторы атрибутов, псевдоселекторы. Возможности и спецэффекты CSS3: Переходы и анимация. Трансформация объектов. Тени. Градиенты. Практика
- Добавляем анимацию к странице.
- Делаем трансфорацию элементов.
Знакомимся с HTML5 тегами для семантической разметки страницы. Внедряем инструменты для ускорения верстки. Оптимизируем рабочий процесс так чтобы максимально ускорить процесс верстки. Препроцессор LESS. Плагины. Ускорение вашей работы до 50%. Практика
- Внедряем инструменты для ускорения работы.
- Оптимизируем семантику страницы.
Создание спрайтов изображений, подключение веб- шрифтов. Шрифтовые иконки. Использование модальных окон. Практика
- Подключаем шрифты. Создаем спрайты.
- Подключаем модальные окна.
Знакомимся с динамическими элементами: Слайдер, Вкладки, Лайтбокс, Галерея изображений. Практика
- Создаем галерею изображений. Делаем сортировку.
- Подключаем и оформляем слайдер.
Этапы разработки проектов. Ведение, сдача, и поддержка проектов. Подготовка к собеседованию. Стратегия работы на фрилансе. Практика
- Учимся оформлять портфолио.
- Готовимся к собеседованию.
Ваше резюме после обучения Так может выглядеть ваше резюме после обучения и стажировки. Должность: HTML верстальщик Ключевые навыки:
- Свободное владение HTML и CSS, а также знания JavaScript
- HTML5 и CSS3
- Кроссбраузерная верстка
- Оптимизация под мобильные устройства
- Опыт адаптивной вёрстки
- Умение разбираться в чужом коде
- Понимание основ юзабилити
Результат в конце обучения короткая выжимка о курсе Прохождение курса
- Месяц обучения и практической работы по курсу и бонусным материалам
- Верстка современных адаптивных сайтов во время обучения
- Выполнение домашних заданий с контролем, проверкой и индивидуальной обратной связью от преподавателя
- Видеозаписи всех занятий
- Презентации и методические пособия
- Обучающие видео
- Группа для общения с преподавателем и коллегами
ПРИОБРЕТЕННЫЕ НАВЫКИ
- Практический опыт верстки современных веб-сайтов
- Навыки работы над реальными проектами
- Семантическая верстка
- Верстка сайтов для мобильных устройств (адаптивная и отзывчивая верстка)
- Использование современных HTML/CSS фреймворков, JS плагинов и библиотек
ТЕХНОЛОГИИ
- HTML5 разметка
- CSS3 таблицы стилей
- Блочная модель верстки
- Работа с сетками
- LESS препроцессор для CSS
- Адаптивная верстка макета
- Bootstrap фреймворк (ex. Twitter Bootstrap)
- Agile методология разработки
- Работа с Sublime Text и Brackets
- Работа с Photoshop с PSD макетом
- Подключение и настройка jquery плагинов: карусель, лайтбокс, сортировка, модальные окна
Скрытая информация :: Авторизуйтесь для просмотра »Скачать:
Скрытая информация :: Авторизуйтесь для просмотра »
Скрытая информация :: Авторизуйтесь для просмотра »** Скрытый текст могут просматривать только пользователи следующих групп: admin, Модератор.**
Пароль: 0DTpNRZUhMIr5