Верстка сайта - HTML,CSS нововведения которые нужно знать
Рет қаралды 65,118
Күн бұрынFront end развивается с каждым днем, html css тоже решили не оставлять в стороне. Верстка сайта так же развивается и внедряются нововведения Html и CSS, которые делают верстку сайта для начинающих более удобной и быстрой. Верстка сайта с нуля с данными нововведениями покажется просто легчайшей, ведь во многих моментах не придется задействовать JavaScript, а ограничится стандартными тегами html и стилями CSS. В данном видео мы разберем как работают нововведения, и на какие действительно стоит обратить внимание.
0:00 - Верстка сайта html css нововведения
1:08 - Subgrid
2:30 - Директива Supports css
3:10 - Flexbox gap
4:15 - Тег Details
5:12 - Тег Output
6:27 - Тег Datalist (autocomplete)
7:50 - Медиа запросы стали удобнее
8:50 - Переменные CSS
@progerlife6690 3 жыл бұрын
думал что изучил HTML5 CSS3 - пару зыв макетов сверстал...Оказывается я нифига не знаю...как говориться век живи век учись..Спасибо за ролик!Лайк!! Не зря подписался на канал!)
@King-bg9yc 3 жыл бұрын
Вроде бы выучил сss и html, но походу понимаю ещё не хрена выучил. Большое спасибо за новую информацию
@SuprunAlexey 3 жыл бұрын
Все для вас
@battalov_u 3 жыл бұрын
Что бы избавится от таких сомнении как можно быстрее, непожелей деньги на курсы по вёрстке, ну или сам обучайся, только это долго будет, но обязательно будет)) главное не съехать.
@NikitaRykov-uj1dw 3 жыл бұрын
@@battalov_u Ты ещё какой-нить гикбрейнс прорекламируй)))
@battalov_u 3 жыл бұрын
@@NikitaRykov-uj1dw ))) не я даже не собирался, просто искренне желаю знании челу, вот и дал совет.
@stszn 3 жыл бұрын
@@NikitaRykov-uj1dw да любое может подойти, ну конечно не гикбрейнс, но все же Курсы тебя направляют в обучении, в соло сложно все самому построить
@user-po5ih2pj5h 3 жыл бұрын
Спасибо, для меня как для новичка в вёрстке очень нужно такое!
@SuprunAlexey 3 жыл бұрын
Всегда пожалуйста ☺️
@LobanovSpace 3 жыл бұрын
Да
@webartem 3 жыл бұрын
Не забудьте учитывать поддержку через caniuse
@SuprunAlexey 3 жыл бұрын
@@webartem по моему раз 5 в видео это сказал))
@alt3rka 3 жыл бұрын
Новая инфа - всегда здорово и важно, особенно для новичков, таких как я) И вообще очень приятный вы человек, рассказывается ладно и понятно, мало таких нынче))
@SuprunAlexey 3 жыл бұрын
Работаем))
@LobanovSpace 3 жыл бұрын
Поддерживаю
@Arturovich 3 жыл бұрын
Давно уже не занимаюсь версткой, но эти нововведения просто шикарны :)
@yaroslav8717 3 жыл бұрын
Крайне интересные фишки, спасибо!
@user-xr4vl2rd4w 3 жыл бұрын
Как раз только начал изучение HTML&CSS, так что актуально)) Спасибо💪
@user-ob3hn7fh4u Жыл бұрын
Спасибо за нововведение, было очень познавательно
@MultiPalaz 3 жыл бұрын
Профессия html-программист скоро станет реальностью
@SuprunAlexey 3 жыл бұрын
Вряд ли)
@DB-be7rs 3 жыл бұрын
Очень круто, спасибо за информацию))
@TheDaemonL 3 жыл бұрын
ништяк. flexbox gap лучшее из этого
@uszakow 3 жыл бұрын
Круто! Крайне полезное видео!
@XSau_Alyki 3 жыл бұрын
Спасибо! Узнал кое-что для себя, и в целом, было интересно смотреть.
@SuprunAlexey 3 жыл бұрын
Я рад 😊 будет ещё много полезного, подписывайтесь)
@4493005 3 жыл бұрын
Спасибо, как всегда супер. Твой голос уже ассоциируется с чем-то полезным)
@SuprunAlexey 3 жыл бұрын
Ого, вот это круто!
@romanmomot1341 3 жыл бұрын
Дуже інформативно, дякую
@jamesrodrigez9548 3 жыл бұрын
Очень интересно как для новичка !
@user-in8tn6ep1l 3 жыл бұрын
Отличное видео, спасибо. Про тег Datalist не слышал до этого
@SuprunAlexey 3 жыл бұрын
А тут пишут что уже старый)
@lexluter90 3 жыл бұрын
Спасибо, очень хороший канал, смотрю каждый видос
@SuprunAlexey 3 жыл бұрын
Спасибо !!
@mybroadcoastyourself Жыл бұрын
Крутое видео! Спасибо! Я не новичок, но долго была не в теме!
@aleksandryushka9571 3 жыл бұрын
Вау. Флекс расширился. Это круто. Спасибо за видео.
@SuprunAlexey 3 жыл бұрын
Всегда пожалуйста
@user-bo6zf7ip7p 3 жыл бұрын
Очень познавательно, надо отметить
@user-dp6vm3iu9p 3 жыл бұрын
Спасибо за обзор. С flex-gap и новыми форматами медиа-запросов будет удобнее работать.
@SuprunAlexey 3 жыл бұрын
Определенно
@vasya8441 3 жыл бұрын
хорошие уроки, побольше таких делай, спасибо
@SuprunAlexey 3 жыл бұрын
Хорошо, спасибо
@leoniddzhabiev 3 жыл бұрын
Круто ! Ты очень полезный
@alex_lin16 3 жыл бұрын
Два нововведения не знал. Like for the video)
@svhanz 3 жыл бұрын
А-бал-деть!!! Спасибо за информацию!
@SuprunAlexey 3 жыл бұрын
Не ожидали? А вот так вот 😄
@BoffkaBoffka 3 жыл бұрын
Очешуеть! СПАСИБО! ...полезная выжимка!
@john1989666 3 жыл бұрын
Шикарно
@MrMakaron4ik 3 жыл бұрын
Реально круто, особенно summary
@SuprunAlexey 3 жыл бұрын
А остальное?
@twainprod 3 жыл бұрын
Привет! Спасибо за видео! Уже знал про output, datalist и переменные css, остальное для меня что-то новенькое! Очень рад, что появились flexbox-gap! Details тоже супер-элемент, теперь можно делать спойлеры без JS. Лайк поставил!
@mrakcw 3 жыл бұрын
Не только спойлеры, а все что угодно) хоть дропдаун, хоть аккардион, хоть бургер)) Вариантов много)) Универсальный тег)
@danys4740 3 жыл бұрын
Где-то в параллельной вселенной: HTML6 стал самым удобным и быстрым языком программирования, он вошёл в топ 10!
@SuprunAlexey 3 жыл бұрын
В соседней галактике 😄👌🏻
@HolyMasster 3 жыл бұрын
Где-то в параллельной вселенной: люди наконец поняли разницу между programming language и markup language и перестали называть html языком программирования
@SuprunAlexey 3 жыл бұрын
@@HolyMasster не в этом столетии
@danys4740 3 жыл бұрын
@@HolyMasster Рофл не понял?
@LobanovSpace 3 жыл бұрын
Язык вёрстки
@dchaykov 3 жыл бұрын
Инфа полезная для тех, кто только изучает или давно не следил на новвоведениями. Хотелось бы видео с развернутым ответом (с примерами) на тему: зачем в CSS нужен одновременно и флекс и грид, если гриды выглядят более мощным инструментом. В каких случаях имеет смысл использовать флексы, в каких гриды.
@SuprunAlexey 3 жыл бұрын
Их даже можно использовать вместе
@proud506 3 жыл бұрын
Да уж, век живи век учись, спасибо))
@MikhailRomantsov 3 жыл бұрын
Мне из этого больше всего нравится :root. Для меня это просто охрененно. Можно будет подгружать в том же реакте какой-нибудь root-файл CSS и использовать его для всех CSS файлов
@Anatoldev 3 жыл бұрын
Очень интересно!
@SuprunAlexey 3 жыл бұрын
Это хорошо
@maksimrackomin6424 3 жыл бұрын
Отличное видео!!!
@SuprunAlexey 3 жыл бұрын
Спс
@tattoo-5210 3 жыл бұрын
Уже попахивает языком программирования а не просто разметкой)))
@namirGO 3 жыл бұрын
круто! спасибо)
@ShortsPageTech 3 жыл бұрын
*Супер но если возможно снимайте видео про верстку сайтов сложных😊👍💪*
@SuprunAlexey 3 жыл бұрын
На это нужно время
@ShortsPageTech 3 жыл бұрын
@@SuprunAlexey ну даа но будет нам хорошо и вам💲💸💷💶💴💵
@eestpavel 3 жыл бұрын
Последний способ юзаю сам и на самом деле очень классная вещь особенно если разные цветовые палитры (например, для темной темы и светлой)
@newfilms7524 3 жыл бұрын
Круто спасибо )))
@yberpoc 3 жыл бұрын
Гениально🤯
@SuprunAlexey 3 жыл бұрын
Все гениальное просто!
@oleksandrploskovytskyy1520 3 жыл бұрын
топчик, спасибо!
@SuprunAlexey 3 жыл бұрын
Класс
@uaplatformacomua 3 жыл бұрын
Супер🥑
@prostoez3513 3 жыл бұрын
Ух, крутые фишки :)
@SuprunAlexey 3 жыл бұрын
Весьма неплохие
@igorwagner7176 3 жыл бұрын
Лайк однозначно! спасибо Автор куда пропал?(
@LobanovSpace 3 жыл бұрын
Отлично, как раз надо сайт переделать
@SuprunAlexey 3 жыл бұрын
Переделай переделай
@o_petrushchak 3 жыл бұрын
Крутяк !!Дякую
@pavlosalnikov981 3 жыл бұрын
Super info
@SuprunAlexey 3 жыл бұрын
Гуд
@ska32com 3 жыл бұрын
спасибо большое
@ValueLevit 3 жыл бұрын
Чётко
@KachinVictor 3 жыл бұрын
Круто! Ново! Не знал...
@SuprunAlexey 3 жыл бұрын
Полезно
@NeoJohnSmit 3 жыл бұрын
Круто)
@SuprunAlexey 3 жыл бұрын
Классно
@hutoryanin 3 жыл бұрын
*Л. а. й. к. о. с.* за видос.
@SuprunAlexey 3 жыл бұрын
Спасибос за лайкос
@hutoryanin 3 жыл бұрын
ы)
@astarkmn 3 жыл бұрын
Flex-gap. Наконец-то таки свершилось 🤘. Кстати реализация бургер меню с помощью summary-details это хорошая идея или не совсем?
@SuprunAlexey 3 жыл бұрын
Хорошая
@durko_o 3 жыл бұрын
datalist - имба
@vrombo 3 жыл бұрын
Вараяблы без программирования это круто. Как и математика. Лет 10 назад мы это в курилке предсказывали и вот наконец-то.
@SuprunAlexey 3 жыл бұрын
Дожили 😃
@hannasavostianova7155 3 жыл бұрын
Круто! ОЧень полезное видео. относительно недолго в верстке и эта информация была новой. Очень понравился тег ! Осталось додумать как скрыть треугольничек (наверно с помощью псевдоэлементов дорисовать что-то под цвет фона) и вообще незаменимая вещь) Такими темпами скоро джаваскрипт не так уж и нужен будет)))
@pauld.4516 3 жыл бұрын
datalist, я думаю, очень удобная будет! А переменные css знал и использую безумно удобная штука! Раньше так только на стадии дэва с препроцессором можно было использовать, а теперь и в обычном! Ну не круто ли!)))
@greatthanks9308 3 жыл бұрын
Интересно, а мой комментарий залайкает автор?)) (Пост скриптум - ps. Видео полезное и думаю Ваш канал будет развиваться и возможно 500.000 подписчиков не за горами)
@snazzy-jugle2230 3 жыл бұрын
Подскажите плз новичку, какой теперь смысл с LESSa, если раньше там был удобен лично мне именно возможность переменных. Ну кроме визуально более аккуратного кода. Какие еще преимущества дает LESS?
@WaReZoRSC2TV 3 жыл бұрын
Оххх братан спасибо за переменные в css, этож жопа как удобно шрифты цвета и прочее юзать без препроцессоров, конечно если я ничего не напридумывали сверху 😋
@victormog 3 жыл бұрын
Препроцессоры - это не только переменные. Хотя да, для курсовой они не нужны...
@_Fantom_. 3 жыл бұрын
Ну переменные в css уже довольно давно, row-gap и column-gap - по-моему сравнительно недавно появились, а в остальном очень познавательно...
@olegbilko3683 3 жыл бұрын
Может скоро сайты можно будет создавать только на HTML и CSS?))) Спасибо за видео!
@LectorWeb 3 жыл бұрын
плохо то что у flexbox gap поддержка дохленькая еще, остальные уже давно работают, а так прикольно. Вообще нововведения в верстке это классно, не то что раньше, лет по 5-7 ничего не менялось, но иногда их поддержка растягивается на годы и это не есть хорошо конечно
@casuale1200 3 жыл бұрын
круто я не знал что есть переменные в css
@SuprunAlexey 3 жыл бұрын
Давненько уже
@casuale1200 3 жыл бұрын
@@SuprunAlexey ну я просто css много не использовал и много не разбирался в css
@-shakirov 3 жыл бұрын
Gap‘ы решают проблему когда при свойстве flex-wrap: wrap у флексов появляются внутренние отступы (по краям строк слева и справа) ? Типа отрицательным значением gap задать. Потому что если пропишешь, например, justify-content:space-between он то их конечно раскидает по краям, но нижняя строка, которая вмещает 5 элементов и состоит например из 3 элементов будет отображаться иначе - там два элемента встанут по краям а один по центру. Это когда посадочную страницу на портал верстаешь там задана ширина контентной зоны допустим 1220px. А у тебя эти внутренние отступы по краям ещё сжимают контент). Максимум че можно сделать чтобы со всех сторон одинаково было - обёрткам блоков прописать margin : 0 auto. Мб кто другое решение предложит ?
@andreynesterov9117 3 жыл бұрын
А где ты берёшь новую информацию ?) исключительно документацию или есть ещё доп.источники?
@SuprunAlexey 3 жыл бұрын
Есть
@vourlake1780 3 жыл бұрын
Лайк
@SuprunAlexey 3 жыл бұрын
И подписка!
@user-ys2cw1jo7m 3 жыл бұрын
Важная деталь можно ли стилизировать те все HTML новинки
@confymarlow8616 3 жыл бұрын
Хотел спросить у вас как у опытного веб девелопера - как я могу настроить систему "пополнения баланса" на своем сайте?? Буду рад любому ответу 🙃
@MrMakaron4ik 3 жыл бұрын
А как стилизовать треугольник у тега summary?
@user-tz4il1vj8i 3 жыл бұрын
Не знал о многих из тегов, спасибо! Может го чат на js например
@SuprunAlexey 3 жыл бұрын
Круто 👍🏻
@Kovju Жыл бұрын
Здравствуйте. У вас раньше на канале при запуске был ролик, и там была классная музыка. Можно ссылку этого видео плз. Там выходило вроде Web developer vlog и остальная инфа кто вы. Спасибо
@SuprunAlexey Жыл бұрын
Трейлер канала?
@Kovju Жыл бұрын
@@SuprunAlexey да, все верно, музыка классная там была
@user-zf2or8ww5b 3 жыл бұрын
Очень полезно, только когда официально были добавлены эти нововведения?
@SuprunAlexey 3 жыл бұрын
Ну посмотрите точные даты на официальном сайте
@wlarcz 3 жыл бұрын
Тег details сложно назвать нововведением. Летом 2019 года я его точно использовал. Был такой кейс, - нужен был раскрывающийся/скрывающийся контент. Хотел его делать на JS, начал гуглить и нашел такой тег. Но все равно спасибо за другую инфу, надо будет затестить flexbox gap.
@SuprunAlexey 3 жыл бұрын
Тут смотрят многие кто в 2014 html выучил и забыл, так вот для них точно нововведение. Но я кстати думал details это 2020 год
@mrakcw 3 жыл бұрын
@@SuprunAlexey details уже давно появился)) Очень классный тег) можно как угодно с ним извращатся)
@pepelac128 3 жыл бұрын
Осталось подождать пару лет пока все основные браузеры это научатся понимать.
@artemkuleshov1456 3 жыл бұрын
Все класс, но, для справки, слова fruits не существует. Fruit и в единственном и во множественном числе😉
@vladwolf444 3 жыл бұрын
Слово fruits как раз существует, имея просто другой подтекст. Гугл и словари в помощь.
@serg1f437 3 жыл бұрын
В каком-нибудь less переменные конечно легче задавать и вызывать, но тут можно без компилятора, очень здорово. А кто знает, можно несколько свойств записать в переменную и каким-то селекторам одной строчкой задавать несколько стилей?
@SuprunAlexey 3 жыл бұрын
Нет
@grabdmitry 3 жыл бұрын
Как человек пришедший с верстки для бумаги в верстку для экранов, могу лишь сказать что в html+css работа с типографикой и разметкой сделана на костылях и продолжает обрастать новыми.
@SuprunAlexey 3 жыл бұрын
Думаю доработают
@irodger_shorts 3 жыл бұрын
Заходишь такой в 2021-м году в ютуб, а тебе говорят - чувак, оказывается details (появились в хроме в 2011-м году) и css-переменные(в фаерфоксе с 2014-го) это нововведение! Details можно в гитхабе в маркдауне юзать, в остальных случаях вы скорее всего будете юзать решение с использованием js
@SuprunAlexey 3 жыл бұрын
Так вы почитайте, процентов 95 вообще про это не знает))))
@irodger_shorts 3 жыл бұрын
@@SuprunAlexey да, видел коменты, дичь какая-то, дальше дива люди редко заглядывают) хтмлбука, царство ему небесное, на них нет!
@vgenm2457 3 жыл бұрын
@@irodger_shorts Так большинства влом читать, легче видосик посмотреть . Это ж мозги напрягать надо .
@MyWebMyLife 2 жыл бұрын
А точно ли "новые" медиа запросы работают именно так?)) Я попробовал вот так и не сработало) @media (120em
@olehb629 3 жыл бұрын
а можно ли кастомизировать option внутри datalist ?
@SuprunAlexey 3 жыл бұрын
Можно
@ybogij 3 жыл бұрын
Datalist прям вообще отличная штука. Нужно было чёт придумать с возможностью поиска и ВУАЛЯ! Уже есть такая фича! Правда пришлось жс скриптик писать, чтобы пересылать не то, что отображается..
@SuprunAlexey 3 жыл бұрын
Пересылать?
@ybogij 3 жыл бұрын
@@SuprunAlexey на фронте показывал код + описание, а на бэк высылал только код.
@SuprunAlexey 3 жыл бұрын
@@ybogij понял
@Theonelasthero 3 жыл бұрын
Свой первый макет верстал на details. Вроде бы он не новый
@SuprunAlexey 3 жыл бұрын
Мало кто о нем знает)
@user-uh2wu8oo2f 3 жыл бұрын
Ему уже минимум года три, но его практически никто не юзает
@user-cn5ir5wx4n 3 жыл бұрын
Скоро все препроцессорные фишки будут в css из под коробки. И HTML наполнится функционалом, которым обладают современные фреймворки. Например, интерполяция уже реализована через тэг output. Это неплохо..
@SuprunAlexey 3 жыл бұрын
Это круто я бы сказал
@narutominer 3 жыл бұрын
@media добавляет какие-то стили в зависимости от ширины экрана. А как сделать тоже же самое только в зависимости от родительского дива а не всего экрана? может кто знает?
@SuprunAlexey 3 жыл бұрын
Просто в CSS
@Kovju Жыл бұрын
сразу когда заходишь на канал он появлялся
@vladron7820 3 жыл бұрын
Ребят, подскажите какую лучше прогу скачать, чтоб написать код который нужен для создания сайта?
@ArabicLang.online 3 жыл бұрын
Редактор кода что ли? VS Code для фронтендеров бесплатный и крутой от Microsoft. Есть ещё платные всякие, но раз такой вопрос задаешь, значит, начинающий и VS Code вариант отличный.
@vladron7820 3 жыл бұрын
@@ArabicLang.online спс
@user-di5fy9gu6x 3 жыл бұрын
Подскажите кто нибудь, есть ли перенасыщение рынка frontend разработчиков сейчас и насколько оно большое? Как человеку творческому, очень интересна именно эта область программирования, но вижу, что есть огромное количество спецов и в разы больше людей, которые учатся. Можно ли будет потом найти работу и проекты? Не хочется быть одним из 100 кандидатов на 1 вакансию или сидеть на фрилансе, где невозможно взять какой либо заказ. Спасибо, если кто ответит
@SuprunAlexey 3 жыл бұрын
Уже лет 7 задают этот вопрос:)
@andreysergeevich8050 3 жыл бұрын
Видать на него нет ответа...
@Aziiim 2 жыл бұрын
Что учить в самом начале чтобы было легче? JavaScript, CSS, HTML? С чего начать?0_0
@jasonvoorhees8377 2 жыл бұрын
Однозначно в таком порядке HTML CSS JS
@user-gl3if9cw4i 3 жыл бұрын
Настолько ли крута и важна вёрстка с помощью grid ? просто я обычно использую отступы.
@SuprunAlexey 3 жыл бұрын
Очень крута
@alvcode3764 3 жыл бұрын
Конечно важна, но я бы пока еще не использовал grid, все-таки существуют еще пользователи с дремучими браузерами. А вот flexbox использовать точно не помешало бы
@SuprunAlexey 3 жыл бұрын
@@alvcode3764 согласен
@EugenIwanow 3 жыл бұрын
@@alvcode3764 в ие11 боле менее есть поддержка. Так что можно использовать.
@alvcode3764 3 жыл бұрын
@@EugenIwanow в IE да, но все остальные только с 2017 года, если память не изменяет. Конечно, у абсолютного большинства уже все норм, но у меня есть сервис, которым пользуются люди и статистика показывает, что есть люди, которые заходят с chrome аж 26 версии, safari 5 и 6 версии и т.д, еще есть такие люди
@crocus161 3 жыл бұрын
Все круто, но по-моему details уже был
@SuprunAlexey 3 жыл бұрын
Круто
@victorchilari 3 жыл бұрын
Переменные тоже😅
@TheDaemonL 3 жыл бұрын
@@victorchilari переменные вроде только в препроцессорах были, не?
@user-xr8uu2ny3g 3 жыл бұрын
@@TheDaemonL нет, на чистом css они уже полгода - год точно
@HolyMasster 3 жыл бұрын
Видео посмотрел, спасибо, а где нововведения?
@SuprunAlexey 3 жыл бұрын
Ахах, ясно
@user-iy5sn5bt5k 3 жыл бұрын
Давай Курсы Про Laravel
@SuprunAlexey 3 жыл бұрын
Может быть, но на канале есть
@user-iy5sn5bt5k 3 жыл бұрын
@@SuprunAlexey да можно новую тк 8 версия вышла или можешь такой видео например магаин за час на ларавел
@deastortion 3 жыл бұрын
Flex gap почти не поддерживается браузерами, есть альтернативы?
@SuprunAlexey 3 жыл бұрын
Ну ждите, гэпы на гридах:)
@deastortion 3 жыл бұрын
Полагаю еще не скоро завезут ... Легче в стаковерфлоу заглянуть
@mrakcw 3 жыл бұрын
Details - не новинка, использую его для оптимизации и исключения js в проектах
@user-pd3qu2ne3j 3 жыл бұрын
Всем привет Объясните пожалуйста,почему все не советуют использовать специальные платформы для создания сайтов.Напримкр тот же самый WordPress Можете пожалуйста объяснить,тк в вёрстке я новичков,я больше по веб
@King-bg9yc 3 жыл бұрын
Для увеличения скорости и облегчения работы
@SuprunAlexey 3 жыл бұрын
Ну там смотря какой сайт делать и для каких целей
@skeelo3157 3 жыл бұрын
Datalist был
@goldplay99 3 жыл бұрын
я извиняюсь, но я вот не шарю в html, но details и summary несколько лет, не?
@SuprunAlexey 3 жыл бұрын
Мало кто использует и знает
Фрілансер по життю
Рет қаралды 1 МЛН
Web Developer Blog
Рет қаралды 315 М.
byArto
Рет қаралды 26 М.
TheSimplySpace
Рет қаралды 85 М.