Верстка сайта - HTML,CSS нововведения которые нужно знать
HTML-код
- Опубликовано: 16 май 2024
- 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
Вроде бы выучил сss и html, но походу понимаю ещё не хрена выучил. Большое спасибо за новую информацию
Все для вас
Что бы избавится от таких сомнении как можно быстрее, непожелей деньги на курсы по вёрстке, ну или сам обучайся, только это долго будет, но обязательно будет)) главное не съехать.
@@battalov_u Ты ещё какой-нить гикбрейнс прорекламируй)))
@@NikitaRykov-uj1dw ))) не я даже не собирался, просто искренне желаю знании челу, вот и дал совет.
@@NikitaRykov-uj1dw да любое может подойти, ну конечно не гикбрейнс, но все же
Курсы тебя направляют в обучении, в соло сложно все самому построить
Спасибо, для меня как для новичка в вёрстке очень нужно такое!
Всегда пожалуйста ☺️
Да
Не забудьте учитывать поддержку через caniuse
@@webartem по моему раз 5 в видео это сказал))
Новая инфа - всегда здорово и важно, особенно для новичков, таких как я)
И вообще очень приятный вы человек, рассказывается ладно и понятно, мало таких нынче))
Работаем))
Поддерживаю
думал что изучил HTML5 CSS3 - пару зыв макетов сверстал...Оказывается я нифига не знаю...как говориться век живи век учись..Спасибо за ролик!Лайк!! Не зря подписался на канал!)
Как раз только начал изучение HTML&CSS, так что актуально)) Спасибо💪
Спасибо, как всегда супер.
Твой голос уже ассоциируется с чем-то полезным)
Ого, вот это круто!
Спасибо!
Узнал кое-что для себя, и в целом, было интересно смотреть.
Я рад 😊 будет ещё много полезного, подписывайтесь)
Вау. Флекс расширился. Это круто. Спасибо за видео.
Всегда пожалуйста
Очень круто, спасибо за информацию))
Крайне интересные фишки, спасибо!
Отличное видео, спасибо. Про тег Datalist не слышал до этого
А тут пишут что уже старый)
Спасибо, очень хороший канал, смотрю каждый видос
Спасибо !!
Круто! Крайне полезное видео!
Спасибо за нововведение, было очень познавательно
ништяк. flexbox gap лучшее из этого
Спасибо за обзор. С flex-gap и новыми форматами медиа-запросов будет удобнее работать.
Определенно
хорошие уроки, побольше таких делай, спасибо
Хорошо, спасибо
Где-то в параллельной вселенной: HTML6 стал самым удобным и быстрым языком программирования, он вошёл в топ 10!
В соседней галактике 😄👌🏻
Где-то в параллельной вселенной: люди наконец поняли разницу между programming language и markup language и перестали называть html языком программирования
@@HolyMasster не в этом столетии
@@HolyMasster Рофл не понял?
Язык вёрстки
Крутое видео! Спасибо! Я не новичок, но долго была не в теме!
Шикарно
Реально круто, особенно summary
А остальное?
А-бал-деть!!! Спасибо за информацию!
Не ожидали? А вот так вот 😄
Привет! Спасибо за видео! Уже знал про output, datalist и переменные css, остальное для меня что-то новенькое! Очень рад, что появились flexbox-gap! Details тоже супер-элемент, теперь можно делать спойлеры без JS. Лайк поставил!
Не только спойлеры, а все что угодно) хоть дропдаун, хоть аккардион, хоть бургер)) Вариантов много)) Универсальный тег)
Да уж, век живи век учись, спасибо))
Очень интересно как для новичка !
Дуже інформативно, дякую
Инфа полезная для тех, кто только изучает или давно не следил на новвоведениями. Хотелось бы видео с развернутым ответом (с примерами) на тему: зачем в CSS нужен одновременно и флекс и грид, если гриды выглядят более мощным инструментом. В каких случаях имеет смысл использовать флексы, в каких гриды.
Их даже можно использовать вместе
Гениально🤯
Все гениальное просто!
Два нововведения не знал. Like for the video)
Очень познавательно, надо отметить
Профессия html-программист скоро станет реальностью
Вряд ли)
Очешуеть!
СПАСИБО!
...полезная выжимка!
Давно уже не занимаюсь версткой, но эти нововведения просто шикарны :)
Круто ! Ты очень полезный
круто! спасибо)
*Супер но если возможно снимайте видео про верстку сайтов сложных😊👍💪*
На это нужно время
@@SuprunAlexey ну даа но будет нам хорошо и вам💲💸💷💶💴💵
топчик, спасибо!
Класс
Крутяк
!!Дякую
Уже попахивает языком программирования а не просто разметкой)))
Круто спасибо )))
Очень интересно!
Это хорошо
Последний способ юзаю сам и на самом деле очень классная вещь особенно если разные цветовые палитры (например, для темной темы и светлой)
Ух, крутые фишки :)
Весьма неплохие
Супер🥑
Лайк однозначно! спасибо
Автор куда пропал?(
Отличное видео!!!
Спс
Мне из этого больше всего нравится :root. Для меня это просто охрененно. Можно будет подгружать в том же реакте какой-нибудь root-файл CSS и использовать его для всех CSS файлов
Круто)
Классно
datalist - имба
спасибо большое
Flex-gap. Наконец-то таки свершилось 🤘. Кстати реализация бургер меню с помощью summary-details это хорошая идея или не совсем?
Хорошая
Круто! Ново! Не знал...
Полезно
Отлично, как раз надо сайт переделать
Переделай переделай
Вараяблы без программирования это круто. Как и математика.
Лет 10 назад мы это в курилке предсказывали и вот наконец-то.
Дожили 😃
Чётко
*Л. а. й. к. о. с.* за видос.
Спасибос за лайкос
ы)
Не знал о многих из тегов, спасибо! Может го чат на js например
Круто 👍🏻
datalist, я думаю, очень удобная будет! А переменные css знал и использую безумно удобная штука! Раньше так только на стадии дэва с препроцессором можно было использовать, а теперь и в обычном! Ну не круто ли!)))
Может скоро сайты можно будет создавать только на HTML и CSS?)))
Спасибо за видео!
Оххх братан спасибо за переменные в css, этож жопа как удобно шрифты цвета и прочее юзать без препроцессоров, конечно если я ничего не напридумывали сверху 😋
Препроцессоры - это не только переменные.
Хотя да, для курсовой они не нужны...
Super info
Гуд
Ну переменные в css уже довольно давно, row-gap и column-gap - по-моему сравнительно недавно появились, а в остальном очень познавательно...
круто я не знал что есть переменные в css
Давненько уже
@@SuprunAlexey ну я просто css много не использовал и много не разбирался в css
Подскажите плз новичку, какой теперь смысл с LESSa, если раньше там был удобен лично мне именно возможность переменных. Ну кроме визуально более аккуратного кода. Какие еще преимущества дает LESS?
Тег details сложно назвать нововведением. Летом 2019 года я его точно использовал. Был такой кейс, - нужен был раскрывающийся/скрывающийся контент. Хотел его делать на JS, начал гуглить и нашел такой тег.
Но все равно спасибо за другую инфу, надо будет затестить flexbox gap.
Тут смотрят многие кто в 2014 html выучил и забыл, так вот для них точно нововведение. Но я кстати думал details это 2020 год
@@SuprunAlexey details уже давно появился)) Очень классный тег) можно как угодно с ним извращатся)
Круто! ОЧень полезное видео. относительно недолго в верстке и эта информация была новой. Очень понравился тег ! Осталось додумать как скрыть треугольничек (наверно с помощью псевдоэлементов дорисовать что-то под цвет фона) и вообще незаменимая вещь)
Такими темпами скоро джаваскрипт не так уж и нужен будет)))
Хотел спросить у вас как у опытного веб девелопера - как я могу настроить систему "пополнения баланса" на своем сайте?? Буду рад любому ответу 🙃
Gap‘ы решают проблему когда при свойстве flex-wrap: wrap у флексов появляются внутренние отступы (по краям строк слева и справа) ? Типа отрицательным значением gap задать. Потому что если пропишешь, например, justify-content:space-between он то их конечно раскидает по краям, но нижняя строка, которая вмещает 5 элементов и состоит например из 3 элементов будет отображаться иначе - там два элемента встанут по краям а один по центру. Это когда посадочную страницу на портал верстаешь там задана ширина контентной зоны допустим 1220px. А у тебя эти внутренние отступы по краям ещё сжимают контент). Максимум че можно сделать чтобы со всех сторон одинаково было - обёрткам блоков прописать margin : 0 auto.
Мб кто другое решение предложит ?
Datalist прям вообще отличная штука. Нужно было чёт придумать с возможностью поиска и ВУАЛЯ! Уже есть такая фича!
Правда пришлось жс скриптик писать, чтобы пересылать не то, что отображается..
Пересылать?
@@SuprunAlexey на фронте показывал код + описание, а на бэк высылал только код.
@@ybogij понял
А где ты берёшь новую информацию ?) исключительно документацию или есть ещё доп.источники?
Есть
Здравствуйте. У вас раньше на канале при запуске был ролик, и там была классная музыка. Можно ссылку этого видео плз. Там выходило вроде Web developer vlog и остальная инфа кто вы. Спасибо
Трейлер канала?
@@SuprunAlexey да, все верно, музыка классная там была
Важная деталь можно ли стилизировать те все HTML новинки
Интересно, а мой комментарий залайкает автор?))
(Пост скриптум - ps. Видео полезное и думаю Ваш канал будет развиваться и возможно 500.000 подписчиков не за горами)
плохо то что у flexbox gap поддержка дохленькая еще, остальные уже давно работают, а так прикольно. Вообще нововведения в верстке это классно, не то что раньше, лет по 5-7 ничего не менялось, но иногда их поддержка растягивается на годы и это не есть хорошо конечно
А точно ли "новые" медиа запросы работают именно так?))
Я попробовал вот так и не сработало)
@media (120em
Лайк
И подписка!
В каком-нибудь less переменные конечно легче задавать и вызывать, но тут можно без компилятора, очень здорово. А кто знает, можно несколько свойств записать в переменную и каким-то селекторам одной строчкой задавать несколько стилей?
Нет
А как стилизовать треугольник у тега summary?
Очень полезно, только когда официально были добавлены эти нововведения?
Ну посмотрите точные даты на официальном сайте
Осталось подождать пару лет пока все основные браузеры это научатся понимать.
а можно ли кастомизировать option внутри datalist ?
Можно
Круто. спасибо. А с какого вы города ?)
А зачем вам данная информация?
@@SuprunAlexey тю, просто интересно...
@@dr.kondakov Kharkiv
@@SuprunAlexey дякую за відповідь. Гарне місто? =) А то с этим карантином... Хочется хоть у нас что то красивое увидеть, и по путешествовать =)
@@dr.kondakov Дуже гарне, але я більше полюбляю Львів
Подскажите кто нибудь, есть ли перенасыщение рынка frontend разработчиков сейчас и насколько оно большое? Как человеку творческому, очень интересна именно эта область программирования, но вижу, что есть огромное количество спецов и в разы больше людей, которые учатся. Можно ли будет потом найти работу и проекты? Не хочется быть одним из 100 кандидатов на 1 вакансию или сидеть на фрилансе, где невозможно взять какой либо заказ. Спасибо, если кто ответит
Уже лет 7 задают этот вопрос:)
Видать на него нет ответа...
Все класс, но, для справки, слова fruits не существует. Fruit и в единственном и во множественном числе😉
Слово fruits как раз существует, имея просто другой подтекст. Гугл и словари в помощь.
Заходишь такой в 2021-м году в ютуб, а тебе говорят - чувак, оказывается details (появились в хроме в 2011-м году) и css-переменные(в фаерфоксе с 2014-го) это нововведение! Details можно в гитхабе в маркдауне юзать, в остальных случаях вы скорее всего будете юзать решение с использованием js
Так вы почитайте, процентов 95 вообще про это не знает))))
@@SuprunAlexey да, видел коменты, дичь какая-то, дальше дива люди редко заглядывают) хтмлбука, царство ему небесное, на них нет!
@@irodger_shorts Так большинства влом читать, легче видосик посмотреть . Это ж мозги напрягать надо .
Ребят, подскажите какую лучше прогу скачать, чтоб написать код который нужен для создания сайта?
Редактор кода что ли? VS Code для фронтендеров бесплатный и крутой от Microsoft. Есть ещё платные всякие, но раз такой вопрос задаешь, значит, начинающий и VS Code вариант отличный.
@@ArabicLang.online спс
@media добавляет какие-то стили в зависимости от ширины экрана. А как сделать тоже же самое только в зависимости от родительского дива а не всего экрана? может кто знает?
Просто в CSS
Скоро все препроцессорные фишки будут в css из под коробки. И HTML наполнится функционалом, которым обладают современные фреймворки. Например, интерполяция уже реализована через тэг output. Это неплохо..
Это круто я бы сказал
Давай Курсы Про Laravel
Может быть, но на канале есть
@@SuprunAlexey да можно новую тк 8 версия вышла или можешь такой видео например магаин за час на ларавел
Как человек пришедший с верстки для бумаги в верстку для экранов, могу лишь сказать что в html+css работа с типографикой и разметкой сделана на костылях и продолжает обрастать новыми.
Думаю доработают
Видео посмотрел, спасибо, а где нововведения?
Ахах, ясно
Все круто, но по-моему details уже был
Круто
Переменные тоже😅
@@victorchilari переменные вроде только в препроцессорах были, не?
@@TheDaemonL нет, на чистом css они уже полгода - год точно
Настолько ли крута и важна вёрстка с помощью grid ? просто я обычно использую отступы.
Очень крута
Конечно важна, но я бы пока еще не использовал grid, все-таки существуют еще пользователи с дремучими браузерами. А вот flexbox использовать точно не помешало бы
@@alvcode3764 согласен
@@alvcode3764 в ие11 боле менее есть поддержка. Так что можно использовать.
@@EugenIwanow в IE да, но все остальные только с 2017 года, если память не изменяет. Конечно, у абсолютного большинства уже все норм, но у меня есть сервис, которым пользуются люди и статистика показывает, что есть люди, которые заходят с chrome аж 26 версии, safari 5 и 6 версии и т.д, еще есть такие люди
Flex gap почти не поддерживается браузерами, есть альтернативы?
Ну ждите, гэпы на гридах:)
Полагаю еще не скоро завезут ... Легче в стаковерфлоу заглянуть
Всем привет
Объясните пожалуйста,почему все не советуют использовать специальные платформы для создания сайтов.Напримкр тот же самый WordPress
Можете пожалуйста объяснить,тк в вёрстке я новичков,я больше по веб
Для увеличения скорости и облегчения работы
Ну там смотря какой сайт делать и для каких целей
Свой первый макет верстал на details. Вроде бы он не новый
Мало кто о нем знает)
Ему уже минимум года три, но его практически никто не юзает
css flex gap не работает на сафари, пока от него только проблемы
там в целом поддержка пока 63 процента :)) Есть проекты где говорят что 96% поддержки свойства это мало :) Так что flexbox gap-ы это пока теоретический материал скорее чем практический :) До сих пор многие стремаются на гридах верстать :)
От сафари вообще много проблем
В чем проблема margin'ы писать, не понимаю...
@@ArabicLang.online в чем проблема на таблицах верстать? Вопрос из той же оперы
@@illiaonishchenko6303 не из той же, в 100500 раз больше кода, а margin или padding к флексу можно одной строчкой добавить, пока flex-gap не имеет достаточный % поддержки браузерами
переменные в CSS ооо похоже появятся новые виды программистов на CSS))))
ахах поживем - увидим
@@SuprunAlexey функции calc() ещё ж можно писать в CSS))
Чем не программисты на CSS)))
хочу такой же голос
Ахахахха, лучший комментарий за сегодня
сразу когда заходишь на канал он появлялся