- Видео 40
- Просмотров 59 919
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
Типы даных в javascript. Кастинг типов (преобразование типов): в number, в string, в boolean
В этом видео мы подробно разберем, что такое типы данных в JavaScript и зачем они нужны. Вы узнаете, как правильно преобразовывать (кастить) данные из одного типа в другой: например, превращать строки в числа, числа в строки и данные в булевый (логический) тип. Мы покажем вам простые и понятные примеры, чтобы вы могли легко освоить основы преобразования типов в JavaScript. Этот урок идеально подойдет для новичков, которые хотят понять, как эффективно работать с различными типами данных.
----------------------------------------------------------------------------------------------------------------
Поддержи канал:
PayPal
www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG
или по почте - inweb...
----------------------------------------------------------------------------------------------------------------
Поддержи канал:
PayPal
www.paypal.com/donate/?hosted_button_id=CJSX2NUTAWJZG
или по почте - inweb...
Просмотров: 33
Видео
JavaScript для начинающих: Решение задач на переменные, условные операторы, циклы и функции
Просмотров 722 месяца назад
Решаем задачи по JavaScript с полным описанием логики решения. В процессе решения задач озвучиваю ход мыслей и причины принятия решений, а так же причины выбора тех или иных технологий.
MARGINы: складываются или накладываются?
Просмотров 583 месяца назад
Поведение css свойства margin в различных ситуациях. Как ведут себя marginы при различных значениях у элементов свойства display.
Современные семантические HTML теги для модального окна и аккордеона/спойлера/FAQ: DIALOG и DETAILS
Просмотров 463 месяца назад
Избавляемся от сложной структуры и лишнего 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
Просмотров 776 месяцев назад
Пользовательские параметры в 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.
Просмотров 1836 месяцев назад
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. Свойства грид-элемента для управления визуальным расположением.
Просмотров 436 месяцев назад
Изменение визуального порядка грид-элементов, накладывание и пересечение грид элементов, 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
Просмотров 1037 месяцев назад
В этом видео мы рассмотрим свойства грид элементов, которые помогают расположить элементы внутри сетки или внутри ячейки грида. Поддержи канал: 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
Просмотров 898 месяцев назад
В этом видео продолжаем знакомиться со свойствами грид контейнера. Рассмотим работу таких свойств как: - 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
Просмотров 1008 месяцев назад
В этом видео мы познакомимся с основными свойствами грид-контейнера по управлению параметрами столбцов и рядом грида: 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
Просмотров 1548 месяцев назад
В этом и видео я расскажу: - что такое 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 || Консультации. Менторство
Просмотров 938 месяцев назад
Ко мне обратились за консультацией: попросили посмотреть, что можно улучшить в простом проекте на JAVASCRIPT. Что из этого вышло можете увидеть в видео. Рассказываю о BEST PRACTICE написания кода, как правильно писать и улучшить ваш JAVASCRIPT, а так же немного оптимизации для HTML и CSS. Исходный код: drive.google.com/file/d/1zEFPOsUVGTs0veeBiAXoDmkz5J8XuZrB/view?usp=drive_link Результат: driv...
Актуальные версии HTML, CSS, JS. Разбираемся что мы пропустили в версиях технологий.
Просмотров 1529 месяцев назад
В видео мы рассмотрим какие актуальные версии технологий 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
Просмотров 1,1 тыс.11 месяцев назад
В этом видео я расскажу, какими плагинами для 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
Просмотров 74311 месяцев назад
Сброс и нормализация стилей - это два подхода к верстке. Они используются для написания верстки, которая одинаково отображается во всех браузерах. Полезные ссылки: Сброс - 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
Просмотров 680Год назад
Зачем и как правильно скрывать элементы на странице. Паттерн VISUALLY HIDDEN
Верстка страницы на примере реального макета. Часть 5 | Верстка макета FIGMA с объяснением
Просмотров 384Год назад
Верстка страницы на примере реального макета. Часть 5 | Верстка макета FIGMA с объяснением
Верстка страницы на примере реального макета ЧАСТЬ 4. | Верстка макета FIGMA с объяснением
Просмотров 1,7 тыс.Год назад
Верстка страницы на примере реального макета ЧАСТЬ 4. | Верстка макета FIGMA с объяснением
Верстка страницы на примере реального макета ЧАСТЬ 3. | Верстка макета FIGMA с объяснением
Просмотров 1,7 тыс.Год назад
Верстка страницы на примере реального макета ЧАСТЬ 3. | Верстка макета FIGMA с объяснением
Значение css свойства display: INLINE | BLOCK | INLINE-BLOCK
Просмотров 1,1 тыс.Год назад
Значение css свойства display: INLINE | BLOCK | INLINE-BLOCK
Верстка страницы на примере реального макета ЧАСТЬ 2. | Верстка макета FIGMA с объяснением
Просмотров 2,8 тыс.Год назад
Верстка страницы на примере реального макета ЧАСТЬ 2. | Верстка макета FIGMA с объяснением
CSS свойство display | Уроки HTML CSS
Просмотров 4,2 тыс.Год назад
CSS свойство display | Уроки HTML CSS
Боксовая модель элементов CSS. | Уроки HTML CSS
Просмотров 638Год назад
Боксовая модель элементов CSS. | Уроки HTML CSS
CSS Селекторы: структура селекторов, приоритет, специфичность и !important. | Уроки HTML CSS
Просмотров 1,1 тыс.Год назад
CSS Селекторы: структура селекторов, приоритет, специфичность и !important. | Уроки HTML CSS
Именование классов в HTML. Коротко о BEM: зачем и как его использовать. | Уроки HTML CSS
Просмотров 4,9 тыс.Год назад
Именование классов в HTML. Коротко о BEM: зачем и как его использовать. | Уроки HTML CSS
Новые методы массивов toSorted, toReversed, toSpliced на замену мутирующим sort, reverse, splice.
Просмотров 90Год назад
Новые методы массивов toSorted, toReversed, toSpliced на замену мутирующим sort, reverse, splice.
Переменные в JavaScript. Let, const и почему использовать var можно! | Уроки JS
Просмотров 136Год назад
Переменные в JavaScript. Let, const и почему использовать var можно! | Уроки JS
хоть бы рассказали что они значат каждый из свойств, displey flex устанавливает flex, сразу все понятно стало))), бесполезное видео
Абсолютно согласен. Видео бесполезное для тех, кому просто нужно оставить негативный комментарий. Для остальных есть еще ряд видео. Например, Значение css свойства display: INLINE | BLOCK | INLINE-BLOCK - ruclips.net/video/8zIRKOpEShc/видео.html CSS FLEXBOX Часть 1 | Уроки HTML CSS - ruclips.net/video/UbFpBoenqd4/видео.html CSS GRID . Часть 1. Основные понятия CSS GRID - ruclips.net/video/KboU280f2jk/видео.html
@@tutproweb спасибо, обязательно посмотрю, просто хотел услышать поподробнее, потратил время и не понял зачем вообще это видео нужно, его можно было как вступление сделать и дальше рассказать про все типы. Я без негатива, спасибо за ваш труд
Спасибо за информацию. ЗЫ Речь такая, будто говорит izzylaif.
привет, спасибо большое, классно объясняешь все таки)) мне надо освежить знания, сейчас js и тд учу и это забыл.. я два дня начинал смотреть 1-2 уроки и не мог понять, где контейнеры и тд.. думал все по-другому делаешь и не хочу так, НО все таки смотря дальше - понял, что дальше идет все круто и зря я потерял время, а не сразу нормально смотрел твои уроки!))
Видео познавательное, спасибо, но для новичков вопрос остался открытым.
даю новость селекторы тормозят сайт поэтому sass
А может проблему с переносом "от клиентов" в секции excellents решить просто поставив между "от" и "клиентов" символ неразрывного пробела, чтобы они переносились как одно слово. И получится как у дизайнера, и при адаптиве все как надо будет. Т.е. текст будет такой: "Обратная связь от клиентов"
В общем можно такое сделать. Но в будущем, например при адаптации на планшеты и мобильные, такие символы могут привести к багам отображения. В целом - это не проблема.
Модификаторы тоже работают. Только они не разбивают классы на части. придётся написать .text{ &text--accent{ ну если я правильно понял о чем речь. :)
стоило бы еще указать, что скрипты с defer всегда выполняются, когда дерево DOM готово, но до события DOMContentLoaded, в отличии от async
Я еще не дорос. Отложим на потом. Подача очень нравится. Спасибо за труд.
Вёрстка это порядок тегов?
Вёрстка - это создание страницы из макета. Это и теги, и стили, и функционал.
Говорят, что класс с указанием цвета-плохой тон. Ведь цвет также может поменяться
Да, в правы. По хорошему нужно давать абстрактные названия. Например, 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 в обеих кнопках будет правильнее вместо "<" и ">" прописать < и >