michaella23 / tech-doc-project

Technical Documentation Page

This is one of my first projects to ever build on my own. This was one of the capstone projects for FreeCodeCamp's Responsive Web Design ceritfication. Here are the rubrics I was asked to meet in building the project: [https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page] My understanding of HTML attributes at that time was still pretty shaky. Coming back to it six months later is like looking at an entirely different programmer's codebase! Instead of building from scratch, I have treated refactoring as its own project.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Users should be able to:

Use a scrolling navigation bar to visit different sections on a technical documentation page about HTML. View and navigate the page at different screen sizes

Links

• GitHub repository: [https://github.com/michaella23/tech-doc-project]
• Live Site URL: [https://michaella23.github.io/tech-doc-project/]

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Absolute and relative positioning
• Flexbox

What I learned

I actually was not familiar with what technical documentation is before starting this project, so that was a good starting point. As far as building, I learned to use 'ID' tags to navigate to different parts of the web page. I learned about positioning while building a scrolling navigation bar on one side of the web page (at larger screen sizes). I learned about the '' tag and HTML entities and used these quite liberally in the initial build. A challenge I faced in refactoring is that in the original build, I used IDs and compound selectors to style everything. This is not what my current practice is, so part of refactoring will be inserting classnames in my HTML and using these for styling. I also noticed that instead of giving uniform styling to typography, I used very specific padding and margins for individual elements to display it on the page the way that I wanted. This makes it tricky to refactor because I have to retrace my steps with the weird IDs and compound selectors.

Continued development

In refactoring this page, I am learning how to leave comments for other developers when I don't understand what their code is doing. I was still shaky on responsive web design, even in this capstone project. I will be playing with the code to display the menu at different screen sizes. I am also trying to give this project a better UI, that is both accessible and aesthetically pleasing. (as of 5/10/22) I have gotten it to a point where I am happy with the UI for the most part. I still need to work on a responsive nav. I also will be adding class names and using these for styling, aiming to eliminate compound selectors where I can.

Useful resources

Web Dev Simplified explains positioning: [https://youtu.be/jx5jmI0UlXU] Initial reading about displaying code snippets: [https://code-boxx.com/display-code-snippets-html/] FCC Responsive Web Design course: [https://www.freecodecamp.org/learn/responsive-web-design#responsive-web-design-projects]

Author

Michaella Rodriguez

• Twitter - [@NotMichaella]
• LinkedIn - [https://www.linkedin.com/in/michaella-rodriguez/]