Уроки Flexbox Практика - Верстка постов блога
HTML-код
- Опубликовано: 25 июн 2017
- Мы продолжаем уроки flexbox практика верстка и в этом уроке мы с помощью flexbox сверстаем посты для блога так же адаптивно. Flexbox верстка с практикой отличный вариант для наработки навыка верстки!
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
набил руку писать код быстрее, спасибо огромное! Пойду теперь нормальные уроки поищу....
P.s. как уже неоднократно писали, выложи сразу весь код, люди на него посмотрят, скопируют (кто захочет) и пойдут дальше шерстить ресурсы в поисках объяснений.
Сижу, в тупую переписую. Автор не объясняет ни***
не видно всех transition-property. Да и в будущем хотелось бы что бы код подобного рода был в описании или в комментах.(на 02:56 подробно видно как часть кода обрывается на "te")
transition-property: all; напиши и все тоже самое будет
Я понимаю, что поздновато, но все же: ...text-shadow, transform;
Автор не плохо, ну для новичков нифига не понятно, быстро и не ясно,что куда и зачем, с таким успехом можно сразу глянуть в конце видео результат
спасибо!
Вам спасибо что смотрите! Больше просмотров - больше видео!
спасибо, не знаю как но твои видосы мотивируют меня писать js, который я терпеть не мог: - Увеличил кол-во блогов и добавил им клас hidden который их прячет + создал кнопку по клику на которую каждый раз выводится 5 новых блогов, - удалляя соотвественный клас.Ну а в конце когда длина коллекции становится меньше каунтера (=5) вывожу остаток блогов.Вобщем получилось хотя и пришлось помучаться:)
Я рад что мотивирую! С тебя лайк и отключение адблока когда смотришь мои видео=)
Что идёт после opacity в transition-property?
Пересмотрите видео, я по памяти не помню
Но там не видно там только te...
напиши просто transition-property: all; и все то же самое будет
Я понимаю, что уже не актуально, но вот продолжение: ...text-shadow, transform;
чувак у тебя если будет 7 контейнеров то 7мой будет на 3 линии и по центру ты как считаешь это норм?
Ребят, а подскажите, зачем тут у .card span стоит значение display: block? Без него картинки просто не отображаются. Для меня просто это магия какая-то. Как влияет тут этот display: block? Тайминг 5:05, строчка 206-208
делаем элемент блочным
нельзя внутри встроенных блоков писать блочные теги h1 не может быть дочерный к span элементу, большая ошибка
При полностью заполненных рядах сетки все ничего но как только ряд будет не полный то свойство justify-content:center все испоганит. Такую сетку лучше делать через display:grid
Про гриды мы еще еще много поговорим)
Прошу, уточните, зачем спан? Инлайновый элемент... Он же не для того.)))
И если не сложно, прошу, опубликуйте код.
Хотите див сделайте, хотите спан, вас никто не ограничивает
потому что внутри инлайнового элемента нельзя применять блочные элементы.
И на 3 день бог создал гугл.... Однако уже на 2 день все ушли писать комменты по этим видео
а transition: all нельзя?
Для чего?
В 223 строке (на 6:30) правильнее будет написать так:
.card .card-header:hover, .card:focus .card-header{
background-color: rgba(255,255,255,0);}
/*Что касается фокуса: Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги , , и . Поэтому фокус мы применяем к ссылке (a.card) и уже после меняем свойство в card.header. Для проверки просто переключай элементы фокуса кнопкой TAB на странице и увидишь что фокусируется, а что нет (outline не должны быть "none") и следовательно к чему нужно применять focus. */
собственно ещё лучше даже вот так:
.card:hover .card-header, .card:focus .card-header{}
Таким образом картинка будет становиться ярче уже при наведении на сам пост, а не только картинки.
Что там написано после "te"? 02:56
ransition-property: all; напиши и все тоже самое будет
... text-shadow, transform;