I recently enrolled in a Coursera course titled "Introduction to Web Design for Everyone (Basics of Coding and Web Development)" as a beginner in the coding world. Setting up my workspace on the computer, I created separate folders for CSS and HTML files - naming them divDisplay.css and divDisplay.html respectively. However, upon opening the code in popular web browsers like Chrome, Firefox, or Microsoft Edge, I noticed that the CSS styles and divDisplay were not rendering properly. You can check out the issue at this link:
file:///K:/COURSERAWEBDEVELOPMENT/divDisplay.html
The peculiar thing is that when I transfer the same CSS and HTML code to CodePen, it works flawlessly displaying as intended. Here is an example of how it should look like: https://codepen.io/LuRocks/pen/RwbQxZj
While trying to troubleshoot the problem in Chrome by using the INSPECT tool and navigating to the CONSOLE tab on the far right, I encountered the following error message:
Failed to load resource: divDisplay.css:1 net::ERR_FILE_NOT_FOUND
If anyone has any suggestions or solutions to this dilemma, please do share. Your help would be greatly appreciated.
Thank you,
Luciana Castillo
I am at a loss on what else to try.
In Sublime Text3, this is the CSS3 code I have saved under divDisplay.css:
span{
height:50px;
width:75px;
background:#00ff00;
}
div{
height:100px;
width:45%;
background:#00ffff;
}
p{
background:#ff00ff;
width: 200px;
height:100px;
}
Under the same editor, here's my HTML5 code saved as divDisplay.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<title>Div Display Example</title>
<link rel="stylesheet" href="CSS/divDisplay.css">
</head>
<body>
<span>Span A</span>
<span>Span B</span>
<span>Span C</span>
<hr>
<div>Div A</div>
<div>Div B</div>
<div>Div C</div>
<hr>
<p>Paragraph A</p>
<p>Paragraph B</p>
<p>Paragraph C</p>
</body>
</html>
The expected output is similar to what you see here https://codepen.io/LuRocks/pen/RwbQxZj, but unfortunately, I'm facing difficulties and the actual output appears differently. You can compare by pasting this link into your browser:
file:///K:/COURSERAWEBDEVELOPMENT/divDisplay.html