Пост удален
Пост удален
Пост удален
Привет, в этом уроке мы научимся использовать функции в SASS / SCSS, рассмотри примеры их работы, а также разберемся с новым, для нас, циклом @for. Напишем несколько функций и посмотрим для чего они вообще нужны. Приятного просмотра. Больше уроков у меня на канале.
Привет, в рамках этого урока мы познакомимся с тегом input, разберем типы input-ов, рассмотрим атрибуты этого тега, а также познакомимся с тегом label. Больше уроков у меня на канале.
Этот видео-урок является дополнением к посту о input - ссылка на пост
Привет, в рамках этого урока мы познакомимся с тегом 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>, о них читайте в документации.
Разберемся с тегами которые помогают нам добавлять на страницу изображения и мультимедиа (аудио и видео).
IMG
<img> - позволяет нам добавлять изображения на страницу.
Атрибуты:
src - обязательный атрибут значением которого должна быть ссылка или путь к изображению.
alt - необязательный атрибут который очень полезен для повышения доступности Web, обычно он выводится браузером когда изображение не может быть показано на странице, а также его используют скрин ридеры воспроизводящие его значение пользователю.
width - необязательный атрибут, его значением используется для задания ширины изображению.
height - необязательный атрибут, его значением используется для задания высоты изображению.
* Также у тега img присутствуют другие атрибуты о которых поговорим позднее, а еще ему можно задавать все общие атрибуты (id, class, title и тд.).
Local img
<img src="./assets/img-example.jpg" alt="grapefruit" width="250px" height="250px">
Img from the internet
<img
src="https://upload.wiki__media.org/wikipedia/commons/thumb/7/7b/Orange-Whole-&-Split.jpg/1024px-Orange-Whole-&-Split.jpg"
alt="Img from wikipedia"
width="1024"
>
Также мы можем изменять изображение для устройств с различным разрешением экрана. С помощью атрибутом srcset и sizes, как это делать разберем в уроках об адаптивности.
AUDIO
Для добавления аудио на сайт нам нужно использовать тег <audio>. Чтоб указать какой трек мы хотим использовать нам нужно указать путь к файлу трека в качестве значения атрибута src.
<audio controls src="./assets/audio.mp3">
Ваш браузер не поддерживает тег <b>audio</b>
</audio>
Тег <audio> имеет достаточно много атрибутов, мы рассмотрим самые распространенные: src - путь к аудиофайлу.
controls - если атрибут указан то браузер будет пользователю элементы управления треком (перемотка, звук и тд.) .
autoplay - если указан браузер будет пытаться сразу воспроизводить трек как только он загрузился, это поведение также зависит то того на каком устройстве и в каком браузере открывается страница.
loop - зацикливание трека muted - определяет будет ли воспроизводится звук.
Если нам нужно указать несколько аудио источников, то для этого предусмотрен тег <source> который мы будем вкладывать внутрь тега <audio>.
<audio controls>Браузер попытается скачать трек, который находится в первом <source>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="./assets/audio.mp3" type="audio/mp3"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>
<audio controls>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>
VIDEO
Для того, чтобы добавить видео на страницу, мы будем использовать тег <video>.
<video src="./assets/video.webm" controls>
Ваш браузер не поддерживает тег <b>video</b>
</video>
Тег video как и тег audio, имеет множество похожих атрибутов:
src - путь к видео файлу.
controls - если атрибут указан то браузер будет пользователю элементы управления видео (перемотка, звук и тд.).
autoplay - если указан браузер будет пытаться сразу воспроизводить видео как только оно загрузится, это поведение также зависит то того на каком устройстве и в каком браузере открывается страница.
loop - зацикливание видео.
muted - определяет будет ли воспроизводится звук.
poster - содержит ссылку на изображение которое будет показано пока видео загружается.
<video src="./assets/video.webm" poster="./assets/poster.jpg" controls>Аналогично тегу <audio> мы можем определять сразу несколько источников видео с помощью тега <source> который будем вкладывать в тег <video>.
Ваш браузер не поддерживает тег <b>video</b>
</video>
<video controls>
<source src="myVideo.mp3" type="video/mp3">
<source src="./assets/video.webm" type="video/webm">
Ваш браузер не поддерживает тег <b>video</b>
</video>
Браузер попытается скачать видео, которое находится в первом <source>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.
<video controls>
<source src="myVideo.mp3" type="video/mp3">
<source src="video.webm" type="video/webm">
Ваш браузер не поддерживает тег <b>video</b>
</video>
IFRAME
Тег <iframe> позволяет нам вставлять одни страницы в другие, если это не запрещено источником который вы хотите вставить к себе на страницу. У тега iframe достаточно много атрибутов + к нему можно добавлять общие атрибуты которые есть у всех тегов. src - url источника который нужно вставить через iframe.
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="700"
height="400"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
Добавление внешней страницы в нашу страницу:
<iframe src="https://example.org"
title="iframe Example 1"
width="700"
height="400">
</iframe>
Неработающий iframe:
<iframe src="https://vs-dev.info/"Вставляем видео с youtube:
title="iframe Example 1"
width="700"
height="400">
</iframe>
<iframe src="https://www.youtube.com/embed/4rOLgFCNrTg_"
title="iframe Example 1"
width="700"
height="400">
</iframe>
P.S. Больше уроков у меня на канале
P.P.S. Файлы с урока
Приветствую всех пикабушников в своей первой статье. В этом материале хотелось бы ответить на все перечисленные в заголовке вопросы. Особую ценность этой статьи составляет то, что она основана исключительно на личном опыте.
Мне 23 года, работаю веб-разработчиком в строительной компании, создаю сайтики и администрирую уже существующие. Параллельно беру заказы со стороны, практикуюсь в разработке, контент-менеджменте, настройке рекламы и SEO-продвижении.
Сразу скажу, что гением я себя выставить не пытаюсь, а лишь поделюсь опытом с теми, кто хочет научиться создавать сайты, но пока не знает, с чего можно было бы начать изучение.
Как и где учить HTML и CSS?
Не знаю, стоит ли ради этого записываться на платные курсы или идти в шарагу/университет. Вспоминаю пары основ web технологий в своем колледже... Преподаватель писал тег на доске, заставлял переписывать его в тетрадь и писать определение.
Конечно, теория тоже важна. Но абсолютно такой же уровень знаний можно было получить, листая просто сайты по запросу "HTML справочник".
Лично я знал HTML и CSS еще до шараги. Учил я его с помощью Solo Learn. Есть как веб-версия, так и приложения в Google Play и App Store. В приложении есть и полноценные языки программирования. Просто выбираете любой курс и проходите теорию.
После каждой темы вы должны закрепить пройденный материал ответом на контрольный вопрос. А после прохождения всей темы проходите полноценный тест.
Радует наличие как простых тестов, так и фрагментов кода, куда вы должны написать или же перетащить недостающие кусочки.
А в конце вам дают такой сертификат:
Достаточно ли будет обучения в Solo Learn или нужно делать что-то еще? Ответ очевиден. Догадаетесь?
Смотрите марафоны по верстке на ютубе, где человек верстает реальный сайт. Параллельно пытайтесь что-то делать сами. Открывайте чужие сайты через инспектор и смотрите код.
Также вы можете скачивать чужие сайты через какие-нибудь онлайн-сервисы и пробовать работать над чужим кодом. Стоит это делать для того, чтобы больше понять структуру, да и в будущем это поможет, когда вы будете работать в команде.
Куда возьмут работать с HTML и CSS?
Сразу скажу, что знаний одних только HTML и CSS будет недостаточно. Конечно, если речь идет о хорошо оплачиваемой работе. Когда у меня совсем не было знаний, я работал контент-менеджером в интернет-магазине за 30к.
Работа была не очень пыльной, в основном она заключалась в публикации статей, которые мы заказывали, создании новых товаров, изучении SEO и съемки видео с обзорами товаров на ютуб.
Но мне это даже нравилось, потому что я мог развиваться сразу в нескольких сферах. А это стоит очень многого.
Стоит ли брать курсы?
На этот вопрос я уже ответил выше. Мне кажется, что в этом нет никакого смысла. Тот же HTML, CSS можно выучить в Solo Learn и по гайдикам на ютубе. Также не забывайте о практике и пытайтесь что-то сделать сами.
Вы можете найти какой-нибудь сайт или же дизайн. И просто пытаться его повторить. По началу будет тяжеловато, но в будущем вам будет открыта дорога и во фриланс, и в офис.
А что изучать после HTML и CSS, чтобы создавать сайты?
А, вот, на этот вопрос у каждого свой ответ. Я очень надеюсь, что в комментариях обязательно найдутся те, кто предложит свои варианты. Но я предлагаю освоить следующее:
1) В том же приложении Solo Learn пройдите курсы PHP и JS;
2) Освойте CMS Wordpress - систему управления контентом, которую использует огромное количество сайтов - от блогов до полноценных интернет-магазинов;
3) Откройте для себя фреймворк Bootstrap, который ускорит вашу фронтенд-разработку в разы за счет уже готовых блоков и стилей;
Если вам понравился мой материал, то можете открыть что-то новое для себя в моем блоге. Также вы можете перейти в мою группу в Вконтактике, а оттуда в беседу сообщества и задать любой интересующий вас вопрос!
<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>
Открыть на CodePen
Больше уроков у меня на канале.
Несмотря на капризы погоды, лето неумолимо приближается. Значит, занятия в спортивном зале или домашние тренировки получится заменить на активности под открытым небом. Собрали для вас товары, которые сделают уличные воркауты интереснее, увлекательнее и полезнее.
Мегамаркет дарит пикабушникам промокод килобайт. Он дает скидку 2 000 рублей на первую покупку от 4 000 рублей и действует до 31 мая. Полные правила здесь.
В компактную поясную сумку поместятся телефон, ключи, кошелек или другие нужные мелочи. Во время тренировки все это не гремит и не мешает, но всегда находится под рукой. Материал сумки прочный и влагонепроницаемый, вещи в ней защищены от повреждений, царапин или пота.
С фитнес-резинкой можно тренировать все группы мышц: руки, ноги, кор, ягодицы. А еще она облегчает подтягивания и помогает мягко растягиваться. В сети можно найти огромное количество роликов с упражнениями разной степени сложности. Нагрузка легко дозируется: новичкам подойдет резинка с сопротивлением до 23 кг, опытным атлетам — до 57 кг. При этом оборудование максимально компактно и поместится даже в небольшую сумку.
Для тех, кому надоели обычные тренировки. Слэклайн — это стропа шириной 50 мм, с помощью которой осваивают хождение по канату. Тренажер учит сохранять баланс, прокачивает координацию и концентрацию, а еще дает отличную нагрузку на спину, руки и ноги.
Настольный теннис — простой в освоении вид спорта, который отлично помогает размяться и тренирует скорость реакции. В комплект входят две ракетки, три мяча, сетка, накладка и чехол — все, что нужно, чтобы поиграть вечером во дворе с другом или устроить небольшие соревнования. Этот недорогой набор подойдет именно для развлечения и веселья, устанавливается почти на любой стол.
Еще один вид спорта, которым можно заниматься, даже не имея серьезной подготовки — бадминтон. С набором от Wish Steeltec вы сможете потренировать силу удара, побегать и просто хорошо провести время. Детали яркие, так что их трудно потерять даже на природе. Леска натянута прочно, ресурса ракеток должно хватить не на один сезон.
Фрисби воспринимается как простое пляжное развлечение. Тем не менее перекидывание друг другу тарелки задействует все группы мышц и развивает скорость реакции. Эта тарелка летит далеко и по понятной траектории — отличный снаряд для начала. Кстати, фрисби — это еще и ряд спортивных дисциплин со своими правилами и техническими сложностями, так что игра с друзьями может перерасти в серьезное увлечение.
Стильный мяч из износостойкой резины отлично подходит для уличных тренировок. Вы сможете поиграть компанией в баскетбол или стритбол или просто отработать броски. При производстве используется технология сбалансированного сцепления: это значит, что снаряд не сбежит от вас и будет двигаться по стабильной траектории.
Футбол — один из самых популярных в России видов спорта. Играя, можно отлично побегать, потренировать меткость и отработать взаимодействие в команде. Футбольный мяч Torres Striker выполнен из качественного полиуретана и резины и выдержит не один десяток матчей, не потеряв упругости. Отличная балансировка и оптимальный размер делают его подходящим как для взрослых, так и для подростков. Он достаточно тяжелый, почти как в профессиональном спорте, так что совсем малышам не понравится.
Пляжный или обычный волейбол? А может быть, пионербол, как в детском лагере? Мяч TORRES SIMPLE COLOR подойдет для любой из этих игр. Камера отлично держит давление, поэтому вам не придется постоянно подкачивать его, а качественные материалы (полиуретан и бутил) сохраняют все характеристики даже при интенсивном использовании.
Многоскоростной велосипед с рамой 19-го размера подойдет как мужчинам, так и женщинам. Это отличный вариант для новичков: модель доступная, удобная. Поможет понять, нравится ли вам велоспорт. Конструкция велосипеда позволяет ездить по дорогам разных типов, поэтому вы сможете перемещаться по городу или отправиться в поход. Есть складной механизм — велосипед с ним легко возить в машине, на электричке и просто хранить в кладовке.
Более продвинутая модель для тех, кто уже оценил прелесть движения на двух колесах. Геометрия велосипеда предполагает вертикальную посадку. Это обеспечивает более удобное положение тела, чем на других байках. В конструкции предусмотрены детали для комфорта и безопасности: пружинная вилка с ходом 100 мм, сервисная подводка тросов и дисковые гидравлические тормоза.
Если вы не фанат велоспорта, но хотите получить свою дозу физической нагрузки, перемещаясь по городу, выбирайте самокат. В модели PLANK Magic 200 есть регулировка руля по высоте, надежные тормоза и прочная увеличенная дека из алюминия. Когда вы катаетесь на самокате, работают мышцы ног, ягодиц, спины и живота, а заодно добираетесь, куда нужно. Если вы решите сделать паузу в тренировках, самокат легко складывается для хранения.
Любая активность на свежем воздухе требует хорошей обуви, специально сделанной для занятий спортом. Яркие кроссовки Hoka RINCON 3 с облегченным весом амортизируют, снижают нагрузку на суставы. Выраженный рельеф подошвы обеспечивает сцепление с поверхностью вне зависимости от того, где проходит тренировка: на специальной площадке, асфальте или грунте.
Легкие женские кроссовки из линейки Clifton подходят для занятий на твердых покрытиях. Дышащий сетчатый верх поддерживает вентиляцию стоп, чтобы можно было тренироваться даже в жару. Подошва из легкой пены EVA гасит силу ударов. Кроссовки беговые, подходят для тренировок на длинных дистанциях.
Во время занятий на свежем воздухе важно защитить голову от перегрева. С этим отлично справится легкая и светлая бейсболка — например, от GLHF. Она удобно сидит на голове, не сваливается и не отвлекает от занятий, благодаря сетке голова меньше потеет. Козырек жесткий и не мнется.
Не забудьте защитить кожу от солнца — чтобы не было мучительно больно на следующий день после тренировки под открытым небом. В этом поможет крем против пигментных пятен с сильной защитой от ультрафиолета SPF50. Водостойкая текстура легко наносится и быстро впитывается, действует два часа — потом крем нужно обновить.
Удобные и стильные солнцезащитные очки защищают глаза благодаря фильтру UV400, который поглощает до 99.99% ультрафиолета. Они выполнены из легких материалов и плотно прилегают к голове. Ударопрочные поликарбонатные линзы с антибликовым покрытием подходят для разных видов спорта.
Используйте промокод килобайт на Мегамаркете. Он дает скидку 2 000 рублей на первую покупку от 4 000 рублей и действует до 31 мая. Полные правила здесь.
Реклама ООО «МАРКЕТПЛЕЙС» (агрегатор) (ОГРН: 1167746803180, ИНН: 9701048328), юридический адрес: 105082, г. Москва, ул. Спартаковская площадь, д. 16/15, стр. 6
Всем доброго утра!
В связи с тем, что пытаемся импортозаместить офигевших по ценам поставщиков на наших российских, решили запилить интернет-магазин (сайт уже есть у нас).
Каждый, кто готов взяться за проект предлагает свою платформу для магазина.
Каждый хвалит свой вариант.
Отсюда возникает вопрос. Какую платформу сейчас лучше выбрать под наши задачи?
Будет каталог всяких кранов, резьбовух, американок с оплатой картой через сайт.
Наличие и цены будут браться из экселевской таблицы (ну или из какой-то таблицы в сети).
Посоветуйте, на какой платформе реализовывать проект?
Какие платежные системы подключать, чтобы было безопаснее для клиентов?
Какие плюсы, минусы, подводные камни?
Картинка из инета, для привлечения внимания)