{"id":20989127,"url":"https://github.com/nix7amcm/fcc-technical-documentation-page","last_synced_at":"2025-12-29T07:56:51.642Z","repository":{"id":220007327,"uuid":"750505631","full_name":"Nix7amcm/FCC-Technical-Documentation-Page","owner":"Nix7amcm","description":"This is my code for the Technical Document Documentation Page for FreeCodeCamp's Responsive Web Design Certification. I built this using HTML and Bootstrap with some customised CSS.","archived":false,"fork":false,"pushed_at":"2024-01-30T22:14:21.000Z","size":260,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T07:45:57.966Z","etag":null,"topics":["bootstrap","custom-css","freecodecamp","freecodecamp-project","html-css","responsive"],"latest_commit_sha":null,"homepage":"https://nix7amcm.github.io/FCC-Technical-Documentation-Page/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nix7amcm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-30T19:15:39.000Z","updated_at":"2024-01-30T22:11:54.000Z","dependencies_parsed_at":"2024-11-19T06:40:20.771Z","dependency_job_id":null,"html_url":"https://github.com/Nix7amcm/FCC-Technical-Documentation-Page","commit_stats":null,"previous_names":["nix7amcm/fcc-technical-documentation-page"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-Technical-Documentation-Page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-Technical-Documentation-Page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-Technical-Documentation-Page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-Technical-Documentation-Page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nix7amcm","download_url":"https://codeload.github.com/Nix7amcm/FCC-Technical-Documentation-Page/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243401482,"owners_count":20285051,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","custom-css","freecodecamp","freecodecamp-project","html-css","responsive"],"created_at":"2024-11-19T06:23:53.441Z","updated_at":"2025-12-29T07:56:51.604Z","avatar_url":"https://github.com/Nix7amcm.png","language":"HTML","readme":"# Technical Documentation Page\n\n### My Solution:\n\n[nix7amcm.github.io/FCC-Technical-Documentation-Page/](https://nix7amcm.github.io/FCC-Technical-Documentation-Page/)\n\n* * *\n\n## Images:\n\n#### \u003cu\u003eDesktop\u003c/u\u003e\n\n![Desktop screenshot of web page](Assets/Solution-Images/desktop.png)\n\n\n#### \u003cu\u003eTablet\u003c/u\u003e\n\n![Tablet screenshot of web page](Assets/Solution-Images/tablet.png)\n\n\n#### \u003cu\u003eMobile (with nav-link hover effect)\u003c/u\u003e\n\n![Mobile screenshot of web page](Assets/Solution-Images/mobile-hover.png)\n\n\n* * *\n\n### Project Description:\n\n**Objective:** Build an app that is functionally similar to this: [https://technical-documentation-page.freecodecamp.rocks/](https://technical-documentation-page.freecodecamp.rocks/). \n\n**Do not copy this demo project.**\n\n\n\nFulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!\n\n * * *\n\n### User Stories:\n\n* [x] **#1:** You can see a `main` element with a corresponding `id=\"main-doc\"`, which contains the page's main content (technical documentation).\n\n* [x] **#2:** Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five.\n\n* [x] **#3:** The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.\n\n* [x] **#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\"`).\n\n* [x] **#5:** The `.main-section` elements should contain at least ten `p` elements total (not each).\n\n* [x] **#6:** The `.main-section` elements should contain at least five `code` elements total (not each).\n\n* [x] **#7:** The `.main-section` elements should contain at least five `li` items total (not each).\n\n* [x] **#8:** You can see a `nav` element with a corresponding `id=\"navbar\"`.\n\n* [x] **#9:** The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation.\n\n* [x] **#10:** Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`.\n\n* [x] **#11:** The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar.\n- [x] **#12:** Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a \"Hello world\" section/header, your navbar should have an element which contains the text \"Hello world\").\n\n- [x] **#13:** When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text \"Hello world\", the page navigates to a `section` element with that id, and contains the corresponding header).\n\n- [x] **#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.\n\n- [x] **#15:** Your technical documentation should use at least one media query.\n\n* * *\n\n### Additional Notes:\n\n**Note:** Be sure to add `\u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e` in your HTML to link your stylesheet and apply your CSS\n\n* * *\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnix7amcm%2Ffcc-technical-documentation-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnix7amcm%2Ffcc-technical-documentation-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnix7amcm%2Ffcc-technical-documentation-page/lists"}