- Видео 38
- Просмотров 56 442
Pro Web
Украина
Добавлен 1 апр 2018
Привет!
На канале Pro Web мы будем рассматривать под микроскопом жизнь и инструменты front-end разработчика. Основные навыки: html, css, jsvascript. В общем все то, что тебе поможет стать PROфессионалом в мире web-разработки.
Почта для вопросов и предложений - inweb@ua.fm
Поддержать канал:
www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG
www.patreon.com/tutproweb
donatello.to/proweb
На канале Pro Web мы будем рассматривать под микроскопом жизнь и инструменты front-end разработчика. Основные навыки: html, css, jsvascript. В общем все то, что тебе поможет стать PROфессионалом в мире web-разработки.
Почта для вопросов и предложений - inweb@ua.fm
Поддержать канал:
www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG
www.patreon.com/tutproweb
donatello.to/proweb
MARGINы: складываются или накладываются?
Поведение css свойства margin в различных ситуациях. Как ведут себя marginы при различных значениях у элементов свойства display.
Просмотров: 40
Видео
Современные семантические HTML теги для модального окна и аккордеона/спойлера/FAQ: DIALOG и DETAILS
Просмотров 3414 дней назад
Избавляемся от сложной структуры и лишнего JavaScript кода при использовании современных тегов DIALOG и DETAILS. Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatello donatello.to/proweb Crypto USDT (TRC20): TKEmeUR2CdSDxd5D8RCHAr95jMmtAF6nhq
CSS Custom properties или переменные в CSS
Просмотров 673 месяца назад
Пользовательские параметры в CSS. Создание CSS Custom properties, принципы работы и примеры использования. Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatello donatello.to/proweb Crypto USDT (TRC20): TKEmeUR2CdSDxd5D8RCHAr95jMmtAF6nhq
CSS Nesting. Новый синтаксис написания селекторов в CSS.
Просмотров 1303 месяца назад
CSS получил суперсилу! Теперь SASS, LESS и другие препроцессоры не нужны? Разбираем новый синтаксис и новые возможности CSS. Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatello donatello.to/proweb Crypto USDT (TRC20): TKEmeUR2CdSDxd5D8RCHAr95jMmtAF6nhq
CSS GRID Часть 5. Свойства грид-элемента для управления визуальным расположением.
Просмотров 383 месяца назад
Изменение визуального порядка грид-элементов, накладывание и пересечение грид элементов, z-index для грид элементов. Всё это и немного больше в том видео. Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatello donatello.to/proweb Crypto USDT (TRC20): TKEmeUR2CdSDxd5D8RCHAr95jMmtAF6nhq
CSS GRID Часть 4. Свойства GRID Item
Просмотров 954 месяца назад
В этом видео мы рассмотрим свойства грид элементов, которые помогают расположить элементы внутри сетки или внутри ячейки грида. Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatello donatello.to/proweb Crypto USDT (TRC20): TKEmeUR2CdSDxd5D8RCHAr95jMmtAF6nhq
CSS GRID Часть 3. Свойства GRID Container
Просмотров 844 месяца назад
В этом видео продолжаем знакомиться со свойствами грид контейнера. Рассмотим работу таких свойств как: - grid-auto-flow - grid-auto-columns - grid-auto-rows - justify-content - align-content - place-content - justify-items - align-items - place-items Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatell...
CSS GRID. Часть 2. Свойства GRID Container
Просмотров 914 месяца назад
В этом видео мы познакомимся с основными свойствами грид-контейнера по управлению параметрами столбцов и рядом грида: grid-template-columns, grid-template-rows, gap. Рассмотрим новые единицы измерения и функции которыми можно пользоваться в CSS GRID Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatello...
CSS GRID . Часть 1. Основные понятия CSS GRID
Просмотров 1424 месяца назад
В этом и видео я расскажу: - что такое CSS GRID? - чем CSS GRID отличается от CSS FLEXBOX а так же познакомлю вас с основными понятиями CSS GRID Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatello donatello.to/proweb Crypto USDT (TRC20): TKEmeUR2CdSDxd5D8RCHAr95jMmtAF6nhq
Анализ и оптимизация проекта JAVASCRIPT || Консультации. Менторство
Просмотров 835 месяцев назад
Ко мне обратились за консультацией: попросили посмотреть, что можно улучшить в простом проекте на JAVASCRIPT. Что из этого вышло можете увидеть в видео. Рассказываю о BEST PRACTICE написания кода, как правильно писать и улучшить ваш JAVASCRIPT, а так же немного оптимизации для HTML и CSS. Исходный код: drive.google.com/file/d/1zEFPOsUVGTs0veeBiAXoDmkz5J8XuZrB/view?usp=drive_link Результат: driv...
Актуальные версии HTML, CSS, JS. Разбираемся что мы пропустили в версиях технологий.
Просмотров 1435 месяцев назад
В видео мы рассмотрим какие актуальные версии технологий HTML, CSS, JS, почему или когда произошло изменение или отмена нумераций версий. Ссылки на страницы из видео: CSS github.com/orgs/CSS-Next/projects/1/views/2 HTML www.w3.org/TR/2021/NOTE-html53-20210128/ html.spec.whatwg.org/ JS www.w3schools.com/js/js_versions.asp Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJ...
Полезные плагины для VS CODE
Просмотров 9287 месяцев назад
В этом видео я расскажу, какими плагинами для VS CODE пользуюсь я и чем они мне помогают. Поддержи канал: PayPal www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG или по почте - inweb@ua.fm Patreon www.patreon.com/tutproweb Donatello donatello.to/proweb Crypto USDT (TRC20): TKEmeUR2CdSDxd5D8RCHAr95jMmtAF6nhq
Сброс стилей vs нормализация стилей || reset.css vs normalize.css
Просмотров 5788 месяцев назад
Сброс и нормализация стилей - это два подхода к верстке. Они используются для написания верстки, которая одинаково отображается во всех браузерах. Полезные ссылки: Сброс - meyerweb.com/eric/tools/css/reset/ Нормализация - github.com/necolas/normalize.css/blob/master/normalize.css Современные варианты подходов Современная нормализация - github.com/sindresorhus/modern-normalize/blob/main/modern-n...
Зачем и как правильно скрывать элементы на странице. Паттерн VISUALLY HIDDEN
Просмотров 5869 месяцев назад
В видео рассмотрим случаи и способы как скрыть элементы, которые нужны в разметке и не предусмотрены в дизайне. Полезные ссылки: Проверка валидности кода HTML - validator.w3.org/nu/ Проверка на оптимизацию по сео и доступности - pagespeed.web.dev/ или инструмент Lighthouse (по умолчанию встроен в панель разработчика Google Chrome) Рекомендации Google : developer.chrome.com/docs/lighthouse/seo/f...
Верстка страницы на примере реального макета. Часть 5 | Верстка макета FIGMA с объяснением
Просмотров 3669 месяцев назад
Ответы на вопросы зрителей по верстке и стилизации проекта. Макет взят на просторах интернета и находится в свободном доступе. Ссылка на макет: www.figma.com/file/cD7fJrxsWNCtmLVxmrsFka/GetWash-(My-Copy)?node-id=0:1 Ссылка на файлы проекта: github.com/Kirkusik/pro-web/tree/main/Page layout example. GetWash - Part 4 t.me/tutproweb - Телеграмм-канал с "печеньками" и "плюшками" Поддержи канал: Pay...
CSS FLEXBOX Часть 1 | Уроки HTML CSS
Просмотров 48511 месяцев назад
CSS FLEXBOX Часть 1 | Уроки HTML CSS
CSS FLEXBOX Часть 3 | Уроки HTML CSS
Просмотров 33011 месяцев назад
CSS FLEXBOX Часть 3 | Уроки HTML CSS
CSS FLEXBOX Часть 2 | Уроки HTML CSS
Просмотров 31311 месяцев назад
CSS FLEXBOX Часть 2 | Уроки HTML CSS
Верстка страницы на примере реального макета ЧАСТЬ 4. | Верстка макета FIGMA с объяснением
Просмотров 1,7 тыс.11 месяцев назад
Верстка страницы на примере реального макета ЧАСТЬ 4. | Верстка макета FIGMA с объяснением
Верстка страницы на примере реального макета ЧАСТЬ 3. | Верстка макета FIGMA с объяснением
Просмотров 1,6 тыс.Год назад
Верстка страницы на примере реального макета ЧАСТЬ 3. | Верстка макета FIGMA с объяснением
Значение css свойства display: INLINE | BLOCK | INLINE-BLOCK
Просмотров 876Год назад
Значение css свойства display: INLINE | BLOCK | INLINE-BLOCK
Верстка страницы на примере реального макета ЧАСТЬ 2. | Верстка макета FIGMA с объяснением
Просмотров 2,7 тыс.Год назад
Верстка страницы на примере реального макета ЧАСТЬ 2. | Верстка макета FIGMA с объяснением
CSS свойство display | Уроки HTML CSS
Просмотров 3,2 тыс.Год назад
CSS свойство display | Уроки HTML CSS
Боксовая модель элементов CSS. | Уроки HTML CSS
Просмотров 601Год назад
Боксовая модель элементов CSS. | Уроки HTML CSS
CSS Селекторы: структура селекторов, приоритет, специфичность и !important. | Уроки HTML CSS
Просмотров 989Год назад
CSS Селекторы: структура селекторов, приоритет, специфичность и !important. | Уроки HTML CSS
Именование классов в HTML. Коротко о BEM: зачем и как его использовать. | Уроки HTML CSS
Просмотров 4,5 тыс.Год назад
Именование классов в HTML. Коротко о BEM: зачем и как его использовать. | Уроки HTML CSS
Новые методы массивов toSorted, toReversed, toSpliced на замену мутирующим sort, reverse, splice.
Просмотров 87Год назад
Новые методы массивов toSorted, toReversed, toSpliced на замену мутирующим sort, reverse, splice.
Переменные в JavaScript. Let, const и почему использовать var можно! | Уроки JS
Просмотров 130Год назад
Переменные в JavaScript. Let, const и почему использовать var можно! | Уроки JS
Делаем разметку текста лучше с помощью семантических тегов HTML5
Просмотров 556Год назад
Делаем разметку текста лучше с помощью семантических тегов HTML5
Что нам принес JavaScript в 2022? Обзор новинок.
Просмотров 247Год назад
Что нам принес JavaScript в 2022? Обзор новинок.
Говорят, что класс с указанием цвета-плохой тон. Ведь цвет также может поменяться
Да, в правы. По хорошему нужно давать абстрактные названия. Например, main-color, accent-color и т.д.
спасибо
Максимально понятно подаете материал. Спасибо.
почему когда пишу link, ничего не появляется и не работает stylesheet
Эта методология глупость, в html достаточно индивидуальнвх тегов для полноценного сайта и для секций и для блоков и классификпции отделбных блоков. Используя обилие и разнообразие тэгов применяч вложенную структуру никаких подчеркиваний и ненадо никаких методологий ненадо
Во вложенной структуре селекторов и есть проблема. Браузеру тяжелее работать со сложными селекторами, чем с простыми. Если закрыть глаза на то, что браузер будет медленнее обрабатывать сложные селекторы и соответственно медленнее отрисовывать страницу - можно делать как хочешь.
Спасибо! Всё нужное без лишнего! С уважением к Вам Ахмад Гапурович
10:22 Благодаря переменным можно понимать, где какой из четырёх оттенков белого использовать.
Спасибо!
Гора родила мышь. После стольких лет развития препроцессоров и практики их применения, разработчики CSS сделали какой-то свой костыльный вариант, который во всём хуже препроцессоров.
Клас! Если дошлифуют до полноценной замены САСС будет меньше возни. Мне кажется будет удобнее и быстрее. Спасибо за видео! Понравилось!
Спасибо!
Очень полезное видео, спасибо)
Спасибо!
Мне кажется момент с модификаторами был раскрыт не полностью, очень абстрактно, он хорошо бы ложился на кнопки. Не нужно создавать классы для каждой кнопки отдельно, если схожи и отличаются только цветом (как в примере). Создайте общий класс (блок) .btn, и добавьте класс .btn--blue (модификатор). Обычно модификаторы обозначаются как {класс к которому относится модификатор}--{название модификатора} и переопределяют\добавляют некоторые свойства блоку или элементу. Да, через двойной дефис. Это позволяет быстро добавлять модификаторы элементам, а также исключает ситуацию, когда мы модем использовать модификатор не в том месте где предполагалось, так как у модификатора всегда есть префикс в виде класса блока для которого он предназначен. Таким образом мы будем иметь следующую картину: блок .btn будет иметь модификаторы (.btn--blue, .btn--yellow, .btn--green). Модификаторов может быть несколько. К примеру <a href="/" class="btn btn--yellow btn--bordered"></a>. Что означает, у нас будет кнопка, она будет желтой, и она будет не залита цветом и иметь рамку. Убрав всего 1 модификатор btn--bordered мы получаем желтую залитую цветом кнопку. Это очень важная тема для полного понимания БЭМ.
Талантливый преподаватель😊
Роман, спасибо за ролик. Расскажи ещё про плагины полезные для vscode
тут ruclips.net/video/YQ5G553_Mu0/видео.htmlsi=h0j_kmvGeSNb2dgH
Роман купи микрофон нормальный )
Как только ваших донатов будет достаточно - куплю обязательно)
порожняк
"Порожняк", потому что...? Хотелось бы услышать факты, чтобы делать видео лучше.
@@tutproweb некоторые твои советы, некорректны и введут в заблуждение новичков
@@tutproweb сколько времени практикует вёрстку? Твой почерк говорит о том, что ты фрилансер
Думаю, время которое я верстаю не имеет значения. Я готов обсуждать все замечания, если они будут по фактам, а не голословные фразы "Ты даешь неверные советы", "Твои советы неправильные", " Твои советы вводят в заблуждение новичков" или "порожняк". Продолжим диалог?)
@@tutproweb а как надо надо вообще с классами работать дай совет пж или ссылку на источники как нибудь? чето я вообще не догоняю как это работает
Спасибо!
Спасибо за Ваш труд.
😎👍
19% Браузеры уже внедрили данную технологию?
Вы о какой именно технологии? caniuse.com/css-display-contents CSS display: contents - 96.98% caniuse.com/mdn-css_properties_display_multi-keyword_values CSS property: display: Multi-keyword values - 90.4%
@@tutproweb на 7 минуте, поддержка синтаксиса display: block flex; display: inline flex
Вот, по второй ссылке в моем сообщении выше статус поддержки. Уже 90.4% браузеров поддерживают.
@@tutproweb а, ну тогда всё ок ))
Спасибо за полезный материал! Хорошее вышло пособие по Grid. А как называется тема редактора кода, очень приятная для глаз?
Bearded theme ?
Спасибо) Да, именно она, Black & Emerald
где учить JS ?
1) learn.javascript.ru/ - тут плюс минус адекватно по темам разбито и задачи есть на практику. 2) Любые источники в ютубе и интернете на тему "что-то там курс js" 3) Последнее, но не по важности - чтение документации. Как вариант на MDN.
14:00 как он так сделал?)
Спасибо большое за ваш труд 😎🫡😉
Про схлопывание margin не рассказали.
Там очень много нюансов. Оно не всегда и везде схлопывает. Возможно запишу отдельное видео по отступам и там уже раскрою вопрос.
Автор, пожалуйста увеличивай шрифт в редакторе когда записываешь свои видео! Мы ведь не на весь экран разворачиваем, нам ведь еще и в редактор все надо записывать!
Ход выполнения отличается от большинства уроков. Но логика и структура очень понятная. Спасибо вам.
Спасибо за ваш комментарий. Приятно, что зрителям заходит )) Подаю так, как делаю сам. Конечно, на практике весь процесс делается для каждой отдельной секции/блока сайта последовательно: разметка + классы, стилизация шрифтов, расстановка. Но в видео решил разбить на тематические блоки.
Скажите пожалуйста, если я Ginny и мне около 60 годочков , и пока я начинаю что то делать( и это жуть как интересно, но так сложно - ведь я только три месяца как мышку в руки взяла) Так вот , по идее всё вполне понятно , но меня мучает вопрос , ведь чтобы что то подключить , надо что то иметь - верно ли что если я напишу тег style, то автоматически получится создать красоту? Или где то , что то надо ещё найти и к себе утащить ?
Здравствуйте. когда вы пишете тег style - этим вы говорите браузеру, что собираетесь сделать красоту) Дальше вам нужно писать css для элементов страницы, чтобы они начинали становиться красивыми. Надеюсь правильно понял ваш вопрос)
@@tutproweb Спасибо.
Познавательное видео касательно нормализации и сбросов стилей. Хотелось бы увидеть ваш вариант фала reset.css и normalize.css. Надеюсь в будущем будет видео на данную тематику более с подробными примерами.
Очень приятно, что вам заходит контент, который я для вас делаю. В моем плане для бесплатного доступа пока не предвидится возврата к теме нормализации и сброса стилей. Но, если вдруг аудитория выскажет большое желание, например, в виде донатов,- я конечно же обязательно запишу такое видео с детальным разбором.
Интересное видео, но хотелось бы увидеть вторую часть где будет включены плагины для Scss, JS, Tailwind, SVG и Image.
А это все) Для остального плагинов у меня нет. Мне как-то и не нужно для остального.
@@tutproweb Получается вы работает в основном с php?
Верстка: html+css+js. Верстаю часто со сборщиком gulp+webpack, тут же и настраиваю компиляцию sass, и минификацию картинок и другое. Очень часто с CMS WordPress, а это php. Tailwind не использую по причине того, что быстрее написать свои решения для уникального дизайна, чем менять компоненты Tailwind. С SVG руками работаю. Больше ничего и не нужно.
@@tutproweb Gulp очень классно решение для разработчиков. Очень быстро можно делать разработку сайтов. Что можете посоветовать после изучения базовых знаний по HTML, CSS, JS. Куда дальше двигаться? Просто я сейчас практикуюсь в переносе верстки на CMS. Также есть базовые знания в PHP и БД. Писал парк проектов с нуля на HTML, CSS, Bootstrap, JS, PHP, SQL.
Если говорить про front end, то однозначно нужно изучить следующее: - React или Angular или Vue - TypeScript и/или аналоги - решение/библиотека для ServerSideRender - понимание работы серверов, умение написание простого сервера на node.js для понимания работы, другие базы данных (Монго например)
самый приятный гайд который я видел, смотрел не моргая
55:04 font-family убрать пробелы (возможно). Не подключились шрифты у Вас. Привести в соответствие @font-face, font-family and link.
Полезное видео, настроил свой vsc, спасибо
Благодарю за полезную информацию🤝 Был бы вам очень признателен за предоставление вашего варианта файла сброса и нормализации для изучения.
В описании к видео оставил пару ссылок на такие файлы для изучения.
использование атрибутов id разве обязательно для семантики? а классы? или это от ситуации зависит?
Привет. Нет, для самой семантики не обязательно. ID и классы вообще к семантике не относятся. Семантика - это подход в разметке - использование правильных тегов. А остальное нужно для стилизации или обработки через JavaScript.
Отлично. Очень заходит структурирование верстки!!!
Как долго я искал такое толковое, поэтапное объяснение. 10 из 10!!!
в последнем section в обеих кнопках будет правильнее вместо "<" и ">" прописать < и >
Голос похож на ведущего канала про еду
Demi Murych хорошо расказывает про симантику ,что основа всего section и article
Привет можешь сделать видео о своих дополнениях в vs code
На неделе постараюсь записать.
Хочу дізнатися що це за розширення чи програму ви використовуєте для перегляду структури сайту. Відгукніться будь ласка
вже замітив у вашому відео, дякую
@@papo4kacleo WAVE Report, вроде работает
Оборочивание текста в дивы в место <р> это нарушение семантики?
Это не то, чтобы ее нарушение. Это ее отсутствие. Для текста есть много семантических тегов. Для параграфа - <p>, для цитаты - <blockqoute> и многие другие.
Спасибо за стартовый урок
а что за программа в которой автор прописывает строки?
VS CODE. code.visualstudio.com/
Большое спасибо. Вы лучший.
Весьма информативно. Такой формат полностью закрывает вопрос 👍
Благодарю