HTML and CSS Troubleshooting | Web Development

Introduction

In this project, you will learn how to fix the display issues of a website and ensure it is properly styled and laid out. The goal is to take an unfinished website and make it look like the desired finished product.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to identify and fix issues in the HTML file
How to update the CSS file to apply the correct styles
How to ensure the website is displayed with the desired width and layout

🏆 Achievements

After completing this project, you will be able to:

Analyze and troubleshoot HTML and CSS code
Apply techniques for properly structuring and styling web pages
Demonstrate the importance of attention to detail in web development

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) css/BasicConceptsGroup -.-> css/properties("`Properties`") css/BasicConceptsGroup -.-> css/values("`Values`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CSSPreprocessorsGroup -.-> css/nesting("`Nesting`") html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") subgraph Lab Skills css/properties -.-> lab-300060{{"`Fixing Website Display Issues`"}} css/values -.-> lab-300060{{"`Fixing Website Display Issues`"}} css/colors -.-> lab-300060{{"`Fixing Website Display Issues`"}} css/width_and_height -.-> lab-300060{{"`Fixing Website Display Issues`"}} css/nesting -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/basic_elems -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/charset -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/head_elems -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/text_head -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/para_br -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/lists_desc -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/layout -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/nav_links -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/doc_flow -.-> lab-300060{{"`Fixing Website Display Issues`"}} html/multimedia -.-> lab-300060{{"`Fixing Website Display Issues`"}} end

Set Up the Project Structure

In this step, you will set up the project and open the files in the editor.

Open the editor and you should see the following files: index.html, style.css, and the image files html5logo.png, css3-logo.png, nav-btn.png and evolution.png.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Fix Website Display

In this step, you will look at the HTML structure of the page and from there you will find the problem to fix the page display mess.

Open the index.html file in the code editor.

Examine the index.html file and notice that the <link> tag for the CSS file has the wrong filename. Update the href attribute to point to the correct file, style.css.

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

The HTML file contains the following main sections:

<header>: Includes the website title and navigation menu.
<div class="content">: Contains the main content of the page, including a one-column section, a three-column section, and a two-column section.
<footer>: Includes the website footer with links.

Save the changes to the index.html file.

Refresh the page in your browser after the bug fix and you will see the following effect:

Congratulations! You have successfully fixed the website display by updating the HTML and CSS files.

Fixing Website Display Issues