Frontend-разработкa, HTML 5 и CSS 3

Объем курса - 34 часа.

Сегодня, когда компьютеры и Интернет проникли во все сферы жизни человека, практически каждой фирме, независимо от размера, сферы деятельности, местоположения необходимо свое представительство в Интернет - Веб сайт. В связи с этим все большей популярностью пользуются профессии: веб – дизайнер, верстальщик HTML. Эти специальности позволяют работать не только в офисе, но и дома, на собственном компьютере в удобном для себя режиме. Такие профессии может выбрать любой человек, независимо от возраста, образования, пола и опыта работы. Ну, а знания для таких специальностей, можно получить у нас в учебном центре!

Курс «HTML5/CSS3» ориентирован на углубленное профессиональное изучение HTML, CSS и создаст прочную основу для последующего изучения Веб- программирования (PHP, JavaScript). Также, в курсе рассматриваются такие понятия как валидность кода, кроссбраузерность, обзорно поисковая оптимизация и продвижение сайта в поисковых системах.

По окончании обучения у вас будет достаточно знаний, чтобы создавать простые сайты типа визиток, наполнять существующие интернет-проекты.

Подробнее на сайте Учебного центра Бейсик

В течении обучения вы научитесь:
создавать макеты сайтов с «нуля » с привлекательной, понятной и удобной структурой для посетителя (Юзабилити) верстать сайт, используя HTML / CSS, размещать на сайте ссылки, таблицы, формы, графические элементы: кнопки, баннеры, флеш – элементы подключать к сайту элементы библиотек JQuery рассмотрите возможности HTML5.0 / CSS3.0 узнаете, что такое дивовая верстка, фиксированный \ резиновый сайт, кроссбраузерность и валидность кода; регистрировать и продвигать сайт в сети Интернет (обзорно)

Практические занятия:

Для закрепления пройденного материала на каждом уроке слушатели выполняют практические задания. Задаются домашние задания. Методический материал выдается в электронном виде.

Курс предназначен:
для тех, кто хочет научиться создавать сайты, чтобы в последствии работать HTML-верстальщиком, Web - дизайнером; для специалистов по Internet-рекламе и продвижению сайтов в сети; для владельцев собственного бизнеса, которые хотят представлять свои услуги и товары в сети интернет; Также этот курс является базовым для дальнейшего обучения на курсах по Web-программированию.

Требования к слушателям: Для успешного усвоения материала курса, слушателям необходимы навыки работы в MS Windows, опыт работы в Интернет.

По окончании курса: По окончании курса каждый слушатель проходит тестирование на сайте http://www.basic.com.ua/tests.php и получает авторский сертификат Учебного центра Бейсик.

Информация о тренере

Профессиональный опыт:

C 2006– по сегодняшний день веб-программист. За время своей профессиональной деятельности, принимал участие во многих успешных проектах. Ключевые области знаний: HTML, СSS, PHP, JavaScript, Adobe Flash, Action Script, Codeigniter, MVC, MySQL, PostgreSQL. Преподавательский опыт: 5 лет – тренер в УЦ Бейсик. Читает курсы «HTML, CSS» , «Программирование на JavaScript», «Веб -Программирование PHP - Уровень 1», «PHPpro». Имеет успешный опыт проведения курсов Web - программирования онлайн. Объясняет простым и доступным языком на реальных примерах из жизни.

Курс HTML 5, CSS 3 можно пройти также через систему on-line обучения. Стоимость on-line курса в группе от 3- х человек будет на 30% меньше. Чтобы понять, как будет проходить он-лайн обучение, первое занятие Вы можете пройти бесплатно!!!

Первый онлайн-урок по курсу «HTML 5/CSS 3»

Программа курса

Тема №1. Введение в курс

• Этапы разработки сайта.
• Инструменты необходимые для вёрстки сайта: редакторы кода, инспекторы, полезные веб-ресурсы.
• Средства для просмотра веб-страниц. Виды браузеров. Горячие клавиши.

Тема №2. Введение в HTM

• Что такое HTML. Теги.
• Структура HTML документа. Теги Doctype , html, head, body.
• Порядок использования тегов.
• Теги strong, br, em,p.
• Создание заголовков h1-h6
• Вставка спецсимволов.
• Стандарты w3.org, html- валидатор.

Тема №3. Вставка графических элементов на страницу.

• Типы и размер изображений для web.
• Основные параметры тега img. (src, alt, width, height)

Тема №4 . Создание ссылок

• Создание текстовых ссылок.
• Создание графических ссылок.
• Создание якорей.
• Путь к файлу: относительный и абсолютный.Структура вложенностей — дерево. Слинковка html страниц.

Тема №5. Упорядочение данных с помощью списков. Создание нумерованного и маркированного списков.

Тема №6. Представление данных в табличном виде

