ТОП-10 фишек HTML/CSS верстки сайта КОТОРЫЕ ТЫ ОБЯЗАН ЗНАТЬ
HTML-код
- Опубликовано: 29 июн 2020
- Мы продолжаем рубрику фишки Html, CSS для верстки сайта для начинающих. В этом видео я расскажу моменты html css, которые обязан знать каждый начинающий верстальщик. В верстке сайтов есть очень много не очевидных и сложных моментов для новичков, которые вводят просто в ступор и иногда у новичка верстки сайтов даже отпадает желание продолжать изучение верстки. Но на самом деле верстка сайта уже не так сложна как это было те же 10 лет назад. Создано много новых свойст и концепций, все делается намного легче. В этом видео я подробно расскажу способ создания легчайшего адаптивного меню на html css и немного javascript. Рассмотрим работу с переменными CSS, и как сделать адаптивность для сайта за 3 секунды.
Nicepage - это сайт-билдер, с которым справится каждый.Размещайте элементы дизайна свободно, как в Figma и Photoshop, при этом получится работающий сайт и чистый HTML код.Nicepage автоматически адаптирует сайт для мобильных устройств.
Nicepage - bit.ly/nicepage-wd
Таймкоды:
1:27 - Адаптивное меню самым быстрым способом
6:19 - Переменные CSS
8:10 - Иконка для сайта в браузере во вкладках
9:22 - Автозаполняемый выпадающий список
10:16 - Плавная прокрутка к якорькам
12:11 - Выбор цвета через инпут
12:50 - Видео для фона сайта
14:21 - CSS Grid, адаптивность для сайта за три секунды
Спасибо за то, что ускорил свою речь до хорошей скорости. Теперь максимально информативно и кратко по времени(раньше смотрел твои видео в 1,25)
@@apache5446 А мне наоборот - забыстро. Замедление ставлю. Потому что одно дело - по-быстрому прослушать, а другое дело - вникнуть и запомнить. На скорости это тяжело сделать, что влетает в ухо, сразу вылетает не задерживаясь, т.к. уже другая информация речёвки замещает предыдущую.
Верстка стала чуть проще в том, что IE наконец подох. В остальном с 2010 писать код стало намного сложнее, потому что объём знаний сильно вырос.
Для человека только начавшего изучать эти языки это просто взрыв мозга, всё так быстро что я даже не успеваю понять какая строка что меняет, а ты уже на следующей))
Класс больше про JavaScript HTML CSS 👍👍👍
Прикольный видос, спасибо! Сохранил себе! Из всех фишек знал про иконку сайта и гриды, адаптивное меню делал через Bootstrap, а переменные в CSS использовал в SASS.
Круто
Спасибо! Плавный скролл порадовал!
Круто! Спасибо огромное!
Спасибо большое! Очень интересное и познавательное видео.
Бистро, очень информативно, а главное без воды. С нетерпением ждём новых видосиков ;)
Много полезной информации. Спасибо)
Про гриды интересно, спасибо, даже коммент оставил)
Спасибо, это важно!
Спасибо за очень классное и познавательное видео!
Спасибо за отличное видео. Очень полезно.
Спасибо большое за видео! ))
Было полезно!
Спасибо!
Очень полезно Спасибо
Спасибо за инфу, сохранил себе
8:30 - 16x16 - это минимальный размер favicon для десктоп, лучше делать по гайдам
спасибо было очень полезно
Годно
Как на флексах сделать список в 2 колонки, чтобы верхние элементы выравнивались по верхнему краю, а остальные как им удобно, при этом в этом спике элементы разной высоты
После данного видео, хотелось бы видео по фронту, с обзором каких-либо фишек вроде нативного lazy load, переменных css и прочего, что сейчас нужно бы обязательно знать - но думаю харя треснет у меня)) Не могу найти - есть ли серия видео по Sass, и прочим инструментам фронта, кроме html/css/js
P.S. Еще бы так же узнать - какие нынче тренды в этой ветке так сказать)
scss более актуален, нежели sass
4:13
А я пиццу ем
круто
Спасибо
Расскажи плиз 🙏🏼 про приложения вебью и технологию эту очень интересно 🧐
Договорились
@@SuprunAlexey АУФ💪🏼🔥
Еее👏🏻
а разве css переменные всеми браузерами поддерживаются ?
Картинка с Box Model на 3:38, конечно, ничего общего с реальностью не имеет, box-sizing: border-box никогда не включал в себя margin, а в content-box не знаю как вообще могло получиться 220px в общем счете
Какой-то нонсенс! scroll-behavior: smooth; работает в лисе нормально, а в хроме нет. В чем проблема?
Добавьте префиксы
-webkit
Добавь '-webkit-'
меню не всплывает когда нажимаю на иконку , в чем может быть причина?
Видео то неплохое, но новичок может и запутаться)
Автозаполняемый выпадающий список - в чем разница с селектом? не могу придумать где бы это было удобней. спасибо за видео.
Просто удобнее где бы ни было
onclick в div это каменный век, не пишите так. В script.js пишите document.querySelector('.mobile-bar').onclick = toggleMobileMenu;
13:35
Почему у меня не работает?
Не просвечивается кто знает?пж
Прописал код буква по букве и без результата(((( Ссылки так и остаются и не превращаются в меню
код выкладывай в следующий раз, сэкономишь время тому кто читает и хочет проверить, да еще и сбережешь его от опечаток
Нет, кода никогда не будет. Пишите и вникайте а не бездумно копируйте
Первый
Быстро ты
и что?
у меня пишет что none не может быть значением visibility
в первом
Ну блин. в 20 году прописывать onclick в теге? не серьезно как-то :( потом начинающие перенимают это и пишут также. Может для Вас это не играет роли(надеюсь это не так), но я противник такого написания, сами говорите, мы не в 10 году уже и html должен быть отдельно, css отдельно, а js отдельно. При этом лаконично структурирован.
жду полной поддержки гридов, а пока флекс...
Вроде же все кроме explorer поддерживает
Лёша, 2020 год же на дворе, какой .ico? Пропагандируй .svg в фавиконках)
2020, а семантику так многие и не научились использовать, 🤦🏿♂️
Не понимаю это видео. Я допустим пишу свой интернет магазин, у меня на бекенде HTML, а на фронтенде FORTRAN и Perl. По моему это лучший стек для разработки интернет программы.
Наоборот наверное? Лучший не лучший у каждого инструмента есть плюсы и минусы
@@lllyx93 я шучу))) Я бекендер на Java
Жаль только, что scroll-behavior не поддерживается safari
Все впереди
12.12 а что так можно было?
Ага:)
Кнопки должны быть кнопками, кнопка меню - div, не семантично, не забывай что тебя много новичков смотрят.
Если должно произойти событие то кнопка через Баттон. Если переход то ссылка
@@sergeypetrovetsky3431 здорово, но это не тебе адресовано.
Очень разочаровало видео, хотя автор явно профи. Я начинающий верстальщик и пытаюсь найти контент, который можно свободно воспринимать и изучать. 5 минут - растянулись на 2 часа, я постоянно останавливала и пересматривала каждый момент, параллельно перепроверяя информацию в интернете. По итогу - я переписала весь код, очень долго проверяла - и визуал у меня получился - но по функционалу меню просто не работает. Возможно, я допустила ошибку(которую не могу найти), но на будущее... ПОЖАЛУЙСТА ОБЪЯСНЯЙТЕ, ДЛЯ ЧЕГО пишется код. Мы подключили JS - хорошо, А ЦЕЛЬ? Я более чем уверена, что контент смотрят новички в деле - и полноценного знания JS у них нет, мне лично до сих пор не ясно, зачем мы подключили JS и на что это повлияло - А ВОЗМОЖНО именно из-за этого у меня и не работает код, ведь JS мог не подключится - а как это проверить, и на что влияет код написанный в нем - я не могу.
у nicepage чистый код?!!! ага, конечно.
Ммм, круто, урок как сделать обсолютно не доступное меню, ммм. Кнопку меню делаем с помощью div, ссылкам не делаем visually: hidden, и еще не используем aria от слова совсем. Новички, не делайте так как в видео, потом из-за такого меню будут люди страдать
Я новичок. Можно поподробнее?
@@jeb_7749 хорошее бургер меню это:
1. Использовать для кнопки тег button, так же указывать ему aria-expanded и aria-controls атрибуты (можешь сам про них почитать) для того, чтобы screen reader знал, что открывает и закрывает эта кнопка и чем она управляет.
1.1. Если в кнопке три полоске или что то на подобии, то следует еще указывать aria-label, дабы screen-reader произнес что делает эта кнопка.
2. При открытии меню на мобилках надо блокировать все элементы за пределами меню, на которые можно перейти с клавы или которые может произнести screen reader.
@@jeb_7749 могу скинуть свою реализацию
@@dmitriykurtsev2427 скинь мне плс)
@@maksymgapachilo9507 codepen.io/DmitriyKurtsev/pen/OJymmpV
Верстка стала проще!!!??? Ну ну, пойди освой эту простоту!!! Если учесть, что к самой верстке с ее сложными компонентами, такие как флексы, гриды, формы и т.д. есть еще и множество разнообразных элементов, которые нужно уметь заверстать , еще и вплетается Ява Скрипт!!! То конечно проще некуда!!!
Стала намного проще
Просто у тебя мало практики
предлагаю эту скороговорку слушать на 0.75, от алкаша голова меньше грузиться будет
Та лаадноо
@@SuprunAlexey не ты быстро говоришь а я медленно слушаю))
Слишком сжато по сути просто переписывание без обяснения
Спасибо за видео , моя цель - стать HTML-программистом .
Если это шутка, очень смешно
Не очень подача из за скорости выдаваемой информации.
сделай по-медленнее тогда
Полезное крутое видео.
Если хотите еще доп инфы забегайте в гости. Правда у меня на канале для начинающих материал. Делюсь опытом так сказать.
Стараюсь делать годный контент.
Ну а тут лайк за видос. Очень полезные фишечки
Спам.
Ничего не понятно и очень не интересно! Нафиг создал это видео? Всё очень быстро и непонятно!!!!
Капец, наоборот интересно и понятно
Ужасная подача информации.
1) Если видео называется ТОП-10 фишек HTML/CSS, то должно быть последовательно 10 фишек с объяснением, где и как каждая применяется.
2) Зачем JS в ролике про HTML/CSS? Ставь в описание или превью тогда и JS.
Adobe Muse - Главная фишка и uKit, остальное в мусорку, верстальщики не нужны
Хзхз, субъективно
@@SuprunAlexey Го видос по Adobe Muse
@@Kopo4e последняя версия 2 года назад.. хм...
Неподдерживаемый говно код детектед
Всё хорошо, но после УЛ и СПАН захотелось выключить видео
выключи и не возвращайся от тебя гавной воняет аж сюда слышно
Спасибо!
Всегда пожалуйста!