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

  Переглядів 43,603

Web Developer Blog

Web Developer Blog

3 роки тому

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

КОМЕНТАРІ: 104
@SuprunAlexey
@SuprunAlexey 3 роки тому
Таймкоды: 1:27 - Адаптивное меню самым быстрым способом 6:19 - Переменные CSS 8:10 - Иконка для сайта в браузере во вкладках 9:22 - Автозаполняемый выпадающий список 10:16 - Плавная прокрутка к якорькам 12:11 - Выбор цвета через инпут 12:50 - Видео для фона сайта 14:21 - CSS Grid, адаптивность для сайта за три секунды
@apache5446
@apache5446 3 роки тому
Спасибо за то, что ускорил свою речь до хорошей скорости. Теперь максимально информативно и кратко по времени(раньше смотрел твои видео в 1,25)
@ElferCool
@ElferCool Рік тому
@@apache5446 А мне наоборот - забыстро. Замедление ставлю. Потому что одно дело - по-быстрому прослушать, а другое дело - вникнуть и запомнить. На скорости это тяжело сделать, что влетает в ухо, сразу вылетает не задерживаясь, т.к. уже другая информация речёвки замещает предыдущую.
@DreamingDolphing
@DreamingDolphing 3 роки тому
Верстка стала чуть проще в том, что IE наконец подох. В остальном с 2010 писать код стало намного сложнее, потому что объём знаний сильно вырос.
@CathodeUT
@CathodeUT Рік тому
Для человека только начавшего изучать эти языки это просто взрыв мозга, всё так быстро что я даже не успеваю понять какая строка что меняет, а ты уже на следующей))
@nodirayakubova6395
@nodirayakubova6395 3 роки тому
Класс больше про JavaScript HTML CSS 👍👍👍
@user-wp8ej2sh6y
@user-wp8ej2sh6y 3 роки тому
Много полезной информации. Спасибо)
@mykhailo6062
@mykhailo6062 3 роки тому
Спасибо большое! Очень интересное и познавательное видео. Бистро, очень информативно, а главное без воды. С нетерпением ждём новых видосиков ;)
@user-st4pb7xx9x
@user-st4pb7xx9x 3 роки тому
Спасибо! Плавный скролл порадовал!
@Zarmarinas
@Zarmarinas 3 роки тому
Круто! Спасибо огромное!
@alexeffect1765
@alexeffect1765 3 роки тому
Про гриды интересно, спасибо, даже коммент оставил)
@SuprunAlexey
@SuprunAlexey 3 роки тому
Спасибо, это важно!
@twainprod
@twainprod 3 роки тому
Прикольный видос, спасибо! Сохранил себе! Из всех фишек знал про иконку сайта и гриды, адаптивное меню делал через Bootstrap, а переменные в CSS использовал в SASS.
@SuprunAlexey
@SuprunAlexey 3 роки тому
Круто
@evgenii8672
@evgenii8672 3 роки тому
Спасибо большое за видео! ))
@PashaRomanovich
@PashaRomanovich 2 роки тому
Спасибо за очень классное и познавательное видео!
@aleksandryushka9571
@aleksandryushka9571 3 роки тому
Спасибо за отличное видео. Очень полезно.
@nemirovandrei
@nemirovandrei 3 роки тому
Спасибо за инфу, сохранил себе
@andreychernykh256
@andreychernykh256 3 роки тому
Было полезно!
@hxaez9809
@hxaez9809 3 роки тому
Очень полезно Спасибо
@Maria-Alekseevna
@Maria-Alekseevna 3 роки тому
Спасибо!
@shalkarsaparali6598
@shalkarsaparali6598 3 роки тому
спасибо было очень полезно
@__-qk1jr
@__-qk1jr 3 роки тому
Годно
@user-wz8jd9ud9f
@user-wz8jd9ud9f 3 роки тому
4:13 А я пиццу ем
@alexko100lom
@alexko100lom 3 роки тому
После данного видео, хотелось бы видео по фронту, с обзором каких-либо фишек вроде нативного lazy load, переменных css и прочего, что сейчас нужно бы обязательно знать - но думаю харя треснет у меня)) Не могу найти - есть ли серия видео по Sass, и прочим инструментам фронта, кроме html/css/js P.S. Еще бы так же узнать - какие нынче тренды в этой ветке так сказать)
@Zadrot1080p
@Zadrot1080p 3 роки тому
scss более актуален, нежели sass
@sergeyromanyuk5753
@sergeyromanyuk5753 3 роки тому
Как на флексах сделать список в 2 колонки, чтобы верхние элементы выравнивались по верхнему краю, а остальные как им удобно, при этом в этом спике элементы разной высоты
@user-nl9dk4tg8e
@user-nl9dk4tg8e 3 роки тому
круто
@SuprunAlexey
@SuprunAlexey 3 роки тому
Спасибо
@maxokream3011
@maxokream3011 3 роки тому
Расскажи плиз 🙏🏼 про приложения вебью и технологию эту очень интересно 🧐
@SuprunAlexey
@SuprunAlexey 3 роки тому
Договорились
@maxokream3011
@maxokream3011 3 роки тому
@@SuprunAlexey АУФ💪🏼🔥
@SuprunAlexey
@SuprunAlexey 3 роки тому
Еее👏🏻
@amelianceskymusic
@amelianceskymusic 2 роки тому
8:30 - 16x16 - это минимальный размер favicon для десктоп, лучше делать по гайдам
@sergeypolovov8965
@sergeypolovov8965 3 роки тому
Картинка с Box Model на 3:38, конечно, ничего общего с реальностью не имеет, box-sizing: border-box никогда не включал в себя margin, а в content-box не знаю как вообще могло получиться 220px в общем счете
@Herp_B_TaHkE
@Herp_B_TaHkE 2 роки тому
Видео то неплохое, но новичок может и запутаться)
@genrihkutz
@genrihkutz 3 роки тому
а разве css переменные всеми браузерами поддерживаются ?
@DimitarRad
@DimitarRad 3 роки тому
Какой-то нонсенс! scroll-behavior: smooth; работает в лисе нормально, а в хроме нет. В чем проблема?
@ilnev3738
@ilnev3738 3 роки тому
Добавьте префиксы
@apache5446
@apache5446 3 роки тому
-webkit
@adilife6080
@adilife6080 3 роки тому
Добавь '-webkit-'
@diekunstUA
@diekunstUA 3 роки тому
Автозаполняемый выпадающий список - в чем разница с селектом? не могу придумать где бы это было удобней. спасибо за видео.
@SuprunAlexey
@SuprunAlexey 3 роки тому
Просто удобнее где бы ни было
@user-hv8rh8nk9d
@user-hv8rh8nk9d 3 роки тому
Первый
@SuprunAlexey
@SuprunAlexey 3 роки тому
Быстро ты
@FA-tu5ti
@FA-tu5ti 2 роки тому
и что?
@reshenie1
@reshenie1 3 роки тому
onclick в div это каменный век, не пишите так. В script.js пишите document.querySelector('.mobile-bar').onclick = toggleMobileMenu;
@stranger7025
@stranger7025 2 роки тому
меню не всплывает когда нажимаю на иконку , в чем может быть причина?
@The-Tezzo
@The-Tezzo 2 роки тому
13:35 Почему у меня не работает? Не просвечивается кто знает?пж
@vladyslavloktev7983
@vladyslavloktev7983 Рік тому
код выкладывай в следующий раз, сэкономишь время тому кто читает и хочет проверить, да еще и сбережешь его от опечаток
@SuprunAlexey
@SuprunAlexey Рік тому
Нет, кода никогда не будет. Пишите и вникайте а не бездумно копируйте
@rolandjeleniewicz3501
@rolandjeleniewicz3501 3 роки тому
Прописал код буква по букве и без результата(((( Ссылки так и остаются и не превращаются в меню
@klmnprst777
@klmnprst777 3 роки тому
жду полной поддержки гридов, а пока флекс...
@drunken_rubbish
@drunken_rubbish 3 роки тому
Вроде же все кроме explorer поддерживает
@user-dt7kd8oe9s
@user-dt7kd8oe9s Рік тому
у меня пишет что none не может быть значением visibility
@user-dt7kd8oe9s
@user-dt7kd8oe9s Рік тому
в первом
@ilnev3738
@ilnev3738 3 роки тому
12.12 а что так можно было?
@SuprunAlexey
@SuprunAlexey 3 роки тому
Ага:)
@mazya.youtube
@mazya.youtube 3 роки тому
Лёша, 2020 год же на дворе, какой .ico? Пропагандируй .svg в фавиконках)
@dmitriykurtsev2427
@dmitriykurtsev2427 3 роки тому
2020, а семантику так многие и не научились использовать, 🤦🏿‍♂️
@maxfatyanov7096
@maxfatyanov7096 3 роки тому
Жаль только, что scroll-behavior не поддерживается safari
@SuprunAlexey
@SuprunAlexey 3 роки тому
Все впереди
@ekan272
@ekan272 3 роки тому
Ну блин. в 20 году прописывать onclick в теге? не серьезно как-то :( потом начинающие перенимают это и пишут также. Может для Вас это не играет роли(надеюсь это не так), но я противник такого написания, сами говорите, мы не в 10 году уже и html должен быть отдельно, css отдельно, а js отдельно. При этом лаконично структурирован.
@trygoboi4790
@trygoboi4790 3 роки тому
Не понимаю это видео. Я допустим пишу свой интернет магазин, у меня на бекенде HTML, а на фронтенде FORTRAN и Perl. По моему это лучший стек для разработки интернет программы.
@lllyx93
@lllyx93 3 роки тому
Наоборот наверное? Лучший не лучший у каждого инструмента есть плюсы и минусы
@trygoboi4790
@trygoboi4790 3 роки тому
@@lllyx93 я шучу))) Я бекендер на Java
@ozimnadius
@ozimnadius 3 роки тому
Кнопки должны быть кнопками, кнопка меню - div, не семантично, не забывай что тебя много новичков смотрят.
@sergeypetrovetsky3431
@sergeypetrovetsky3431 3 роки тому
Если должно произойти событие то кнопка через Баттон. Если переход то ссылка
@ozimnadius
@ozimnadius 3 роки тому
@@sergeypetrovetsky3431 здорово, но это не тебе адресовано.
@asex9535
@asex9535 3 роки тому
Спасибо за видео , моя цель - стать HTML-программистом .
@lllyx93
@lllyx93 3 роки тому
Если это шутка, очень смешно
@BrunchHouse-lo7pv
@BrunchHouse-lo7pv 19 днів тому
Очень разочаровало видео, хотя автор явно профи. Я начинающий верстальщик и пытаюсь найти контент, который можно свободно воспринимать и изучать. 5 минут - растянулись на 2 часа, я постоянно останавливала и пересматривала каждый момент, параллельно перепроверяя информацию в интернете. По итогу - я переписала весь код, очень долго проверяла - и визуал у меня получился - но по функционалу меню просто не работает. Возможно, я допустила ошибку(которую не могу найти), но на будущее... ПОЖАЛУЙСТА ОБЪЯСНЯЙТЕ, ДЛЯ ЧЕГО пишется код. Мы подключили JS - хорошо, А ЦЕЛЬ? Я более чем уверена, что контент смотрят новички в деле - и полноценного знания JS у них нет, мне лично до сих пор не ясно, зачем мы подключили JS и на что это повлияло - А ВОЗМОЖНО именно из-за этого у меня и не работает код, ведь JS мог не подключится - а как это проверить, и на что влияет код написанный в нем - я не могу.
@RomanRachkov
@RomanRachkov 3 роки тому
у nicepage чистый код?!!! ага, конечно.
@onebytesiteit30-75
@onebytesiteit30-75 3 роки тому
Полезное крутое видео. Если хотите еще доп инфы забегайте в гости. Правда у меня на канале для начинающих материал. Делюсь опытом так сказать. Стараюсь делать годный контент. Ну а тут лайк за видос. Очень полезные фишечки
@SuprunAlexey
@SuprunAlexey 3 роки тому
Спам.
@Alexus1504
@Alexus1504 3 роки тому
Верстка стала проще!!!??? Ну ну, пойди освой эту простоту!!! Если учесть, что к самой верстке с ее сложными компонентами, такие как флексы, гриды, формы и т.д. есть еще и множество разнообразных элементов, которые нужно уметь заверстать , еще и вплетается Ява Скрипт!!! То конечно проще некуда!!!
@SuprunAlexey
@SuprunAlexey 3 роки тому
Стала намного проще
@-Forever-Young-
@-Forever-Young- Рік тому
Просто у тебя мало практики
@dmitriykurtsev2427
@dmitriykurtsev2427 3 роки тому
Ммм, круто, урок как сделать обсолютно не доступное меню, ммм. Кнопку меню делаем с помощью div, ссылкам не делаем visually: hidden, и еще не используем aria от слова совсем. Новички, не делайте так как в видео, потом из-за такого меню будут люди страдать
@jeb_7749
@jeb_7749 3 роки тому
Я новичок. Можно поподробнее?
@dmitriykurtsev2427
@dmitriykurtsev2427 3 роки тому
@@jeb_7749 хорошее бургер меню это: 1. Использовать для кнопки тег button, так же указывать ему aria-expanded и aria-controls атрибуты (можешь сам про них почитать) для того, чтобы screen reader знал, что открывает и закрывает эта кнопка и чем она управляет. 1.1. Если в кнопке три полоске или что то на подобии, то следует еще указывать aria-label, дабы screen-reader произнес что делает эта кнопка. 2. При открытии меню на мобилках надо блокировать все элементы за пределами меню, на которые можно перейти с клавы или которые может произнести screen reader.
@dmitriykurtsev2427
@dmitriykurtsev2427 3 роки тому
@@jeb_7749 могу скинуть свою реализацию
@maksymgapachilo9507
@maksymgapachilo9507 3 роки тому
@@dmitriykurtsev2427 скинь мне плс)
@dmitriykurtsev2427
@dmitriykurtsev2427 3 роки тому
@@maksymgapachilo9507 codepen.io/DmitriyKurtsev/pen/OJymmpV
@Professor_Ro
@Professor_Ro 3 роки тому
предлагаю эту скороговорку слушать на 0.75, от алкаша голова меньше грузиться будет
@SuprunAlexey
@SuprunAlexey 3 роки тому
Та лаадноо
@Professor_Ro
@Professor_Ro 3 роки тому
@@SuprunAlexey не ты быстро говоришь а я медленно слушаю))
@Fristonit
@Fristonit 5 місяців тому
Слишком сжато по сути просто переписывание без обяснения
@user-og2wi8wh7s
@user-og2wi8wh7s 3 роки тому
Не очень подача из за скорости выдаваемой информации.
@FA-tu5ti
@FA-tu5ti 2 роки тому
сделай по-медленнее тогда
@Kopo4e
@Kopo4e 3 роки тому
Adobe Muse - Главная фишка и uKit, остальное в мусорку, верстальщики не нужны
@SuprunAlexey
@SuprunAlexey 3 роки тому
Хзхз, субъективно
@Kopo4e
@Kopo4e 3 роки тому
@@SuprunAlexey Го видос по Adobe Muse
@SPUA
@SPUA 3 роки тому
@@Kopo4e последняя версия 2 года назад.. хм...
@lllyx93
@lllyx93 3 роки тому
Неподдерживаемый говно код детектед
@MaxYanov
@MaxYanov 3 роки тому
Всё хорошо, но после УЛ и СПАН захотелось выключить видео
@lsnowl8924
@lsnowl8924 3 роки тому
выключи и не возвращайся от тебя гавной воняет аж сюда слышно
@timurislamov1671
@timurislamov1671 3 роки тому
Ничего не понятно и очень не интересно! Нафиг создал это видео? Всё очень быстро и непонятно!!!!
@SuprunAlexey
@SuprunAlexey 3 роки тому
Капец, наоборот интересно и понятно
@romangolumbevskiy7268
@romangolumbevskiy7268 Рік тому
Ужасная подача информации. 1) Если видео называется ТОП-10 фишек HTML/CSS, то должно быть последовательно 10 фишек с объяснением, где и как каждая применяется. 2) Зачем JS в ролике про HTML/CSS? Ставь в описание или превью тогда и JS.
@technic_and_programming
@technic_and_programming 3 роки тому
Спасибо!
@SuprunAlexey
@SuprunAlexey 3 роки тому
Всегда пожалуйста!
Learn CSS Animations In 20 Minutes - For Beginners
21:22
Slaying The Dragon
Переглядів 904 тис.
Адаптивная верстка сайта
2:01:10
От 0 до 1
Переглядів 16 тис.
Піхотинець - про рутину на фронті
00:46
Суспільне Новини
Переглядів 293 тис.
Артем Пивоваров х Klavdia Petrivna - Барабан
03:16
Artem Pivovarov
Переглядів 6 млн
Учим CSS за 1 час! #От Профессионала
1:26:02
Хауди Хо™ - Просто о мире IT!
Переглядів 2,3 млн
Login Form in HTML & CSS
11:07
Codehal
Переглядів 1,1 млн