Help in Codepen Projects

So, I am BRAND NEW to all of this so please don’t judge my basic coding, but I am having issues with my codepen project. I originally created a pen with CSS and HTML but then decided I wanted multiple pages, so I copied this info into a project. Now the project isn’t using any of my css. Any help is much appreciated!! Thank you!
[My First Codepen Project]
(https://codepen.io/emilyanneharden/project/editor/AoMqJk)

Hello!

Are all your styles on the styles/index.scss I assume, right?

Regardless, your HTML file is not correctly structured:

<!DOCTYPE html>
<html lang="en">

<head>
		<title>Emily Harden</title>
		<link rel="stylesheet" href="css/index.processed.css">
	<!-- background with stripes -->
<!-- Up to this point, you're OK -->

This div is wrong. It should be inside the body, plus it doesn’t have a closing tag </div>.

<div id="background" style="background-image: url(https://www.publicdomainpictures.net/pictures/120000/velka/stripes-background-teal-green.jpg)">

The body tag should contain all your page content (the one that’s meant to be displayed), hence your header should go inside it, not before.

The correct structure of a HTML document is:

<!doctype html><!-- The document type declaration -->
<html><!-- Opening html tag -->
  <head><!-- Opening head tag -->
    <title>The Page Title</title><!-- The title shown on the browser tab -->
    <link href="path/to/css/file" />
    <!-- Other optional information like <script></script> tags -->
  </head><!-- Closing head tag -->
  <body><!-- Opening body tag -->
    <!-- Here goes your content -->
    <!-- Your <header></header>, for instance, goes here -->
  </body><!-- Closing body tag -->
</html><!-- Closing html tag -->

Try to adapt this structure and see if it fixes your issues :slight_smile:.

Let us know how it goes,

Regards!

1 Like

This definitely makes sense and I think I applied those fixes, thanks! It still isn’t linking to my CSS though? I even removed my background.

You have to link the index.processed.css instead of the index.scss.

Also, you have some elements after the closing body tag, which is wrong and didn’t close the html with </html>.

Be very careful with the opening and closing tags since it can lead to unexpected results :slight_smile:.

You can copy your HTML content, temporarily, to another pen and then click on Analyze HTML to see if there are errors. You could search online for HTML validator too :slight_smile:.

2 Likes

THANK YOU!!!
It worked!! :slight_smile:

1 Like