1. Advantage to using CSS for the Background Image
CSS images can be swapped out based on screen size. Use @media screen breaks and the background-image property to change the image of the chosen div or other element.
background-image: url(images/ImageName.jpg);
Note: By default, a background image is placed at the top-left corner of an element and repeated both vertically and horizontally. If the image is small, it will automatically repeat to fill the available space. To prevent the image from repeating, use background-repeat: no-repeat;.
2. Normalize CSS
normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. Ensure that normalize.css is listed first in the head section of your HTML, followed by your custom CSS file to give preference to your own styles.
3. Viewport Code
This code should be added to the <head> section of every HTML page. It ensures better functionality for smartphones and tablets:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
4. Favicon
Favicons are small icons displayed in browsers' tabs. They should be 16x16px at 72ppi. You can save them as a .png file, bypassing the need for an .ico format. The following code links your favicon to the webpage:
<link rel="icon" href="images/favicon.png" type="image/png">
5. Metadata & SEO
Metadata is crucial for improving your website's visibility in search engines. To optimize SEO, ensure that the title, description, and robots meta tags are included in the HTML <head> section:
<meta name="robots" content="index, follow">- Allows search engines to index your site.<meta name="description" content="Your description here">- An accurate description improves SEO.<meta name="title" content="Your title here">- The page title displayed in search results.
For more SEO tips, visit Google's Web Development Guide.
6. Z-index
The z-index property controls the stacking order of elements. A higher number places an element in front of others, while a lower number sends it to the back. It is especially useful when using CSS positioning like absolute or fixed:
position: absolute;
z-index: 10; /* Element is placed in front */
Examples of positioning:
- Static: Default positioning.
- Fixed: Stays in place while scrolling.
- Absolute: Positioned relative to its closest positioned ancestor.
- Relative: Positioned relative to its normal position.
7. About X & Y Axis
The X-axis is the horizontal axis of the page, and the Y-axis is the vertical axis. An X,Y-axis of 0,0 would start at the top-left corner of the page.