Видеоурок - Структуры данных в SASS / SCSS
Привет, в этом уроке мы рассмотрим структуры данных существующие в языке SASS / SCSS. Рассмотрим как с ними работать и почему это удобно. Также рассмотрим директиву @Charset и разберемся зачем она нужна.
Привет, в этом уроке мы рассмотрим структуры данных существующие в языке SASS / SCSS. Рассмотрим как с ними работать и почему это удобно. Также рассмотрим директиву @Charset и разберемся зачем она нужна.
<datalist> - содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.
Не стоит использовать его вместо тега <select>, но можно использовать как вспомогательный тег для <input>. Причина в том что его сложнее обрабатывать через JavaScript.
<form action="">
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
</form>
Привет, в рамках сегодняшнего урока вы узнаете что такое семантика и зачем она нужна для WEB страниц, какие семантические теги бывают и как они работают. На примере рассмотрим каким образом правильно создавать семантическую разметку .
<textarea> - позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>.
Имеет атрибуты схожие с <input>, а также cols и rows.
cols - определяет ширину <textarea>.
rows - определяет высоту <textarea>.
<form action="">Открыть на CodePen
<label for="message">Your massage</label>
<textarea
name="user_message"
id="message"
cols="30"
rows="10"
placeholder="Your message..."
></textarea>
</form>
<form action="">
<label for="message2">Your massage</label>
<textarea
name="user_message"
id="message2"
cols="30"
rows="10"
placeholder="Your message..."
>Some predefined data goes here</textarea>
</form>
Имена переменных
При именовании переменных нам нужно придерживаться определенных правил:
1. Имя переменной должно содержать только буквы, цифры или символы $ и _.
let user = 'John';
let $user = 'Alice';
let _user = 'Pete';
let user2 = 'Antony';
let u2s3e4r = 'Alex'; // Так лучше не делать, но это будет работать
2. Первый символ в имени не должен быть цифрой.
let 10user = 'Nick'; // Ошибка!3. Имена переменных должны быть написаны на латинице. Вы конечно можете называть переменные на кириллице, а также на любом другом языке кроме английского, но это считается плохой практикой.
let mentor = 'John Doe'; // Good
let ментор = 'Alice Cooper'; // Bad
4. Имя переменной должно отражать смысл того что она хранит.
let age = 20;
let color = 'red';
let sum = 10 + 10;
let salary = '0$';
Как быть если имя переменной должно состоять из нескольких слов ? На самом деле у есть много стилей именования переменных.
Например:
let snake_case = 'Слов пишутся без пробелов, вместо пробела используется символ _';
let PascalCase = 'Слова пишутся без пробелов и все с большой буквы';
let camelCase = 'Слова пишутся без пробелов, начиная со второго слова все пишутся с большой буквы';
let kebab-case = 'Слов пишутся без пробелов, вместо пробела используется символ -';
В JS вызывает ошибки так как символ '-' не разрешен для использования в именах переменных, также kebab-case еще называю шашлычным регистром. При написании кода на JavaScript мы в основном используем camelCase.
let userAge = 20;
let userFirstName = 'John';
let userLastName = 'Doe';
let userFullName = userFirstName + ' ' + userLastName;
let userSuperLongVariableName = 'Value';
Константы
Все вышеперечисленное прекрасно подходи и для именования констант. Но также, иногда, для трудно запоминаемых значений которые известны еще до начала выполнения скрипта, константы именуют в верхнем регистре используя snake_case.
const API_URL = 'https://api.url/posts';
const DATABASE_NAME = 'junjun_db';
const COLOR_WHITE = '#ffffff';
const COLOR_BLACK = '#000000';
Для получения более полной информации рекомендую посмотреть соответствующий урок прикрепленный в самом начале материала.
P.S. Больше уроков у меня на канале
<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>.
Имеет схожие с <input> атрибуты, а также атрибуты multiple и size.
Обычно select располагается внутри тега <form> или связывается с ним атрибутом form. Но его также можно не встраивать в <form>.
<form action="">Ссылка на CodePen
<select name="some_list"></select>
</form>
<option> - тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах.
Атрибуты:
selected - позволяет пред выбрать элемент.
disabled - работает как всегда. и другие.
<form action="">
<label for="select">Select item</label>
<select name="list" id="select">
<option value="item-1">Item #1</option>
<option value="item-2">Item #2</option>
<option value="item-3">Item #3</option>
<option value="item-4">Item #4</option>
</select>
</form>
Ссылка на CodePen
<optgroup> - позволяет группировать опции внутри <select>. Имеет атрибуты - name и disabled.
name - задает имя группы.
disabled - исключает возможность выбора элементов из группы.
label - Задает имя группы которое видно пользователю.
<form action="">
<label for="select2">Select item</label>
<select name="list" id="select2">
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>
Ссылка на CodePen
Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS).
<form action="">Ссылка на CodePen
<label for="select3">Select item</label>
<select name="list" id="select3" multiple>
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>
P.S. Больше уроков у меня на канале.
P.P.S. Ссылка на git репозиторий.
Привет, в этом уроке мы разберемся что такое строчные элементы и как они работают, а также рассмотрим некоторые строчные теги для стилизации текста. Не забудь поставить лайк, подписаться и оставить комментарий. Приятного просмотра.
Строчные элементы в HTML - ссылка на материалы
Файлы с урока - GitHub repo
Документация на строчные элементы - ссылка
Мои соц. сети:
----------- ТРАНИСКРИПТ УРОКА -------------
В современной верстке выделяется 2 типа элементов:
• Блочные (block level) - в основном, отвечают за каркас страницы.
• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.
Строчные элементы
Они не занимают всю ширину родителя в которого вложены, из-за чего соседствующие с ними элементы не переносятся на новую строку. Они высчитывают свою ширину в зависимости от ширины контента который в них вложен.
Основные списочные элементы: span, a, i, b, strong, em
Мы можем вкладывать строчные элементы в блочные и в другие строчные элементы, но вкладывать блочные элементы в строчные не рекомендуется, так как это нарушает семантику и усложняет чтение кода.
ВАЖНО!
Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.
P.S. Больше курсов у меня на канале
Справились? Тогда попробуйте пройти нашу новую игру на внимательность. Приз — награда в профиль на Пикабу: https://pikabu.ru/link/-oD8sjtmAi
<input> - тег который мы вкладываем внутрь тега <form>, с помощью него мы будем создавать интерактивные поля для ввода информации пользователем.
Тег <input> можно использовать и вне тега <form>.
Также имеет много атрибутов позволяющих настроить его внешний вид, поведение и работу.
<input type="text">
<input type="number">
<input type="email">
<input type="tel">
<input type="checkbox">
<input type="radio">
<input type="button" value="Submit">
<input type="submit" value="Submit">
<input type="color">
<input type="date">
<input type="time">
<input type="file">
<input type="hidden">
<input type="password">
<input type="range">
<input type="url">
Это основные типы тега <input>, в зависимости от типа тега он может принимать какие-то атрибуты или не принимать их, об этом лучше читать в документации.
Рассмотрим несколько атрибутов на примере стандартного input для ввода текста.
<input type="text" value="Some text here">
value - позволяет нам определить или предопределить значение тега input.
<input type="text" placeholder="First name">
placeholder - определяет текст, который будет показа пользователь внутри input до того момента пока пользователь не начнет вводить свое значение. Доступен не всем типам input.
<input type="text" required>
required - определяет, будет ли обязательным этот input в рамках текущего тега <form>.
<input type="text" disabled>
disabled - определяет, будет ли у пользователя возможность редактировать содержимое input
<input type="text" pattern="">
pattern - в качестве значения принимает регулярное выражение которые будет проверять правильность введенных данных.
<input type="text" name="first_name">
name - задает имя для нашего input
<form id="form_id"></form>Атрибут form - позволяет связать input с тегом <form>, input лежит вне тега <form>.
<input type="text" form="form_id">
Атрибутов <input> существует огромное количество, мы рассмотрели только самые распространенные.
Label - <label>
Это тег позволяющий указывать подпись для элемента, обычно используется вместе с тегом input. input и label можно связать с помощью id для input и for для label.
<form action="">
<h2>Contact form #1</h2>
<div>
<label for="first_name">First name:</label>
<input id="first_name" type="text" placeholder="First name">
</div>
</form>
Также мы можем положить внутрь <label> тег <input> в таком случае они свяжутся автоматически и нам не нужно указывать атрибуты for и id.
<form action="">Пример
<h2>Contact form #2</h2>
<div>
<label>
<span>First name</span>
<input type="text" placeholder="First name">
</label>
</div>
</form>
<form action="">
<h2>Contact form #3</h2>
<div>
<label for="user_name">First name:</label>
<input id="user_name" type="text" placeholder="User name">
</div>
<div>
<label>
<span>User surname:</span>
<input type="text" placeholder="User surname">
</label>
</div>
<div>
<input type="submit" value="Submit">
<input type="reset" value="Reset from">
</div>
</form>
P.S. Больше уроков у меня на канале.
P.P.S Для тех кто хочет посмотреть код - ссылка на git репозиторий