CSS FLEXBOX Часть 1 | Уроки HTML CSS
11:23
КОМЕНТАРІ
@OLDSCHOOLPUBGUA
@OLDSCHOOLPUBGUA 21 день тому
Спасибо большое за ваш труд 😎🫡😉
@RustemmKh
@RustemmKh Місяць тому
Про схлопывание margin не рассказали.
@tutproweb
@tutproweb Місяць тому
Там очень много нюансов. Оно не всегда и везде схлопывает. Возможно запишу отдельное видео по отступам и там уже раскрою вопрос.
@bikadorov
@bikadorov Місяць тому
Автор, пожалуйста увеличивай шрифт в редакторе когда записываешь свои видео! Мы ведь не на весь экран разворачиваем, нам ведь еще и в редактор все надо записывать!
@user-mm8be8hn2q
@user-mm8be8hn2q Місяць тому
Ход выполнения отличается от большинства уроков. Но логика и структура очень понятная. Спасибо вам.
@tutproweb
@tutproweb Місяць тому
Спасибо за ваш комментарий. Приятно, что зрителям заходит )) Подаю так, как делаю сам. Конечно, на практике весь процесс делается для каждой отдельной секции/блока сайта последовательно: разметка + классы, стилизация шрифтов, расстановка. Но в видео решил разбить на тематические блоки.
@user-vg9pc4kw9q
@user-vg9pc4kw9q Місяць тому
Скажите пожалуйста, если я Ginny и мне около 60 годочков , и пока я начинаю что то делать( и это жуть как интересно, но так сложно - ведь я только три месяца как мышку в руки взяла) Так вот , по идее всё вполне понятно , но меня мучает вопрос , ведь чтобы что то подключить , надо что то иметь - верно ли что если я напишу тег style, то автоматически получится создать красоту? Или где то , что то надо ещё найти и к себе утащить ?
@tutproweb
@tutproweb Місяць тому
Здравствуйте. когда вы пишете тег style - этим вы говорите браузеру, что собираетесь сделать красоту) Дальше вам нужно писать css для элементов страницы, чтобы они начинали становиться красивыми. Надеюсь правильно понял ваш вопрос)
@user-vg9pc4kw9q
@user-vg9pc4kw9q Місяць тому
@@tutproweb Спасибо.
@digidon727
@digidon727 Місяць тому
Познавательное видео касательно нормализации и сбросов стилей. Хотелось бы увидеть ваш вариант фала reset.css и normalize.css. Надеюсь в будущем будет видео на данную тематику более с подробными примерами.
@tutproweb
@tutproweb Місяць тому
Очень приятно, что вам заходит контент, который я для вас делаю. В моем плане для бесплатного доступа пока не предвидится возврата к теме нормализации и сброса стилей. Но, если вдруг аудитория выскажет большое желание, например, в виде донатов,- я конечно же обязательно запишу такое видео с детальным разбором.
@digidon727
@digidon727 Місяць тому
Интересное видео, но хотелось бы увидеть вторую часть где будет включены плагины для Scss, JS, Tailwind, SVG и Image.
@tutproweb
@tutproweb Місяць тому
А это все) Для остального плагинов у меня нет. Мне как-то и не нужно для остального.
@digidon727
@digidon727 Місяць тому
@@tutproweb Получается вы работает в основном с php?
@tutproweb
@tutproweb Місяць тому
Верстка: html+css+js. Верстаю часто со сборщиком gulp+webpack, тут же и настраиваю компиляцию sass, и минификацию картинок и другое. Очень часто с CMS WordPress, а это php. Tailwind не использую по причине того, что быстрее написать свои решения для уникального дизайна, чем менять компоненты Tailwind. С SVG руками работаю. Больше ничего и не нужно.
@digidon727
@digidon727 Місяць тому
@@tutproweb Gulp очень классно решение для разработчиков. Очень быстро можно делать разработку сайтов. Что можете посоветовать после изучения базовых знаний по HTML, CSS, JS. Куда дальше двигаться? Просто я сейчас практикуюсь в переносе верстки на CMS. Также есть базовые знания в PHP и БД. Писал парк проектов с нуля на HTML, CSS, Bootstrap, JS, PHP, SQL.
@tutproweb
@tutproweb Місяць тому
Если говорить про front end, то однозначно нужно изучить следующее: - React или Angular или Vue - TypeScript и/или аналоги - решение/библиотека для ServerSideRender - понимание работы серверов, умение написание простого сервера на node.js для понимания работы, другие базы данных (Монго например)
@userkakashkoed
@userkakashkoed Місяць тому
самый приятный гайд который я видел, смотрел не моргая
@user-yr6lv4vc7v
@user-yr6lv4vc7v 2 місяці тому
55:04 font-family убрать пробелы (возможно). Не подключились шрифты у Вас. Привести в соответствие @font-face, font-family and link.
@user-pg6vq7ow2t
@user-pg6vq7ow2t 2 місяці тому
Полезное видео, настроил свой vsc, спасибо
@Andrew-nm1yl
@Andrew-nm1yl 2 місяці тому
Благодарю за полезную информацию🤝 Был бы вам очень признателен за предоставление вашего варианта файла сброса и нормализации для изучения.
@tutproweb
@tutproweb 2 місяці тому
В описании к видео оставил пару ссылок на такие файлы для изучения.
@alexlisouski4069
@alexlisouski4069 2 місяці тому
использование атрибутов id разве обязательно для семантики? а классы? или это от ситуации зависит?
@tutproweb
@tutproweb 2 місяці тому
Привет. Нет, для самой семантики не обязательно. ID и классы вообще к семантике не относятся. Семантика - это подход в разметке - использование правильных тегов. А остальное нужно для стилизации или обработки через JavaScript.
@evgeniikiryshkin6949
@evgeniikiryshkin6949 2 місяці тому
Отлично. Очень заходит структурирование верстки!!!
@evgeniikiryshkin6949
@evgeniikiryshkin6949 2 місяці тому
Как долго я искал такое толковое, поэтапное объяснение. 10 из 10!!!
@user-sh6tu3mu7j
@user-sh6tu3mu7j 2 місяці тому
в последнем section в обеих кнопках будет правильнее вместо "<" и ">" прописать &lt; и &gt;
@deanwichester6412
@deanwichester6412 2 місяці тому
Голос похож на ведущего канала про еду
@deanwichester6412
@deanwichester6412 2 місяці тому
Demi Murych хорошо расказывает про симантику ,что основа всего section и article
@lagom1112
@lagom1112 3 місяці тому
Привет можешь сделать видео о своих дополнениях в vs code
@tutproweb
@tutproweb 3 місяці тому
На неделе постараюсь записать.
@papo4kacleo
@papo4kacleo 3 місяці тому
Хочу дізнатися що це за розширення чи програму ви використовуєте для перегляду структури сайту. Відгукніться будь ласка
@papo4kacleo
@papo4kacleo 3 місяці тому
вже замітив у вашому відео, дякую
@Freelancer-Ok
@Freelancer-Ok 3 місяці тому
Оборочивание текста в дивы в место <р> это нарушение семантики?
@tutproweb
@tutproweb 3 місяці тому
Это не то, чтобы ее нарушение. Это ее отсутствие. Для текста есть много семантических тегов. Для параграфа - <p>, для цитаты - <blockqoute> и многие другие.
@errorerror3564
@errorerror3564 3 місяці тому
Спасибо за стартовый урок
@violent4619
@violent4619 3 місяці тому
а что за программа в которой автор прописывает строки?
@tutproweb
@tutproweb 3 місяці тому
VS CODE. code.visualstudio.com/
@ArturasMoisiejenko
@ArturasMoisiejenko 3 місяці тому
Большое спасибо. Вы лучший.
@andreashalter7468
@andreashalter7468 3 місяці тому
Весьма информативно. Такой формат полностью закрывает вопрос 👍
@emilhuseyn6158
@emilhuseyn6158 3 місяці тому
Благодарю
@dansolo7669
@dansolo7669 3 місяці тому
Автор, знай, место в раю тебе зарезервировано. Спасибо тебе за информацию лучшие объяснения из всего ютуба
@user-et6pj2ed1k
@user-et6pj2ed1k 3 місяці тому
На просмотре єтого видео и закончилась последовательная логическая цепочка в моей голове( А так все хорошо начиналось)(
@kv3453
@kv3453 4 місяці тому
Так у них там по моему и сокращения типа btn не рекомендуется писать общем там с их названиями классов скоро и самой страницы html не видно будет все классами исписано 😂
@kv3453
@kv3453 4 місяці тому
Не пойму чо все так озабочены этим бэм по моему в вёрстке бэм это номер 16-й и он ни как не повлияет на ранжирование страницы и отображение , это я так понял в Яндексе придумали что бы при поддержке легче было втыкнуть где какой класс но там они по-моему ещё часть возможностей css урезали типа универсальный селектор и ещё чего-то а с другой стороны обращать на разработанную Яндексом методологию типа чо прям обязуха ? Плюс читал статью там автор озаботился и выяснил что регистрация самих классов которыми по бэм истыкают всю вёрстку соизмерима со скорость прохода дополнительной итерации при вложенности . Общем фонарь это 🙂
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
Спасибо за развёрнутые ответы С наступающим)
@ragnardark12
@ragnardark12 4 місяці тому
Спасибо за переданные знания, Лайк однозначно!
@ask9014
@ask9014 4 місяці тому
Greed - жадность, а grow - рост, расти
@akinchitb2
@akinchitb2 4 місяці тому
Огромное спасибо
@zakassan
@zakassan 4 місяці тому
Спасибо большое 😊
@orazaliorazali1000
@orazaliorazali1000 4 місяці тому
Благодарю!
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
Спасибо за видео, снова ряд вопросов возник: 1. Не лучше ли использовать max-width вместо width? 2. Можете подробнее рассказать почему использовать обнуление плохо? *7:13* 3. Если мы обнуляем или используем auto для margin блоков это не перечит БЭМу? 4. Почему мы задаём внутренние отступы именно header'у, а не, например, внешние для page-header__container? Есть ли в этом принципиальная разница? 5. По макету в секции excellents под иконкой чата отступ в тексте идёт после слова "связь". Но по вёрстке иначе. Вроде мелочь, но всё же как тогда верстать в макет, если через общие стили для списка (.excellents__item) нельзя подобрать padding? Использовать тег br? 6. 1:11:00 - почему для svg используется именно display:flex и margin:auto? Может использовать padding?
@SIPIKEXE
@SIPIKEXE 4 місяці тому
Автору спасибо, пожелаю хорошего развития канала 👍
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
Спасибо за видео, осталось несколько вопросов: 1. Использование селекторов по тегам в БЭМ не рекомендуется, но в этом видео используется. Почему? 2. Почему вы задали названия классов блоков, описывая их внешний вид: btn-blue, btn-transparent. По БЭМу это же моветон, разве нет? 3. Почему в .section-title line-height: 125%, если по макету для заголовка "Хватит тратить своё время в очередях" line-height: 115% ??
@tutproweb
@tutproweb 4 місяці тому
Приветствую. 1. Так как я не подключал ни reret.css, ни normalize.css записал стили сброса(нормализации) некоторым тегам, чтобы не дублировать в каждом элементе. 2. btn-blue, btn-transparent - это визуальные компоненты и повторяются несколько раз, так что решил вынести в отдельные блоки. В принципе это не запрещено. 3. В остальных заголовках 125%, это скорее всего просто невнимательность дизайнера. Этот параметр сильно никак не влияет на визуал и поэтому решил сделать все заголовки одинаковые.
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
@@tutproweb 2. С блоками всë ясно. Просто немного не понятно почему в названиях классов вы описали их внешний вид (blue, transparent). В таких случаях данные названия допустимы?
@tutproweb
@tutproweb 4 місяці тому
Да. Подписал так, чтобы по названию было понятно что за компонент.
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
@@tutproweb Хорошо, спасибо!
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
Есть несколько вопросов касаемо семантики: 1) Нужно ли всё-таки в этом макете оборачивать список ссылок в footer'е в тег <nav>? 2) По mdn тег <article> должен быть идентифицирован, обычно добавлением заголовка h1-h6 в качестве дочернего. В вашей вёрстке в <article> нет дочернего заголовка, тогда как он должен быть идентифицирован? И на самом деле хотелось бы больше поговорить про семантику в современной вёрстке, обсудить использование конкретных тегов на множестве примеров. Может планируете провести стрим?
@tutproweb
@tutproweb 4 місяці тому
Приветствую. 1) Там идут ссылки на дополнительные страницы сайта: Как использовать, Партнерам, Отзывы. Это можно считать навигацией по сайту. Поэтому можно обернуть. 2) В тег <article> рекомендуется добавлять заголовки. Но если оставить так, валидация покажет всего лишь предупреждение. Так же есть способы добавить "скрытые" для пользователя заголовки, но я не стал сильно углубляться в этом примере. Что касается стрима - он планируется. Как минимум на проверку проектов зрителей. Можно там же обсудить и семантику. Пока собираем проекты и ждем реакцию зрителей)
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
@@tutproweb Понял, спасибо
@DelaemKod
@DelaemKod 4 місяці тому
Теория украдена с форума
@pro100_makari4
@pro100_makari4 4 місяці тому
Хотілось би додати, що якщо в ряд йдуть 2 і більше однакових теги, то краще вкладати їх в список, а не div.
@tutproweb
@tutproweb 4 місяці тому
Дякую за комент. Але краще дивитись не на самі теги, на на інфу в них. Якщо інформацію можна охарактеризувати як набір, перелік або список чогось, тоді так - список можна)
@pro100_makari4
@pro100_makari4 4 місяці тому
@@tutproweb так, параграфи частіше всього звичайні діви)
@tutproweb
@tutproweb 4 місяці тому
А ось діви я б рекомендував в останню чергу використовувати)
@pro100_makari4
@pro100_makari4 4 місяці тому
@@tutproweb я маю на увазі використовувати діви як обгортку для декількох параграфів)
@user-ti4ni3gt7h
@user-ti4ni3gt7h 4 місяці тому
Боже как же понятно все объяснил
@alexs248
@alexs248 4 місяці тому
Есть талант учить!!!! интересно и понятно, отлично поставлен голос!!!
@Imofe_ozuro
@Imofe_ozuro 4 місяці тому
Рома спасибо за контент !
@user-uz2qs3hr2u
@user-uz2qs3hr2u 5 місяців тому
Теперь я поняла что такое семантика. Очень хорошо объясняет
@user-kg4tf9ng4w
@user-kg4tf9ng4w 5 місяців тому
Приветствую!!Начинаю с нуля! 1е 2 части понятные, а вот с 3й частью уже не понятно как и где и что ты подключал???? где ссылки на сайты, как подключать те или иные ссылки, также шрифты и т.д.
@tutproweb
@tutproweb 5 місяців тому
Приветствую, Олег. Ознакомиться с файлами проекта можно по ссылке в описании. Как подключены шрифты показано. Если нужно детальнее - на канале есть отдельное видео. Как подключать те или иные ссылки куда? На картинки? на файлы стилей? На другие сайты? Непонятно. Ответить на вопрос про ссылки сайты не могу - не пойму о каких сайтах идет речь. Видео имеет целью показать один из вариантов процесса верстки страниц. Я проговаривал многие моменты, но все если нужно детально изучить что-то конкретное, например как подключать шрифты, - нужно смотреть видео именно на эту тему.
@user-kg4tf9ng4w
@user-kg4tf9ng4w 5 місяців тому
Я про fonts.css где и как ты это все взял что там написано, просто скачать у тебя скачать это понятно что можно, но я б хотел понять как это пишется и все в этом роде! просто на этом я остановился и не стал дальше ничего смотреть не понятно от куда все это было взято. Ну да ладно, в общем спасибо тебе труды и развивай канал дальше все ок!!! @@tutproweb
@tutproweb
@tutproweb 5 місяців тому
Так подключаются локальные шрифты. Подробнее можно найти в видео ukposts.info/have/v-deo/gqppe6NuaK-mpH0.html Там во второй части видео рассказываю как подключаются файлы шрифтов локально в проект. Не стал дублировать всю информацию, так как она уже есть на канале.
@mikhaildolgov
@mikhaildolgov 5 місяців тому
Так держать! Полезное видео...
@mikhaildolgov
@mikhaildolgov 5 місяців тому
😎👍
@marinatimoshenko4799
@marinatimoshenko4799 5 місяців тому
Спасибо. Хорошо, что у вас короткие видео
@user-yd8th7vl8z
@user-yd8th7vl8z 5 місяців тому
А вот про gap я и забыл! Как-то обходился без него но так кто на 2-3 строчки писать меньше и браузеру понятнее!