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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <body>
    <div class="page-container">
      <nav id="navbar">
          <div class="nav-container">
              <div id="mobile-bar">
                  <header id="document-title">HTML Documentation</header>
                  <a href="#" id="toggle-button">
                      <span class="bar"></span>
                      <span class="bar"></span>
                      <span class="bar"></span>
                  </a>
              </div>
              <ul class="nav-list">
                  <li><a class="nav-link" href="#Introducing_HTML">Introducing HTML</a></li>
                  <li><a class="nav-link" href="#How_it_works_in_brief">How it works in brief</a></li>
                  <li><a class="nav-link" href="#Syntax">Syntax</a></li>
                  <li><a class="nav-link" href="#Accessibility_in_more_depth">Accessibility in more depth</a></li>
                  <li><a class="nav-link" href="#How_to_record_information_using_HTML">How to record information using HTML</a></li>
                  <li><a class="nav-link" href="#Closing_remarks_and_tips">Closing remarks and tips</a></li>
              </ul>
          </div>
        </nav>
        <main id="main-doc">
          <section class="main-section" id="Introducing_HTML">
            <header>Introducing HTML</header>
            <p>HTML Stands for HyperText Markup Language and was originally developed in late 1991 by Tim Berners-Lee.</p>
            <p>It defines the meaning and structure of websites. A website in it's most basic form is simply content and structure. All other aspects of the web relating to visual design and interactive feature are not covered by HTML.</p>
            <p>"Hypertext" refers to links that connect from one web page to one another, either within the same website or between separate websites. Links are a crucial aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>
          </section>
          <section class="main-section" id="How_it_works_in_brief">
            <header>How it works in brief</header>
            <p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as &lthead&gt, &lttitle>, &ltbody>, &ltheader>, &ltfooter>, &ltarticle>, &ltsection>, &ltp>, &ltdiv>, &ltspan>, &ltimg>, &ltaside>, &ltaudio>, &ltcanvas>, &ltdatalist>, &ltdetails>, &ltembed>, &ltnav>, &ltoutput>, &ltprogress>, &ltvideo>, &ltul>, &ltol>, &ltli> and many others.</p>
            <p>Most tags need to be 'closed'. This means there are two ways to write the tag. The opening tag. &ltp>I open... and the closing tag ...I close&lt/p><br>So &ltp> = Open and &lt/p> = Close
            </p>
          </section>
          <section class="main-section" id="Syntax">
            <header>Syntax</header>
            <p>It's worth discussing syntax. There are two important aspects to HTML. These are tags and attributes or modifiers. Tags generally hold content and attributes/modifiers, modify the content or act as selectors for other programs such as CSS and Javascript to utilise and modify.</p>
          </section>
            <section class="main-section" id="Accessibility_in_more_depth">
            <header>Accessibility in more depth</header>
              <p class="negative-m">Examples of applied accessibility are</p>
              <ul>
                <li class="content-list">Providing alternative text for images: Browsers screen reading technology can convert this text to speech for people with visual impairments. Some images don't really need alt text, however it's always good practise to include the alt=”” attribute and leave it empty. Or an empty string. This pushes up the website in the SEO ranking.</li><br>
                <code class="dont-break-out">&ltimg src=”https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80” alt=”person looking up to the stars”></code>
                <li class="content-list">Use of heading to show hierarchical structure: As mentioned before there are a total of 6 heading tags. &lth1>, &lth2>, &lth3>... Al the way to &lth6>. &lth1 can only be used once on each page and is the most important text. &lth2> and &lth3> follow from there.</li><br>
                <code>&lth1>I'm the most important text&lt/h1>
                &lth2>Then me!&lt/h2>
                    &lth3>Then me!&lt/h3>
                        &lth4>Then me!&lt/h4>
                            &lth5>Then me!&lt/h5>
                                &lth6>Last but not least... I'm also important, but not really&lt/h6></code>
                <li class="content-list">Use the &ltmain> tag to wrap around the central content. Not be confused with the &ltbody> tag which holds all content including footers and wrappers. The &ltmain> tag is for the most important content leaving out less important material.</li><br>
                <code>&ltmain><br>&ltp>I am the most important content&lt/p><br>&lt/main><br>&ltfooter>&ltp>but do read the small print!&lt/p>&lt/footer></code>
                <li class="content-list">The &ltarticle> tag wraps around standalone content such as unique articles (unrelated to page theme): Determining whether content can stand alone is usually a judgment call, but you can use a couple of simple tests. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly, for text, would the content hold up if it were in an RSS feed?</li>
                <li class="content-list">Use the tabindex attribute: Some people don't like to use or have physical problems using a mouse. They prefer instead to just use their keyboard. The tabindex attribute allows users to jump to main sections of the website by pressing tab. The web designer can have as many tab indexes as they want. Some tags like the &ltarticle>, &ltsection> have the tabindex feature built in and so you do not need to add this attribute. You can add it however if you have a specific hierarchy in mind. Generally it's best to use the tabindex=”0” default although again if there is one item that need to jump to the front you can use tabindex=”1”. An excellent resource to learn about the tabindex function further can be found at <a href="https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex" target="_blank">google</a>.</li>
                <p>There is a lot more that can be done to make your HTML more accessible, I reccommend google 'how to make your HTML markup more accessible'</p>
          </section>
                <section class="main-section" id="How_to_record_information_using_HTML">
                  <header>How to record information using HTML</header>
                  <p id="p-negative">The components of a survey style html section include the &ltform> tag. You need to use this as the parent element. This holds the survey components. The &ltlabel> tag which prepares the browser for some sort of input tag. The &ltinput> tag which allows the coder to present either a text field or various other forms of information collection options when used with the type=”” attribute. The &ltbutton> tag which allows you to create a submit button using the type=”submit” modifier. See below for an example of a form built with HTML. It includes radio buttons which asks the respondent for one answer and checkboxes which asks the respondent to give as many answers as they wish</p><br>
                  <code>
        &ltform action="https://www.freecatphotoapp.com/submit-cat-photo">
            &ltlabel for="indoor">&ltinput id="indoor" type="radio" name="indoor-outdoor"> Indoor&lt/label>
            &ltlabel for="outdoor">&ltinput id="outdoor" type="radio" name="indoor-outdoor"> Outdoor&lt/label>&ltbr>
            &ltlabel for="loving">&ltinput id="loving" type="checkbox" name="personality"> Loving&lt/label>
            &ltlabel for="bored">&ltinput id="bored" type="checkbox" name="personality"> Bored&lt/label>
            &ltlabel for="excited">&ltinput id="excited" type="checkbox" name="personality"> excited&lt/label>
            &ltinput type="text" placeholder="cat photo URL" required>
            &ltbutton type="submit">Submit&lt/button>&lt/form>
        </code><br>
              </section><br>
          <section class="main-section" id="Closing_remarks_and_tips">
            <header>Closing remarks and tips</header>
            <p>It can be useful to think of making a poster. At the top you have the title, but in html we use header tags (the &lttitle> is used by the browser to tell it the name of the webpage). Headers are marked with &lth1> - &lth6> tags. &lth1> being the most important and should only be used once in each page, &lth6> being the least important. Beneath the header you might have some text marked up by &ltp> or paragraph tags. All of these can be separated out into &ltdiv> or &ltsection> tags. This is saved as a HTML file and can be read by CSS to increase styling capacity. Take a look at the HTML below for an idea of content fitting into markup. Thanks for reading and goodbye!</p>
      
            <code class="dont-break-out">&ltarticle><br>&lttitle>Questions for the Curious&lt/title><br>&lth1>How Big Is the Universe&lt/h1><br>&ltp>The Universe is approximately 93billion light years old.&lt/p><br>&ltimg src=”https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80” alt=”person looking up to the stars”><br>&ltp>Next week on questions for the curious, we find out if pigs really are smarter than dogs!&lt/p><br>&lt/article></code><br>
          </section>
        </main>
        <div class="rectangle"></div>
    </div>
      <script src="function.js"></script>
