HTML, CSS & JavaScript Error Fix Solutions

HTML Image Not Showing – Solution

Problem:

Image does not appear on the webpage.

Common Reasons:

Wrong image path
Image file missing
Wrong file extension
Case sensitivity issues in file names
Image file is corrupted

                    <!-- Correct Code Example -->

                    <img src="images/photo.jpg" alt="Sample Image" width="400" height="300">

                    <!-- For absolute paths -->

                    <img src="https://example.com/images/photo.jpg" alt="Sample Image">

                    <!-- With proper folder structure -->

                    <img src="../assets/images/photo.jpg" alt="Sample Image">

Tip:

Always check folder name and image extension. Use relative paths for local files and absolute URLs for external images. Check the browser console (F12) for 404 errors indicating missing files.

CSS Not Working – Solution

Problem:

CSS file not applying styles to HTML elements.

Reasons:

CSS file not linked properly in HTML
Incorrect file path
CSS syntax errors
CSS specificity issues
Browser caching old CSS

                    <!DOCTYPE html>

                    <html lang="en">

                    <head>

                      <meta charset="UTF-8">

                      <meta name="viewport" content="width=device-width, initial-scale=1.0">

                      <title>My Page</title>

                      <!-- Correct CSS Link -->

                      <link rel="stylesheet" href="css/style.css">

                    </head>

                    <body>

                      <!-- Your content here -->

                    </body>

                    </html>

Tip:

Place CSS link in the <head> section of your HTML. Check file path and ensure the CSS file exists. Use browser developer tools (F12) to inspect if CSS is loading and check for syntax errors. Try clearing browser cache with Ctrl+F5.

JavaScript Not Working – Solution

Problem:

JavaScript code not running or executing.

Common Fixes:

JS file placed in wrong location
JavaScript syntax errors
Trying to access DOM elements before they load
Browser console errors
JavaScript disabled in browser

                    <!DOCTYPE html>

                    <html lang="en">

                    <head>

                      <meta charset="UTF-8">

                      <meta name="viewport" content="width=device-width, initial-scale=1.0">

                      <title>My Page</title>

                    </head>

                    <body>

                      <h1 id="title">Hello World</h1>

                      <button id="myButton">Click Me</button>

                      <!-- Correct Placement: Before closing body tag -->

                      <script src="js/main.js"></script>

                    </body>

                    </html>

                    <!-- Alternative: Using defer attribute -->

                    <script src="js/main.js" defer></script>

Tip:

Always check browser console (F12) for JavaScript errors. Make sure your script tags are correctly placed or use the 'defer' attribute. Use 'DOMContentLoaded' event to ensure DOM is ready before executing JavaScript that manipulates elements.

Form Not Submitting Data

Problem:

HTML form not sending data to server.

Reasons:

Missing form action attribute
Missing method attribute
Input fields without name attributes
JavaScript preventing default form submission
Submit button not inside form tags

                    <!-- Correct Form Example -->

                    <form action="/submit-form" method="POST">

                      <label for="username">Username:</label>

                      <input type="text" id="username" name="username" required>

                      <label for="email">Email:</label>

                      <input type="email" id="email" name="email" required>

                      <button type="submit">Submit Form</button>

                    </form>

Tip:

Always include 'action' and 'method' attributes in forms. Each input field should have a 'name' attribute for data to be sent. Use 'required' attribute for validation. Test with a simple form first before adding JavaScript validation.

Responsive Design Not Working

Problem:

Website not adapting to different screen sizes.

Reasons:

Missing viewport meta tag
Using fixed pixel values instead of percentages or relative units
Not using media queries
Missing responsive images
CSS Flexbox/Grid not implemented correctly

                    <!-- Essential viewport meta tag -->

                    <meta name="viewport" content="width=device-width, initial-scale=1.0">

                    <!-- CSS Example with Media Queries -->

                    <style>

                      .container {

                        width: 100%;

                        max-width: 1200px;

                        margin: 0 auto;

                        padding: 0 15px;

                      }

                      /* Media Query for Tablets */

                      @media (max-width: 768px) {

                        .container {

                          padding: 0 10px;

                        }

                        h1 {

                          font-size: 24px;

                        }

                      }

                      /* Media Query for Mobile */

                      @media (max-width: 480px) {

                        h1 {

                          font-size: 20px;

                        }

                      }

                    </style>

Tip:

Always include the viewport meta tag. Use relative units (%, rem, em, vw, vh) instead of fixed pixels. Test your website on different screen sizes using browser developer tools (F12 > Toggle Device Toolbar).