Fixing Website Display Issues

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

Set Up the Project Structure

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

1. 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.
2. Click on Go Live button in the bottom right corner of WebIDE, to run the project.
3. 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.

1. Open the index.html file in the code editor.
2. 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" />

3. 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.

4. Save the changes to the index.html file.

5. 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.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.