Technical documentation page template

About This Project

Subheader

This is a simple project for Freecodecamp's Responsive Web Design Projects certification. With this project and other 4 projects I acquired this certification. In this project I used minicss css framework (mainly for typography). I used grid-template-areas for layout. All css was coded by me manualy. Layout is made in two versions: mobile and desktop.

This page can be used as a simple template for technical documentation. This tepmlate can be improved with adding JavaScript for examle for navbar. Maybe i will make it in the future if I have more free time :)

You can copy this template as you wish and I would be very happy if you cite me as a co-author (or contributor). Thank You.

Main H3 Section A

Subheader

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamc

Main H3 Section B

Subheader

LoremLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore This == code et dolore magna aliqua.

<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">

This a end of pre paragraph.

Main H3 Section C

Subheader

LoremLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore This == code et dolore magna aliqua.

<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">

This a end of pre paragraph.

Main H3 Section D

Subheader

Example of code: This == code .

This is inception of pre element

<p> LoremLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore <code> This == code </code> et dolore magna aliqua.</p>
<pre>&lt;link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css"&gt;<br>
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css"&gt;</pre>
<p>This a end of <code>pre</code> paragraph.</p>

This a end of pre paragraph.

Main H3 Section E

Subheader

LoremLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore This == code et dolore magna aliqua.

<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">

This a end of pre paragraph.

Main H3 Section F

Subheader

LoremLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore This == code et dolore magna aliqua.

<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">

This a end of pre paragraph.

List example:
  • First
  • Second
  • Third
  • Fourth
  • Fifth