No video :(

ТОП-10 фишек HTML/CSS верстки сайта КОТОРЫЕ ТЫ ОБЯЗАН ЗНАТЬ

Подписаться 245 тыс.

Просмотров 44 тыс.

50% 1

Мы продолжаем рубрику фишки Html, CSS для верстки сайта для начинающих. В этом видео я расскажу моменты html css, которые обязан знать каждый начинающий верстальщик. В верстке сайтов есть очень много не очевидных и сложных моментов для новичков, которые вводят просто в ступор и иногда у новичка верстки сайтов даже отпадает желание продолжать изучение верстки. Но на самом деле верстка сайта уже не так сложна как это было те же 10 лет назад. Создано много новых свойст и концепций, все делается намного легче. В этом видео я подробно расскажу способ создания легчайшего адаптивного меню на html css и немного javascript. Рассмотрим работу с переменными CSS, и как сделать адаптивность для сайта за 3 секунды.
Nicepage - это сайт-билдер, с которым справится каждый.Размещайте элементы дизайна свободно, как в Figma и Photoshop, при этом получится работающий сайт и чистый HTML код.Nicepage автоматически адаптирует сайт для мобильных устройств.
Nicepage - bit.ly/nicepag...

Опубликовано:

26 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 104

@SuprunAlexey 4 года назад

Таймкоды: 1:27 - Адаптивное меню самым быстрым способом 6:19 - Переменные CSS 8:10 - Иконка для сайта в браузере во вкладках 9:22 - Автозаполняемый выпадающий список 10:16 - Плавная прокрутка к якорькам 12:11 - Выбор цвета через инпут 12:50 - Видео для фона сайта 14:21 - CSS Grid, адаптивность для сайта за три секунды

@apache5446 4 года назад

Спасибо за то, что ускорил свою речь до хорошей скорости. Теперь максимально информативно и кратко по времени(раньше смотрел твои видео в 1,25)

@ElferCool Год назад

@@apache5446 А мне наоборот - забыстро. Замедление ставлю. Потому что одно дело - по-быстрому прослушать, а другое дело - вникнуть и запомнить. На скорости это тяжело сделать, что влетает в ухо, сразу вылетает не задерживаясь, т.к. уже другая информация речёвки замещает предыдущую.

@CathodeUT Год назад

Для человека только начавшего изучать эти языки это просто взрыв мозга, всё так быстро что я даже не успеваю понять какая строка что меняет, а ты уже на следующей))

@DreamingDolphing 4 года назад

Верстка стала чуть проще в том, что IE наконец подох. В остальном с 2010 писать код стало намного сложнее, потому что объём знаний сильно вырос.

@twainprod 3 года назад

Прикольный видос, спасибо! Сохранил себе! Из всех фишек знал про иконку сайта и гриды, адаптивное меню делал через Bootstrap, а переменные в CSS использовал в SASS.

@SuprunAlexey 3 года назад

Круто

@alexeffect1765 4 года назад

Про гриды интересно, спасибо, даже коммент оставил)

@SuprunAlexey 4 года назад

Спасибо, это важно!

@user-wz8jd9ud9f 4 года назад

4:13 А я пиццу ем

@nodirayakubova6395 4 года назад

Класс больше про JavaScript HTML CSS 👍👍👍

@user-st4pb7xx9x 4 года назад

Спасибо! Плавный скролл порадовал!

@alexko100lom 4 года назад

После данного видео, хотелось бы видео по фронту, с обзором каких-либо фишек вроде нативного lazy load, переменных css и прочего, что сейчас нужно бы обязательно знать - но думаю харя треснет у меня)) Не могу найти - есть ли серия видео по Sass, и прочим инструментам фронта, кроме html/css/js P.S. Еще бы так же узнать - какие нынче тренды в этой ветке так сказать)

@Zadrot1080p 4 года назад

scss более актуален, нежели sass

@amelianceskymusic 2 года назад

8:30 - 16x16 - это минимальный размер favicon для десктоп, лучше делать по гайдам

@mykhailo6062 4 года назад

Спасибо большое! Очень интересное и познавательное видео. Бистро, очень информативно, а главное без воды. С нетерпением ждём новых видосиков ;)

@technic_and_programming 4 года назад

Спасибо!

@SuprunAlexey 4 года назад

Всегда пожалуйста!

@PanzarMarina 4 года назад

Круто! Спасибо огромное!

@user-wp8ej2sh6y 4 года назад

Много полезной информации. Спасибо)

@PashaRomanovich 3 года назад

Спасибо за очень классное и познавательное видео!

@Herp_B_TaHkE 3 года назад

Видео то неплохое, но новичок может и запутаться)

@evgenii8672 3 года назад

Спасибо большое за видео! ))

@andreychernykh256 4 года назад

Было полезно!

