Скачать "#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - делаем меню"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FpoZf7nGcPIk%252Fmaxresdefault.webp&w=1139&q=75)
Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F98NXs-k-7C4%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F9t97upFqM20%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FCWknrPtDwMk%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FGFLwSBDQj2g%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fg9Mn44C4-J4%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FjNaoXjkfeY8%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FrKfWk9t0i9I%252Fsddefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fu6ByIdwFMYw%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FvEvp4qAxHE8%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F9nKolX3Solw%252Fmaxresdefault.webp&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
всем привет друзья меня зовут илья я00:00:02
приветствую вас на своем канале на00:00:04
котором вы научитесь создавать свои00:00:06
сайты как вы могли заметить курс по00:00:08
основам html и css был завершён поэтому00:00:11
если вы еще не прошли его и сразу00:00:13
перешли на это видео то я рекомендую вам00:00:15
все-таки для начала ознакомиться с ним а00:00:17
уже потом переходить к этому видео но00:00:20
если вы все же решили остаться то в этом00:00:23
видео я специально для вас буду00:00:24
максимально подробно рассказывать о том00:00:26
что девы объясняя все шаг за шагом и так00:00:29
сегодня предлагаю вам сверстать вот00:00:31
такой вот сайт по шаблону ссылку на00:00:33
который я оставлю в описании и сегодня00:00:35
мы сверстаем вот такое царь ресторана00:00:37
давайте пробежимся немного по нему как00:00:40
мы видим он не очень сложный как раз00:00:42
подойдет для первой верстки новом канале00:00:45
уже были видео по верстке где делу очень00:00:48
небольшие сайты сегодня сделаем00:00:49
полноценный сайт также адаптируем его00:00:52
сделаем гамбурге в меню то есть сайт00:00:55
будет смотреться и на телефоне и на00:00:57
компьютере очень достойно ну и в этом00:00:59
видео давайте попробуем сверстать вот00:01:00
этот первую часть home page для начала00:01:03
как обычно создайте папку на рабочем00:01:05
столе я ее уже создал ресторан и откроем00:01:08
ее с помощью brackets наш редактор для00:01:11
кода и так наш редактор открылся давайте00:01:14
сразу разделим нашу область на 2 экрана00:01:17
и создадим первый файл индекс точка html00:01:21
котором будет находиться вся наша00:01:22
разметка также создадим файл со стилями00:01:25
ставим точку css перенесем в правую00:01:27
сторону и создадим обычный скелет00:01:30
документам переименуем тайтл напишем00:01:33
ресторан по-русски и подключим наш файл00:01:36
стилей линк реал равно стал щит и ссылку00:01:42
хорев равно00:01:43
вставил css хорошо00:01:46
и давайте сразу перейдем в папку и00:01:49
откроем index.htm или в браузере пускай00:01:52
он будет тут итак вернемся к макету00:01:54
давайте делать главный экран создадим00:01:57
div с квасом хедер это будет наша шапка00:02:00
сайта который будет располагаться меню00:02:02
логотип и вот идет все кнопки и00:02:05
заголовок хорошо у нас есть header00:02:07
теперь сделаем еще один класс котором00:02:10
будет располагаться наша меню назовем00:02:13
его федерлайн00:02:15
так давайте сделаем логотип увидим то00:02:19
что он у него есть отдельная область00:02:21
перейдем в экспорт и экспортируем как00:02:24
png и перенесем наш логотип в нашу папку00:02:28
переименуем его набежим просто богу00:02:31
сделаем ещё один класс для нашего00:02:34
логотипа назовем его х дорогу в котором00:02:38
мы расположим нашу картинку так и ножи и00:02:41
напишем путь к нашей картинки давайте00:02:44
посмотрим как видим логотип появился00:02:46
хорошо как вы могли бы заметить что все00:02:49
наши элементы находятся на некотором00:02:51
расстоянии от правой и левой части00:02:54
экрана так называемый контейнер давайте00:02:56
узнаем какое расстояние у нас 16600:02:59
пикселей поэтому мы создадим еще один00:03:01
div которую называем контейнер00:03:04
который будет как раз помогать нам а за00:03:07
двигать элементы от правой и левой части00:03:09
экрана напишем наш квас в css и сделаем00:03:13
отступ и как раз пишем селектор00:03:15
мэри-джен первое значение у нас сверху и00:03:18
снизу нам не нужен отступ сверху снизу00:03:20
поэтому пишем 0 пикселей и справа и00:03:22
слева по сто шестьдесят шесть пикселей00:03:24
давайте посмотрим отодвинулся ли наш00:03:26
логотип да как раз этого результата мы и00:03:29
ожидали хорошо логотип у нас есть теперь00:03:32
давайте сделаем главное меню также в оке00:03:36
hader line a super немного сделаем gif с00:03:39
квасом nav и00:03:41
сделаем в хлев укажем звездочку00:03:44
потому что пока мы не знаем куда ведет00:03:46
эта ссылка будем писать главное00:03:49
главное меню а нас и бром00:03:54
так вроде ничего не забыли хорошо ссылки00:03:58
у нас появились пока они конечно не00:04:00
выглядят так как на нашем макете но мы00:04:03
это исправим00:04:04
дальше давайте сделаем иконку корзины00:04:07
выделим карт экспортируемые как png00:04:10
перенесем в нашу папку пишем просто карт00:04:16
выйдем из класса nav сделаем новый класс00:04:19
карт00:04:22
в котором мы сделаем ссылку которая00:04:25
будет кнопкой для нашей корзины00:04:28
то есть мы сделали вот такую иерархию00:04:31
то есть эта ссылка которая кнопка и в00:04:34
которой находится картинка наша как раз00:04:36
таки корзина карт png давайте посмотрим00:04:40
правда не видно сейчас потому что00:04:42
корзина у нас белая но мы можем заметить00:04:44
что на корзину это можно нажать так00:04:47
давайте вернемся к макету нашего и00:04:49
сделано верно фон потому что сейчас нам00:04:51
надо сделать текст белым а мы его не00:04:54
увидим потому что наш фон сайта есть00:04:55
белый цвет поэтому давайте выделим00:04:57
картинку и скачаем и и как jpeg00:05:00
назовем f bb то есть background00:05:03
сделаем встал css наш класс хедер00:05:07
напишем background-image00:05:10
то есть фоновая картинка указом юрл то00:05:13
есть путь до наши картинки богат .00:05:15
джипег если мы обновим страницу то мы00:05:17
увидим вот такой обрезанный вариант что00:05:20
же нам делать дело в том что картинка00:05:22
наша растянулась по размеру наших00:05:24
элементов то есть сейчас у нас элементов00:05:26
тем мало поэтому она не на весь экран00:05:29
поэтому давайте укажем для нашего хедера00:05:31
его высоту то есть хайд мы можем указать00:05:34
авто но можно указать 102 аж что значит00:05:39
ставишь это значит что наш блог будет00:05:41
растягиваться на всю высоту экрана то00:05:44
есть максимальная высота моего монитора00:05:46
как мы видим картинка не очень стала00:05:49
потому что у нее есть белые края по00:05:51
бокам да и картинки повторяются что же00:05:54
для этого делать ну для начала давайте00:05:55
исправим повторяющийся картинки напишем00:05:58
такой селектор как бы ground рипит00:05:59
который позволяет нам не повторять00:06:02
изображение наша прекрасно но теперь00:06:04
наше изображение не на весь экран00:06:07
поэтому давайте напишем селектор00:06:09
background says со значением кавер00:06:11
который означает что наша картинка будет00:06:14
растягиваться на весь монитор равномерно00:06:16
теперь давайте избавимся от наших белых00:06:18
полос для этого мы напишем селектор00:06:21
будем в котором мы укажем virgin со00:06:23
значением 0 потому что по умолчанию00:06:25
каждый браузер выставляет некоторое00:06:27
значение мергена из-за которого мы00:06:30
видели наши белые полосы хорошо теперь00:06:33
выглядит очень даже нормально давайте00:06:35
продолжим верстать и давайте сделаем бок00:06:38
с телефоном возьмем телефон квартиру его00:06:41
как png00:06:43
просто фон напишем скопируем номер00:06:46
телефона выйдем из класса карт потому00:06:49
что мы уже редактируем не корзину00:06:52
сделаем div с квасом фон00:06:56
в нем мы сделаем как раз div с квасом00:07:00
нам бы то есть здесь будет располагаться00:07:04
сам номер телефона и этот номер телефона00:07:07
мы еще обернем ссылку а с хлев равным00:07:10
звездочки то есть чтобы на номер00:07:12
телефона можно было нажать обернем его00:07:15
хорошо номер телефона у нас теперь есть00:07:18
теперь нам надо сделать значок телефона00:07:21
сделан небольшой отступ00:07:24
сделаем div с квасом фон и на ich bin00:07:28
jee в котором мы сделаем как раз так m&g00:07:32
со ссылкой на нашу картинку телефона вот00:07:37
все у нас появилась теперь давайте00:07:39
сделаем текст под номером телефона00:07:41
для этого сделать gif с классом фон00:07:45
текст00:07:47
хорошо текст у нас появился правда он00:07:51
черный и мы его совсем не видим но мы00:07:53
это исправим и сделаем кнопку заказ00:07:55
столика выйдем из нашего класса фон00:07:58
сделаем новый div с00:08:01
квасом btn где сделаем ссылку а 3 равно00:08:05
звездочка и укажем текст нашей ссылке00:08:08
которая будет в будущем кнопкой00:08:12
хорошо базовую разметку мы сделали00:08:15
давайте теперь займемся стилями давайте00:08:18
для начала заметим что что наша главная00:08:20
строка меню немного отодвинута от00:08:22
верхнего края на 50 пикселей а у нас она00:08:26
наоборот прижата для этого мы возьмем00:08:28
наш класс хедер line в котором00:08:30
располагаются все наши элементы меню00:08:33
и сделаем ему внутренний отступ fading00:08:36
топ 50 пикселей00:08:38
отлично теперь наше меню отодвинуть но00:08:41
все наше меню идет столбик друг за00:08:44
другом как же это исправить для начала00:08:46
давайте определимся что мы хотим увидеть00:08:48
мы хотим увидеть чтобы все наши элементы00:08:50
располагались в строку для этого мы кадр00:08:53
войну добавим селектор дисплей со00:08:55
значением flex то есть теперь все наши00:08:58
элементы будут располагаться в линию00:09:00
друг за другом то что нам и надо но мы00:09:03
видим что все наши элементы00:09:05
располагаются криво кто выше кто ниже00:09:07
поэтому давайте исправим таким00:09:09
селектором как a line at emc с помощью00:09:12
которого можно выровнять их все по линии00:09:14
главного элемента вот теперь уже00:09:16
выглядит получше00:09:19
ну сейчас давайте сделаем стелле для00:09:22
нашего меню уберем вот этот синий цвет и00:09:25
сделаем шрифт белым и для того чтобы00:09:29
сделать все наше меню белым мы для00:09:31
каждого элемента а должны придать новый00:09:34
класс чтобы каждому элементу не00:09:36
прописывает новый класс мы можем00:09:38
поставить курсор здесь зажать левый00:09:39
контру и вот таким вот способом мы можем00:09:42
писать одновременно для всех элементов00:09:44
сразу00:09:46
зададим им новый класс на и там00:09:49
скопируем его и давайте отредактируем00:09:52
для начала давайте изменим цвет сделаем00:09:54
его белым повар ффф и уберем00:09:57
подчеркивание это убирается с помощью00:09:59
селектора текст decoration то есть00:10:02
декорирование текста уберем его вовсе00:10:04
опишем нам00:10:06
прекрасно теперь наше меню выглядит00:10:08
очень даже хорошо но00:10:11
как вы можете заметить шрифт тут совсем00:10:15
не совпадает со шрифтом в макете поэтому00:10:18
мы выделим главное и узнаем какой у нас00:10:21
шрифт у нас шрифт open sans давайте его00:10:24
скопирован и скачаем для нашего сайта00:10:27
этот шрифт00:10:28
напишем open sans выберем его и00:10:33
выберем несколько нужных нам шрифтов00:10:37
хорошо теперь у нас появились тут ссылки00:10:39
link которые мы должны скопировать и00:10:42
вставить в текст перед сайтов а также00:10:46
надо скопировать font family open sans и00:10:49
стать его для боди и теперь если мы00:10:52
обновим то увидим что на шрифты уже00:10:54
выглядит более презентабельным как вы00:10:56
можете заметить буквы у нас меню очень00:10:58
тонкие чем на макете поэтому мы выделим00:11:01
один из элементов узнаем его вес то есть00:11:04
white у нас 700 и укажем нашему на fit00:11:08
ему фонд white 700 также давайте сразу00:11:12
узнаем размер шрифта 14 пикселей says мы00:11:15
бежим фонд says размер шрифта 1400:11:18
пикселей вот уже выглядит хорошо как вы00:11:22
могли заметить каждый элемент меню00:11:24
отодвинут друг от друга на некоторое00:11:26
число пикселей00:11:27
поэтому мы каждому наш и тому зададим00:11:31
мейджин райт 25 пикселей в среднем то00:11:34
есть теперь наши элементы будут толкать00:11:36
друг от друга на 25 пикселей хорошо00:11:39
теперь давайте разберемся сюда дают00:11:42
полосой которая есть у нашей корзины00:11:46
этого мы очень легко можем достичь с00:11:48
помощью такого селектора как border00:11:50
давайте для начала узнаем какому классу00:11:53
принадлежит наша корзина д-класс карт и00:11:56
мы сделаем border но не обычным border а00:12:00
мы сделаем border райт то есть какой00:12:02
стороны нам надо сделать эту границу00:12:04
давайте посмотрим выделим ее и скопируем00:12:08
то что нам здесь предлагают00:12:11
хорошо у нас некоторая палочка уже00:12:13
появилась00:12:16
но она находится очень близко к нашей00:12:18
корзине поэтому давайте сделаем поединка00:12:20
райт 10 пикселей примерно чтобы немного00:12:23
отодвинуть ее да мы видим повозка00:12:25
маленькая а у нас она должна быть00:12:27
большая поэтому мы нашему карту зададим00:12:30
height 50 пикселей00:12:32
теперь наша корзина переместилась очень00:12:35
высоко и это мы можем исправить для00:12:37
этого мы наши картинки пропишем класс00:12:40
карт и m&g скопируем его00:12:45
напишем и придадим такой сектор как00:12:48
позиций со значением абсолют то есть00:12:51
теперь наша картинка будет располагаться00:12:53
как я угодно она не будет ни от кого00:12:55
зависеть и сделаем ей отступ сверху00:12:58
напишем топ 20 пикселей и если мы00:13:01
посмотрим и как мы видим наша корзинка00:13:04
совсем уехала вверх чтобы это исправить00:13:07
давайте карту зададим позиций со00:13:10
значением рельеф то есть общий блок карт00:13:13
будет родителям для нашей маленькой00:13:16
корзинке карт имидже и теперь мы видим00:13:19
то что наша картинка сместилась уже00:13:22
ближе к центру но давайте немного00:13:23
отредактируем это напишем немного00:13:25
поменьше например 18 пикселей также мы00:13:28
видим что картинка заезжает своим правым00:13:30
боком на эту линию поэтому сделаем00:13:33
небольшой отступ справа напишем райт 300:13:36
пикселя будет достаточно хотя нет00:13:39
давайте возьмем больше 7 вот теперь это00:13:42
выглядит уже получше хорошо корзинка у00:13:44
нас есть теперь давайте займемся блоком00:13:47
с номером телефона00:13:49
для начала давайте украсим его в белый00:13:51
для этого мы нашей ссылки с номером00:13:54
сделаем класс просто нам напишем00:13:58
скопируем ставим и сделаем color ффф и00:14:03
также сразу берем текст не крышу то есть00:14:06
нижнее подчёркивание со значением нам00:14:09
хорошо наш номер теперь белый и сделал00:14:12
его немного потолще потому что потому00:14:15
что толщина букв у нас совсем другая00:14:16
набежим фонд elite 700 как и есть макете00:14:20
хорошо теперь давайте займемся текстом00:14:23
он нас 400 и 14 пикселей00:14:27
скопируем класс ставим напишем фон says00:14:32
14 пикселей и фонд weight 400 а также00:14:36
укажем color белый00:14:39
хорошо теперь и текст нам виден теперь00:14:42
давайте сделаем номер телефона и значок00:14:45
телефона на одной строке для этого00:14:47
давайте найдем подходящий нам блоки это00:14:50
von g и нам бы объединим их в один новый00:14:54
div с классом00:14:56
phone holder00:14:59
отвернём серым покрасивее теперь00:15:03
скопируем класс phone holder и для того00:15:06
чтобы наши элементы сделать строку как00:15:09
мы это делали с меню мы зададим phone00:15:11
holder у дисплеев x и сделаем сразу его00:15:15
in altum по центру чтобы не мучиться с00:15:17
выравниванием хорошо теперь это очень00:15:20
даже похоже выглядит но текст свяжитесь00:15:23
с нами для бронирования идет в одну00:15:25
строку а на шаблоне он должен идти в две00:15:27
строки поэтому мы после для добавим00:15:30
такой так как б-р как мы видим это00:15:34
работает и завершающим этапом мы сделаем00:15:37
кнопку оранжево мы можем на него00:15:40
кликнуть скопировать цвет и00:15:44
сделан для нашей кнопки новый класс00:15:46
бутан00:15:48
напишем его напишем backgroundcolor наш00:15:52
цвет посмотрим что изменилось как мы00:15:55
видим кнопка стала оранжевый и текст00:15:58
совсем не тот что должен быть поэтому00:16:00
скопируем текст я немного ошибся и00:16:02
ставим его00:16:05
так так будет лучше теперь давайте00:16:07
сделаем цвет нашего текста кнопки белым00:16:11
и уберем подчёркиванием текст decoration00:16:15
нам00:16:17
хорошо но наши буквы совсем близко00:16:21
прижаты к краям кнопки поэтому давайте00:16:24
узнаем какие внутренние отступы есть в00:16:26
нашей кнопки это 14 и 15 пикселей00:16:28
поэтому мы напишем padding внутренний00:16:31
отступ сверху и снизу по 14 пикселей и00:16:33
справа и слева по 18 как мы видим кнопка00:16:36
очень даже и похоже на то что у нас00:16:39
только давайте сделаем буквы немного00:16:41
потолще набежим фонд 80000:16:44
хорошо все элементы меню у нас готово00:16:48
теперь давайте добавим пространство00:16:50
между ними чтобы они не были так склеены00:16:53
друг с другом поэтому мы вернемся к00:16:56
нашему классу федерлайн и напишем такой00:16:59
селектор как justify контент00:17:01
со значением space around теперь наши00:17:05
элементы будут располагаться на00:17:06
небольшом расстоянии друг от друга00:17:08
принципе то что нам и нужна теперь00:17:10
давайте сделаем так что при на воде наши00:17:13
и мышки на кнопки они меняли свой цвет00:17:16
переходим к нашему сердцу рн of и там00:17:18
пишем его ещё раз на это только теперь00:17:21
добавляем псевдо-класс hover00:17:24
то есть все что мы укажем в этих00:17:26
фигурных скобках будет происходить00:17:28
только в тот момент когда мы наводим00:17:30
мышкой на наше меню мы будем менять цвет00:17:34
пишем color и давайте будем менять его00:17:37
на красный00:17:40
хорошо это работает но нет плавности00:17:43
поэтому мы нашему главному нафы тому00:17:47
напишем такой сектор как транзишен00:17:50
укажем свойство которое будем менять00:17:54
укажем продолжительность пускай 0 300:17:57
секунды и укажем свойства линер и00:18:01
теперь при на воде на наши элементы они00:18:05
плавно меняют свой цвет также давайте00:18:08
сделаем и для номера телефона найдем его00:18:11
это у нас нам напишем нам с00:18:15
псевдо-класса mpower и можем даже00:18:18
скопировать все что мы писали00:18:20
ну и вот теперь наш номер меняется00:18:22
плавно и давайте для нашей кнопки заказ00:18:25
столика тоже сделаем плавный переход00:18:27
цвета00:18:28
найдем ее это бутон опишем бутон с00:18:32
псевдо-класс hover00:18:34
скопируем бэкграунд ковер и давайте00:18:38
будем менять его на темно-оранжевый и00:18:41
также скопируем transition и ставим00:18:44
только сделаем немного покороче 0 200:18:47
секунды только поменяем color на00:18:50
background color00:18:52
ну и как вы видите кнопка работает00:18:56
хорошо давайте пока на этом остановимся00:18:58
сегодня мы стали начала главной странице00:19:01
так называемую шапку а следующих видео00:19:04
мы закончим сайт адаптируем его и зальем00:19:07
на хостинг таким образом мы вместе00:19:09
пройдём весь путь создание сайта00:19:11
буквально с нуля я надеюсь видео вам00:19:13
понравилось поэтому ставьте лайки00:19:15
оставляйте ваши комментарии и спасибо за00:19:17
ваш просмотр и до новых встречОписание:
Привет, друг! Это новая тематика на канале - Верстаем вместе, где ты точно так же можешь повторять за мной шаг за шагом каждое действие, чтобы набраться опыта и в будущем верстать все более сложные сайты! В этом видео я показывай шаг за шагом процесс создания сайта, на этот раз это сайт ресторана. Это только одно из множества видео, дальше будет окончательная верстка, адаптация под мобильные устройства и загрузка на хостинг. То есть мы пройдем вместе весь путь создания сайта. А чтобы не пропустить новые части подпишись! Все ссылки: Ссылка на шаблон: https://www.figma.com/file/dVBa7wx6E0y2wiSODQdhut/Untitled?node-id=0%3A1 Ссылка на проект: https://drive.google.com/file/d/1uLMXW4cQpea745PcYPhhdAInaJUUrgwO/view?usp=sharing Ссылка на шрифты: https://fonts.google.com/ Социальные сети: Телеграм канал: https://t.me/educatter Инстаграм: https://www.facebook.com/unsupportedbrowser ВК: https://vk.com/banderolo Нужен сайт? Переходи: https://www.catter.ru/ Поддержать канал: https://boosty.to/educatter Не забудь подписаться!
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - делаем меню"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - делаем меню" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - делаем меню"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - делаем меню" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - делаем меню"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - делаем меню"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.