Верстка сайта с нуля - делаем блог
HTML-код
- Опубликовано: 24 авг 2024
- Мы продолжаем верстку сайта с нуля, наш адаптивный сайт преображается с каждым новым видео. В уроке мы делаем блог, посты для блога. Верстка сайта для начинающих со всеми объяснениями вот что нужно что б научится верстать сайты высокого уровня.
Промокод на 3 месяца бесплатного хостинга по тарифу Мак-10 - WebDeveloper (вводить при регистрации на сайте billing.mchost... ). Для активации бесплатного периода необходимо пополнить баланс на 100 руб. Активационный платеж не расходуется, оставаясь на балансе и является всего лишь барьером против злоупотреблений со стороны спамеров, мошенников и т.п.
Группа вк: develop...
Вижу Новый видос,ставлю лайк сразу)
Приятно! Спасибо!
я смотрю у многих картинка не выставлялась в .blog-cover дело в том что вы скорее всего автоматически повторяете за автором - что есть гуд... но у вас у каждого картинка может лежать не в той папке, т.е. необходимо ПРАВИЛЬНО указать адрес url ... в моем случае я тоже потоптался а потом указал правильный У МЕНЯ адрес и картинка появилась и необязательно менять background-size на background-imag тк работет в обеих случаях..
Вопрос)) В .blog-footer ul Вы написали "flex: row wrap". Это опечатка? Должно быть "flex-flow: row wrap"? Потому как свойство "flex: " это сокращённая запись flex-grow, flex-shrink и flex-basis.
Спасибо за урок! Все получилось ))
Почему ты используешь "margin-left" в
.blog-tags li{
margin-left: .5rem
а после дописываешь + li
можно написать margin-right ?
Я еще с прошлых уроков задался вопросом, почему не используешь right.
Спасибо! Натягивания на CMS будет в дальнейшем? Покажи как настроить верстку на добавления новых статей через админку (Wp или modx), а не код.
Привет, тоже интересует вывод статей в блоге через WP, ты нашел способ ?
@@JiFox Тоже с этой проблемой сижу, помогити
и абзац оказывается под футером
тэги h1 нужно заменить на h2 (особенно, если постов несколько на странице!!!) - иначе по SEO будут проблемы
Спасибо за такие крутые уроки! Возник такой вопрос.. Вот когда будет работать сайт и мне потребуется добавить блог, как сделать добавление блога без влезания в код.. ну знаешь.. нажимаешь кнопку создать блог и там пишешь название, описание, картинки, ссылки и тд. .. потом нажимаешь добавить и сайт добавляет блог с уже заранее указанными настройками.. Так же можно сделать? Если да то как) расскажи пожалуйста или ссылку на эту тему, буду очень благодарен!)
Ну ,для этого есть тот же WordPress,погугли
Большое спасибо, познавательно.
Если сузить рамки, чтобы верхнее меню свернулось, то при его открытии возникает неприятный эффект - картинка, попавшая под курсор, который нацелен на пункт меню, начинает мерцать. Как этого избежать?
Связано это со значением opacity: 1; Если задать 0,99, то мерцания не будет, но текст меню и линии подчеркивания пропадут под картинками. Вылечил добавлением z-index.
...
Остался ещё один вопрос - узкий экран это планшет, телефон. Зачем на них hover? Я понимаю, что это просто примеры, но пока не могу придумать, чем заменить hover на узких экранах.
...
Появился ещё один вопрос.
Что делает ? Задали, но ничего про него не написали. Такой "пустой" класс несёт какую-то смысловую нагрузку или просто забыли про него?
...
Странная идея задать картинку бекграундом. Или так принято в блогах, чтобы все картинки к постам были одинаковые? Есть смутное подозрение, что blog-header должен быть отдельным, выше контента и в нем, как раз и должна быть фоновая картинка через css. А внутри к каждому посту свои, отдельные через html.
@Web Developer Blog
Привет , а как сделать для каждого поста отдельную фотографию?
как сделать так что за каждым постом свое время само расчиталос
Спасибо, крутая верстка
Спасибо за уроки
И вам спасибо!
А не лучше будет вынести обложку поста в html? Так наверное будет удобнее, когда будет логика на сайте. Я имею в виду php или какая-то cms.
Можете сделать как вам удобнее
Благодарю!
Прадалжэния очини класная приятная практика .
Круто! Спасибо!
Как сделать для каждого поста отдельную фотографию?
Вот мне тоже интересно. можно конечно через html по старинке, так сказать, в рукопашную ))
Одного не могу понять как футтер к низу прибить, все сделал так же но подвал на разных страницах где как висит
Сделай висоту страници 100vh
Кроме адаптивности все получилось....так же как и с прошлым уроком. Вроде все норм - на главной адаптивность работает, на проджекте и блоге уже нет.
Если изменить ширину сайта то блок не меняется и хз почему.
Делала так же как вы говорил.
Даже видео пересмотрела 3 раза. Ничего не нашла(
Спасибо большое за интересное видео! Очень интересно!
Подскажите, как создать на html-странице поддержку русского языка, а то я попытался вставить вместо Lorem ipsum русский текст, а вместо него вышли вопросы? Заранее спасибо!
So-Ti Lordonsky
Именно это ввожу, при открытии страницы в браузере вместо кириллицы - вопросы
Просто поменяй кодировку на или на
super
Класс
Как сделать что бы появился скролл? Так как картинка очень высокая у меня по высоте.
Спасибо
И вам
что за манипуляция .blog-tags li + li????? и как это влияет на отступ слева??
это значит, что оформятся только те li, перед которыми есть ещё li, как я понял
li + li говорит о том, что стилизация будет начинаться не с первого li. если подробнее, то мы находим li и написав + li, мы говорим, чтобы стилизация применилась к этому li, который после +
Ребят. та же проблема как и у кого то тут. не отображается картинка в блоге. че только не пробовал. подскажите че не так? вроде все как надо делаю и до сих пор проблем не было.
.blog-cover{
background: url(../img/news.jpeg);
background-size: cover;
border-radius: 5px 5px 0 0;
height: 15rem;
box-shadow: inset rgba(0,0,0,0.2) 0 64px 64px 16px;
}
вроде все верно. есть углы у блока и тень тоже. а вот картинки нет.
Мб с background-image заработает
спасибо. я разобрался. просто подрезал картинку и она встала)
Убери точки перед /img. - (img/news.jpeg)
Spasiba
Не за что)
Web Developer Blog krasava
Подскажыте как исправить: "li" создал точки(как нумерацыя) которих у автора видео нету.
решыл проблему добавлением в шапку Blog.html style....
Mirralise
li {list-style-type: none;}
.blog_footer ul{
flex:row wrap;
}
это как понимать?
правильно будет flex-FLOW: row wrap - объединение 2-х свойств
а как в других блогах сделать другое фото?
Здравствуйте, такой же вопрос. нашли решение?)
А зачем указывать маржин 0 ?
Вы знаете за что отвечает данное свойство?
@@SuprunAlexey Отступы?
Как футер прижать к низу страницы?(
Пропиши в стили к футеру position:absolute; bottom:0;
@@CensurePlay не надо советовать, если не знаешь.Способ говнище
Можешь объяснить .blog-tags li+li{
margin-left:0.5rem
}
Все li элементы расположенные после первого li элемента
Зачем это всё? Кто будет заказват эти сайты не пойму кому это вообще нужно?
эммммммм многим людям нужны сайты.....................
и сейчас веб-разработчики очень востребованы....................
@Web Developer Blog
Ты не забыл о курсе ReactJS?А то у тебя как бы самый годный курс по нему на всем рашн ютубе.
Привет, та что то отпало желание его снимать. Хочу сделать крутую практику по нему, а вот основы что то надоело снимать
Ну сам курс спокойно вложится в 12-15 видосов,4 у тебя уже есть.И практика не обойдется без теории.
я подумаю после ларавела
Ларавел?Спойлериш будуший курс?
Лучше сказать анонсирую!
очень бесполезный урок =( Автор за ранее все сделал у себя все затестил, а нам выдает готовое решение без обьяснений на нереальной скорости и что и зачем не обьясняет, разочаровал.
Нахера так быстро это все делать без обьяснения?!
Чет задрал твой html )) видно что нет времени на развитие )
?
Что бы футор прижать к низу нужно дописать к footer{
position: absolute;
left: 0;
bottom: 0;
}
ага, посмотри потом что с index.html