technicalDocumentationPage

index.html

<nav id="navbar">
  <header id="Top-header">Data Analysis with Python</header>
  </div>

  <ul>
    <a class="nav-link" href="#introduction">Introduction</a>
    <a class="nav-link" href="#important">Important</a>
    <a class="nav-link" href="#matlab_and_python">Matlab and Python</a>
    <a class="nav-link" href="#the_Python_scientific_stack_for_oceanography">The Python scientific stack for oceanography</a>
    <a class="nav-link" href="#operating_systems">Operating systems</a>
    <a class="nav-link" href="#The_shell_and_the_command_line">The shell and the command line</a>
  </ul>
</nav>

<main id="main-doc">
  <section class="main-section" id="introduction">
    <header>
      <h1>INTRODUCTION</h1>
    </header>
  </section>
  <section class="main-section" id="important">
    <header>
      <h2>Important</h2>
    </header>
    <p>The objective of this page is to practice the HTML and CSS coding on Free Code Camp. All the text content from this page was extracted from the Data Analysis course offered by UH Currents Group within SOEST (School of Ocean and Earth Science and Technology) at the University of Hawaii. The text is not complete, therefore if you have interest on it`s content please access the original course at <a href="https://currents.soest.hawaii.edu/ocn_data_analysis">Data Analisys with Python</a></p>
  </section>
  <section class="main-section" id="matlab_and_python">
    <header>
      <h2>Matlab and Python</h2>
    </header>
    <p>Matlab evolved from a simple scripting language designed to provide interactive access to a public-domain linear algebra library. It has since grown into a more sophisticated but still specialized language with an extensive set of routines written, organized, and documented by one of the great successes in the software world, Mathworks.</p>
    <p>Python, in contrast, was designed by a computer scientist as a general-purpose scripting language for easy adoption and widespread use. People tried it and liked it, and the result is that it is widely used throughout the software world, for all sorts of tasks, large and small. There is a vast array of Python packages that are freely available to do all sorts of things—including the sorts of things that oceanographers and other scientists do; but these packages are not neatly bound up in a single product, and the documentation for the language itself and for the packages is similarly scattered and of varying quality.</p>
  </section>
  <section class="main-section" id="the_Python_scientific_stack_for_oceanography">
    <header>
      <h2>The Python scientific stack for oceanography</h2>
    </header>
    <h3>Essentials</h3>
    <p>In addition to the Python interpreter and standard library, we need the following:</p>
    <li>numpy</li>
    <p>N-dimensional arrays and functions for working with them. This is the heart of the scientific stack for Python.</p>

    <li>matplotlib</li>
    <p>A two-dimensional plotting library with a Matlab-like interface.</p>

    <li>IPython</li>
    <p>An interactive shell, and much more.</p>

    <li>jupyter notebook</li>
    <p>A web interface to IPython, with integrated plots and rich text, including equations. (It can also be used with languages like R and Julia.)</p>
    <li>scipy</li>
    <p>A large number of functions for statistics, linear algebra, integration, etc. It also includes functions for reading and writing Matlab’s binary matfiles.</p>
  </section>
  <section class="main-section" id="operating_systems">
    <header>
      <h2>Operating systems</h2>
    </header>
    <p>A computer’s operating system (OS) is the software that stands between the application and the hardware. Because we interact with the application via the hardware (keyboard, screen, etc.), the OS also stands between us and the application. It is important to have an OS that facilitates our work rather than getting in the way.</p>
    <p>The three operating systems you are likely to encounter are Windows, OS X (Apple), and Linux. All three can be, and are, used for scientific computing with Python; but in my experience, Linux makes things easy, OS X is a bit trickier, and Windows makes it difficult to work effectively with anything but pre-packaged software. (...)</p>
  </section>
  <section class="main-section" id="The_shell_and_the_command_line">
    <header>
      <h2>The shell and the command line</h2>
    </header>
    <p>Most communication between you and the operating system goes through a command interpreter called a “shell”, often via commands typed into a program called a “terminal”. A terminal is just a window that can display text as you type it in for processing by whatever program is serving as the command interpreter, and can also display the text generated by that program. There are various programs (applications) that can provide a terminal in a typical graphical user environment, but for our purposes their differences are minor; you can choose to use any among those that are built-in or readily available in your particular system. The terminal programs you will use on OS X or Linux have configuration options (accessible via menus) for initial size, color scheme, font size and appearance, etc. It can be worth spending a little time to investigate these options and configuring them to your tastes.</p>
    <p>There are two shells you should be aware of: the venerable “bash”, which has long been the standard on Linux systems, and which until recently was the default on OS X; and “zsh” or “z shell”, which is the new default on OS X, starting with Catalina. Zsh is also available on modern Linux distributions. With either operating system you can choose to override the default for your user account..</p>
    <p>Configuration for bash -
      At the top of .bash_profile in your home directory, insert:</p>
    <code># include .bashrc if it exists
      if [ -f ~/.bashrc ]; then
      . ~/.bashrc
      fi</code>
    <p>Then at the top of .bashrc in your home directory, insert:</p>
    <code># If not running interactively, don't do anything
      [ -z "$PS1" ] && return

      # don't put duplicate lines in the history. See bash(1) for more options
      export HISTCONTROL=ignoredups
      # (...)</code>
    <p>Configuration for zsh - At the top of .zshrc in your home directory, insert:</p>
    <code>export PROMPT='%F{magenta}%0~ $%f '
      export PAGER=/usr/bin/less
      # export EDITOR='code -nw'
      export LESS="-R"
      if [ "$TERM" != "dumb" ]; then
      alias ls='ls -FG'
      fi
      alias ll='ls -l'</code>
    <p>Install Miniconda base - To begin, install the current 64-bit Python 3 Miniconda base that matches your operating system. We will use the shell script version (*.sh) of the installer, not a GUI version (*.pkg on the Mac). We don’t even need a browser to download the installer. Open a terminal window so you can run commands. Then you can download the Mac installer by executing:
    <p>
      <code>curl -O https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-x86_64.sh</code>
    <p>A good practice to test a code file is to print a string in the prompt.</p>
    <code>print("It works!")</code>
  </section>
  <footer>
    <p>Thank you UH Currents Group</p>
  </footer>
</main>

<!--  
User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.

User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding id="JavaScript_and_Java").

User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text "Hello world", the page navigates to a section element that has that id and contains the corresponding header.

User Story #14: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.
-->

script.babel

// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.

scripts

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

style.css

html,
body {
  margin: 0;
  paddin: 0;
}
body {
  background-color: #ffffe0;
  text-align: center;
  color: #1b1b1b;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#Top-header {
  position: fixed;
  color: #ffffe0;
  margin: 10px;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
}
#navbar {
  background: #000080;
  position: fixed;
  min-width: 230px;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100%;
}
#navbar ul {
  height: 88%;
  padding: 0;
  padding-top: 25px;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  border-top: 1px solid;
  list-style: none;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 10px;
  color: #ffffe0;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
  #main-doc {
    position: relative;
    margin-left: 250px;
    margin-top: 0px;
    margin-right: 20px;
  }
}

h1 {
  color: #000080;
  font-size: 20px;
}
h2 {
  text-align: left;
  color: #000080;
  font-size: 20px;
}
h3 {
  text-align: left;
  color: #000080;
  font-size: 16px;
}
li {
  text-align: left;
  list-style-type: none;
  font-weight: bold;
}
p{
  text-align: justify;
}
code {
  display: block;
  text-align: left;
  white-space: pre-line;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding:10px 15px 10px 15px; 
  border-radius: 5px;
}
footer{
  color: #000080;
  font-size: 10px;
  padding-bottom: 5px;
}


@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #nav-bar ul {
    border: 1px solid;
    height: 207px;
  }

  #nav-bar {

    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }
  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}
@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }
  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

technicaldocumentationpage.markdown

technicalDocumentationPage

A Pen by Paloma Cortez on CodePen.

License.