Preview looks totally different on freeCodeCamp vs. Code Pen?

I am working on the “Product Landing Page” certification project and have written my code in Code Pen, but I found that the result looks totally different when pasted into freeCodeCamp. What is causing this? I am trying to use CSS Grid to create the page, so I’m not sure if that’s part of the problem?

Preview on Code Pen (link to my code):

Preview on freeCodeCamp (I don’t know how to link to my own code for this):

I know there are other issues within my code which I am going to post separately about for help, but for now I’d just like to figure out why the preview looks so drastically different in freeCodeCamp vs. Code Pen.

Thanks in advance!

Show us the code you are using inside the fcc challenge

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Thanks for the help! Here is the code I am using in the freeCodeCamp certification project:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=”utf-8” />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0” />
    <meta name=”description” content=”Whistler Olympic Park RV & Campground”>
    <title>Whistler Olympic Park RV & Campground</title>
    <link href=”styles.css” rel=”stylesheet” />
  </head>
  <body>
    <header id="header">
        <img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJreZNjZgcBd5bgjxRsFmyG5Sg1PPcCgM4hg&usqp=CAU" alt="Whistler Olympic Park logo" loading="lazy" class="logo" />
        <h1 id="nav-title">Whistler Olympic Park RV & Campground</h1>
        <nav id="nav-bar">
          <ul>
            <li><a href="#about" class="nav-link">About</a></li>
            <li><a href="#campsites" class="nav-link">Campsites</a></li>
            <li><a href="#book" class="nav-link">Book</a></li>
          </ul>
        </nav>
      </header>
    <div id="content">
      <section id="about" class="about">
        <p>Welcome to the Sea to Sky Corridor’s newest camping destination in the beautiful Callaghan Valley!</p>
        <p>Whistler Olympic Park RV & Campground is your gateway to outdoor recreation and relaxation just south of Whistler. The campground provides 39 spacious campsites with full-service and unserviced options. Enjoy comfortable amenities, scenic views and a unique, secluded and historic setting in nature, surrounded by the stunning beauty of evergreen forests, valleys and mountain ranges!</p>
       <p>Open from June 30 to October 2, 2023 (will operate early summer to fall annually, winter operations will not be impacted by the campground).</p>
      </section>
      <section id="book" class="book">
        <h2>Inquire about booking a site today!</h2>
        <p>Enter your name, email address and a brief description of your needs and we will be in touch within one business day regarding availability and scheduling.
        <form id="form" method="post" action="https://www.freecodecamp.com/email-submit">
          <fieldset> 
            <label for="name"></label>Name: <input type="text" name="name" id="name" placeholder=" John Smith">
          </fieldset>
          <fieldset>
            <label for="email"></label>Email: <input type="email" name="email" id="email" placeholder=" myemail@address.com">
          </fieldset>
          <fieldset>
            <label for="message"></label>Message: <textarea type="textarea" name="message" id="message" rows="5" cols="40"  placeholder="I am looking to book a multi-use site for 3 nights..."></textarea>
          </fieldset>
          <input id="submit" type="submit" value="Submit" />
        </form>
      </section> 
      <section class="promo-video">
        <video id="video" width="400" height="300" controls>
          <source src="https://www.youtube.com/watch?v=9QZIC98tkQE" type="mp4">
        </video>
      </section>
      <section id="campsites" class="campsites">
        <h2>Our Campsites</h2>
        <table>
          <thead>
            <tr>
              <th class="title">RV Sites (Full Service)</th>
              <th class="title">Multi-Use Sites (Unserviced)</t>
            </tr>
          </thead>
            <tr>
              <td><img src="https://www.whistlersportlegacies.com/sites/default/files/styles/scale_1280/public/2023-04/Justa-Jeskova-JJ094865-web.jpg?itok=h1a8hYGq" alt="RV at a campsite in front of the mountains"></td>
              <td><img src="https://www.whistlersportlegacies.com/sites/default/files/styles/scale_1280/public/2023-04/Justa-Jeskova-JJ094906-web.jpg?itok=WaLmCEhS" alt="tents at a campsite"></td>
            </tr>
            <tr>
              <td class="subtitle">Starting at $70/night (no tax)</td>
              <td class="subtitle">$40/night (no tax)</td>
            </tr>
            <tr>
              <td><p class="description">Our RV Sites are spacious, landscaped sites offering views of the Callaghan Valley mountains and their white peaks. They have a gravel pad and are suitable for 1 camper unit (vans/RVs and trailers) plus 1 tent or 2 tents (adjacent grass area). One vehicle allowed per site (must stay within your pad), additional parking is available free of charge in P1. Site capacity max. 8 people (max. 4 adults; children under 2 do not count towards total). Pad size is 6 m width x 16 m length (plus adjacent grassy area). Sites are allocated by availability, we are unable to accommodate specific site requests. Maximum stay two weeks. RV Site users have access to the Day Lodge with washrooms, showers, shop and common area for your convenience, as well as the laundry room.</p></td>
              <td><p class="description">Our Multi-Use Sites offer traditional grass landscaping close to the Day Lodge with washrooms, showers, shop and common area for your convenience, as well as the laundry room. These sites are suitable for 1 camper unit (vans/RVs under 20 feet and small trailers under 15 feet) or 2 tents. One vehicle allowed per site, additional parking is available free of charge in P1. Site capacity max. 6 people (max. 4 adults; children under 2 do not count towards total). Sites are allocated by availability, we are unable to accommodate specific site requests. Maximum stay two weeks.</p></td>
           </tr>
          <tbody>
          </tbody>
        </table>
      </section>
      <footer>
        <p> 1500 Callaghan Valley Rd<br>
