Полезные фишки для твоей верстки сайта на HTML и CSS
HTML-код
- Опубликовано: 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 не отображался. Спасибо!
С днём рождения! Спасибо за урок.
Отличный видос! Очень полезно! я опоздал на 9 месяцев, но теперь буду регулярно тут бывать, так что следующий раз не упущу!)
оч полезное видео, спасибо) и голос офишенный
Спасибо большое, ролик что надо✌️✌️✌️
Вот это очень полезный урок, лайк!
Спасибо за фишки!👍🏻
Класс, спасибо!
Даешь еще фишек! )))
Спасибо! Не знал про медиа квери в source элементе.
Благодарю Дмитрий!
Гц! Спасибо за контент! Может фишки в формате рубрики сделать? Полезно очень!
С Днюхой, Дмитрий!!!
c др, у вас отличные видео
Спасибо ! крутяк, все пригодится
За object-fit отдельное спасибо)
Спасибо! Было полезно
БОЛЬШЕ ТАКИХ ВИДЕО!!! СРОЧНО!!!
Спасибо БРАТ !!! За object-fit !!!!!!
Найс, крутой формат видео.
Круто ! Я счастлива
Вторая часть стопудово нужна! Да и третья тоже ))
Очень круто, особенно про обрезку текста силами css. Мог бы сэкономить час времени на js
С днем рождения вас. Желаю вам успехов и удачи в жизни. Урааааааа
Дмитрий с праздником! Вы - лучший👍💪🤘. Счастья, благополучия и успехов во всем!
Крутые фишки!!! Теперь мы знаем скрытые знания html/css 👍👍👍
спасибо, много полезного!
Спасибо,очень информативно и полезно.
Сможешь в дальнейшем рассказать про динамический background и современную анимацию,думаю очень актуально будет
Спасибо, очень полезно
С Днем Рождения))) Я так понял тег picture сейчас в приоритете?)
Вау просто бомба 💣 лайфхаки спасибо
С днём рождения!!!
Крутой формат
Спасибо
Очень круто, мало кто знает эти фишки.
Спасибо большое
Топчик
Добрый день, Дмитрий Валак!
Я давно смотрю вас, и да ваши верстки просто отличные, я бы сказал превосходные. Недавно увидел PSD макет/шаблон по имени Piroll - Svetlana Sudina. Как по мне это был один из лучших макетов, что я видел когда либо. И я бы хотел увидеть как всё это величество пишется.
Чем он лучший, мятным цветом?)
Кстати отличные новости! Для тех, кто не знает, webp в сентябре станет поддерживаться всеми браузерами. На данный момент остался только сафари, с обновлением в сентябре он тоже начнет)
Братан, давай ещё Js, хотяб самое елементарное. Как вызывать функцию, как правильно закрывать теги и прочее. А то консоль постоянно красная)
С Днём Рождения!!!
спасиб
Я воообще новичок:)
Но очень интересно! Особенно прикольнул сервис с ползунками
ДА, спасибо.
про text-overflow: elipsis отсюда узнал, я думал это нельзя сделать на css.. вот это поворот
С днем рождения, Дмитрий. Успехов!
согласен, я все пытался это сделать, на сайтах разных было написано писать текст-оверлфлоу такой то оверфлоу такой то и типа будут точки, но это нахрен не работало, прям напрягло тогда
По поводу размера шрифта, предпочтительнее использовать font-size: 62.5%; Это более правильно.
@lorem ipsum Погугли. В 2 словах: px сбивают пользовательские настройки, проценты отталкиваются от них.
Больше видео Валак 😃😃😃
Болдёж
Нужно было делать анимацию и попробовал Зеленый Носок. GSAP. Ребята и девчата - это бомба.
Спасиб
Все отлично, только "помедленнее, я записую"
🔥
А фронтенд разработка и веб разработка подойдет для всех пк?
сними видео про то, как подключить плагины (точнее полифиллы) к gulp для корректного отображения webp в IE 11. Вообще было бы здорово, если бы снял видео, где рассказываются основные моменты кроссбраузерной верстки для ie 11
Обучаюсь по вашим видео. Расскажите как-нибудь как верстать параллакс-эффект.
спасибо, привет с 2022
Пусть будет все: любовь, везенье,удача, радость, настроенье,тепло, здоровье, чудеса,достаток, смех и красота!И будет все большим и нужным,приятным, ярким, самым лучшим,неповторимым и красивым,веселым, радостным, любимым!Жить без тоски, хандры не знать,от чудных дней не уставать.Лишь солнца, света и тепла.
И с днем рождения тебя Дмитрий!
Thats what im talking about!
А что у Вас за редактор такой с Висвингом?