Tutorial on Building Technical Documentation Project
Technical documentation is a web page that provides information about a product or process. It is typically written for technical users, such as developers, engineers, or IT professionals. In this article, we will learn how to create a technical documentation page using HTML and CSS.
A technical documentation page consists of three main parts: a header, a sidebar menu, and a main content area. The header contains the logo and the title of the documentation. The sidebar menu contains the links to different sections of the documentation. The main content area contains the actual information about the product or process.
To create a technical documentation page, we need to use HTML elements such as:
- header
- nav
- section
- article
- h1 to h6
- p
- ul
- ol
- li
- a
- code
- img
We also need to use CSS properties such as padding, margin, box-sizing, border, box-shadow, background-color, text-align, position, transform, cursor, width, height, object-fit, line-height, color, font-family, display, flex-direction, justify-content, align-items, flex-wrap, overflow, scroll-behavior, @media, and more.
The following steps will guide you through the process of creating a technical documentation page:
Create an HTML file and a CSS file in your preferred code editor. Link the CSS file to the HTML file using the link element in the head section of the HTML file.
Reset the browser’s default stylesheet in the CSS file by setting the padding, margin, and box-sizing properties to 0, 0, and border-box respectively for all elements using the universal selector *.
* {
padding: 0;
margin: 0;
box-sizing properties: 0;
}
Create a Boilerplate in HTML file by typing the shortcut key "!" or type it manually, here's the a copy of Boilerplate:
DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="width=\, initial-scale=1.0"
title "Document" title
head
body
body
html
Create a header element in the HTML file and give it an id of navbar. Inside the header element, create a div element with a class of logo-wrapper and an img element inside it with a src attribute pointing to your logo image. Also, create an h1 element with the title of your documentation.
header id="navbar"
div class="logo-wrapper" img src="" alt="" /div
h1 "Title"/h1
/header
Style the header element in the CSS file by setting its height, text-align, position, border, box-shadow, and background-color properties. Style the .logo-wrapper element by setting its width, position, top, left, transform, and cursor properties. Style the img element by setting its width, height, and object-fit properties. Style the h1 element by setting its line-height and color properties.
header
height:
text-align:
position:
border:
border-box:
background-color:
.logo-wrapper
width:
position:
top:
left:
transform:
cursor:
img
width:
height:
object-fit:
h1
line-height:
color:
Create a nav element in the HTML file and give it an id of sidebar. Inside the nav element, create a ul element and several li elements inside it. Each li element should contain an a element with a class of nav-link and an href attribute pointing to the corresponding section of the documentation using the # symbol and the section’s id. For example, a href="#Introduction">Intclass="nav-link" roductiona.
<nav class="" id="sidebar" >
<ul
<li> <a> href="" class="nav-link" </a> </li>
<li> <a> href="" class="nav-link" </a> </li>
<li> <a> href="" class="nav-link" </a> </li>
<li> <a> href="" class="nav-link" </a> </li>
<li> <a> href="" class="nav-link" </a> </li>
<li> <a> href="" class="nav-link" </a> </li>
/ul
/nav
Style the nav element in the CSS file by setting its padding, border, box-shadow, background-color, and position properties. Style the ul element by setting its list-style-type property to none. Style the a elements by setting their display, padding, text-decoration, color, and cursor properties. You can also use the :hover pseudo-class to change the appearance of the links when the user hovers over them.
#navbar{
background-color: ;
width: ;
border-bottom: ;
resize: ;
overflow-x: ;
padding-top: ;
}
#navbar li {
color: ;
border-top: ;
list-style: ;
}
#navbar a {
display: ;
padding: ;
color: ;
text-decoration: ;
cursor: ;
font-size: ;
transition: ;
}
#navbar a:hover{
font-weight: ;
text-indent: ;
color: ;
}
Create a main element in the HTML file and give it an id of main-doc. Inside the main element, create several section elements with different ids corresponding to the sections of your documentation. Each section element should contain a header element with the section’s title and one or more article elements with the section’s content. Each article element should contain a header element with the sub-section’s title and one or more p elements with the sub-section’s content. You can also use other HTML elements such as ul, ol, li, code, and img to format your content as needed.
<main id="main-doc">
<section id="" >
<header>
<article>
<h1></h1>
<p></p>
</article>
</header>
</section>
<section id="" > </section>
<section id="" > </section>
</main>
Style the main element in the CSS file by setting its padding, border, box-shadow, and background-color properties. Style the section elements by setting their margin and padding properties. Style the header elements by setting their font-size, font-weight, and color properties. Style the p elements by setting their margin and line-height properties. Style the code elements by setting their font-family, background-color, padding, and border properties. Style the img elements by setting their width, height, and object-fit properties.
#main-doc{
margin: 10px auto;
}
header{
color: black;
margin: 10px;
text-align: left;
font-size: 1.3em;
font-weight: 500;
}
To make your technical documentation page responsive, use the @media rule in the CSS file to apply different styles for different screen sizes. For example, you can use the @media (max-width: 600px) rule to target devices with a screen width of 600px or less. Inside the @media rule, you can change the layout of your page by using the display, flex-direction, justify-content, align-items, flex-wrap, overflow, and scroll-behavior properties. For example, you can change the display of the header> and nav elements to flex and set their flex-direction to column to stack them vertically. You can also set the overflow property of the nav element to auto and the scroll-behavior property of the body element to smooth to enable smooth scrolling of the sidebar menu.
@media screen and (min-width: 850px) {
body {
flex-direction: ;
}
#navbar {
width: ;
position: ;
height: ;
}
#main-doc {
margin: ;
margin-left: ;
}
}
By following these steps, you can create a technical documentation page using HTML and CSS. You can also customize the appearance and functionality of your page by adding more styles and features as you wish. Here is an example of how your technical documentation page might look like: freeCodeCamp.com/technical-documentation-page