Whistler, British Columbia<br>
V0N 1B0 Canada<br><br>

604-964-0059<br>
          info@whistlerolympicpark.com</p>
      </footer>
    </div>
  </body>
</html>
*{
  margin: 0;
  padding: 0;
  font-family: "Nunito Semibold";
}

body{
  color: #000;
  font-family: "Nunito Semibold";
  text-align: center;
  font-size: 10px;
}

#content{
  display: grid;
  max-width: 1250px;
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 0;
  grid-template-areas:
    ". . . ."
    "book book book book"
    "promo-video promo-video promo-video promo-video"
    "about about about about"
    "campsites campsites campsites campsites"
    "footer footer footer footer";
}

#content > *{
  background: #fff;
  padding: 30px; 
}

header{
  grid-area: header;
  background-color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
  color: #0C8F53;
}

#header-img{
  width: 100px;
  padding-right: 30px;
}

#nav-bar{
  position: fixed;
  top: 0;
  margin-top: 75px;
}

#nav-title{
  font-size: 1.6rem;
  margin-right: auto;
}

header li{
  font-size: 1.1rem;
  text-transform: uppercase;
  list-style: none;
  display: inline-block;
  padding: 0 20px;
}

header a{
  color: #0C8F53;
  text-decoration: none;
}

header a:hover{
  color: #894EAD;
}

h2{
  font-size: 1.8em;
  text-transform: uppercase;
}

p{
  font-size: 2em;
  padding: 0 100px;
}

fieldset{
  border: none;
  font-size: 1.5em;
}

input[type=submit]{
  width: 100px;
  height: 50px;
  text-align: center;
  text-transform: uppercase;
}

table{
  margin: 0 auto;
  width: 100%;
}

tbody td{
  width: 100vh;
}

img{
  width: 450px;
  padding: 20px;
}

.title{
  font-size: 1.8em;
}

.subtitle{
  font-size: 1.5em;
  text-transform: uppercase;
}

.description{
  text-align: left;
  padding: 0 20px;
}

.about{
  grid-area: about;
}

.book{
  grid-area: book;
}

.promo-video{
  grid-area: promo-video;
}

.campsites{
  grid-area: campsites;
}

footer{
  grid-area: footer;
}

@media screen and (min-width: 760px){
#content{
  display: grid;
  max-width: 1250px;
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  grid-template-areas:
    ". . . ."
    "about about about about"
    "campsites campsites campsites campsites"
    "book book promo-video promo-video"
    "footer footer footer footer";
}
}

Just had to confirm something, and looks like its what I thought is happening.

So look at this:

Check out the quotation marks. They are very funky looking when a normal quote looks like "

So what you will have to do is go through the code in the FCC challenge and every where you see those funky quotation marks you need to delete them and add the quotation mark again to get it looking normal. Right now the editor does not recognize the quotation marks you have which is making your css, meta, etc links be invalid so there is no styling in your page.

Wow, thank you so much! That makes a lot of sense and I’m glad it’s an easy (though tedious) fix. Going through and fixing the quotation marks will get me back on track towards completing the project. Thanks!

2 Likes