Курсы HTML 5 CSS в Киеве ᐈ Курс верстки для начинающих с нуля ᐈ CyberBionic Systematics

Описание курса
HTML5, CSS3 для начинающих

Курс HTML5&CSS3 Стартовый состоит из 10 логически взаимосвязанных уроков, на которых учащиеся применяют на практике теоретические знания технологий HTML5&CSS3 для создания простых элементов веб страницы.
Курс рассматривает базовые основы, которые необходимы для работы с внешним интерфейсом любого сайта: создание структуры сайта, использование семантических тегов, указание путей для файлов, варианты работы с размерами элементов, внутренние и внешние отступы, границы элементов, форматирование текста, отображение изображений/картинок, размещение блоков в нужном количестве и порядке, правила вложенности для таблиц и списков, палитрой цветов. Тем самым разобрав студен будет способен реализовать: меню сайта, блок социальных сетей, карточки товара и подобные информационные блоки, пагинацию, не сложные одно страничные сайты.

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

1

Введение в HTML. Типы элементов и атрибуты

В начале курса будет рассмотрено что такое html, для чего он нужен и как пишутся его элементы. Вы узнаете о тегах, форматировании в html, о редакторе в котором пишется код первоначальной разметке, с которой построена любая веб страница и для чего используются комментарии в коде. Как добавить на страницу картинки, а также различные переходы по ссылкам. Узнает первые типы элементов и их разницу с возможными ошибками при написании кода.
2

Введение в CSS и определение размеров блоков

На занятии будет рассмотрено способы подключения стилей на страницу, виды селекторов с помощью которых можно привязать стили указным элементам страницы. И по каким принципам определяется приоритетность записей в CSS. В данном уроке студент рассмотрит базовое поведение элементов при формировании им размеров. В каких случаях возможно, что контент будет выпадать из элемента и портить внешний вид страницы.
3

Работа с отступами, свойство margin и работа с текстом и видимостью элементов

Студент познакомится с механикой работы внешних отступов у элементов. Узнает, что такое проваливание(схлопывание) и в каких случаях оно присутствует. Просмотрим не явные отступы при работе с строчно-блочными элементами. Познакомится с различными правилами CSS для стилизации текста и как работает наследование стилей для элементов потомков. Как возможно скрывать элементы разметки на странице и в чем разница между разными способами.
4

Верстка с использованием Flexbox

Целью занятия является разобрать основные принципы работы модуля Flexbox и научить их использовать. Возможность задавать гибкое расстояние между блоками и как определяются их размеры в некоторых случаях. Поведение внешних отступов при использовании flexbox.
5

Комбинирование селекторов и работа с фоном, свойство background

Комбинирование очень важная часть при написании кода что рассмотрено в структуре списков и таблиц, поскольку большие вложенности необходимо создавать и разбирать постоянно на этапе работы с проектом. Возможности обращений к элементам по псевдоклассам и работу приоритета в таких структуре. На занятии будет разобраны основные способы записи палитры цветов в свойствах, где указывается окрас. В чем разница установки прозрачности элемента через opacity и rgba(). Случаи добавления картинок через CSS и размещение многого количества их на одном элементе.

6

Семантическая верстка

Студент узнает новые семантические теги, которые появились с HTML версии 5 и правила их использования. Рассмотрены структуры простых сайтов с использованием семантических тегов.
7

Формы

Целью данного урока является знакомство с формами и их назначением. Рассмотрение элементов форм, их возможностей и нюансами работы как у функционала, так и со стилизацией.
8

Позиционирование элементов

Целью данного урока является знакомство с форматированием элементов страницы, задания им позиционирования через свойство position. Так же будет рассмотрены псевдоелементы и возможность реализовывать простую анимацию для элементов.
9

Практика

Целью данного урока является закрепление пройденного теоретического материала
10

Практика

Целью данного урока является закрепление знаний на практике верстая макет.