Сегодня среда, а значит пришло время для небольшой практической задачки по вёрстке!
Сверстайте блок в трёх разрешениях (desktop, tablet, mobile) по макету.
Получившийся блок можно добавить в собственный сниппет и использовать при необходимости.
Макет: https://sc.link/3xx.
Загружайте код на codepen.io и делитесь результатами в комментариях!
Сверстайте блок в трёх разрешениях (desktop, tablet, mobile) по макету.
Получившийся блок можно добавить в собственный сниппет и использовать при необходимости.
Макет: https://sc.link/3xx.
Загружайте код на codepen.io и делитесь результатами в комментариях!
Figma
HTML,CSS,JS actual layout
Created with Figma
Какой тег задает содержание сайта вроде новости, статьи, записи блога, форума?
Anonymous Quiz
19%
<section>
62%
<article>
10%
<nav>
9%
<aside>
Блоку необходимо задать отступ сверху и снизу в 15 и 20 px соответственно, и отступы слева и справа в 35 и 42 px. Выберите верное css-свойство
Anonymous Quiz
9%
margin: 35px 42px 15px 20px;
77%
margin: 15px 35px 20px 42px;
5%
margin: 42px 15px 35px 20px;
9%
margin: 15px 35px 20 px 15px;
Приносим свои извинения! В предыдущем опросе ошибка.
Сверху и снизу отступы 15px и 20px, справа и слева 35px и 42px.
Сверху и снизу отступы 15px и 20px, справа и слева 35px и 42px.
Какая функция заменяет собой много вызовов условий else if?
Anonymous Quiz
77%
switch...case
4%
try...catch
13%
тернарные операторы
6%
case...switch
С точки зрения seo-оптимизации, сколько, сколько раз на странице нужно использовать тег <h1> ?
Anonymous Quiz
84%
1
2%
2
2%
3
12%
Сколько угодно
Какое из перечисленных ниже css-свойств отвечает за изменение размера элемента?
Anonymous Quiz
79%
transform: scale
12%
transform: transition
3%
transform: matrix
7%
transform: rotate
Друзья, нас уже больше двух тысяч человек, и это прекрасно! Мы гордимся тем, что столько человек ежедневно проходит тесты, читает статьи и практикуется во frontend-разработке!
В нашем канале появилась функция благодаря которой мы можем помогать друг другу решать проблемы в разработке! Для того чтобы воспользоваться ею достаточно написать нашему боту @QAFrontBot
В нашем канале появилась функция благодаря которой мы можем помогать друг другу решать проблемы в разработке! Для того чтобы воспользоваться ею достаточно написать нашему боту @QAFrontBot
Какое свойство тега td объединяет строки по вертикали?
Anonymous Quiz
41%
colspan
45%
rowspan
6%
cellpadding
9%
align
Как задать свой собственный (кастомный) курсор странице?
Anonymous Quiz
43%
cursor: url(), auto
15%
cursor: href(), auto
22%
cursor-custom: url(), auto
19%
Нельзя задать кастомный курсор странице
Вызов какой функции доступен только после объявления?
Anonymous Quiz
50%
Function Expression
27%
Function Declaration
18%
Обе
5%
Ни одна из вышеперечисленных
Друзья, не доглядели 🙈
Правильный ответ в предыдущем опросе 1 (Function Expression).
P. S. Больше отдыхайте на выходных, чтобы меньше ошибаться на пустом месте 😉
Правильный ответ в предыдущем опросе 1 (Function Expression).
P. S. Больше отдыхайте на выходных, чтобы меньше ошибаться на пустом месте 😉
Друзья, наступил первый выходной за эту неделю, но расслабляться нельзя.
Поэтому предлагаем вам немного попрактиковаться в вёрстке.
Ниже находится ссылка на небольшую задачку, которую мы НАМЕРЕННО сделали с некоторым количеством ошибок в html-структуре и стилях. Упростите и поправьте наш код (но не меняйте размер главного блока, размеры шрифтов и пр.!)
Ссылка на задание: https://codepen.io/_AdAstra_/project/editor/ZyznVe#
Свои ответы выкладывайте на codepen.io и делитесь ссылкой в комментариях
Поэтому предлагаем вам немного попрактиковаться в вёрстке.
Ниже находится ссылка на небольшую задачку, которую мы НАМЕРЕННО сделали с некоторым количеством ошибок в html-структуре и стилях. Упростите и поправьте наш код (но не меняйте размер главного блока, размеры шрифтов и пр.!)
Ссылка на задание: https://codepen.io/_AdAstra_/project/editor/ZyznVe#
Свои ответы выкладывайте на codepen.io и делитесь ссылкой в комментариях
Как подключить файл стилей к html?
Anonymous Quiz
57%
<link rel="stylesheet" href="styles.css">
6%
<link rel="stylesheet" href="//styles.css">
36%
<link rel="stylesheet" src="styles.css">
1%
<link rel="stylesheet" to="styles.css">
За что отвечает css-свойство "animation-duration"?
Anonymous Quiz
3%
Оно задаёт имя анимации
71%
За время анимации
12%
За конечное положение элемента(ов) анимации
14%
За количество повторов анимации
Можно ли пользоваться методом addEventListener для псевдомассива?
Anonymous Quiz
34%
Да
47%
Нет
20%
Посмотреть ответы
Так-так, вот и пришло воскресенье, а значит пришла пора узнать новый полезный плагин для VS Code!
Live Server
Плагин «Live Server» позволяет сразу увидеть результат работы. Для активации «Live Server» нужно кликнуть провой кнопкой мыши по .html файлу внутри VS Code и выбрать «Open with Live Server». После этого в браузере отобразится страница, которая будет автоматически перезагружаться при внесении изменений в файлы. Это очень удобно, так как больше не придётся вручную обновлять страницу. Не забывайте отключать плагин с помощью «Stop Live Server».
Live Server
Плагин «Live Server» позволяет сразу увидеть результат работы. Для активации «Live Server» нужно кликнуть провой кнопкой мыши по .html файлу внутри VS Code и выбрать «Open with Live Server». После этого в браузере отобразится страница, которая будет автоматически перезагружаться при внесении изменений в файлы. Это очень удобно, так как больше не придётся вручную обновлять страницу. Не забывайте отключать плагин с помощью «Stop Live Server».
Visualstudio
Live Server - Visual Studio Marketplace
Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages
Как верстать html письма?
Anonymous Quiz
38%
Таблицами
28%
Как и обычный html документ
24%
Блоками
9%
Посмотреть ответы