Полезные фишки для твоей верстки сайта на HTML и CSS

Рет қаралды 73,612

3 жыл бұрын

В этом видео разберем полезные фишки для твое верстки сайта на 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
#верстка #версткасайта

Пікірлер: 166

@27tamerlan 3 жыл бұрын

С днём рождения желаю всех благ! всего самого наилучшего крепкого здоровья счастья ✊

@BrainsCloud 3 жыл бұрын

Держи праздничный видос! Я сегодня немного постарел.. )

@Pros_tp 3 жыл бұрын

Спасибо

@laveinsky 3 жыл бұрын

*Ахах, с др! у меня тоже сегодня)*

@daniloneil 3 жыл бұрын

С др, Дима. Особенно спасибо за бордер-радиус. Ждём ещё.

@vitaliyzt719 3 жыл бұрын

с днюхой, крепкого здоровья и успехов в карьере!

@user-ji2vs1xs5r 3 жыл бұрын

С днём рождения! Расти большой (что бы это не значило)

@user-sq6zn4te1f 3 жыл бұрын

С Днём Рождения! Спасибо за видео. :)

@user-tn5pf8ml5y 3 жыл бұрын

Привет Димон, спасибо за видосы, с Днюхой тебя! Всего тебе наилучшего)

@4493005 3 жыл бұрын

Это лучшее образовательное видео 2020года. Так просто и так нужно в каждом проекте!

@alexfront6688 3 жыл бұрын

Огонь бро! Как всегда приятно тебя смотреть и учиться новому!

@nurillo26 3 жыл бұрын

Спасибо за твои старания. И да, с Днём рождения💪 процветания твоим курсам и этому каналу

@car_sketch_and_render 3 жыл бұрын

Спасибо большое за труд! Ребята лайкате, это в наших интересах :) С Днём Рождения!

@WapSter92 3 жыл бұрын

И в чем же интерес тут

@vittz_jor_good_play3601 2 жыл бұрын

это пушка просто! Даже слов мне не хватит, чтобы выразить благодарность)

@MaksimIljenko 3 жыл бұрын

Не знал про новый формат изображений, спасибо!

@user-wn9pm3nw7j 3 жыл бұрын

Дмитрий, ты лучший! Много всего нового подметил в этом ролике. Конечно же, делай новые части для этой рубрики! У тебя получается всё просто превосходно. Ну и хочется поздравить тебя с Днём Рождения!:) Желаю успехов, понимающую аудиторию, большущую кучу подписчиков и оставаться таким же классным, как сейчас! :)

@user-ym7jz7fn1t 3 жыл бұрын

С днем рождения !! Спасибо большое за твое творчество

@jackdoe1312 3 жыл бұрын

Такие фишки спасают мои нервные клетки, спасибо)

@sewaca 3 жыл бұрын

Очень классный видос, спасибо! С днюхой )

@max_mgtow 3 жыл бұрын

С Днём Рождения👍🤝🤗🥳 Спасибо за видео!) Всех благ! 🥳

@GeometryDashTV 3 жыл бұрын

Годно, я аж ахнул! Настолько элементарно и все же классно, особенно напомнил про text-overfow, ты топ!

@user-su3ef5cb8p 3 жыл бұрын

Лайк с первой же фишки. Очень полезно 👍

@andrey5425 3 жыл бұрын

Я в шоке от адаптивности картинок под разные экраны, раньше этого не знал, спасибо!! Однозначно лайк!

@DIMAWARCRAFT3 Жыл бұрын

Благодаря твоему курсу wordpress для начинающих, научился с ним работать и прорпботал два года. Спасибо)

@tailogs5825 3 жыл бұрын

С Днюхой! Спасибо очень за видос, учту его!

@lessons3141 2 жыл бұрын

неожиданно, но реально полезные вещи , спасибо

@gun3077 3 жыл бұрын

Вообще, просто низкий поклон, за годный контент!!!

@Asver_ 3 жыл бұрын

Дмитрий, Поздравляю с днём рождения!!! Желаю успехов во всех твоих начинаниях!!!

@AlenaEtudente 3 жыл бұрын

Супер, большое спасибо 😉 твои видео - находка)

@apexblade6931 3 жыл бұрын

С днём рождение.🎂🍰🍷 Очень полезное видео. 🖒🖒🖒 Спасибо огромное !!!👏👏👏 Жду продолжение.👀

@TamaraNikolaevna 2 жыл бұрын

Спасибо, как раз то, что надо было!!!

@user-tf7xk7xt3g 3 жыл бұрын

Про шрифт который скрывается ооооочень годно, вау! Аплодирую! Думаю стоит рассказать о фишках css препроцессоров SASS/SCSS, т.к. думаю все юзают из + не все их юзают на максимум) На канал наткнулся случайно, контент оказался годен как 18 летний подросток в армейку, удачи во всём)

@misterio5756 3 жыл бұрын

Отличное видео, поздравляю с днем рождения!

@Jane-ge7ho 3 жыл бұрын

Большое спасибо за полезную информацию:)