@vladyslavloktev7983 Год назад

код выкладывай в следующий раз, сэкономишь время тому кто читает и хочет проверить, да еще и сбережешь его от опечаток

@SuprunAlexey Год назад

Нет, кода никогда не будет. Пишите и вникайте а не бездумно копируйте

@aleksandryushka9571 4 года назад

Спасибо за отличное видео. Очень полезно.

@hxaez9809 3 года назад

Очень полезно Спасибо

@nemirovandrei 4 года назад

Спасибо за инфу, сохранил себе

@maxokream3011 4 года назад

Расскажи плиз 🙏🏼 про приложения вебью и технологию эту очень интересно 🧐

@SuprunAlexey 4 года назад

Договорились

@maxokream3011 4 года назад

@@SuprunAlexey АУФ💪🏼🔥

@SuprunAlexey 4 года назад

Еее👏🏻

@shalkarsaparali6598 4 года назад

спасибо было очень полезно

@sergeypolovov8965 4 года назад

Картинка с Box Model на 3:38, конечно, ничего общего с реальностью не имеет, box-sizing: border-box никогда не включал в себя margin, а в content-box не знаю как вообще могло получиться 220px в общем счете

@reshenie1 4 года назад

onclick в div это каменный век, не пишите так. В script.js пишите document.querySelector('.mobile-bar').onclick = toggleMobileMenu;

@DimitarRad 4 года назад

Какой-то нонсенс! scroll-behavior: smooth; работает в лисе нормально, а в хроме нет. В чем проблема?

@ilnev3738 4 года назад

Добавьте префиксы

@apache5446 4 года назад

-webkit

@adilife6080 4 года назад

Добавь '-webkit-'

@sergeyromanyuk5753 4 года назад

Как на флексах сделать список в 2 колонки, чтобы верхние элементы выравнивались по верхнему краю, а остальные как им удобно, при этом в этом спике элементы разной высоты

@__-qk1jr 4 года назад

Годно

@user-nl9dk4tg8e 4 года назад

круто

@SuprunAlexey 4 года назад

Спасибо

@stranger7025 2 года назад

меню не всплывает когда нажимаю на иконку , в чем может быть причина?

@diekunstUA 4 года назад

Автозаполняемый выпадающий список - в чем разница с селектом? не могу придумать где бы это было удобней. спасибо за видео.

@SuprunAlexey 4 года назад

Просто удобнее где бы ни было

@user-dt7kd8oe9s Год назад

у меня пишет что none не может быть значением visibility

@user-dt7kd8oe9s Год назад

в первом

@The-Tezzo 2 года назад

13:35 Почему у меня не работает? Не просвечивается кто знает?пж

@genrihkutz 4 года назад

а разве css переменные всеми браузерами поддерживаются ?

@ozimnadius 4 года назад

Кнопки должны быть кнопками, кнопка меню - div, не семантично, не забывай что тебя много новичков смотрят.

@sergeypetrovetsky3431 4 года назад

Если должно произойти событие то кнопка через Баттон. Если переход то ссылка

@ozimnadius 4 года назад

@@sergeypetrovetsky3431 здорово, но это не тебе адресовано.

@rolandjeleniewicz3501 3 года назад

Прописал код буква по букве и без результата(((( Ссылки так и остаются и не превращаются в меню

@user-hv8rh8nk9d 4 года назад

Первый

@SuprunAlexey 4 года назад

Быстро ты

@FA-tu5ti 3 года назад

и что?

@maxfatyanov7096 4 года назад

Жаль только, что scroll-behavior не поддерживается safari

@SuprunAlexey 4 года назад

Все впереди

@mazya.youtube 4 года назад

Лёша, 2020 год же на дворе, какой .ico? Пропагандируй .svg в фавиконках)

@dmitriykurtsev2427 4 года назад

2020, а семантику так многие и не научились использовать, 🤦🏿‍♂️

@trygoboi4790 4 года назад

Не понимаю это видео. Я допустим пишу свой интернет магазин, у меня на бекенде HTML, а на фронтенде FORTRAN и Perl. По моему это лучший стек для разработки интернет программы.

@lllyx93 4 года назад

Наоборот наверное? Лучший не лучший у каждого инструмента есть плюсы и минусы

@trygoboi4790 4 года назад

@@lllyx93 я шучу))) Я бекендер на Java

@BrunchHouse-lo7pv 4 месяца назад