• Для чего используют таблицы сегодня.
• Верстка элементарной таблицы. Основные параметры для создания таблицы, объединение ячеек таблицы colspan, rowspan. Размеры таблицы.
• Форматирование таблиц: цвет и границы.

Тема №7. Формы и их элементы

• Для чего нужны формы.
• Основные элементы форм и их типы.

Тема №8. Каскадные таблицы стилей

• Понятия каскадности и наследования.
• Подключение CSS файла.
• Использование “рыбы” для html и css.
• Использование style в документе. Сброс стилей.
• Селекторы CSS. Приоритет селекторов. Применение атрибутов class, id.
• Форматирование текста.

Тема №9. Фоновые изображения. Блоки.

• Цвет и изображение в качестве фона. Применение фона на разных элементах.
• Границы элементов.
• Блочные и строчные элементы. Свойство display. Центрирование блока по горизонтали.
• Использование внутренних и внешних отступов.

Тема №10. Стилизация списков и блоков

• Расположение блоков на странице с помощью float.
• Расположение блоков с помощью table.
• Варианты и применение списков.
• Псевдоэлементы.
• Использование CSS3. Проблемы с кроссбраузерностью.

Тема № 11. Технология flexbox

• Подключение flex
• Понятия flex-контейнера, flex-элементов, главной и поперечной оси
• Выравнивание flex-элементов
• Создание структуры документа с помощью flex

Тема № 12. Многоуровневое навигационное меню. Вертикальное и горизонтальное меню

Тема №13. Абсолютное и относительное позиционирование.

Тема №14. Шрифты. Подключение кастомных шрифтов, различия шрифтов в разных ОС.

Тема №15. Использование javascript на странице

• Использование jQuery плагинов. Общий принцип подключения интеграции скриптов.
• Кастомизация элементов форм с момощью javascript и CSS3. Отличия.
• Подключение javascript-галереи

Тема №16. Разработка мобильного меню
Тема №17. Подключение слайдера
Тема №18. Порядок вёрстки веб-страницы

• Что такое макет и для чего он необходим.
• Стандарты PixelPerfect. Варианты проверки на соответствие с макетом.
• Фиксированный и резиновый макет. Полурезина.
• Стандартное расположение блоков на странице. Вложенность блоков.

Тема №19. Порядок нарезки макета

• Работа со слоями в Photoshop.
• Визуальное разбитие страницы на основные и второстепенные элементы. Стандартное наименование блоков.
• Нарезка макета на примере.

Тема №20. Фреймы и внедрение внешних данных на страницу. Подключение google карты.

Тема №21. Адаптация страницы под различные экраны. Фреймворки

• Адаптирование страницы под различные устройства при помощи медиа-запросов.
• Для чего применяются CSS-фреймворки и их использование для адаптации страницы под различные устройства. Требования к макетам. Обзор CSS-фреймворков. Bootstrap. Особенности отображения элементов и поведения для Android/iOS .

Тема № 22. Портфолио

• Для чего необходимо портфолио.
• Как создать портфолио.

Тема № 23. Дополнительные темы.

• Создание и подключение фавиконки сайта.
• Что такое SEO и почему это важно. (обзорно).
• Как разместить сайт в сети интернет. Хостинг, домены.

Тестирование

Подробная программа курса - http://www.basic.com.ua/course.php?course=159

Фрагменты онлайн-уроков по курсу HTML5/CSS3
https://www.youtube.com/watch?v=82csI-SCPBI
https://www.youtube.com/watch?v=3fFDFFi6Bdk

Онлайн-обучение предлагает вам ряд преимуществ:
первое занятие - бесплатно; стоимость обучения в группе в режиме online на 30% меньше; обучение проходит в режиме онлайн в реальном времени c преподавателем (это так же просто, как если бы Вы физически присутствовали в аудитории); Вы можете голосом в любой момент задать вопрос, и преподаватель сразу же голосом на него отвечает. мини-группы - до 5 чел. непривязанность к месту.

Перечень курсов учебного центра Бейсик

• MS Excel 2010/2013 - Эксперт. Для профессионального использования. Уровень 1.
• MS Excel 2010/2013 - Расширенные возможности. Уровень 2.
• HTML 5 и CSS 3
• Современная разработка на JavaScript
• Основы программирования VBA для Excel. Уровень - 1.
• Программирование на VBA. Уровень - 2
• SolidWorks - основы проектирования. Уровень - 1
• Solidworks – Расширенные возможности. Уровень - 2
• Администрирование Linux (Ubuntu)
• Основы программирования на Objective – C. Уровень 1
• Разработка приложений для iPhone/iPad(iOS) на Objective-C. Уровень - 2
• Программирование в 1С:Предприятие 8.2 – 8.3 - Уровень 1
• Программирование в 1С:Предприятие 8.2 – 8.3 - Уровень 2
• Эффективное продвижение бизнеса в социальных сетях. SMM
• Поисковая оптимизация SEO, продвижение сайта в сети Интернет
• Эффективное продвижение бизнеса в Facebook