Debug the usual web design problems.

Likely Causes

• The stylesheet path in the link tag is wrong.
• The CSS file name or folder name does not match exactly.
• The link tag is outside the head or missing rel="stylesheet".
• The file was changed locally but not committed, pushed, or deployed.

Check First

• Open DevTools and check the Network tab for a missing CSS file.
• Compare the HTML file location with the CSS file location.
• Confirm the path uses forward slashes, not Windows backslashes.
• Confirm capitalization matches the actual file name.

Fix It

1. Move the CSS file into the expected folder or update the href path.
2. Use a simple path first, such as styles.css when the file sits next to index.html.
3. Save, refresh, commit, push, and check the live URL after GitHub Pages updates.

Related Lessons

• File Paths and Site Structure
• Intro to CSS

Related Projects

• Project 1: Basic Webpage
• Project 2: Responsive Landing Page

Likely Causes

• The img src path points to the wrong folder.
• The image file was not moved into the project folder.
• The file name extension is different, such as .jpg instead of .png.
• The live site is case-sensitive even if the local computer is forgiving.

Check First

• Right-click the broken image area and inspect the src path.
• Find the image file in the project folder and compare the exact name.
• Open the image directly from the browser if possible.
• Check whether the image is too large and slow to load.

Fix It

1. Place images in a clear folder such as images/.
2. Update the src path to match the folder and file exactly.
3. Add useful alt text after the image loads correctly.
4. Optimize large images before final submission.

Related Lessons

• File Paths and Site Structure
• Image Optimization
• Web Accessibility

Likely Causes

• The latest changes were not committed.
• The commit was created but not pushed.
• GitHub Pages is building from a different branch or folder.
• The browser is showing a cached version of the page.

Check First

• Open GitHub Desktop and confirm there are no uncommitted changes.
• Check whether the button says Push origin.
• Open the GitHub repository and confirm the changed files are visible online.
• Go to repository Settings, then Pages, and confirm the publishing source.

Fix It

1. Commit the current changes with a clear message.
2. Push the commit to GitHub.
3. Wait a few minutes, then refresh the Pages URL.
4. Try a hard refresh or private window if the repository shows the latest files.

Related Lessons

• Developer Environment Setup
• File Paths and Site Structure

Likely Causes

• A container has a fixed width that is wider than the viewport.
• Images or embedded media are not constrained with max-width.
• A flex or grid layout does not wrap or change at smaller widths.
• Long words, URLs, or code snippets are not allowed to wrap.

Check First

• Use responsive design mode and slowly shrink the viewport.
• Look for the first width where the layout breaks.
• Inspect the widest element and check width, min-width, and grid settings.
• Temporarily outline elements to see which one is forcing the page wide.

Fix It

1. Replace fixed widths with max-width and flexible units.
2. Set images and media to max-width: 100%.
3. Use flex-wrap, responsive grid columns, or media queries when the content needs a new layout.
4. Allow long text to wrap when needed.

Related Lessons

• Box Model and Layout
• Flexbox
• Responsive Web Design

Related Projects

• Project 2: Responsive Landing Page
• Project 4: Interactive Portfolio

Likely Causes

• The script path is wrong.
• The script runs before the HTML exists.
• The selector does not match the element in the HTML.
• There is a JavaScript error earlier in the file.

Check First

• Open the Console and read the first error message.
• Check the Network tab to confirm the JavaScript file loads.
• Confirm the selector in JavaScript matches the class, id, or data attribute in HTML.
• Add a temporary console.log to verify the event listener runs.

Fix It

1. Use a correct script src path.
2. Load the script with defer or place it near the end of the body.
3. Use stable selectors such as data attributes for interactive hooks.
4. Fix the first console error before chasing later behavior.

Related Lessons

• JavaScript in the DOM
• File Paths and Site Structure

Related Projects

• Project 3: Interactive Web Experience
• Project 4: Interactive Portfolio

Likely Causes

• The carousel CSS is missing.
• The carousel JavaScript or jQuery dependency is missing.
• The carousel is initialized before the slides exist.
• The markup does not match the plugin or class selector being initialized.

Check First

• Confirm only one slide should be active or visible at a time.
• Check the Console for missing function, jQuery, or plugin errors.
• Check the Network tab for missing Slick CSS or JavaScript files.
• Compare the selector in the initialization code with the carousel container class.

Fix It

1. Load required CSS and JavaScript files in the correct order.
2. Initialize the carousel after the DOM and dependencies are ready.
3. Start with a basic Slick example before adding custom options.
4. Add visible controls, status, keyboard support, and pause behavior when needed.

Related Lessons

• Mastering Carousels
• JavaScript in the DOM
• Web Accessibility

Likely Causes

• Inputs do not have connected label elements.
• Placeholder text is being used as the only label.
• Required fields or errors are only communicated visually.
• Focus states are missing or difficult to see.

Check First

• Click each label and confirm it focuses the matching field.
• Tab through the entire form using only the keyboard.
• Check whether required fields are clear before submission.
• Confirm errors and instructions are written in text, not color alone.

Fix It

1. Connect labels with matching for and id values.
2. Use appropriate input types such as email, text, checkbox, and textarea.
3. Keep labels visible even when placeholders are present.
4. Add clear focus styling and readable helper or error text.

Related Lessons

• HTML Forms
• Web Accessibility

Related Projects

• Project 2: Responsive Landing Page
• Project 4: Interactive Portfolio

Likely Causes

• Interactive behavior was built with non-interactive elements.
• Focus styles were removed or hidden.
• The visual order and keyboard order do not match.
• A menu or modal opens without managing focus.

Check First

• Put the mouse away and use Tab, Shift+Tab, Enter, Space, and Escape.
• Watch where focus goes and whether it is visible.
• Confirm clickable things are real links or buttons.
• Check whether opened content can be closed with the keyboard.

Fix It

1. Use links for navigation and buttons for actions.
2. Restore or add visible focus styles.
3. Avoid changing visual order in ways that confuse keyboard order.
4. Add keyboard handling for menus, modals, and custom interactions.

Related Lessons

• Building Effective Site Navigation
• JavaScript in the DOM
• Web Accessibility