Начинаю пилить соцсеть
Возможно опенсорс на python/django 4.0 и фронт на обычном html/css ну и js наверно в ход пойдёт без библиотек и всего такого.Что можете предложить добавить в неё?Советы и предложения по разработке приветствуются.
Возможно опенсорс на python/django 4.0 и фронт на обычном html/css ну и js наверно в ход пойдёт без библиотек и всего такого.Что можете предложить добавить в неё?Советы и предложения по разработке приветствуются.
В этом уроке разберем абсолютно все нюансы по работает с отступами в #CSS и #HTML.
Изучим: работу CSS свойств: padding, margin, border и box-sizing и полностью разберем все нюансы работы с шириной элементов и взаимодействию отступов с ними.
Домашнее задание к этому уроку ищи здесь - https://t.me/VS_FRONTEND/803
Привет, в рамках этого урока мы разберемся оставшимися тегами формы, а именно: datalist, fieldset, legend, button. Также разберемся в нюансах и частоте использования этих тегов. Текстовая версия урока в полной версии этой статьи.
Datalist
<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>
Fieldset
<fieldset> - существует для группировки <input> внутри тега <form>, а также помогает удобно управлять группой полей.
<form action="#">
<h3>Registration form</h3>
<fieldset>
<div>
<label for="name_input">First name:</label>
<input id="name_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_input">Surname:</label>
<input id="surname_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<div>
<label for="email_input">Email:</label>
<input id="email_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_input">Password:</label>
<input id="password_input" type="text" placeholder="Password">
</div>
</fieldset>
</form>
У <fieldset> также есть несколько атрибутов, которые помогают управлять сразу всей группой <input>.
name - задает общее имя для группы
disabled - делает группу недоступной для редактирования
form - если <fieldset> лежит вне тега <form> то этот атрибут позволит вам связать их.
<form action="" id="example_form">
<h3>Example form</h3>
<label>
<input type="text" placeholder="Some example input">
</label>
</form>
<fieldset form="example_form">
<div>
<label for="name_2_input">First name:</label>
<input id="name_2_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_2_input">Surname:</label>
<input id="surname_2_input" type="text" placeholder="Surname">
</div>
</fieldset>
Legend
<legend> - Является заголовком для группы элементов, сгруппированных через <fieldset>
<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
Button
<button> - Парный тег, который предназначен для создания кнопки, имеет схожие атрибуты с тегом <input>. Может использовать как внутри <form> заменяя собой <input type="button">, так и просто как отдельный элемент на странице.
<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
<fieldset>
<legend>Form Controls</legend>
<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
</fieldset>
</form>
Одна вакансия, два кандидата. Сможете выбрать лучшего? И так пять раз.
Select
<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>. Имеет схожие с <input> атрибуты, а также атрибуты multiple и size. Обычно select располагается внутри тега <form> или связывается с ним атрибутом form.
<form action="">
<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>
<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>
Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)
<form action="">
<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>
Textarea
<textarea> - позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>. Имеет атрибуты схожие с <input>, а также cols и rows.
cols - определяет ширину <textarea>
rows - определяет высоту <textarea>
<form action="">
<label for="message">Your massage</label>
<textarea
name="user_message"
id="message"
cols="30"
rows="10"
placeholder="Your message..."
></textarea>
</form>
У тега <textarea> нет атрибута value, а если вы ходите установить ему какое-то значение по-умолчанию, нужно писать его между открывающим и закрывающим тегами.
<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>
Файлы с урока
P.S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )
Во многих сайтах и программах уже давным — давно используются такие элементы взаимодейтсвия пользователем, как «Слайдер», по сути это одна большая фотография которую можно переключать с помощью стрелочек или по нажатию на клавиши. Удобно когда на экране мало места, а показать множество фотографий нужно.
Как же создать вот такой слайдер?
Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.
План
1. Пишем структуру
2. Пишем стили
3. Пишем код
4. Заполняем объект
Пишем структуру
Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».
<div class="slider">
<button id="left">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
<img id="slider_image" src="">
<button id="right">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
</div>
Пишем стили
Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.
body{
outline: none;
user-select: none;
font-size: 16px;
}
h1,p{
margin: 0;
padding: 0;
}
p{
margin-bottom: 10px;
}
a{
text-decoration: none;
background-color: rgb(50,50,50);
color: white;
padding: 5px 20px;
}
a:hover{
background-color: rgb(70,70,70);
}
.slider{
background-color: rgb(230,230,230);
height: 350px;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.slider #slider_image{
background-color: rgb(50,50,50);
height: 400px;
min-width: 400px;
}
.slider button{
width: 70px;
height: 70px;
margin: 30px;
border: none;
border-radius: 100%;
padding: 0;
background: none;
}
.slider button img{
width: 50px;
height: 50px;
}
.slider #left img{
transform: rotate(180deg);
}
.slider button:hover{
opacity: 80%;
cursor: pointer;
}
Пишем скрипт
Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.
let slider_cfg = {
1: "https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_96...",
2: "https://cdn.pixabay.com/photo/2015/03/27/13/16/maine-coon-69...",
3: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
4: "https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__...",
5: "https://cdn.pixabay.com/photo/2019/11/08/11/56/cat-4611189__...",
6: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
}
// varibles
let slider_image = document.getElementById('slider_image');
let left = document.getElementById('left');
let right = document.getElementById('right');
let sin = 1; //slider_image_number - sin
let size = Object.keys(slider_cfg).length;
let path = slider_cfg[sin];
// update slide
function update(){
path = slider_cfg[sin];
slider_image.setAttribute("src", path);
}
// toggle slides
left.onclick = function(){
if (sin > 1){
sin = sin - 1;
} else{
sin = 1;
}
update();
}
right.onclick = function(){
if (sin < size){
sin = sin + 1;
} else{
sin = size;
}
update();
}
// start
update();
Заполняем объект
Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ' ' », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.
Итог
У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.
Ссылка на код: https://codepen.io/Anton-Malezhik/pen/ZEJvbNQ
Пример #1 — Подключаем шрифт PT Sans через Google Fonts
- Заходим на сайт fonts.google.com и находим шрифт PT Sans;
- Нажимаем кнопку Select this font;
- Нажимаем на Family Selected;
- Во вкладке Customized выбираем начертания и Cyrillic;
- Копируем строку с подключением шрифта во вкладках EMBED → @IMPORT.
Вставляем строку с подключением в начало CSS файла:
@IMPORT url('https://fonts.googleapis.com/css?family=PT%20Sans%3A400i%2C7...);
Копируем свойство font-family:
Пример #2 — Подключаем шрифты PT Sans и PT Serif в Drupal 8 через файл темы .libraries.yml
Аналогично примеру #1 получаем URL подключения шрифтов из строки @import:
fonts.googleapis.com/css?family=PT%20Sans%3A400%2C400...
В файле темы .libraries.yml подключаем шрифты по образцу:
fonts.googleapis.com/css?family=PT%20Sans%3A400%2C400...,
Сохраняем и сбрасываем кэш.
Пример #3 — Подключаем шрифт PT Sans локально
- Заходим на сайт Google Webfonts Helper;
- В поиске находим шрифт PT Sans;
- Выбираем начертания и Cyrillic;
- Пролистываем вниз и пишем где будут находится шрифты относительно .css файла;
- Копируем CSS код и вставляем его в .css файл;
- Скачиваем архив с шрифтами, разархивируем его и размещаем шрифты в нужном месте.
Вот так выглядит скопированный CSS:
/* pt-sans-regular - cyrillic_latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot'); /* IE9 Compat Modes */
src: local('PT Sans'), local('PTSans-Regular'),
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-italic - cyrillic_latin */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot'); /* IE9 Compat Modes */
src: local('PT Sans Italic'), local('PTSans-Italic'),
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700 - cyrillic_latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot'); /* IE9 Compat Modes */
src: local('PT Sans Bold'), local('PTSans-Bold'),
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700italic - cyrillic_latin */
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot'); /* IE9 Compat Modes */
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'),
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
А так список файлов с шрифтами:
Команда ls в терминале
Если все сделано правильно, то шрифты будут подключены локально.
Привет, в рамках этого урока мы познакомимся с тегом input, разберем типы input-ов, рассмотрим атрибуты этого тега, а также познакомимся с тегом label. Больше уроков у меня на канале.
Этот видео-урок является дополнением к посту о input - ссылка на пост
Справились? Тогда попробуйте пройти нашу новую игру на внимательность. Приз — награда в профиль на Пикабу: https://pikabu.ru/link/-oD8sjtmAi
Привет, в рамках этого урока мы познакомимся с тегом form и его атрибутами, разберемся что нужно в него вкладывать и как использовать. Больше уроков у меня на канале
<form> - Обычно этот тег оборачивает элементы с которыми пользователь может взаимодействовать. Это могут быть поля для ввода текста, выпадающие списки, заголовки полей. Всех их мы разберем далее. <form> имеет достаточно много атрибутов, мы разберем самые распространенные. Элемент <form> интерактивный, при правильном его описании мы можем отправлять данные которые расположены внутри нее, на сервер.
<form></form>action - определяет ссылку на сервер куда будут отправляться данные из <form>.
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>
method - определяет метод http с помощью которого будут отправляться данные.
target - определяет в каком окне будет производиться отправка, в новом или текущем.
Также есть еще много атрибутов у тега <form>, о них читайте в документации.