WEB - верстальщик HTML, CSS, JS
157 subscribers
68 photos
11 links
Если тебе интересна верстка и все что с ней связано, то этот канал для тебя!
Тут публикуются интересные статьи, тесты, задачи, обзоры.

Реклама: @layout_developer
Download Telegram
Использование конструктора Event в JavaScript

Пользовательское событие может быть создано с помощью конструктора Event, например:

const myEvent = new Event('myevent', {
  bubbles: true,
  cancelable: true,
  composed: false
})

В приведенном выше фрагменте мы создали событие myevent, передав имя события конструктору Event. Имена событий нечувствительны к регистру, поэтому myevent такое же, как myEvent и MyEvent и т.д. Конструктор события также принимает объект, который определяет некоторые важные свойства, касающиеся события.

#javascript
Требуется вывести на страницу код, который он написал на языке Java. Какой тег для этого ему необходимо использовать?
Anonymous Quiz
54%
<code>
12%
<pre>
5%
<p>
29%
<java>
Книга по HTML и CSS «Основы Самостоятельного Сайтостроения»

Данная книга предназначена для новичка. Для тех, кто не знает, как подступиться к миру сайтостроения, не знает, с чего начать.

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

#книги
Какая функция вызывает окно с текстовым полем, в которое пользователь может ввести строку?
Anonymous Quiz
34%
alert()
35%
promt()
29%
prompt()
1%
alerts()
This media is not supported in your browser
VIEW IN TELEGRAM
Форма входа с плавающим заполнителем и световой кнопкой

#html #css
Какой CSS-код написан правильно?
Anonymous Quiz
7%
<div> {border: 1px solid #ccc;}
64%
div {border: 1px solid #ccc;}
7%
<div> {border: 1px solid #hhh;}
Кроссбраузерность сайта - это его корректное отображение во всех популярных интернет-браузерах:
Google Chrome
• Yandex-browser
• Mozilla Firefox
•Safari
• Inernet Explorer
• Opera

Для проверки кроссбраузерности сразу в нескольких браузерах и различных их версиях существуют специальные сервисы.

Самый популярный и доступный из них - browsershots.org. Здесь Вы можете указать ссылку на нужную страницу сайта и выбрать необходимые версии браузеров. Проверка занимает несколько минут. В течение этих нескольких минут постепенно появляются скриншоты Вашего сайта в проверенных версиях браузеров.
Как сделать нумерованный список, какой из тегов надо использовать:
Anonymous Quiz
1%
<tr>
75%
<ol>
20%
<ul>
4%
<list>
Какой из вариантов объявления функции правильный: var func = function() {}; или function func() {}
Anonymous Quiz
31%
var func = function() {};
14%
Оба варианта неправильные.
20%
function func() {}
36%
Оба варианта правильные.
Адаптивность верстки сайта

Современная верстка должна быть адаптивной под различные размеры экрана. При просмотре сайта все смысловые блоки страницы выстраиваются в один столбик, а не самые важные элементы скрыты с возможностью их отображение по кнопке.

Быстро проверить адаптивность можно так: просто постепенно уменьшайте браузер по ширине. Вы увидите, как перестраиваются блоки сайта. Чтобы видеть, какие в данный момент размеры окна, нажмите клавишу F12, и после этого меняйте размеры браузера.

Ну, а самый эффективный и точный способ - тестирование верстки на мобильном устройстве.
Какой вариант задания цвета НЕ сработает?
Anonymous Quiz
48%
color: #hhh
11%
color: #000
7%
color: #aaa
This media is not supported in your browser
VIEW IN TELEGRAM
Этот CodePen показывает как браузеры следуют по ключевым кадрам (keyframe) в анимации.

#codepen
Требуется написать химическую формулу тетрасульфида димышьяка (As2S4). Каким образом это можно сделать?
Anonymous Quiz
26%
As<sup>2</sup>S<sup>4</sup>
22%
As<pow>2</pow>S<pow>4</pow>
42%
As<sub>2</sub>S<sub>4</sub>
10%
As<sup>2S<sup>4
​​Неизменность, мутация, изменчивость

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

Например, это мутация:

#javascript
Какой атрибут позволяет выбирать несколько пунктов из списка?
Anonymous Quiz
0%
size
8%
some
55%
multiple
36%
select
Accept

Как вы знаете, HTML позволяет создавать поля ввода, в которые вы можете загружать свои файлы. В дополнение к этому атрибут HTML accept используется во входных данных для загрузки, чтобы указать типы файлов или единственный формат, который пользователь может загрузить на сервер.

Например, мы можем принять загрузку на наш сервер только jpg и png.

#HTML
Вызвав две функции: parseFloat("$101.2") и parseFloat("101.2 USD"). Какая из них вернёт число?
Anonymous Quiz
31%
parseFloat("101.2 USD")
31%
Ни одна из них.
16%
parseFloat("$101.2")
23%
Обе функции.
This media is not supported in your browser
VIEW IN TELEGRAM
Демонстрация requestAnimationFrame

В этой JavaScript демонстрации видно, как использовать requestAnimationFrame API для воспроизведения и паузы

#javascript #codepen
Есть такой CSS-код: body {font-size: 14pt;} p {font-size: 2em;}. Какой размер текста будет в теге <p>:
Anonymous Quiz
14%
12pt
14%
7pt
10%
16pt
62%
28pt
Multiple

Атрибут multiple в HTML можно прикрепить к тегам input и select. Это в основном позволяет пользователю вводить несколько значений.

Например, мы также можем использовать атрибут multiple во входных данных для загрузки HTML, чтобы пользователь мог загружать несколько файлов. Вот пример кода:
<input type="file" multiple />

#html