@user-yo1gi8jw7w 3 жыл бұрын

Супер видос, спасибо большое)

@KindCat21 3 жыл бұрын

Отличное видео с полезными фишками! Просим продолжения

@KindCat21 3 жыл бұрын

Прямо сегодня использовал в проекте фишку с тэгом picture, так как на некоторых iphone webp не отображался. Спасибо!

@user-kn7ho2hd4l 3 жыл бұрын

Спасибо за видео узнал что-то новое и с днем рождения!!

@placid3495 3 жыл бұрын

Очень познавательно! Спасибо!

@extrim9142 3 жыл бұрын

С Днём Рождения! Спасибо за видос.

@dennisfisher2684 3 жыл бұрын

Отличный урок! С Днём рождения!!! )))

@user-um1nq1ib6b 3 жыл бұрын

Вот это очень полезный урок, лайк!

@o.kiryukhin 3 жыл бұрын

Спасибо, добавил некоторые фишки в свой блокнотик.

@Javascript_official 3 жыл бұрын

с днюхой тебя!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!ЩАСТЯ, ЗДОРОВЬЯ, УДАЧИ, ЛЮБВИ, БОЛЬШЕ ДЕНЕГ!

@stoicism860 3 жыл бұрын

Благодарю Дмитрий!

@user-xf2rf5cx3i 3 жыл бұрын

За object-fit отдельное спасибо)

@user-ho9fn3lp8l 3 жыл бұрын

Огромное спасибо! Было очень полезно! 👍🚩

@user-pp2nx5cu3q 3 жыл бұрын

С днём рождения! Спасибо за урок.

@ezizkurbannazarov5680 3 жыл бұрын

Спасибо большое, ролик что надо✌️✌️✌️

@marlenzhantore8218 3 жыл бұрын

С днем рожедния учитель! Желаю всего наилучшего !!!

@AlekseyNaumov_734 Жыл бұрын

Очень полезно. Спасибо!

@bambimbambas 3 жыл бұрын

С Днюхой, ты лучший

@sorokanews5019 3 жыл бұрын

Класс, спасибо! Даешь еще фишек! )))

@Legat74 3 жыл бұрын

Спасибо за фишки!👍🏻

@Anahitacode 3 жыл бұрын

Дмитрий с праздником! Вы - лучший👍💪🤘. Счастья, благополучия и успехов во всем!

@oleksiik4473 3 жыл бұрын

Гц! Спасибо за контент! Может фишки в формате рубрики сделать? Полезно очень!

@cryday3270 3 жыл бұрын

оч полезное видео, спасибо) и голос офишенный

@user-hf6lo8jh9n 3 жыл бұрын

Отличный видос! Очень полезно! я опоздал на 9 месяцев, но теперь буду регулярно тут бывать, так что следующий раз не упущу!)

@avaba 3 жыл бұрын

Я хоть и очень давно верстаю, но даже тут для себя подметил пару фишек

@Mykhailo_Vdovychenko 3 жыл бұрын

Крутые фишки!!! Теперь мы знаем скрытые знания html/css 👍👍👍

@frozeninside5004 3 жыл бұрын

Спасибо ! крутяк, все пригодится

@DisfigurmentOfUs 3 жыл бұрын

Спасибо! Не знал про медиа квери в source элементе.

@querro5836 3 жыл бұрын

Спасибо! Было полезно

@user-ql4xu5qu2u 3 жыл бұрын

Очень круто, особенно про обрезку текста силами css. Мог бы сэкономить час времени на js

@user-hb3ql3gl5j 3 жыл бұрын

Спасибо БРАТ !!! За object-fit !!!!!!

@BMikel 3 жыл бұрын

спасибо, много полезного!

@sia4281 3 жыл бұрын

Вторая часть стопудово нужна! Да и третья тоже ))

@zinchenkooo 3 жыл бұрын

С Днюхой, Дмитрий!!!

@tavernaan 3 жыл бұрын

Найс, крутой формат видео.

@endurenzmusic6617 3 жыл бұрын

Круто ! Я счастлива

@MultiKolu4ka 3 жыл бұрын

Спасибо, очень полезно

@user-hv3ty3bp7d 3 жыл бұрын

С днем рождения вас. Желаю вам успехов и удачи в жизни. Урааааааа

@user-pe2hn6xx9n 3 жыл бұрын

БОЛЬШЕ ТАКИХ ВИДЕО!!! СРОЧНО!!!

@sashakalin 3 жыл бұрын

Спасибо,очень информативно и полезно. Сможешь в дальнейшем рассказать про динамический background и современную анимацию,думаю очень актуально будет

@TheWorldPeace 3 жыл бұрын

Очень круто, мало кто знает эти фишки.

@ismoilshokirov 3 жыл бұрын

Вау просто бомба 💣 лайфхаки спасибо

@simple-mvilocer7724 3 жыл бұрын

c др, у вас отличные видео

@needlegood 3 жыл бұрын

Топчик

@Pros_tp 3 жыл бұрын

Спасибо большое

@dauletkhanassanov553 3 жыл бұрын

