Encountering issues while learning web development is completely normal and happens to everyone, including experienced developers. This guide helps you solve common problems you might face when building your first websites. Each problem includes step-by-step solutions and explanations of why the problem occurs, so you can learn to diagnose similar issues in the future.
You've written CSS rules, saved your file, and refreshed your browser, but nothing changes. This is one of the most common issues beginners encounter. Understanding how CSS connects to HTML helps you solve this problem systematically.
The most common cause of CSS not working is an incorrect file path in your HTML. When you link a CSS file using the <link> tag, the browser needs to find the exact location of that CSS file relative to your HTML file.
If your HTML and CSS files are in the same folder:
<link rel="stylesheet" href="styles.css">If your CSS file is in a subfolder called "css", and your HTML file is one level up, you need to include the folder name:
<link rel="stylesheet" href="css/styles.css">"Styles.css" is different from "styles.css"The <link> tag must be inside the <head> section of your HTML document. If you've placed it in the body or outside the head section, the browser might not load it correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Your content here -->
</body>
</html>After making any changes to your CSS file, you must save the file and then refresh your browser. Browsers cache files to load pages faster, so they don't automatically detect changes.
This forces a hard refresh that clears the cache and reloads your CSS file.
Even a small syntax error in your CSS can prevent the entire stylesheet from loading. Common mistakes include:
Always check: Every property ends with a semicolon, and every opening curly brace { has a matching closing brace }.
/* Correct */
p {
color: blue;
font-size: 16px;
}
/* Incorrect - missing semicolon */
p {
color: blue
font-size: 16px;
}Modern browsers include developer tools that can help you diagnose CSS issues. Right-click on an element and select "Inspect" or "Inspect Element". In the developer tools panel, you can see which CSS rules are being applied and which are being overridden. This helps you understand why your styles might not be working as expected.
You open your HTML file in a browser and see a completely blank page. This can be frustrating, but it usually indicates a specific issue with your HTML structure that's preventing the browser from displaying content.
The most common cause of a blank page is missing or incorrectly placed tags. Every HTML document needs a proper structure:
<!DOCTYPE html>)<html>)<head>)<body>)If any of these are missing or incorrectly nested, the browser might not display your content.
Ensure your HTML follows this basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my content.</p>
</body>
</html>Unclosed tags can cause the browser to misinterpret your HTML structure. Every opening tag needs a corresponding closing tag. For example, if you open a <p> tag, you must close it with </p>.
Sometimes the structure is correct, but there's no visible content in the body section. Make sure you have actual content between your opening and closing <body> tags. Text, headings, paragraphs, and other elements must be inside the body to be visible on the page.
It might seem obvious, but double-check that you're opening the HTML file you just edited. If you have multiple HTML files open or saved, make sure you're viewing the one you've been working on. Check the file name in your browser's address bar to confirm you're viewing the right file.
Modern browsers show error messages in the console that can help identify problems.
Any errors related to your HTML will be displayed there, which can point you toward the specific issue causing your blank page.
You've added an image tag to your HTML, but the image doesn't appear on your page. This problem is almost always related to the file path pointing to the image, similar to how CSS file paths work.
The src attribute in your <img> tag must point to the exact location of your image file relative to your HTML file. If your HTML file and image are in the same folder, your image tag should look like this:
<img src="my-image.jpg" alt="Description of image">If your image is in a subfolder called "images", include the folder name:
<img src="images/my-image.jpg" alt="Description of image">Open your file explorer (Windows) or finder (Mac) and verify that the image file actually exists at the location specified in your src attribute.
"MyImage.jpg" is different from "myimage.jpg".jpg, .png, .gif, etc.)The file extension in your src attribute must match the actual file extension. If your file is named "photo.png" but your HTML references "photo.jpg", the image won't load.
Stick to common formats that all browsers support:
.jpg or .jpeg - Best for photographs.png - Best for graphics with transparency.gif - Best for simple animationsWhile the alt attribute doesn't fix loading issues, it's important for accessibility and helps identify problems.
<img src="missing-image.jpg" alt="This text shows if image doesn't load">When troubleshooting, you can temporarily use the full file path to test if the problem is with the path or the file itself.
file:///C:/Users/YourName/Documents/my-website/images/photo.jpgfile:///Users/YourName/Documents/my-website/images/photo.jpgIf this works, the issue is with your relative path, not the image file.
You've written CSS rules, and some styles work while others don't appear. This usually indicates an issue with CSS specificity, selector targeting, or property values.
CSS selectors must match the HTML elements you're trying to style. If you write a rule for h1 but your HTML uses h2, that rule won't apply.
Verify that your selectors match the actual HTML element names, class names, or IDs in your HTML file.
Example: Using class selectors (starting with a dot), make sure your HTML elements have the matching class attribute:
<!-- HTML -->
<p class="highlight">This paragraph will be styled.</p>/* CSS */
.highlight {
color: red;
}When multiple CSS rules target the same element, the browser uses specificity to determine which rule wins. More specific selectors override less specific ones.
Example: A class selector is more specific than an element selector, so a rule using .my-class will override a rule using just p if both apply to the same paragraph.
Some CSS properties require specific value formats. If you use the wrong format, the browser will ignore that property.
blue), hex codes (#0000ff), or RGB values (rgb(0, 0, 255))px or em - if you forget the unit, the browser will ignore that property/* Correct */
p {
font-size: 16px;
color: #333333;
}
/* Incorrect - missing unit */
p {
font-size: 16; /* This won't work */
color: #333333;
}CSS property names must be spelled correctly and use hyphens, not underscores or camelCase.
background-colorbackgroundColor (camelCase - used in JavaScript, not CSS)background_color (underscores don't work in CSS)Right-click on an element and select "Inspect" to open developer tools. You can see which CSS rules are being applied to that element and which are being overridden. The tools show you the computed styles (what's actually being applied) and help you understand why certain styles might not be working.
You've edited your HTML or CSS file, saved it, and refreshed your browser, but you still see the old version. This is usually related to browser caching or not saving your file correctly.
This might seem obvious, but it's the most common cause. Text editors often show an asterisk (*) or indicator when you have unsaved changes.
Browsers cache files to load pages faster, which means they sometimes show old versions of files even after you've saved changes. A normal refresh might load the cached version.
This forces the browser to reload all files from your computer, not from its cache.
If hard refreshing doesn't work, close the browser tab completely and reopen your HTML file. This ensures you're starting fresh without any cached data interfering with your changes.
If you have multiple versions of a file or files with similar names, make sure you're editing the file that's actually being displayed in your browser. Check the file path in your browser's address bar and compare it to the file you're editing in your text editor to ensure they match.
On some systems, if a file doesn't have write permissions, your editor might appear to save the file but the changes aren't actually written to disk. Check that your file isn't read-only and that you have permission to modify it.
You've created an HTML file, but when you try to open it, it either opens in a text editor instead of a browser, or nothing happens when you double-click it. This is usually a file association or file extension issue.
HTML files must have the .html extension for browsers to recognize them. If your file is named "mypage.txt" or "mypage.doc", the browser won't know it's an HTML file. Rename your file to have a .html extension. On Windows, you might need to enable "Show file extensions" in File Explorer settings to see and change extensions.
If your HTML files are opening in a text editor instead of a browser, your computer has associated the .html extension with the wrong program.
You can always open an HTML file directly from within your browser, regardless of file associations.
This method works regardless of your file associations.
Even with the correct extension, a file won't display properly in a browser if it doesn't contain valid HTML. Open your file in a text editor and verify it starts with <!DOCTYPE html> and contains proper HTML structure. Files that are completely empty or contain only plain text without HTML tags won't display as web pages.
You're seeing error messages, or your page isn't displaying correctly, and you suspect there might be mistakes in your code syntax. Common syntax errors include unclosed tags, missing semicolons, or incorrect attribute formatting.
Every opening HTML tag needs a corresponding closing tag. For example, if you open a <div>, you must close it with </div>. Missing closing tags can cause browsers to misinterpret your HTML structure.
<img> or <br> don't need closing tagsIn CSS, every opening curly brace { must have a matching closing brace }. If you're missing a closing brace, all CSS rules after that point might not work.
/* Correct */
p {
color: blue;
}
/* Incorrect - missing closing brace */
p {
color: blue;
/* This breaks everything after */In CSS, each property-value pair must end with a semicolon. Missing semicolons can cause the browser to ignore subsequent properties in that rule.
/* Correct */
p {
color: blue;
font-size: 16px;
}
/* Incorrect - missing semicolon */
p {
color: blue
font-size: 16px; /* This line might not work */
}In HTML, attribute values should be enclosed in quotes. While some browsers are forgiving about this, using quotes consistently helps prevent errors.
Always use quotes around attribute values, even when the value is just a number or single word. This ensures your HTML works consistently across all browsers.
<!-- Correct -->
<a href="https://example.com">Link</a>
<!-- Also works but less reliable -->
<a href=https://example.com>Link</a>Code editors like Visual Studio Code, Sublime Text, or Atom provide syntax highlighting that color-codes your HTML and CSS. This visual feedback helps you spot syntax errors more easily. When you see unexpected colors or when code isn't highlighted properly, it often indicates a syntax error nearby.
You're working through the GitHub lessons and encountering problems with repositories, commits, or GitHub Pages. These issues often relate to authentication, file synchronization, or GitHub Pages deployment.
If you're unable to push changes to GitHub, check that you're authenticated correctly. GitHub requires authentication for pushing changes.
If your GitHub Pages site isn't showing your latest changes, remember that it can take a few minutes for updates to appear after pushing changes.
main or master)If files you added locally don't appear on GitHub, you need to commit and push them. Saving files on your computer doesn't automatically upload them to GitHub.
git add - Stage files (tell Git which files to include)git commit - Save them (create a snapshot of your changes)git push - Upload them (send changes to GitHub)All three steps are necessary - skipping any step means your files won't appear on GitHub.
If you encounter GitHub-specific issues not covered here, the GitHub documentation is comprehensive and beginner-friendly. The GitHub guides in this tutorial also provide step-by-step instructions for common workflows. Don't hesitate to revisit those guides when you encounter issues.
Encountering problems and errors is an essential part of learning web development. Every developer, from beginners to professionals, spends significant time troubleshooting issues. What separates experienced developers from beginners isn't that they never encounter problems, but that they've developed systematic approaches to finding and fixing issues.
When you solve a problem, you're not just fixing code - you're learning how browsers work, how file systems operate, and how different technologies interact. Each problem you solve builds your debugging skills and makes you a better developer.
If you've tried these solutions and still can't resolve your issue, don't get discouraged. Take a break, return to the relevant lesson to review the concepts, or try a fresh approach. Often, stepping away from a problem and coming back to it later helps you see the solution more clearly.
Remember that every problem has a solution, and every error message is the computer's way of trying to help you understand what went wrong. With practice, you'll become faster at diagnosing and fixing issues, and you'll recognize patterns in the problems you encounter.