СДО ИДО
  • FRNT-HTML. Верстка сайтов (HTML+CSS)
    0%
  • Previous
  • Course data
    General
    Visual Studio Code (Win, Mac, Linux)
    Atom (Win, Mac, Linux)
    Sublime Text (Win, Mac, Linux)
    Brackets (Win, Mac)
    Notepad++ (Win)
    Webref.ru
    MDN
    Тема 1. Язык разметки HTML. Теги. Структура документа.
    Лекция 1. Презентация
    Вспомогательные слайды по Лекции 1
    Современная классификация тегов
    Классификация тегов
    Сервис просмотра http-заголовков
    Сервис проверки кода на соответствие веб-стандартам
    Сервис экранной типографики
    Emmet - шпаргалка
    https://emmet.io/
    Перечень сайтов с бесплатными стоковыми видео и фото
    Бесплатные стоковые изображения
    Официальная спецификация HTML
    Can I Use
    Введение
    1. Как работает сайт. Клиент-серверная архитектура
    2. Язык разметки HTML
    3. Разметка текстового содержания
    4. Разметка текстовых блоков
    5.Встраивание изображений
    Практическое задание по Лекции 1
    Дополнительное задание. Таблицы
    Отцы-основатели Интернета
    Тема 2. Разметка веб-страницы. Ссылки. Символьные сущности. Таблицы. Создание форм.
    Символьные сущности
    Работа с colgroup
    Классификация тегов
    Виды input
    1. Символьные сущности
    2. Таблицы
    3. Пример простейшей формы.
    4. Формы. Теги и атрибуты.
    Формы
    Оформление списков
    Оформление таблиц
    Список - меню (доп. задание)
    Тема 3. Каскадные таблицы стилей CSS
    1. Лекция 3. Презентация
    CSS Классификация
    Интерактивная шпаргалка по свойствам CSS
    Специфичность - памятка
    Специфичность - Звездные войны
    W3C Спецификация - Специфичность CSS
    Специфичность CSS Tricks
    Расчет специфичности
    Вертикальные отступы
    CSS box-model - боксовая (блочная) модель элемента
    Стартовый файл для лекции
    1. Введение в CSS
    2. Виды селекторов
    Тема 4. Основные свойства CSS. Создание макетов верстки..
    Классификация свойств CSS
    Селекторы
    Краткое описание свойств
    CSS Reference
    Пример кода - Единицы измерения
    Исходный код галереи
    Галерея Float
    Колонки float
    Пример overflow
    Интерактивная демонстрация
    Галереи
    OZON
    Simpsons
    Overflow
    Mega-menu
    Вёрстка страницы
    Тема 5. Возможности CSS
    Шрифт для работы
    dumbbell.svg
    sprites.zip
    Бесплатные стоки Unsplash
    land.jpeg
    Пример из видео
    CSS Transition
    Шпаргалка функций плавности easing functions
    Can I Use
    Просмотр функций плавности
    Как применять стили к объекту анимации до и после её выполнения
    Шрифт - bankir
    FontAwesome
    Карточки-позиционирование
    Двухколоночный макет с фиксированной сеткой (доп.)
    Карточка Alien
    Тема 6. Отзывчивый веб-дизайн
    Пример из видео
    Размеры устройств 2021
    Команда
    Device
    Aperture
    Адаптивная форма
    Презентация
    Шпаргалка по flexbox CSS TRICKS
    CSS GRID
    Интерактивная демонстрация Flexbox
    text
    Grid car (доп. задание)
    Гайд по CSS переменным
    Экзамен
    Airplane
    Верстка и стили
  • Next
СДО ИДО
  • English ‎(en)‎
    Русский ‎(ru)‎ English ‎(en)‎
    • Log in
    FRNT-HTML. Верстка сайтов (HTML+CSS)
    Home
    Skip to main content

    Course info

    1. Home
    2. Courses
    3. Высшая инженерная школа
    4. Курсы повышения квалификации
    5. Веб-программирование
    6. FRNT-HTML. Верстка сайтов (HTML+CSS)
    7. Summary

    FRNT-HTML. Верстка сайтов (HTML+CSS)

    • Преподаватель: Лаабе Дмитрий
    • Преподаватель: Синицына Мария Андреевна

    Портал дистанционных образовательных технологий СПБПУ Петра Великого
    Политика конфиденциальности
    Политика обработки cookie
    При использовании материалов портала активная ссылка на источник обязательна

    Санкт-Петербургский политехнический университет

    Контакты:

    195251, Санкт-Петербург, ул. Политехническая, дом 29, Научно-исследовательский корпус

    +7 (812) 906-15-19

    office.ido@spbstu.ru

    Мы в социальных ресурсах

    Мы используем cookies и рекомендательные технологии для улучшения работы сайта. Продолжая использовать этот сайт, Вы соглашаетесь на использование файлов cookie.