Documentation page is normally used to present detailed information on a specific topic or theme. The content includes definition, description and how to operate a technical device for example. Since I have a background in Environmental chemistry and technology, I would like to present an analysis approach by using Inductive Coupled Plasma Mass technology in analytical chemistry as a reference source for this exercise.
In this repository, the aim is to make a technical documentation page with coding languages, as HyperText Markup Language and Cascading Style Sheets to provide detailed information to client.
The following content will be covered in this README.md:
- Learning Objectives
- Requirements
- Installation & Usage
- Author
- References & Helpful Links
- Contributing
- License
After fulfilling the project, I acquire knowledge to:
- Build and style static webpages with semantic HTML and CSS
- Implement best practices and standards when structuring HTML files using nested elements, indentation, comments, and line breaks
- Implement the use of adding Images & Links into HTML, using
<li>, <float>, so ontags to present the content of the project - Implement CSS styling via class, id and element selectors using external stylesheets and inline styles
- Implement Bootstrap styling, Google font, Font Awesome, CSS breakpoints and Navigation with Responsive web design theory
- Use Git workflow to initialize projects, track changes, and host via remote server
- Execute live deployment using GitHub Pages
Build an app that is functionally similar to this
User Stories:
- You can see a
mainelement with a correspondingid="main-doc", which contains the page's main content (technical documentation) - Within the
#main-docelement, you can see severalsectionelements, each with a class ofmain-section. There should be a minimum of five - The first element within each
.main-sectionshould be aheaderelement, which contains text that describes the topic of that section. - Each
sectionelement with the class ofmain-sectionshould also have anidthat corresponds with the text of eachheadercontained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a correspondingid="JavaScript_and_Java") - The
.main-sectionelements should contain at least tenpelements total (not each) - The
.main-sectionelements should contain at least fivecodeelements total (not each) - The
.main-sectionelements should contain at least fiveliitems total (not each) - You can see a
navelement with a correspondingid="navbar" - The navbar element should contain one
headerelement which contains text that describes the topic of the technical documentation - Additionally, the navbar should contain link
(a)elements with the class ofnav-link. There should be one for every element with the classmain-section - The
headerelement in the#navbarmust come before any link (a) elements in the navbar - Each element with the class of
nav-linkshould contain text that corresponds to theheadertext within eachsection(e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world") - When you click on a navbar element, the page should navigate to the corresponding section of the
main-docelement (e.g. If you click on anav-linkelement that contains the text "Hello world", the page navigates to asectionelement with that id, and contains the corresponding header) - 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 - Your technical documentation should use at least one media query