Казалось бы, бери да верстай по гайдам на Ютубе.
а на деле залетаешь на Ютуб и видишь кучу авторов, которые верстают по-своему.
и за которым можно уверенно повторять и учиться?
Я верстаю впервые, оцените пожалуйста и дайте советы
дивянка
. Там где нужен section
- стоитdiv
, там где логически должен использоваться заголовок - div
.а в popup добавить их копии, но разве это корректно?
display: none
\ display: block
на медиазапросах в разных частях кода. За это руки не отрывают. Как правильно вставить вот эту синюю штуку с 1-2-3? Тупо через position: absolute
вставить куда надо?
body
, и отцентровать по вертикали left: 50%, transfrorm: translateY(-50%)
Просто через ::before/::after закинуть .svg с треугольником в нужное место?
Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удается сохранять высокое качество при малом размере файла. Тем не менее, бразуеры поддерживают их не полностью.
<picture>
позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута type, бразуер сразу определит файлы такого типа как неподдерживаемые:
<picture>
<source type="image/webp" srcset="pyramid.webp">
<source type="image/svg+xml" srcset="pyramid.svg">
<img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
position: relative,
кнопка и портрет:position: absolute
с значениями top\bottom
собственно для каждого - подбираете значение и выравниваете. left: 50%;
transform: translateX(-50%),
что бы выравнивать всегда по центру относительно рамки.z-index: 1
перекроет вашу рамку кнопкой и портретом. Белый кант вокруг кнопки\портрета можно сделать с помощью ::after
Какой лейзи лоад лучше?
main
- главная обертка для сменяемой части кода(условно шапка и подвал у вас не меняются).section
- используется для выделения смысловых блоков, как вы и указали. Reason #1. Iframes Bring Security Risks
If you create an iframe, your site becomes vulnerable to cross-site attacks.
You may get a submittable malicious web form, phishing your users' personal data.
A malicious user can run a plug-in.
A malicious user can change the source site URL.
A malicious user can hijack your users' clicks.
A malicious user can hijack your users' keystrokes.
Don't put your visitors at risk to the XSS attacks.
Reason #2. Iframe Cause Usability Issues
The iframe tag is notorious for creating usability annoyances. Among most common of them are:
It tends to break the browsers' "Back" button.
It confuses visually impaired visitors, using screen readers.
It confuses users, suddenly opening the iframe content in a new browser window.
Content within the iframe doesn't fit in and looks odd.
Content within the iframe is missing since the source URL changed.
Navigation of the site in the iframe stops working.
Every in a page requires increased memory and other computing resources.
Find better ways to refer your visitors to external content instead of placing it within the iframe tag.
Этот сайт на проде
я-бы переверстал эти блоки
а мне нужно все это исправить максимально быстро, спасибо.
edit> preferences > General> Units and Rulers [or press ctrl + k then select units and rulers]
Change Units as per your wish. select : Rulers as Pixel. Type as pixel.
box-sizing:border-box;
, тогда размер кнопки вы смело можете задать паддингом, расчитав внутренние отступы. Так же "высоту" можно задавать с помощью line-height
. Задавать фиксированную высоту можно в том случае, если вы уверены что у вас не будет переполнения контента.