1. Using CSS for Background Images
CSS allows for flexible background image management:
- Use
background-imageproperty - Example:
background-image: url(images/ImageName.jpg); - Use
background-repeat: no-repeat;to prevent repetition
2. Normalize CSS
Normalize.css ensures consistent rendering across browsers:
- Attach multiple CSS files in the correct order
- List Normalize.css before your custom CSS
3. Viewport Code
Essential for responsive design:
<meta name="viewport" content="user-scalable=no,
width=device-width, initial-scale=1.0" />4. Favicon
Create a 16x16px favicon for your site:
<link rel="icon" href="images/favicon.ico"
type="image/x-icon">5. Metadata & SEO
Important metadata includes robots, description, and title.
6. Robots
Control search engine indexing:
<meta name="robots" content="index, follow">7. Description
Add an accurate site description:
<meta name="Description"
content="Your description here" />8. Title
Always include a title for your page:
<title>Your title here</title>9. Optional Meta Data
Consider including keywords for non-Google search engines.
10. Z-index
Control the stacking order of elements:
- Static: Default
- Fixed: Prevents scrolling
- Absolute: Precise positioning
- Relative: Positioned relative to its normal position
11. About X & Y
Understanding coordinate system:
- X-axis: Horizontal
- Y-axis: Vertical
- (0,0) starts at the top-left corner