Добрый день, Дмитрий Валак! Я давно смотрю вас, и да ваши верстки просто отличные, я бы сказал превосходные. Недавно увидел PSD макет/шаблон по имени Piroll - Svetlana Sudina. Как по мне это был один из лучших макетов, что я видел когда либо. И я бы хотел увидеть как всё это величество пишется.

@user-ql4xu5qu2u 3 жыл бұрын

Чем он лучший, мятным цветом?)

@user-lp9qw1ce2q 3 жыл бұрын

С Днем Рождения))) Я так понял тег picture сейчас в приоритете?)

@user-km8dz9bg1r 3 жыл бұрын

Спасибо

@ihorkondratov2189 3 жыл бұрын

Крутой формат

@Akame320 3 жыл бұрын

С днём рождения!!!

@maxxbf 3 жыл бұрын

ДА, спасибо.

@valdemartyan6909 3 жыл бұрын

Я воообще новичок:) Но очень интересно! Особенно прикольнул сервис с ползунками

@rasulali4690 3 жыл бұрын

Кстати отличные новости! Для тех, кто не знает, webp в сентябре станет поддерживаться всеми браузерами. На данный момент остался только сафари, с обновлением в сентябре он тоже начнет)

@oibondarenko6858 3 жыл бұрын

С Днём Рождения!!!

@user-sx8rf8pt1e 3 жыл бұрын

Болдёж

@user-nv1cs5vd3j 3 жыл бұрын

🔥

@Light-wb9mu 3 жыл бұрын

спасиб

@atmproduction5839 3 жыл бұрын

Больше видео Валак 😃😃😃

@DraginAnatoliy 3 жыл бұрын

про text-overflow: elipsis отсюда узнал, я думал это нельзя сделать на css.. вот это поворот

@FL4M3M4K3R 3 жыл бұрын

С днем рождения, Дмитрий. Успехов! согласен, я все пытался это сделать, на сайтах разных было написано писать текст-оверлфлоу такой то оверфлоу такой то и типа будут точки, но это нахрен не работало, прям напрягло тогда

@vityashevchenko7378 3 жыл бұрын

Братан, давай ещё Js, хотяб самое елементарное. Как вызывать функцию, как правильно закрывать теги и прочее. А то консоль постоянно красная)

@jannadorozhina3729 3 жыл бұрын

Обучаюсь по вашим видео. Расскажите как-нибудь как верстать параллакс-эффект.

@alisherzhambirbay6833 2 жыл бұрын

Спасиб

@user-eb3yr9wc4k 3 жыл бұрын

Пусть будет все: любовь, везенье,удача, радость, настроенье,тепло, здоровье, чудеса,достаток, смех и красота!И будет все большим и нужным,приятным, ярким, самым лучшим,неповторимым и красивым,веселым, радостным, любимым!Жить без тоски, хандры не знать,от чудных дней не уставать.Лишь солнца, света и тепла. И с днем рождения тебя Дмитрий!

@imsolent3064 3 жыл бұрын

По поводу размера шрифта, предпочтительнее использовать font-size: 62.5%; Это более правильно.

@imsolent3064 3 жыл бұрын

@lorem ipsum Погугли. В 2 словах: px сбивают пользовательские настройки, проценты отталкиваются от них.

@svet0v 3 жыл бұрын

сними видео про то, как подключить плагины (точнее полифиллы) к gulp для корректного отображения webp в IE 11. Вообще было бы здорово, если бы снял видео, где рассказываются основные моменты кроссбраузерной верстки для ie 11

@qden1skaq145 2 жыл бұрын

спасибо, привет с 2022

@shaofang3145 3 жыл бұрын

Здравствуйте, балдею от вашей подачи информации и того, как вы делаете верстку. Если не секрет, можете сказать какой плагин вы используете для того, что бы при изменениях падингов и прочего в браузере были голубые начертания, когда наводишь мышкой на какой-то блок. И что вы делаете, что бы не нажимать постоянно ф5, а оно само все компилирует))

@BrainsCloud 3 жыл бұрын

это live preview в brackets

@rasulali4690 3 жыл бұрын

Thats what im talking about!

@ChizhikovSergey 3 жыл бұрын

Нужно было делать анимацию и попробовал Зеленый Носок. GSAP. Ребята и девчата - это бомба.

@9LoveX 3 жыл бұрын

А фронтенд разработка и веб разработка подойдет для всех пк?

@vladimiryakovenko554 3 жыл бұрын

Здравствуйте, Дмитрий! С наступившим днем рождения Вас! Сидел сегодня составлял для себя шпаргалки и списки полезных сервисов по всем Вашим подобным видео. Возникла идея для нового ролика: "Checklist по верстке". Обычно по завершению очередного проекта сажусь за контрольную проверку и начинаю скролить код в поисках ошибок или оптимизации, но зачастую не всё так гладко проходит, ибо чеклист в голове не надёжный. Буду составлять самостоятельно, но подобная информация от профессионала - на вес золота! Что скажите?

@BrainsCloud 3 жыл бұрын

Привет. Пока не думал об этом