Очень разочаровало видео, хотя автор явно профи. Я начинающий верстальщик и пытаюсь найти контент, который можно свободно воспринимать и изучать. 5 минут - растянулись на 2 часа, я постоянно останавливала и пересматривала каждый момент, параллельно перепроверяя информацию в интернете. По итогу - я переписала весь код, очень долго проверяла - и визуал у меня получился - но по функционалу меню просто не работает. Возможно, я допустила ошибку(которую не могу найти), но на будущее... ПОЖАЛУЙСТА ОБЪЯСНЯЙТЕ, ДЛЯ ЧЕГО пишется код. Мы подключили JS - хорошо, А ЦЕЛЬ? Я более чем уверена, что контент смотрят новички в деле - и полноценного знания JS у них нет, мне лично до сих пор не ясно, зачем мы подключили JS и на что это повлияло - А ВОЗМОЖНО именно из-за этого у меня и не работает код, ведь JS мог не подключится - а как это проверить, и на что влияет код написанный в нем - я не могу.

@ilnev3738 4 года назад

12.12 а что так можно было?

@SuprunAlexey 4 года назад

Ага:)

@klmnprst777 4 года назад

жду полной поддержки гридов, а пока флекс...

@drunken_rubbish 4 года назад

Вроде же все кроме explorer поддерживает

@ekan272 4 года назад

Ну блин. в 20 году прописывать onclick в теге? не серьезно как-то :( потом начинающие перенимают это и пишут также. Может для Вас это не играет роли(надеюсь это не так), но я противник такого написания, сами говорите, мы не в 10 году уже и html должен быть отдельно, css отдельно, а js отдельно. При этом лаконично структурирован.

@dmitriykurtsev2427 4 года назад

Ммм, круто, урок как сделать обсолютно не доступное меню, ммм. Кнопку меню делаем с помощью div, ссылкам не делаем visually: hidden, и еще не используем aria от слова совсем. Новички, не делайте так как в видео, потом из-за такого меню будут люди страдать

@jeb_7749 4 года назад

Я новичок. Можно поподробнее?

@dmitriykurtsev2427 4 года назад

@@jeb_7749 хорошее бургер меню это: 1. Использовать для кнопки тег button, так же указывать ему aria-expanded и aria-controls атрибуты (можешь сам про них почитать) для того, чтобы screen reader знал, что открывает и закрывает эта кнопка и чем она управляет. 1.1. Если в кнопке три полоске или что то на подобии, то следует еще указывать aria-label, дабы screen-reader произнес что делает эта кнопка. 2. При открытии меню на мобилках надо блокировать все элементы за пределами меню, на которые можно перейти с клавы или которые может произнести screen reader.

@dmitriykurtsev2427 4 года назад

@@jeb_7749 могу скинуть свою реализацию

@maksymgapachilo9507 4 года назад

@@dmitriykurtsev2427 скинь мне плс)

@dmitriykurtsev2427 4 года назад

@@maksymgapachilo9507 codepen.io/DmitriyKurtsev/pen/OJymmpV

@Fristonit 8 месяцев назад

Слишком сжато по сути просто переписывание без обяснения

@Alexus1504 3 года назад

Верстка стала проще!!!??? Ну ну, пойди освой эту простоту!!! Если учесть, что к самой верстке с ее сложными компонентами, такие как флексы, гриды, формы и т.д. есть еще и множество разнообразных элементов, которые нужно уметь заверстать , еще и вплетается Ява Скрипт!!! То конечно проще некуда!!!

@SuprunAlexey 3 года назад

Стала намного проще

@-Forever-Young- 2 года назад

Просто у тебя мало практики

@timurislamov1671 3 года назад

Ничего не понятно и очень не интересно! Нафиг создал это видео? Всё очень быстро и непонятно!!!!

@SuprunAlexey 3 года назад

Капец, наоборот интересно и понятно

@RomanRachkov 4 года назад

у nicepage чистый код?!!! ага, конечно.

@romangolumbevskiy7268 Год назад

Ужасная подача информации. 1) Если видео называется ТОП-10 фишек HTML/CSS, то должно быть последовательно 10 фишек с объяснением, где и как каждая применяется. 2) Зачем JS в ролике про HTML/CSS? Ставь в описание или превью тогда и JS.

@Professor_Ro 4 года назад

предлагаю эту скороговорку слушать на 0.75, от алкаша голова меньше грузиться будет

@SuprunAlexey 4 года назад

Та лаадноо

@Professor_Ro 4 года назад

@@SuprunAlexey не ты быстро говоришь а я медленно слушаю))

@asex9535 4 года назад

Спасибо за видео , моя цель - стать HTML-программистом .

@lllyx93 4 года назад

Если это шутка, очень смешно

@user-og2wi8wh7s 3 года назад

Не очень подача из за скорости выдаваемой информации.

@FA-tu5ti 3 года назад

сделай по-медленнее тогда

@onebytesiteit30-75 4 года назад

Полезное крутое видео. Если хотите еще доп инфы забегайте в гости. Правда у меня на канале для начинающих материал. Делюсь опытом так сказать. Стараюсь делать годный контент. Ну а тут лайк за видос. Очень полезные фишечки

@SuprunAlexey 4 года назад

Спам.