# How to Code? **1. Define colors, fonts, etc., using `:root**` **2. Place essential Meta Tags** (Crucial for browsers and search engines (SEO), as well as social media, such as OG tags.) ### 2. Class Naming Methodology: 1. First: `Layout/Display` 2. Second: `Box Model (width, padding, margin)` 3. Finally: `Responsive` ## 3. CSS Writing Order Defining a specific order for each component is one of the most important factors for code readability and professionalism. It is best to write styles from general to specific. First, define `Display` and `Layout` properties to determine how the element sits on the page. Then, move to the `Box Model` to set dimensions, padding, and margins. ## 4. Preventing Messy CSS: Avoiding IDs and !important Keep `Specificity` low. The higher the specificity, the harder it is to override or change styles. CSS should be as controllable, clean, and maintainable as possible. Using `#id` for styling carries very high priority and leads to "style wars" in the future. Therefore, do not use `#id` for styling. Similarly, never use `!important` except in rare cases, such as overriding external library styles. ## 5. Build Reusable Components Elements like buttons, cards, and forms should be designed correctly and generically once and reused throughout the project. If an element is likely to repeat, make it **Reusable**. If you create a new class with new styles every time you make a button, the project will quickly become cluttered, inconsistent, and unmaintainable. ## 6. Code Commenting Good comments help the next programmer or team members. Comments should explain the "Why," not the obvious logic. The code structure should be **Self-documenting**. Use comments in `HTML` and `CSS` to explain which section the code belongs to and why a specific approach was taken. ## 3. Set Page Language (Language Attribute) --- # Things to Consider Before Creating a Page ## 1. Optimized Folder and File Structure * Clean folder structure. * Modular CSS. * Readability for the next developer. **Naming Tips:** * Class names should represent "Meaning," not "Appearance" (e.g., if you name a box `.blue` and the color changes later, that class name becomes a lie). * Class names should describe the element's role (e.g., use `
` instead of `
`). * Class names should be short, clear, and predictable. **General Principles:** * Keep the site's appearance consistent. * Ensure future changes are fast and safe. * Don't repeat yourself (DRY). * Prevent large-scale projects from spiraling out of control. --- # Framework (Bootstrap) Provides a collection of ready-made classes for layouts, buttons, forms, tables, and common UI components. It allows developers to build standard pages without writing CSS from scratch. Bootstrap is a standard, open-source CSS framework used for organized, fast UI design and web development. **Key Features of Bootstrap:** * An open-source and free framework for web UI design. * Built on CSS; simple and fast to use. * Features a powerful Grid System for layouts. * Designed as **Mobile First**, prioritizing mobile display. * Enables fully **Responsive** pages without excessive custom CSS. * Includes common components like Modals, Tabs, Accordions, and Sliders. * Cross-browser compatible. * Reduces the need to write CSS from zero. --- # What is Responsive Design & Best Practices: Responsive design means writing code so that web pages display correctly across various screen sizes like mobile, tablet, and desktop. The goal is to adapt a single structure to different sizes without needing separate versions, providing an optimal user experience. Responsive CSS is usually handled through flexible layouts, relative units, and Media Queries. Starting with this mindset makes pages more organized, maintainable, and compatible. ## 1. Considerations Before Making a Site Responsive: If the HTML or page layout is wrong, using "hacky" styles to hide the issue is a sign of poor structural design. In professional projects, it's better to solve the root cause rather than hiding symptoms. Using hidden styles or "quick fixes" creates hidden bugs that break responsiveness and make future maintenance difficult. ## 2. Why is Responsive Design Important? * Most internet users access sites via mobile. * Significantly improves UX on mobile and tablets. * Prevents horizontal scrolling and layout breakage. * Maintains text readability on small screens. * Makes buttons and links easier to click. * Reduces Bounce Rate. * Increases user "Time on Site." * Google prefers responsive design (SEO). * It is the core standard of modern web design. --- # Common Errors: Looking Good but "Dirty" Under the Hood Incorrect HTML or layout structures often lead to the misuse of styles. These "fixes" only hide the problem rather than solving it. To keep code clean, predictable, and scalable, avoid these common mistakes. ## 1. Improper Styles to Replace: 1. **Using `!important`:** It breaks the natural CSS cascade and makes maintenance a nightmare. 2. **`height: fixed(px)` for content boxes:** When content changes, text overflows or gets hidden. 3. **`width: fixed(px)` for main layers:** Breaks responsiveness and causes horizontal scrolling. 4. **`position: absolute` for general layout:** Makes the layout fragile and dependent on exact screen coordinates. 5. **`display: inline-block` for complex layouts:** Flexbox and Grid are much easier to control and more robust. --- # Factors that Decrease Site Speed * Using clean HTML structure and avoiding deep, unnecessary nesting. * Setting `width` and `height` for images to prevent layout shifts (CLS). * Defining button types (`type="button"` or `type="submit"`) to prevent unwanted default behavior. * Avoiding `inline-styles` (causes re-renders and code duplication). * Ensuring links are clickable without JS (proper fallback). * Avoiding heavy JavaScript on link `onclick` events. * Adding `rel="noopener noreferrer"` to external links with `target="_blank"` for security and performance. * Avoiding empty links (`href="#"`) as they cause unnecessary jumping and re-rendering. * Large, uncompressed images are the main cause of slow sites. * Use modern formats like **WebP** and appropriate sizing. * Minify CSS, HTML, and JS by removing unnecessary whitespace. * Load CSS/JS optimally; use `defer` or `async` for scripts in the ``. * Use **Lazy Loading** for images and videos. * Preload critical resources like fonts or essential CSS. * Compress fonts, remove unused weights, and use `font-display: swap`. ## 2. Critical CSS Performance Tips * Avoid heavy and repetitive `box-shadow`. * Avoid animating `height`, `width`, `left`, or `top` (use `transform` instead). * Effects like `blur` and `glassmorphism` are expensive and lower PageSpeed scores. * Be careful with `opacity` on large parent elements. * Avoid massive background images in CSS. * Simplify complex `z-index` layering. * Avoid infinite or overly long animations. * Avoid using `vh` for elements on extremely long pages. ## 3. Critical JS Performance Tips * Use JavaScript only when necessary; avoid bloat. * Load JS files with `defer` or `async` so they don't block initial rendering. * Keep JS logic minimal and efficient. * Defer non-essential processing until after user interaction. * Optimize DOM selection; avoid repeated `querySelector` calls. * Cache DOM selections in variables. * Avoid unnecessary timers (`setTimeout`, `setInterval`) that consume resources. * Avoid excessive use of `innerHTML` as it causes Reflow and Repaint. * Remove unused JS code. * Avoid heavy logic inside loops that touch the DOM. * Use **Lazy Loading** for secondary scripts (like modals or sliders). --- **Document Created:** 2026 **Version:** 1.0