😣 На рынке жёсткий дефицит фронтендеров

Хочешь быстро влиться во фронтенд и через пару лет хвастаться ЗП > 200к?

Вот план для старта:

1. Веб-верстка - 3 месяца
2. JavaScript - 3 месяца
3. Система контроля версий GIT - 1 месяц
4. Онлайн-сессии по вебразработке - 1 месяц
5. Vue.js - 2 месяца
6. React.js - 2 месяца
7. Защита дипломного проекта
8. 💰Трудоустройство💰

Это программа курса Профессия Frontend разработчик от Skillbox.

Да - трудоустройство они тоже берут на себя.

Тут можно получить курс со скидкой 50% 👇

​Что такое тег label и как с ним работать?

label определяет текстовую метку для элемента input. По своему виду метка ничем не отличается от обычного текста, однако она позволяет пользователю выбрать элемент формы простым кликом по тексту, расположенному внутри элемента label, а не по самому элементу input. Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега label. Значение атрибута for должно быть эквивалентно значению атрибута id того элемента формы, к которому будет относится метка.

Атрибутом "for" можно не пользоваться, если элемент input будет находиться внутри элемента label.

Пример
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male">
<br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female">
</form>

<p>или тоже самое только без использования атрибута for</p>

<form>
<label>Male<input type="radio" name="sex" id="male"></label>
<br>
<label>Female<input type="radio" name="sex" id="female"></label>
</form>

Изучаем программирование на JavaScript

Если до этого момента вы не написали ни строчки кода, не беда – эта книга поможет в доступной форме войти в курс дела. Вы узнаете, почему браузеры по-разному реагируют на программы JavaScript и как писать универсальный, понятный всем код. Учебник подойдёт начинающим программистам – формат не покажется скучным или однообразным.

Напишите функцию, которая принимает массив из цифр и строк и возвращает массив только из цифр.

Примеры:

 filter_list([1,2,'a','b'])
 //[1,2]

 filter_list([1,'a','b',0,15])
 //[1,0,15]

 filter_list([1,2,'aasf','1','123',123])
 //[1,2,123]

Д. Крокфорд – Как устроен JavaScript

Специалист в области JS в доходчивой форме объясняет основы и устройство языка: имена, числа, логические значения, символы и прочее. У всех новичков бывают трудности с типизацией – эта книга поможет научиться их избегать. В конце вас ждут объектно-ориентированный подход, программирование без классов и функции высшего порядка.

Как изучить React и построить международную карьеру?

🔥Максим Иванов, разработчик Minecraft и Battlefield, запускает авторский курс по React.

Курс стартует 1 ноября, но уже можно начать учиться бесплатно не выходя из Телеграма:
⭐️Как сделать клон Minecraft на React (делаем 3d-игру на компонентах)
⭐️Как делать формы любой сложности на React и react-hook-form
⭐️Как освоить реакт быстро, не тратя время на булщит? 💩
⭐️Как попасть в интересный проект? Самая короткая дорога от hello world до удаленки за баксы 🔥
⭐️Как справиться с застреванием в процессе обучения и в карьере
💥Инсайт: Как всех обогнать. Прокачиваем карьеру. Как в этом помогает блог и привычка описывать свои шаги.📝

Чтобы получить доступ материалам, переходи в наш Телеграм-бот. Он заботливо выдаст все видео.

Что такое БЭМ и в чем его польза?
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Что такое Блок?
Это Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.

Что такое элемент?
Составная часть блока, которая не может использоваться в отрыве от него.

Элементы можно вкладывать друг в друга.
Допустима любая вложенность элементов.
Элемент — всегда часть блока, а не другого элемента

Что такое data-атрибуты, и привести примеры, когда они полезны?

data - атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML
любой атрибут, чьё имя начинается с data-, является data - атрибутом
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>
Чтобы получить data-атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Каждое свойство является строкой и может быть прочитано и записано.

Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:

 article[data-columns='3']{ width: 400px; }
 article[data-columns='4']{ width: 600px; }

Напишите функцию, которая будет обрабатывать url, удаляя в нем всё после знака #

Примеры:

// returns 'www.codewars.com'
removeUrlAnchor('www.codewars.com#about')

// returns 'www.codewars.com?page=1'
removeUrlAnchor('www.codewars.com?page=1')

Что такое doctype и зачем он нужен?

Элемент <!doctype> — DTD (document type definition, описание типа документа) указывает тип документа, который используется при написании html кода. Это непарный тег, который должен стоять самым первым в коде каждой страницы вашего сайта.

Директива doctype необходима, чтобы браузер понимал как обрабатывать текущую веб-страничку, так как существует несколько версий языка HTML, а еще имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), который похож на HTML, но различается с ним по синтаксису.

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

Для чего нужна директива use strict?

Режим strict (строгий режим), введенный в ECMAScript 5, позволяет использовать более строгий вариант JavaScript

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

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

 var undefined = 5; // выдаст TypeError

В-третьих, в строгом режиме попытки удалить неудаляемые свойства будут вызывать исключения (в то время как прежде такая попытка просто не имела бы эффекта):

 "use strict";
  delete Object.prototype; // выдаст TypeError

В-четвёртых, строгий режим требует, чтобы все свойства, перечисленные в сериализованном объекте, встречались только один раз.

 "use strict"; var o = { p: 1, p: 2 }; // !!! синтаксическая ошибка

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

 function sum(a, a, c) { // !!! синтаксическая ошибка 
 "use strict";
  return a + a + c; // ошибка