Полезные фишки для твоей верстки сайта на HTML и CSS
Вставка
- Опубліковано 30 лип 2020
- В этом видео разберем полезные фишки для твое верстки сайта на HTML и CSS.
Ссылки из видео
-----------------------------------------------
squoosh.app/
9elements.github.io/fancy-bor...
css-tricks.com/snippets/css/s...
Главы видео:
00:00 - 00:00:12 - Введение
00:00:12 - Webp, picture
00:01:24 - адаптивные контентные изображения
00:02:19 - object-fit
00:02:43 - font-size: 10px;
00:02:58 - Системные шрифты
00:03:17 - em
00:04:16 - текст в одну строку
00:04:50 - background-position
00:05:22 - border-radius 8 аргументов
О проекте
-----------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта
Держи праздничный видос! Я сегодня немного постарел.. )
Спасибо
*Ахах, с др! у меня тоже сегодня)*
С др, Дима. Особенно спасибо за бордер-радиус. Ждём ещё.
с днюхой, крепкого здоровья и успехов в карьере!
С днём рождения! Расти большой (что бы это не значило)
С днём рождения желаю всех благ! всего самого наилучшего крепкого здоровья счастья ✊
Благодаря твоему курсу wordpress для начинающих, научился с ним работать и прорпботал два года. Спасибо)
Привет Димон, спасибо за видосы, с Днюхой тебя! Всего тебе наилучшего)
Я хоть и очень давно верстаю, но даже тут для себя подметил пару фишек
Спасибо за твои старания. И да, с Днём рождения💪 процветания твоим курсам и этому каналу
Огонь бро! Как всегда приятно тебя смотреть и учиться новому!
С Днём Рождения! Спасибо за видео. :)
Дмитрий, ты лучший! Много всего нового подметил в этом ролике. Конечно же, делай новые части для этой рубрики! У тебя получается всё просто превосходно.
Ну и хочется поздравить тебя с Днём Рождения!:) Желаю успехов, понимающую аудиторию, большущую кучу подписчиков и оставаться таким же классным, как сейчас! :)
Спасибо большое за труд!
Ребята лайкате,
это в наших интересах :)
С Днём Рождения!
И в чем же интерес тут
Очень классный видос, спасибо! С днюхой )
Это лучшее образовательное видео 2020года.
Так просто и так нужно в каждом проекте!
С днем рождения !! Спасибо большое за твое творчество
Супер видос, спасибо большое)
это пушка просто! Даже слов мне не хватит, чтобы выразить благодарность)
неожиданно, но реально полезные вещи , спасибо
Спасибо, как раз то, что надо было!!!
С Днюхой, ты лучший
Не знал про новый формат изображений, спасибо!
Супер, большое спасибо 😉 твои видео - находка)
Годно, я аж ахнул! Настолько элементарно и все же классно, особенно напомнил про text-overfow, ты топ!
Дмитрий, Поздравляю с днём рождения!!! Желаю успехов во всех твоих начинаниях!!!
Лайк с первой же фишки. Очень полезно 👍
Очень полезно. Спасибо!
С Днём Рождения👍🤝🤗🥳
Спасибо за видео!) Всех благ! 🥳
Отличное видео, поздравляю с днем рождения!
Вообще, просто низкий поклон, за годный контент!!!
Такие фишки спасают мои нервные клетки, спасибо)
Очень познавательно! Спасибо!
С днём рождение.🎂🍰🍷
Очень полезное видео. 🖒🖒🖒
Спасибо огромное !!!👏👏👏
Жду продолжение.👀
С Днюхой! Спасибо очень за видос, учту его!
Большое спасибо за полезную информацию:)
Про шрифт который скрывается ооооочень годно, вау! Аплодирую! Думаю стоит рассказать о фишках css препроцессоров SASS/SCSS, т.к. думаю все юзают из + не все их юзают на максимум)
На канал наткнулся случайно, контент оказался годен как 18 летний подросток в армейку, удачи во всём)
Благодарю Дмитрий!
Я в шоке от адаптивности картинок под разные экраны, раньше этого не знал, спасибо!! Однозначно лайк!
Спасибо за видео узнал что-то новое и с днем рождения!!
Спасибо, добавил некоторые фишки в свой блокнотик.
Огромное спасибо! Было очень полезно! 👍🚩
Спасибо большое, ролик что надо✌️✌️✌️
Отличное видео с полезными фишками! Просим продолжения
Прямо сегодня использовал в проекте фишку с тэгом picture, так как на некоторых iphone webp не отображался. Спасибо!
Вот это очень полезный урок, лайк!
Класс, спасибо!
Даешь еще фишек! )))
Спасибо за фишки!👍🏻
С Днём Рождения! Спасибо за видос.
Отличный урок! С Днём рождения!!! )))
За object-fit отдельное спасибо)
Отличный видос! Очень полезно! я опоздал на 9 месяцев, но теперь буду регулярно тут бывать, так что следующий раз не упущу!)
С днём рождения! Спасибо за урок.
оч полезное видео, спасибо) и голос офишенный
c др, у вас отличные видео
Спасибо ! крутяк, все пригодится
Гц! Спасибо за контент! Может фишки в формате рубрики сделать? Полезно очень!
Спасибо БРАТ !!! За object-fit !!!!!!
Спасибо! Было полезно
Круто ! Я счастлива
с днюхой тебя!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!ЩАСТЯ, ЗДОРОВЬЯ, УДАЧИ, ЛЮБВИ, БОЛЬШЕ ДЕНЕГ!
спасибо, много полезного!
Найс, крутой формат видео.
Спасибо! Не знал про медиа квери в source элементе.
Спасибо, очень полезно
БОЛЬШЕ ТАКИХ ВИДЕО!!! СРОЧНО!!!
С днем рожедния учитель! Желаю всего наилучшего !!!
С Днюхой, Дмитрий!!!
Крутые фишки!!! Теперь мы знаем скрытые знания html/css 👍👍👍
Вторая часть стопудово нужна! Да и третья тоже ))
Вау просто бомба 💣 лайфхаки спасибо
Спасибо,очень информативно и полезно.
Сможешь в дальнейшем рассказать про динамический background и современную анимацию,думаю очень актуально будет
Дмитрий с праздником! Вы - лучший👍💪🤘. Счастья, благополучия и успехов во всем!
Очень круто, особенно про обрезку текста силами css. Мог бы сэкономить час времени на js
С днем рождения вас. Желаю вам успехов и удачи в жизни. Урааааааа
Очень круто, мало кто знает эти фишки.
Спасибо большое
Крутой формат
Спасибо
Топчик
Болдёж
С днём рождения!!!
С Днем Рождения))) Я так понял тег picture сейчас в приоритете?)
Братан, давай ещё Js, хотяб самое елементарное. Как вызывать функцию, как правильно закрывать теги и прочее. А то консоль постоянно красная)
ДА, спасибо.
спасиб
Добрый день, Дмитрий Валак!
Я давно смотрю вас, и да ваши верстки просто отличные, я бы сказал превосходные. Недавно увидел PSD макет/шаблон по имени Piroll - Svetlana Sudina. Как по мне это был один из лучших макетов, что я видел когда либо. И я бы хотел увидеть как всё это величество пишется.
Чем он лучший, мятным цветом?)
Больше видео Валак 😃😃😃
🔥
Я воообще новичок:)
Но очень интересно! Особенно прикольнул сервис с ползунками
С Днём Рождения!!!
Спасиб
про text-overflow: elipsis отсюда узнал, я думал это нельзя сделать на css.. вот это поворот
С днем рождения, Дмитрий. Успехов!
согласен, я все пытался это сделать, на сайтах разных было написано писать текст-оверлфлоу такой то оверфлоу такой то и типа будут точки, но это нахрен не работало, прям напрягло тогда
Кстати отличные новости! Для тех, кто не знает, webp в сентябре станет поддерживаться всеми браузерами. На данный момент остался только сафари, с обновлением в сентябре он тоже начнет)
Пусть будет все: любовь, везенье,удача, радость, настроенье,тепло, здоровье, чудеса,достаток, смех и красота!И будет все большим и нужным,приятным, ярким, самым лучшим,неповторимым и красивым,веселым, радостным, любимым!Жить без тоски, хандры не знать,от чудных дней не уставать.Лишь солнца, света и тепла.
И с днем рождения тебя Дмитрий!
Thats what im talking about!
Нужно было делать анимацию и попробовал Зеленый Носок. GSAP. Ребята и девчата - это бомба.
сними видео про то, как подключить плагины (точнее полифиллы) к gulp для корректного отображения webp в IE 11. Вообще было бы здорово, если бы снял видео, где рассказываются основные моменты кроссбраузерной верстки для ie 11
спасибо, привет с 2022
Все отлично, только "помедленнее, я записую"
Обучаюсь по вашим видео. Расскажите как-нибудь как верстать параллакс-эффект.
По поводу размера шрифта, предпочтительнее использовать font-size: 62.5%; Это более правильно.
@lorem ipsum Погугли. В 2 словах: px сбивают пользовательские настройки, проценты отталкиваются от них.
с picture и webP кулл )
Здравствуйте, балдею от вашей подачи информации и того, как вы делаете верстку. Если не секрет, можете сказать какой плагин вы используете для того, что бы при изменениях падингов и прочего в браузере были голубые начертания, когда наводишь мышкой на какой-то блок. И что вы делаете, что бы не нажимать постоянно ф5, а оно само все компилирует))
это live preview в brackets