Have I done something wrong?

HTML-CSS
1

Attached are three screenshots: the first from Visual Studio Code editor, the second from freeCodeCamp preview, and the third is from liveweave.com preview. The code is basically the same for all three. The only modification appears in the code from Visual Studio Code. I am new to the platform and haven yet figured out how to link the stylesheet in app, so deleted the link and put the stylesheet in a style element in the html. The outputs are slightly different. Should I be concerned? BTW this for the HTML/CSS certification project 1/5.

from Visual Studio Code:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title> Car Survey</title>
            <style>
             body {
  background-image: url(https://cdn.pixabay.com/photo/2019/08/09/06/12/car-racing-4394450_640.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  font-family: Arial;
  padding: 40;
}
h1 {
  color: black;
  font-weight: bold;
}
p {
  color: black;
  font-weight: bold;
  font-size: 55px;
}
h1, p {
   text-shadow: 0 0 3px #ff0000
}
form {
  position: absolute;
  right: 92px;
  width: 300px;
  background-color: #000;
  opacity: 0.75;
  color: #fff;
   background-image: linear-gradient(to right, rgba(255,0,1), rgba(255,0,0,0));        
}
label {
   display: block;
}
fieldset{
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
fieldset:last-of-type{
  border-bottom: none;
}   
            </style>
   </head>
   <body>
       <h1 id="title">Dream Car Survey</h1>
       <p id="description">Let's Talk About Your Dream Car!!</p>
       <form id="survey-form">
          <fieldset>
             <label id="name-label">Enter your name: <input id="name" placeholder=name required /></label>
             <label id="email-label">Enter your email: <input id="email" type="email" placeholder=email required /></label>
             <label id="number-label">Enter your age: <input id="number" type="number" min="13" max="150" placeholder="13+" /></label>
          </fieldset>
          <fieldset>
             <label>Do you drive?
                 <select id="dropdown" name="car-type">
                     <option value="">(select one)</option>
                     <option value="yes">Yes</option>
                     <option value="no">No</option>
                 </select>
             </label>
             <label>If so, what do you drive?</label>
              <label><input type="checkbox" name="car-type" value="SUV" class="inline" />SUV
              </label>
              <label><input type="checkbox" name="car-type" value="Hatchback" class="inline" />Hatchback
              </label>
              <label><input type="checkbox" name="car-type" value="Coupe" class="inline" />Coupe
              </label>
              <label><input type="checkbox" name="car-type" value="Sedan" class="inline" />Sedan
              </label>
              <label><input type="checkbox" name="car-type" value="Van/Minivan" class="inline" />Van/Minivan
              </label>
              <label><input type="checkbox" name="car-type" value="Pickup" />Pickup
              </label>
              <label><input type="checkbox" name="car-type" value="Other" />Other
              </label>
           </fieldset>
           <fieldset>Rate your car-smarts!
               <label><input type="radio" name="car-smarts" value="1" />Not so smart</label>
               <label><input type="radio" name="car-smarts" value="2" />Could be smarter</label>
               <label><input type="radio" name="car-smarts" value="3" />Pretty car-smart</label>
               <label><input type="radio" name="car-smarts" value="4" />Very car-smart</label>
               <label><input type="radio" name="car-smarts" value="5" />Extremely car-smart</label>
    </fieldset>
    <fieldset>
           <label>Tell us about your dream car:
                <textarea name="about-my-dream-car" rows="3" cols="30" placeholder="about my dream car"></textarea>
           </label>
           <input type="submit" id="submit" value="Submit" />
        </fieldset>
       </form>
   </body> 
</html>

output in chrome via Visual Studio Code

from_Visual_Studio_Code
from_Visual_Studio_Code1920×1080 326 KB

from freeCodeCamp preview:

html:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title> Car Survey</title>
            <link href="styles.css" rel="stylesheet" /> 
   </head>
   <body>
       <h1 id="title">Dream Car Survey</h1>
       <p id="description">Let's Talk About Your Dream Car!!</p>
       <form id="survey-form">
          <fieldset>
             <label id="name-label">Enter your name: <input id="name" placeholder=name required /></label>
             <label id="email-label">Enter your email: <input id="email" type="email" placeholder=email required /></label>
             <label id="number-label">Enter your age: <input id="number" type="number" min="13" max="150" placeholder="13+" /></label>
          </fieldset>
          <fieldset>
             <label>Do you drive?
                 <select id="dropdown" name="car-type">
                     <option value="">(select one)</option>
                     <option value="yes">Yes</option>
                     <option value="no">No</option>
                 </select>
             </label>
             <label>If so, what do you drive?</label>
              <label><input type="checkbox" name="car-type" value="SUV" class="inline" />SUV
              </label>
              <label><input type="checkbox" name="car-type" value="Hatchback" class="inline" />Hatchback
              </label>
              <label><input type="checkbox" name="car-type" value="Coupe" class="inline" />Coupe
              </label>
              <label><input type="checkbox" name="car-type" value="Sedan" class="inline" />Sedan
              </label>
              <label><input type="checkbox" name="car-type" value="Van/Minivan" class="inline" />Van/Minivan
              </label>
              <label><input type="checkbox" name="car-type" value="Pickup" />Pickup
              </label>
              <label><input type="checkbox" name="car-type" value="Other" />Other
              </label>
           </fieldset>
           <fieldset>Rate your car-smarts!
               <label><input type="radio" name="car-smarts" value="1" />Not so smart</label>
               <label><input type="radio" name="car-smarts" value="2" />Could be smarter</label>
               <label><input type="radio" name="car-smarts" value="3" />Pretty car-smart</label>
               <label><input type="radio" name="car-smarts" value="4" />Very car-smart</label>
               <label><input type="radio" name="car-smarts" value="5" />Extremely car-smart</label>
    </fieldset>
    <fieldset>
           <label>Tell us about your dream car:
                <textarea name="about-my-dream-car" rows="3" cols="30" placeholder="about my dream car"></textarea>
           </label>
           <input type="submit" id="submit" value="Submit" />
        </fieldset>
       </form>
   </body> 
</html>

css:

body {
  background-image: url(https://cdn.pixabay.com/photo/2019/08/09/06/12/car-racing-4394450_640.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  font-family: Arial;
  padding: 40;
}
h1 {
  color: black;
  font-weight: bold;
}
p {
  color: black;
  font-weight: bold;
  font-size: 55px;
}
h1, p {
   text-shadow: 0 0 3px #ff0000
}
form {
  position: absolute;
  right: 92px;
  width: 300px;
  background-color: #000;
  opacity: 0.75;
  color: #fff;
   background-image: linear-gradient(to right, rgba(255,0,1), rgba(255,0,0,0));        
}
label {
   display: block;
}
fieldset{
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
fieldset:last-of-type{
  border-bottom: none;
}

the result from freeCodeCamp preview screen:

from_freecodecamp_preview
from_freecodecamp_preview1920×1080 369 KB

from liveweave.com preview:

html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Car Survey</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <h1 id="title">Dream Car Survey</h1>
    <p id="description">Let's Talk About Your Dream Car!!</p>
    <form id="survey-form">
        <fieldset>
            <label id="name-label">Enter your name: <input id="name" placeholder=name required /></label>
            <label id="email-label">Enter your email: <input id="email" type="email" placeholder=email required /></label>
            <label id="number-label">Enter your age: <input id="number" type="number" min="13" max="150" placeholder="13+" /></label>
        </fieldset>
        <fieldset>
            <label>Do you drive?
                <select id="dropdown" name="car-type">
                    <option value="">(select one)</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>
            </label>
            <label>If so, what do you drive?</label>
            <label><input type="checkbox" name="car-type" value="SUV" class="inline" />SUV
            </label>
            <label><input type="checkbox" name="car-type" value="Hatchback" class="inline" />Hatchback
            </label>
            <label><input type="checkbox" name="car-type" value="Coupe" class="inline" />Coupe
            </label>
            <label><input type="checkbox" name="car-type" value="Sedan" class="inline" />Sedan
            </label>
            <label><input type="checkbox" name="car-type" value="Van/Minivan" class="inline" />Van/Minivan
            </label>
            <label><input type="checkbox" name="car-type" value="Pickup" />Pickup
            </label>
            <label><input type="checkbox" name="car-type" value="Other" />Other
            </label>
        </fieldset>
        <fieldset>Rate your car-smarts!
            <label><input type="radio" name="car-smarts" value="1" />Not so smart</label>
            <label><input type="radio" name="car-smarts" value="2" />Could be smarter</label>
            <label><input type="radio" name="car-smarts" value="3" />Pretty car-smart</label>
            <label><input type="radio" name="car-smarts" value="4" />Very car-smart</label>
            <label><input type="radio" name="car-smarts" value="5" />Extremely car-smart</label>
        </fieldset>
        <fieldset>
            <label>Tell us about your dream car:
                <textarea name="about-my-dream-car" rows="3" cols="30" placeholder="about my dream car"></textarea>
            </label>
            <input type="submit" id="submit" value="Submit" />
        </fieldset>
    </form>
</body>

</html>

css:

body {
  background-image: url(https://cdn.pixabay.com/photo/2019/08/09/06/12/car-racing-4394450_640.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  font-family: Arial;
  padding: 40;
}
h1 {
  color: black;
  font-weight: bold;
}
p {
  color: black;
  font-weight: bold;
  font-size: 55px;
}
h1, p {
   text-shadow: 0 0 3px #ff0000
}
form {
  position: absolute;
  right: 92px;
  width: 300px;
  background-color: #000;
  opacity: 0.75;
  color: #fff;
   background-image: linear-gradient(to right, rgba(255,0,1), rgba(255,0,0,0));        
}
label {
   display: block;
}
fieldset{
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
fieldset:last-of-type{
  border-bottom: none;
}

the result from liveweave.com preiew:

liveweave_screenshot
liveweave_screenshot1920×1080 402 KB

2

please don’t put this again under support, your question is not related to how to use the freeCodeCamp website.

You will need to provide your code to be able to help.

I would guess there is something that is applied in some of the cases but not all.

3

sorry, where should I have put something like this :sweat_smile:?

4

it looks like Ilenia has already re-classified your post to the correct sub-forum (HTML/CSS in this case)

5

Adding your code would probably be of help, it’s hard to guess what’s exactly going on just by seeing the outputs.

My guess is that on your browser it seems that default padding and margin are 0, while on fcc and liveweave preview its different to 0 among with the preview dimension that might be slightly different. Try using height 100vh for your image so that it always covers the screen and check if you are setting margin and padding for your elements or just using the ones provided by the platform.

6

@ yunksuklee just uploaded the code with the results below. :+1:

Your suggestion worked like a charm. Thank you :+1:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title> Car Survey</title>
            <style>
             body {
  background-image: url(https://cdn.pixabay.com/photo/2019/08/09/06/12/car-racing-4394450_640.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height:100vh;
  background-position: right;
  font-family: Arial;
  padding: 40;
}
h1 {
  color: black;
  font-weight: bold;
}
p {
  color: black;
  font-weight: bold;
  font-size: 55px;
}
h1, p {
   text-shadow: 0 0 3px #ff0000
}
form {
  position: absolute;
  right: 92px;
  width: 300px;
  background-color: #000;
  opacity: 0.75;
  color: #fff;
   background-image: linear-gradient(to right, rgba(255,0,1), rgba(255,0,0,0));        
}
label {
   display: block;
}
fieldset{
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
fieldset:last-of-type{
  border-bottom: none;
}   
            </style>
   </head>
   <body>
       <h1 id="title">Dream Car Survey</h1>
       <p id="description">Let's Talk About Your Dream Car!!</p>
       <form id="survey-form">
          <fieldset>
             <label id="name-label">Enter your name: <input id="name" placeholder=name required /></label>
             <label id="email-label">Enter your email: <input id="email" type="email" placeholder=email required /></label>
             <label id="number-label">Enter your age: <input id="number" type="number" min="13" max="150" placeholder="13+" /></label>
          </fieldset>
          <fieldset>
             <label>Do you drive?
                 <select id="dropdown" name="car-type">
                     <option value="">(select one)</option>
                     <option value="yes">Yes</option>
                     <option value="no">No</option>
                 </select>
             </label>
             <label>If so, what do you drive?</label>
              <label><input type="checkbox" name="car-type" value="SUV" class="inline" />SUV
              </label>
              <label><input type="checkbox" name="car-type" value="Hatchback" class="inline" />Hatchback
              </label>
              <label><input type="checkbox" name="car-type" value="Coupe" class="inline" />Coupe
              </label>
              <label><input type="checkbox" name="car-type" value="Sedan" class="inline" />Sedan
              </label>
              <label><input type="checkbox" name="car-type" value="Van/Minivan" class="inline" />Van/Minivan
              </label>
              <label><input type="checkbox" name="car-type" value="Pickup" />Pickup
              </label>
              <label><input type="checkbox" name="car-type" value="Other" />Other
              </label>
           </fieldset>
           <fieldset>Rate your car-smarts!
               <label><input type="radio" name="car-smarts" value="1" />Not so smart</label>
               <label><input type="radio" name="car-smarts" value="2" />Could be smarter</label>
               <label><input type="radio" name="car-smarts" value="3" />Pretty car-smart</label>
               <label><input type="radio" name="car-smarts" value="4" />Very car-smart</label>
               <label><input type="radio" name="car-smarts" value="5" />Extremely car-smart</label>
    </fieldset>
    <fieldset>
           <label>Tell us about your dream car:
                <textarea name="about-my-dream-car" rows="3" cols="30" placeholder="about my dream car"></textarea>
           </label>
           <input type="submit" id="submit" value="Submit" />
        </fieldset>
       </form>
   </body> 
</html>

from_Visual_Studio_Code_w_suggestion_from_yunsuklee
from_Visual_Studio_Code_w_suggestion_from_yunsuklee1920×1080 365 KB

7

@hbar1st ok very good
thanks guys :+1:

8

Alright, one of the differences is due to your padding property on body.

At vs you’ve setted it to 40, you should always clarify a measurement unit. The reason why you don’t need it at fcc it’s because it automatically adds ‘px’ after your 40. If you add that 40px in vs you’ll probably fix the text difference between them.

Regarding the background image deleting the background-position porperty will get it fixed. Besides I’d recommend adding:

height: 100vh;
overflow: hidden;

So that whenever you resize your screen it will always cover it fully.

Hope it helps.

9

wonderful! I will keep these in mind.

Any suggestions on an alternative to vs, something that links the stylesheet but will still produce the output in chrome like vs does, or would you know how to link the stylesheet in vs?

10

Oh yeah, forgot about that.
In the same directory you’ve got your html file create a ‘style.css’ with all your css rules in it.
Now at your html file make sure to delete any <style> tag and its content, inside <head> add the following:

<link rel="stylesheet" href="style.css" />

PS: There is no need for your CSS file to be named style.css its just a convention, as long as you have the css extension you’ll be fine.

11

For some reason when I removed the background-position property, the picture appeared lower in the browser window. I prefer the picture land where it was when I had that command in, so I’ve left that alone. From FCC to VS to LW the pictures and text as well as the survey box all appear to land in the same place with only a very slight difference in the FCC output. Thanks again :+1:

12

I guess the only thing I can say, is maybe you should just do your code for now on freecodecamp with instructions. Your doing the lesson on three different coding programs. I feel like its a little to much for one project.

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.