Bazaprogram.ru

Новости из мира ПК
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Задания по css

Практика CSS онлайн?

Подскажите хороший ресурс, на котором даются задания по CSS где нужно в «вэб IDE» выполнить задачу и нажать на кнопку «Проверить», чтобы попрактиковать навыки.

p.s. как html academy и w3schools

  • Вопрос задан более года назад
  • 2265 просмотров

Pavel Karinin, т.е. вы предлагаете готовый скачать шаблон и не глядя в код верстать его, и смотреть в код если чтото не получается?

p.s. по большей части интересует тренажёр с самыми типовыми задачами на CSS а не реальные рабочие условия, которые сложнее, во много раз сложнее.

а не реальные рабочие условия, которые сложнее, во много раз сложнее

чем ближе к реальности, тем больше «закалка» и быстрее научитесь

невозможно научиться водить машиной, если первый раз в жизни её видишь после лошади, и не знаешь про существование педалей, коробки передач, ручника который надо снять перед движением

ведь технологии на месте не стоят

Вы наверное про CSS4, что там нового будет? )

Ostin1, нет я не только про CSS4, ведь кроме типичных css и html (если мы про front) многое чего используется, а в back и подавно.

Почитайте например HTML & CSS: Design and Build Web Sites

о есть, вы считаете, что прочитать книгу 2011 года по HTML&CSS, в которой используется устаревший уже в HTML4.01 атрибут align=». «, в которой за всю книгу перечислено 68 CSS свойств

Вёрстка это не про чтение, это про практику. Прочитали раздел по таблицам, нашли в гугле картинку со сложной таблицей и сидите верстаете ее 3 часа. Прошли раздел по списками, нашли в гугле картинку с десятиуровневым списком и сидите верстаете его 3 часа. Прошли главу по формам, нашли в гугле картинку с формой-опросником и сидите верстаете ее 3 часа. Вот при такой практике у вас будет откладываться в голове все что нужно. При простом чтении — нет.

Знать о них нужно на случай если придется работать с проектом где они есть, но не более.

к сожалению «и более», не просто знать о них, но и уметь их использовать, поэтому позвольте с вами не согласиться в этой части.

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

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

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

никого не хочу обидеть, но в 60% случаев новички используют ctrl+c и ctrl+v и даже не вникают в показанные им ответы, проходит время они забывают о том, как сделать этот скошенный угол в CSS и все повторяется. знаете почему? — потому что все ищут легкой жизни (наверное это правильно искать такую жизнь), но я о другом, я о том, что полное отсутствие фундаментальных навыков зачастую приводит новичков сюда с такими вопросами, в том числе тех навыков, которые на ваш взгляд кажутся устаревшими. Но доля истины в ваших словах, безусловно, есть.

Читать еще:  Выравнивание текста по ширине css

UPD: Свежий пример и еще один, если не удалят с формулировкой «Ответ легко ищется в интернете»

Практика

Здесь приведены задачи по HTML и CSS, которые выполняются прямо в браузере, с автоматической проверкой результатов.

Аудио и видео

  • Добавление аудио
  • Автовоспроизведение аудио
  • Зацикливание аудио
  • Элемент
  • Добавление видео
  • Размеры видеоплеера
  • Автовоспроизведение видео
  • Зацикливание видео
  • Обложка видео

Изображения

  • Абсолютный адрес
  • Относительный адрес
  • Альтернативный текст
  • Размеры картинки
  • Ширина картинок
  • Подпись под картинкой
  • Элемент
  • Подпись перед картинкой
  • Картинки друг под другом
  • Ширина картинки
  • Плавающая ширина картинки
  • Круглое изображение
  • Выравнивание картинки
  • Рамка вокруг картинок

Многоколоночная вёрстка

  • Две колонки
  • Три колонки
  • Заголовок в колонках
  • Ширина колонок
  • Расстояние между колонок
  • Линия между колонок
  • Пунктир между колонок
  • Блоки в колонках
  • Изображения в колонках
  • Запрет переноса в колонках

Основы CSS

  • Подключение CSS-файла
  • Ошибка в
  • Добавление стиля
  • Атрибут style
  • Импорт шрифта
  • Комментарии в CSS
  • Селектор элемента
  • Класс
  • Добавление класса
  • Идентификатор
  • Добавление идентификатора
  • Селектор атрибута

Переходы и анимация

  • Плавное изменение цвета
  • Масштабирование кнопки
  • Поворот на 360° при наведении
  • Сдвиг при наведении
  • Масштабирование картинки при наведении
  • Масштабирование картинки при наведении 2
  • Прозрачность при наведении
  • Мигающий текст
  • Сердце

Разделы веб-страницы

  • Шапка веб-страницы
  • Подвал веб-страницы
  • Элемент
  • Копирайт
  • Элемент
  • Шапка раздела
  • Навигация
  • Элемент
  • Создание статьи
  • Дата публикации
  • Комментарии

