Variable
Il est possible de créer des variable en css pour ne pas devoir copier/coller une valeur. Très utile pour les couleurs. Observez le css de cette page.
Sticky Header
Un simple position: sticky avec un top: 0 permet de faire un header qui ne défile pas lors du scroll. Observez le css de cette page.
Structure HTML de base
Il est conseillé de séparer son body en 3. Le header et footer sont identique sur toutes les pages, le main contient le contenu spécifique de la page.
Le main est souvent séparé en plusieurs sections. Une section regroupe un sujet de la page. Il est recommandé de mettre une section dans header et footer également.
Appliquer un padding aux sections est le meilleure moyen d'apporter une marge minimale pour les bords d'écrans.
Les containers pemettent de centrer le contenu et de mettre des marges latérales. Les fonds (couleur ou images) peuvent être mis sur les sections pour prendre la pleine largeur
Remplissage
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ea minus facere ab culpa. Sit commodi consectetur nihil aliquid delectus maiores neque? Corrupti maxime temporibus, quisquam aspernatur mollitia voluptate soluta! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum tenetur iusto adipisci asperiores earum, aut, molestiae quo provident eveniet voluptates voluptatibus dolore nihil iste tempora sit ipsam error excepturi! Illum?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam, nobis id. Temporibus nesciunt quidem nisi id ullam ea quam similique unde numquam ut ipsam mollitia officiis, debitis soluta quas sunt.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam, eligendi incidunt quisquam beatae ex cumque, mollitia esse nulla ducimus expedita dignissimos hic? Iusto debitis accusantium distinctio est laudantium quisquam adipisci!
Aut voluptatem reprehenderit nam, consectetur quos ea labore quaerat ducimus perferendis delectus culpa voluptates sit fugiat debitis magni doloremque omnis laborum voluptas numquam maiores? Necessitatibus beatae facilis placeat! Ea, beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex odio praesentium, non ipsa at eaque iste beatae, in itaque repudiandae nemo facere voluptatum. Quia voluptatibus id numquam eaque, commodi deserunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas magnam, ipsum eius ipsam minima mollitia qui, et hic iure possimus, quos molestias adipisci natus cum officia reprehenderit reiciendis unde error!
Deleniti ullam ducimus amet. Deleniti alias perspiciatis ea nam obcaecati veritatis numquam aspernatur dolorem! Saepe libero recusandae expedita fuga distinctio excepturi assumenda adipisci? Quae, reprehenderit. Alias commodi aut sint eveniet.
Iure beatae non maxime deserunt quod natus nemo totam quia, est labore? Quos illum vero, veniam dolorem distinctio quidem ducimus a ut aliquam dolorum quod perspiciatis culpa, delectus excepturi architecto!
Praesentium a nam dolorem similique ratione quae et vitae dolor eos. Repudiandae quas, reiciendis numquam non quibusdam, libero dicta perspiciatis nobis praesentium exercitationem, provident officiis earum ullam debitis esse velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ex quidem, vel nobis debitis odit porro libero beatae incidunt quo soluta optio voluptas repellat dolorem fugit officia asperiores eaque molestiae?