Codepen out put looks complete compared to my Visual studio Code. Why?

1

I am used to working on codepen.io and forgot the basics of formatting properly.I am now working on Visual studio code. Right now I am trying to just move everything over to the center and change my color. I noticed when I ran the code in here everything came out good. So, I am not sure what I am missing when i preview it in visual studio code.

Whenever i preview the code with visual studio code i get my image like this: imgur.com/RXDvQqG but whenever i look at my code though my code pen project it looks great. What am i missing?

2

Looks like your CSS file isn’t linked to your HTML file in VS maybe? You have to manually set it up with link rel.

3

hmm, i was missing that but that didn’t work either… Here is a screen shot https://i.imgur.com/T3mXkNS.png

this is my css
`*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-family: cursive;
text-align: center;
min-height: 100vh;
min-width: 370px;
background-color: #18181A;
background-size: 200%;
}

h1 {
padding: 20px 10px;
letter-spacing: 0.2em;
color: white;
}

form * {
background: rgba(256, 256, 256, 0.3);
color: white;
}

form.search form .btn {
padding: 10px;
border-radius: 2px;
font-size: 16px;
border: 1px solid white;

}

::placeholder {
color: white;
}

form.search {
width: 40%;
min-width: 200px;
max-width: 600px;
}

form.search:focus {
outline: 0;
color: #333;
background: white;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3),
}

form .btn {
cursor: pointer;
width: 90px;
}

.giphy {
padding: 20px 0px 15px 0;
}

.giphy img {
width: 200px;
max-width: 800px;
margin: auto;
display: block;
}

.giphy img.gif {
width: 50%;
max-width: 600px;
box-shadow: 0 0 1px 1px rgba(256,256,256,0.3);
}

footer {
padding: 5px;
font-size: 14px;
color: white;
}

footer a {
color: #333;
text-decoration: none;
}
footer a:hover {
color: white;
text-decoration: underline;
}
`

4

Codepen imports/links your css and js automatically but you need to do that yourself when working in a text editor.

Link css like this:

<link rel="stylesheet" href="styles.css">

Where “styles.css” is the name of your css file and it’s file path.

5

I tried that and i was missing it but i am still getting the same output.

6

Another issue is Codepen doesn’t make you put all the required HTML tags when you start working. Check out this link.

https://www.w3schools.com/html/html5_intro.asp

You need DOCTYPE and HTML tags.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>
7

Check your browser console, to see for any 404/missing links/file not found error messages.

Looks like a missing CSS file problem to me.

1 Like
8

ok i got this:

Failed to load resource: the server responded with a status of 404 (Not Found) styles.css
Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found) styles.css

9

Is the file path correct when you import it?

i.e. if the css file is in a different folder you’d have to adjust the path accordingly.

10

my main.css is saved in the same path as my html.
Do i need to place a direct file path E:\Documents\M.App\Html\main.css for CSS?

11

No, but if it’s called main.css then you need to change “style.css” to “main.css” in the link rel.

12

You’re importing styles.css when your file is called main.css and that’s causing the error. You don’t have a file called styles.css

1 Like
13

I must have mixed it up because i thought i had that already fixed. Thank you so much for your help!

1 Like