Списки

  • Маркированный список
  • Нумерованный список
  • Римские числа
  • Буквенная нумерация
  • Обратный список
  • Список с 11
  • Список описаний
  • Атрибут value
  • Вложенный список
  • Квадратные маркеры
  • Прячем маркеры
  • Символ в качестве маркера
  • Рисунок в качестве маркера
  • Горизонтальный список
  • Римская нумерация
  • Греческая нумерация
  • Расстояние от маркера до текста
  • Цвет списка
  • Цвет маркеров
  • Отступы в списке

Ссылки

  • Создание ссылки
  • Ссылка на Google
  • Ссылка для скачивания
  • Атрибут target
  • Ссылка на email
  • Ссылка на телефон
  • Создание якоря
  • Ссылка на якорь
  • Картинка как ссылка
  • Убираем подчёркивание
  • Цвет ссылок
  • Цвет фона у ссылок
  • Активная ссылка
  • Посещённая ссылка
  • Стиль ссылки при наведении
  • Ссылки без подчёркивания
  • Пунктирное подчёркивание ссылок
  • Двойное подчёркивание ссылок
  • Рамка вокруг ссылки
Читать еще:  Delphi datetime format

Таблицы

  • Создание таблицы
  • Строки таблицы
  • Заголовок таблицы
  • Таблица 2х2
  • Картинки в таблице
  • Объединение колонок
  • Объединение строк
  • Ячейка заголовка
  • Тело таблицы
  • Подвал таблицы
  • Ширина таблицы
  • Выравнивание заголовка таблицы
  • Выравнивание таблицы
  • Цвет фона таблицы
  • Зебра в таблице
  • Поля в ячейках
  • Расстояние между ячеек
  • Рамка вокруг таблицы
  • Рамка вокруг ячеек
  • Линии в таблице
  • Горизонтальное выравнивание в ячейках

