Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script
  src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> 

<div class="main-body">
<nav class="navbar" id="navbar"> 
  <header> SAT Documentation </header>
  <a href ="#Introduction" class="nav-link">Introduction<a/> 
  <a href ="#Reading" class="nav-link">Reading<a/> 
  <a href ="#Writing" class="nav-link">Writing<a/> 
  <a href ="#Math" class="nav-link">Math<a/> 
  <a href ="#History" class="nav-link">History<a/> 
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
  <header>Introduction</header>
    <br>
    <code> What is the SAT? </code>
    <p> The SAT is owned, developed, and published by the College Board, a private, non-profit organization in the United States. It is administered on behalf of the College Board by the Educational Testing Service which until recently developed the SAT as well.The test is intended to assess students' readiness for college. </p>
           </section>
  
  <section class="main-section" id="Reading">
     <header>Reading</header>
    <br>
    <code> What does the Reading section focus on </code> 
    <p> The Reading Test focuses on the skills and knowledge at the heart of education: the stuff you’ve been learning in high school, the stuff you’ll need to succeed in college. It’s about how you take in, think about, and use information. And guess what? You’ve been doing that for years.</p>
    <ul> 
      <li> Vocab </li>
      <li> Fill in the blanks </li>
      <li> Multiple Choice </li>
    </ul>

<p> It’s not about how well you memorize facts and definitions, so you won’t need to use flashcards or insider tricks or spend all night cramming. </p> 
           </section>
  <section class="main-section" id="Writing">
     <header>Writing</header>
    <br>
    <code> Steps to writing section </code> 
    <p> When you take the Writing and Language Test, you’ll do three things that people do all the time when they write and edit:
Read.
Find mistakes and weaknesses.
Fix them.
The good news: You do these things every time you proofread your own schoolwork or workshop essays with a friend.</p>

<p>It’s the practical skills you use to spot and correct problems—the stuff you’ve been learning in high school and the stuff you’ll need to succeed in college—that the test measures.</p>
    
    <p> Writing an SAT essay can help be practice for college essays </p>  
  </section>
  <section class="main-section" id="Math">
     <header>Math</header>
    <p> Instead of testing you on every math topic there is, the SAT asks you to use the math that you’ll rely on most in all sorts of situations. Questions on the Math Test are designed to mirror the problem solving and modeling you’ll do in: 

 College math, science, and social science courses
The jobs that you hold
Your personal life
For instance, to answer some questions you’ll need to use several steps—because in the real world a single calculation is rarely enough to get the job done </p>
    
    <p> SAT level math and college level math are similar </p> 
    <code> What is in the math section? </code> 
    <ul> 
      <li> Algebra </li>
      <li> Fractions </li>
      <li> Geometry </li>
    </ul>
  </section>
  
  <section class="main-section" id="History"> 
     
    <header>History</header>
    <br>
    <code> SAT History: </code>
    <p> Many questions on the SAT focus on important, widely used words and phrases found in texts in many different subjects. Some questions ask you to figure out a word’s meaning based on context. The words are ones that you will probably encounter in college or in the workplace long after test day. </p>

<p> No longer will students use flashcards to memorize obscure words, only to forget them the minute they put their test pencils down. The redesigned exams will engage students in close reading and honor the best work of the classroom. </p> 


  </section>
  
</main>
  
</div>

              
            
!

CSS

              
                div.main-body {
  display: grid;
  grid-template-columns: minmax (200px, auto) 1fr;
  grid-template-areas: "navbar mainContent";
  grid-gap: 30px; 
}

nav#navbar {
  grid-area: navbar;  
}

nav#navbar a {
  display: block;
  border: 2px solid blue;
  margin: 10px 1;
  padding: 4px; 
  text-decoration:none;
  color: black;
}

main#main-doc {
  grid-area: mainContent;
}

header {
  font-size: 1.8em;
  font-weight:bold;
}

@media (max-width: 545px ){
  h1 {
    font-size: 1.15em;
  }
              
            
!

JS

              
                
              
            
!
999px

Console