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="wrapper">
  <nav id="navbar">
    <header>Basics of Golang</header>
    <ul class="nav-menu">
      <li><a href="#What_is_Golang?" class="nav-link">What is Golang?</a></li>
      <li><a href="#Go_Programs" class="nav-link">Go Programs</a></li>
      <li class="sub-nav"><a href="#Setting_up_Go_Environment" class="nav-link">Setting up Go Environment</a>
        <ul class="drop-menu">
          <li><a href="#Installation_on_Linux/Mac" class="nav-link">Installation on Linux/Mac</a></li>
          <li><a href="#Installation_on_Windows" class="nav-link">Installation on Windows</a></li>
        </ul>
      </li>
      <li class="sub-nav"><a href="#Getting_Started_with_Golang" class="nav-link">Getting Started with Golang</a>
        <ul class="drop-menu">
          <li><a href="#Packages" class="nav-link">Packages</a></li>
          <li><a href="#Imports" class="nav-link">Imports</a></li>
          <li><a href="#Functions" class="nav-link">Functions</a></li>
          <li><a href="#Variables" class="nav-link">Variables</a></li>
          <li><a href="#For_Loop" class="nav-link">For Loop</a></li>
          <li><a href="#Arrays" class="nav-link">Arrays</a></li>
          <li><a href="#Slices" class="nav-link">Slices</a></li>
          <li><a href="#Structure" class="nav-link">Structure</a></li>
        </ul>
      </li>
      <li><a href="#References" class="nav-link">References</a></li>
    </ul>
  </nav>
  <main id="main-doc">
    <div class="responsive-div"></div>
    <section class="main-section" id="What_is_Golang?">
      <header>What is Golang?</header>
      <article>
        <p>Golang is a programming language initially developed at Google in year 2007 by Robert Griesemer, Rob Pike, and Ken Thompson. Go programming language is a statically-typed language with syntax similar to that of C. It provides garbage collection,
          type safety, dynamic-typing capability, many advanced built-in types such as variable length arrays and key-value maps. It also provides a rich standard library.</p>
        <p>Go is expressive, concise, clean, and efficient. Its concurrency mechanisms make it easy to write programs that get the most out of multi core and networked machines, while its novel type system enables flexible and modular program construction.
          Go compiles quickly to machine code yet has the convenience of garbage collection and the power of run-time reflection. It’s a fast, statically typed, compiled language that feels like a dynamically typed, interpreted language.</p>
      </article>
    </section>
    <section class="main-section" id="Go_Programs">
      <header>Go Programs</header>
      <article>
        <p>A Go program can vary from 3 lines to millions of lines and it should also be written into one or more text files with extension “.go”; for example, hello.go. You can use “vi”, “vim” or any other text editor to write your Go program into a file.</p>
      </article>
    </section>
    <section class="main-section" id="Setting_up_Go_Environment">
      <header>Setting up Go Environment</header>
      <article>
        <p>
          Environment setup can be done in few steps. Download and install the latest 64-bit Go.Go installable archive file from (which also sets most of the environmental variables for you).
        </p>
        <a href="https://golang.org/dl/" target="_blank" class="third-party-link">Click here to download</a>
      </article>
      <section id="Installation_on_Linux/Mac" class="main-section">
        <header class="sub-header">Installation on Linux/Mac</header>
        <article>
          <ul class="article-list">
            <li>
              Extract the downloaded archive into /usr/local, creating a Go tree in /usr/local/go. For example:
              <br>
              <code class="bash-code">tar -C /usr/local -xzf go1.4.linux-amd64.tar.gz</code>
            </li>
            <li>
              Add /usr/local/go/bin to the PATH environment variable.
            </li>
          </ul>
        </article>
      </section>
      <section id="Installation_on_Windows" class="main-section">
        <header class="sub-header">Installation on Windows</header class="sub-header">
        <article>
          <p>
            Use the MSI file and follow the prompts to install the Go tools. By default, the installer uses the Go distribution in c:\Go. The installer should set the c:\Go\bin directory in windows PATH environment variable. Restart any open command prompts for the
            change to take effect.
          </p>
          <img src="https://hackernoon.com/hn-images/0*hFnjTaY8hOV6aAHa.png" alt="verify installation">
          <p>Now run the test.go to see the result:</p>
          <img src="https://hackernoon.com/hn-images/0*P9Othrs-PnMXO90-.png" alt="test.go result">
        </article>
      </section>
    </section>
    <section class="main-section" id="Getting_Started_with_Golang">
      <header>Getting Started with Golang</header>
      <section id="Packages" class="main-section">
        <header class="sub-header">Packages</header class="sub-header">
        <article>
          <p>
            Every Go program is made up of packages. Programs start running in package main. This program is using the packages with import paths “fmt". Here is an example:
          </p>
          <img src="https://hackernoon.com/hn-images/0*Bh5B1NoAuSOGjuhw.png" alt="package">
        </article>
      </section>
      <section id="Imports" class="main-section">
        <header class="sub-header">Imports</header class="sub-header">
        <article>
          <p>We can write imports as</p>
          <img src="https://hackernoon.com/hn-images/0*_YtLqRLiT52IyDVf.png" alt="import">
          <p>Or</p>
          <img src="https://hackernoon.com/hn-images/0*9MtUnykfj7qHtkZa.png" alt="import">
        </article>
      </section>
      <section id="Functions" class="main-section">
        <header class="sub-header">Functions</header class="sub-header">
        <article>
          <p>The general form of a function definition in Go programming language is as follows:</p>
          <pre>
                                <code>
                                    func function_name([parameter list]) [return_types]
                                    {
                                        body of the function
                                    }</code>
                            </pre>
          <p>
            A function can take zero or more arguments. In example below , add takes two parameters of type int. Notice that the type comes <i>after</i> the variable name.
          </p>
          <img src="https://hackernoon.com/hn-images/0*fvkGTV9JLb1Ebogr.png" alt="function">
          <p>Now run the function.go to see result</p>
          <img src="https://hackernoon.com/hn-images/0*ZSRnJ_rk5sTmeG8G.png" alt="function result">
        </article>
      </section>
      <section id="Variables" class="main-section">
        <header class="sub-header">Variables</header class="sub-header">
        <article>
          <p>
            A variable definition means to tell the compiler where and how much to create the storage for the variable. A variable definition specifies a data type and also contains a list of one or more variables of that type as follows:
          </p>
          <pre>
                                <code>
                                    var variable_list optional_data_type</code>
                            </pre>
          <p>
            The var statement declares a list of variables; as in function argument lists, the type is last. A var statement can be at package or function level. We see both in the example below.
          </p>
          <img src="https://hackernoon.com/hn-images/0*G39BrXR3d0a45b-s.png" alt="variables">
          <p>Now run the variables.go to see result</p>
          <img src="https://hackernoon.com/hn-images/0*qv9uhegoZLEyOvOK.png" alt="variables result">
        </article>
      </section>
      <section id="For_Loop" class="main-section">
        <header class="sub-header">For Loop</header class="sub-header">
        <article>
          <p>
            A <b>for</b> loop is a repetition control structure that will allow you to efficiently write a loop that needs to execute a specific number of times. The syntax of a <b>for</b> loop in Go programming language is:
          </p>
          <pre>
                                <code>
                                    for [condition | ( init; condition; increament ) | Range]
                                    {
                                        statement(s);
                                    }</code>
                            </pre>
          <p>
            Go has only one looping construct, the for loop. The basic for loop has three components separated by semicolons:
          </p>
          <ul class="article-list">
            <li>the init statement: executed before the first iteration</li>
            <li>the condition expression: evaluated before every iteration</li>
            <li>the post statement: executed at the end of every iteration</li>
          </ul>
          <p>
            The init statement will often be a short variable declaration, and the variables declared there are visible only in the scope of the for statement. The loop will stop iterating once the boolean condition evaluates to false.
          </p>
          <p>
            <i>Note</i>: Unlike other languages like C, Java, or Javascript there are no parentheses surrounding the three components of the for statement and the braces { } are always required.
          </p>
          <img src="https://hackernoon.com/hn-images/0*ls07kL0uWAMvpAby.png" alt="for loop">
          <p>Now run the for.go to see result</p>
          <img src="https://hackernoon.com/hn-images/0*q87ENYlD6NDD3NAt.png" alt="for loop result">
        </article>
      </section>
      <section id="Arrays" class="main-section">
        <header class="sub-header">Arrays</header class="sub-header">
        <article>
          <p>
            Go programming language also provides a data structure called <b>the array</b>, which can store a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to
            think of an array as a collection of variables of the same type.
          </p>
          <p>
            To declare an array in Go, a programmer specifies the type of the elements and the number of elements required by an array as follows:
          </p>
          <pre>
                                <code>
                                    var variable_name [SIZE] variable_type</code>
                            </pre>
          <p>
            For example, to declare a 10-element array called <b>balance</b> of type float32, use this statement:
          </p>
          <pre>
                                <code>
                                    var balance [10] float32</code>
                            </pre>
          <p>
            You can initialize array in Go either one by one or using a single statement as follows:
          </p>
          <pre>
                                <code>
                                    var balance = []float32{1000.0, 2.0, 3.4, 7.4, 50.0}</code>
                            </pre>
          <p>
            The type [n]T is an array of n values of type T. The expression <b>var a [10]int</b> declares a variable a as an array of ten integers.
          </p>
          <p>
            An array’s length is part of its type, so arrays cannot be resized. This seems limiting, but don’t worry; Go provides a convenient way of working with arrays.
          </p>
          <p>
            Let us see an example
          </p>
          <img src="https://hackernoon.com/hn-images/0*1iwDoTdz6qlN5p2B.png" alt="array">
          <p>
            Now run the arr.go to see result
          </p>
          <img src="https://hackernoon.com/hn-images/0*UsF0rRvsKretX__J.png" alt="array result">
        </article>
      </section>
      <section id="Slices" class="main-section">
        <header class="sub-header">Slices</header class="sub-header">
        <article>
          <p>
            Golang Slice is an abstraction over Go Array. As Go Array allows you to define type of variables that can hold several data items of the same kind but it do not provide any inbuilt method to increase size of it dynamically or get a sub array of its own.
            Slices covers this limitation. It provides many utility functions required on Array and is widely used in Go programming.
          </p>
          <h3>Defining a slice</h3>
          <p>
            To define a slice, you can declare it as an array without specifying size or use <b>make</b> function to create the one.
          </p>
          <img src="https://hackernoon.com/hn-images/0*VgOr9U7ekY_VPgLb.png" alt="slice define">
          <p>
            An array has a fixed size. A slice, on the other hand, is a dynamically-sized, flexible view into the elements of an array. In practice, slices are much more common than arrays.
          </p>
          <p>
            The type []T is a slice with elements of type T. This expression creates a slice of the first five elements of the array a: <b>a[0:5]</b>
          </p>
          <p>Let us understand it by an example</p>
          <img src="https://hackernoon.com/hn-images/0*zPXUo-MB2ckJ_1mX.png" alt="slice example">
          <p>
            Now run the slice.go to see result
          </p>
          <img src="https://hackernoon.com/hn-images/0*DP48tcWMc_GbPATG.png" alt="slice result">
        </article>
      </section>
      <section id="Structure" class="main-section">
        <header class="sub-header">Structure</header class="sub-header">
        <article>
          <p>
            <b>Structure</b> in golang is a user defined data type available in Go programming, which also allows you to combine data items of different kinds.
          </p>
          <h3>Defining a Structure</h3>
          <p>
            To define a structure, you must use <b>type</b> and <b>struct</b> statements. The struct statement defines a new data type, with more than one member for your program. type statement binds a name with the type which is struct in our case.
            The format of the struct statement is this:
          </p>
          <pre>
                                <code>
                                    type struct_variable_type struct {
                                        member definition;
                                        member definition;
                                        ...
                                        member definition;
                                    }</code>
                            </pre>
          <p>
            Once a structure type is defined, it can be used to declare variables of that type using following syntax.
          </p>
          <pre>
                                <code>
                                    variable_name := structure_variable_type {value1, value2...valuen}</code>
                            </pre>
          <p>
            To access any member of a structure, we use the <b>member access operator (.)</b>. The member access operator is coded as a period between the structure variable name and the structure member that we wish to access. You would use <b>struct</b>            keyword to define variables of structure type. Following is the example to explain usage of structure:
          </p>
          <img src="https://hackernoon.com/hn-images/0*I2JVzNqLNXx0mnh3.png" alt="structure">
          <p>
            Now run the struct.go to see result
          </p>
          <img src="https://hackernoon.com/hn-images/0*qXPfSdUJjTf5ItO5.png" alt="structure result">
        </article>
      </section>
    </section>
    <section class="main-section" id="References">
      <header>References</header>
      <a href="https://www.tutorialspoint.com/go/" target="_blank" class="third-party-link">tutorials point</a>
      <br>
      <a href="https://hackernoon.com/basics-of-golang-for-beginners-6bd9b40d79ae" target="_blank" class="third-party-link">hackernoon</a>
    </section>
  </main>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=EB+Garamond&display=swap');

* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;    
}

html,
body {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    scroll-behavior: smooth;
    background-color: #100E17;
    color: white;
    text-align: justify;
}

.wrapper {
    position: relative;
}

header {
    font-size: 180%;
}

a {
    text-decoration: none;
    color: white;
}

#navbar {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
    height: 100vh;
    background-color: #1C232B;
    font-size: 140%;
    text-align: left;
}

#navbar header {
    margin-bottom: 2%;
}

#navbar > ul {
    overflow-x: hidden;
    padding: 2%;
}

.nav-menu li {
    list-style-type: none;
}

#navbar li {
    margin-bottom: 5%;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.drop-menu {
    visibility: hidden;
    display: none;
}

.sub-nav:hover > ul,
.drop-menu:hover {
    visibility: visible;
    display: block;
    background-color: rgb(94, 90, 90);
}

.drop-menu li {
    margin-left: 5%;
}

#main-doc {
    margin-left: 305px;
    list-style-position: outside;
    padding-right: 1%;
    overflow: hidden;
}

.main-section {
    margin-bottom: 3%;
}

article {
    margin-left: 2%;
}

.sub-header {
    margin-left: 2%;
}

img {
    display: block;
    margin: 3%;
    width: 70%;
}

pre {
    font-size: 80%;
    position: relative;
    right: 8%;
}

.bash-code {
    font-size: 80%;
    margin-left: 5%;
    display: block;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
}

.sub-header {
    font-size: 150%;
}

.article-list {
    margin-left: 2%;
    margin-bottom: 1%;
}

.third-party-link {
    color: khaki;
}

.third-party-link:hover {
    border-bottom: khaki 1px solid;
}

@media (max-width: 1024px) {
    img {
        width: 90%;
    }

    pre {
        right: 30%;
    }
}


@media (max-width: 768px) {
    #navbar {
        width: 100vh;
        height: 40vh;
        z-index: 50;
        font-size: 130%;
        align-items: flex-start;
    }
  
    #navbar header,
    .nav-menu {
        margin-left: 8%;
    }

    #navbar > ul {
        border: 1px solid rgb(51, 52, 133);
    }

    #main-doc {
        margin-left: 0px;
    }

    .responsive-div {
        height: 40vh;
    }

    .main-section::before,
    .sub-section::before { 
        display: block; 
        content: " "; 
        margin-top: -40vh; 
        height: 40vh; 
        visibility: hidden; 
        pointer-events: none;
    }

    pre {
        right: 55%;
        font-size: 50%;
    }

    .bash-code {
        margin-left: 5%;
        font-size: 50%;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console