</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,700;1,400&display=swap');

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    color: black;
    font-weight: 600;
}

#navbar {
    position: relative;
    background-color: white;
}

.page-container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 4rem auto;
    padding-bottom: 1rem;
}

.nav-container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

#main-doc {
    position: relative;
    z-index: -1;
}

section {
    background-color: #fbf6fc;
    scroll-margin-top: 5rem;
}

#document-title {
    font-size: 2rem;
    font-weight: 800;
}

#mobile-bar {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    background: #66b2b2;
    padding: .5em;
    z-index: 2;
}

#toggle-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 5em;
    height: 3em;
}

#toggle-button .bar {
    height: .5rem;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.nav-list {
    display: none;
    flex-direction: column;
    list-style: none;
    padding-left: 0;
    background: #66b2b2;
}

ul.nav-list {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.nav-list.active {
    display: flex;
}

.nav-list.inactive {
  visibility: hidden
}

.nav-list li+li {
    margin-top: 1.2em;
}

.nav-list a {
    color: black;
    text-decoration: none;
    width: 100%;
}

.nav-list a:hover {
    background-color:#bbbbbb;
    border: 2px solid black;
}

header {
    font-size: 1.4rem;
}

#Introducing_HTML {
    margin-top: 6em;
}

.dont-break-out {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media (min-width:1000px) {
.nav-list {
    display: flex;
    position: sticky;
    width: 25%;
}

.nav-list li+li {
    margin-top: 5rem;
}

#main-doc {
    z-index: 0;
    margin-bottom: 1rem;
}

#navbar {
    top: 0;
    z-index: 1;
    background-color: transparent;
    margin-top: 0;
}

.nav-container {
    top: 0;
    padding: 0;
}

#toggle-button {
    display: none;
}

section {
    position: relative;
    left: 30%;
    width: 70%;
}

#Closing_remarks_and_tips {
    margin-bottom: 1em;
}

.rectangle {
    position: fixed;
    top: 89.3%;
    height: 3rem;
    padding: 3rem;
    min-width: 100%;
    background-color: white;
    margin: 0 auto;
}
}
              
            
!

JS

              
                const toggleButton = document.getElementById('toggle-button');
const navList = document.getElementsByClassName('nav-list')[0];
const listItems = document.getElementsByClassName('nav-link');

// toggleButton.addEventListener('click', () => {
//     navList.classList.toggle('active')
// })

toggleButton.addEventListener('click', (evt) => {
    evt.preventDefault();
    navList.classList.toggle('active')
})

listItems.onClick((evt) => {
    navList.classList.toggle('inactive'); {
    setInterval(500); navList.style.display = 'initial'; }
}) 

              
            
!
999px

Console