CodePen project not appearing correctly in browser

HTML-CSS
1

Hello guys! I have been going through the curriculum material and I enountered a problem on the third project of the Responsive Web Design Certficate. I tried to copy and paste the html and css code on two seperate files locally on my pc and connect them with these lines in the html document.

<head>
<link rel="stylesheet" type="text/css" href="original.css">
</head>

The thing is that the page doesn’t show up like in codepen. I’m testing the example given, not my implementation. The result is this:

Selection_091
Selection_0911599×696 180 KB

The yellow signs warn about “unknown property name” or “invalid property value”. Why is this happening? I kind of lost my motivation by not being sure that what I create in code pen works flawlessly… I’ve tried both in Chrome and Firefox.

2

Do you have the link for your codepen? Did you put the CSS in the code pane for css?

3

The pen is the one provided as an example for the project. Here it is:
codepen .io/freeCodeCamp/full/RKRbwL
I didn’t understand your question. I created one original.html file and one original.css file and pasted inside the code. As I mentioned, in the .html file I added on top the lines that link to the .css file.
I’ve added a space in the codepen link because I’m new and I’m not allowed to post links yet.

4

It is because the CSS is written using SCSS/SASS

If you click the down chevron/arrow on the CSS code box and then click “View Complied CSS” it will output the normal CSS, copy paste that instead.

2 Likes
5

Ah, what lasjorg said, they used SCSS in their example so you need to compile it before copying it out.