Текст

  • Элемент
  • Переносы строк
  • Абзацы
  • Заголовок первого уровня
  • TEX
  • Заголовки
  • Площадь круга
  • Озон
  • Важный текст
  • Элемент
  • Рыжая лиса
  • Шрифт на веб-странице
  • Шрифт иллюстрации
  • Шрифт заголовка
  • Свой шрифт
  • Размер текста в пикселях
  • Размер заголовка в em
  • Размер заголовка в rem
  • Цвет основного текста
  • Цвет заголовка
  • Выворотка заголовка
  • Курсивный текст
  • Жирный текст
  • Нормальная жирность заголовка
  • Выступающий инициал
  • Трансформация

    • Поворот на 90°
    • Отражение по горизонтали
    • Поворот на -90°
    • Отражение по вертикали
    • Отражение картинки
    • Сдвигаем вниз
    • Сдвигаем вверх
    • Наклон картинки
    • Точка трансформации
    • Перспектива
    • Масштабирование кнопки
    • Поворот на 360° при наведении
    • Сдвиг при наведении
    • Масштабирование картинки при наведении
    • Масштабирование картинки при наведении 2
    • Цвет по названию
    • Шестнадцатеричный цвет
    • Сокращённое значение цвета
    • Цвет в RGB
    • Фоновая картинка
    • Полупрозрачный фон
    • Повторение фона по горизонтали
    • Повторение фона по вертикали
    • Запрет повторения фона
    • Положение фона
    • Фиксация фона
    • Масштабирование фона
    • Масштабирование фона 2
    • Масштабирование фона 3

    Формы

    • Атрибут method
    • Создание формы
    • Атрибут action
    • Текстовое поле
    • Длина текста
    • Ширина поля
    • Подсказка
    • Блокировка поля
    • Обязательное поле
    • Вывод текста
    • Элемент
    • Поле для пароля
    • Многострочный текст
    • Размеры
  • Элемент
  • Отправка формы
  • Картинка в
  • Очистка формы
  • Переключатели
  • Выбор переключателя
  • Флажки
  • Выбор флажка
  • Поле со списком
  • Раскрывающийся список
  • Блокировка списка
  • Список множественного выбора
  • Блокировка пункта списка
  • Выбор пунктов списка
  • Поиск по сайту
  • Практика

    Здесь приведены задачи по HTML и CSS, которые выполняются прямо в браузере, с автоматической проверкой результатов.

    Аудио и видео

    • Добавление аудио
    • Автовоспроизведение аудио
    • Зацикливание аудио
    • Элемент
    • Добавление видео
    • Размеры видеоплеера
    • Автовоспроизведение видео
    • Обложка видео
    • Зацикливание видео

    Изображения

    • Абсолютный адрес
    • Относительный адрес
    • Альтернативный текст
    • Размеры картинки
    • Ширина картинок
    • Элемент
    • Подпись под картинкой
    • Подпись перед картинкой
    • Картинки друг под другом
    • Ширина картинки
    • Плавающая ширина картинки
    • Круглое изображение
    • Выравнивание картинки
    • Рамка вокруг картинок

    Многоколоночная вёрстка

    • Две колонки
    • Три колонки
    • Заголовок в колонках
    • Ширина колонок
    • Расстояние между колонок
    • Линия между колонок
    • Пунктир между колонок
    • Блоки в колонках
    • Изображения в колонках
    • Запрет переноса в колонках

    Основы CSS

    • Подключение CSS-файла
    • Ошибка в
    • Добавление стиля
    • Атрибут style
    • Импорт шрифта
    • Комментарии в CSS
    • Селектор элемента
    • Класс
    • Добавление класса
    • Идентификатор
    • Добавление идентификатора
    • Селектор атрибута
    Читать еще:  Css parse error

    Переходы и анимация

    • Плавное изменение цвета
    • Масштабирование кнопки
    • Поворот на 360° при наведении
    • Сдвиг при наведении
    • Масштабирование картинки при наведении
    • Масштабирование картинки при наведении 2
    • Прозрачность при наведении
    • Мигающий текст
    • Сердце

    Разделы веб-страницы

    • Шапка веб-страницы
    • Подвал веб-страницы
    • Элемент
    • Копирайт
    • Шапка раздела
    • Навигация
    • Элемент
    • Элемент
    • Создание статьи
    • Дата публикации
    • Комментарии

    Списки

    • Маркированный список
    • Нумерованный список
    • Буквенная нумерация
    • Обратный список
    • Римские числа
    • Список с 11
    • Список описаний
    • Атрибут value
    • Вложенный список
    • Квадратные маркеры
    • Прячем маркеры
    • Символ в качестве маркера
    • Рисунок в качестве маркера
    • Горизонтальный список
    • Римская нумерация
    • Греческая нумерация
    • Расстояние от маркера до текста
    • Цвет списка
    • Цвет маркеров
    • Отступы в списке

    Ссылки

    • Создание ссылки
    • Ссылка на Google
    • Ссылка для скачивания
    • Атрибут target
    • Ссылка на email
    • Ссылка на телефон
    • Создание якоря
    • Ссылка на якорь
    • Картинка как ссылка
    • Убираем подчёркивание
    • Цвет ссылок
    • Цвет фона у ссылок
    • Активная ссылка
    • Посещённая ссылка
    • Стиль ссылки при наведении
    • Ссылки без подчёркивания
    • Пунктирное подчёркивание ссылок
    • Двойное подчёркивание ссылок
    • Рамка вокруг ссылки

    Таблицы

    • Создание таблицы
    • Строки таблицы
    • Заголовок таблицы
    • Таблица 2х2
    • Картинки в таблице
    • Объединение колонок
    • Объединение строк
    • Ячейка заголовка
    • Тело таблицы
    • Подвал таблицы
    • Ширина таблицы
    • Выравнивание заголовка таблицы
    • Выравнивание таблицы
    • Цвет фона таблицы
    • Зебра в таблице
    • Поля в ячейках
    • Расстояние между ячеек
    • Рамка вокруг таблицы
    • Рамка вокруг ячеек
    • Линии в таблице
    • Горизонтальное выравнивание в ячейках

    Текст

    • Элемент
  • Абзацы
  • Переносы строк
  • Заголовок первого уровня
  • Заголовки
  • TEX
  • Площадь круга
  • Озон
  • Важный текст
  • Элемент
  • Рыжая лиса
  • Шрифт на веб-странице
  • Шрифт иллюстрации
  • Шрифт заголовка
  • Свой шрифт
  • Размер текста в пикселях
  • Размер заголовка в em
  • Размер заголовка в rem
  • Цвет основного текста
  • Цвет заголовка
  • Выворотка заголовка
  • Курсивный текст
  • Жирный текст
  • Нормальная жирность заголовка
  • Выступающий инициал
  • Трансформация

    • Поворот на 90°
    • Отражение по горизонтали
    • Поворот на -90°
    • Отражение по вертикали
    • Отражение картинки
    • Сдвигаем вниз
    • Сдвигаем вверх
    • Наклон картинки
    • Точка трансформации
    • Перспектива
    • Масштабирование кнопки
    • Поворот на 360° при наведении
    • Сдвиг при наведении
    • Масштабирование картинки при наведении
    • Масштабирование картинки при наведении 2
    • Цвет по названию
    • Шестнадцатеричный цвет
    • Сокращённое значение цвета
    • Цвет в RGB
    • Фоновая картинка
    • Полупрозрачный фон
    • Повторение фона по горизонтали
    • Повторение фона по вертикали
    • Запрет повторения фона
    • Положение фона
    • Фиксация фона
    • Масштабирование фона
    • Масштабирование фона 2
    • Масштабирование фона 3

    Формы

    • Создание формы
    • Атрибут method
    • Атрибут action
    • Текстовое поле
    • Ширина поля
    • Длина текста
    • Подсказка
    • Блокировка поля
    • Обязательное поле
    • Элемент
    • Вывод текста
    • Поле для пароля
    • Элемент
    • Многострочный текст
    • Размеры
  • Картинка в
  • Отправка формы
  • Очистка формы
  • Переключатели
  • Выбор переключателя
  • Флажки
  • Выбор флажка
  • Поле со списком
  • Раскрывающийся список
  • Блокировка списка
  • Блокировка пункта списка
  • Список множественного выбора
  • Выбор пунктов списка
  • Поиск по сайту
  • Ссылка на основную публикацию
    Adblock
    detector