{"id":16786046,"url":"https://github.com/anabrtorres/technical-documentation-page-fcc","last_synced_at":"2025-03-16T23:22:26.055Z","repository":{"id":107015207,"uuid":"306670348","full_name":"anabrtorres/technical-documentation-page-fcc","owner":"anabrtorres","description":"Technical documentation page of HTML | freeCodeCamp 💻✔️","archived":false,"fork":false,"pushed_at":"2020-10-23T15:44:49.000Z","size":111,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T09:31:07.657Z","etag":null,"topics":["codepen","css3","fcc","freecodecamp-project","html5","responsive-web-design","technical-documentation-page"],"latest_commit_sha":null,"homepage":"https://codepen.io/anabrtorres/full/ExyxaZR","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anabrtorres.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-10-23T15:05:32.000Z","updated_at":"2020-10-23T15:44:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"9a2afff6-8d93-47ad-b9eb-eb1e92023ac5","html_url":"https://github.com/anabrtorres/technical-documentation-page-fcc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anabrtorres%2Ftechnical-documentation-page-fcc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anabrtorres%2Ftechnical-documentation-page-fcc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anabrtorres%2Ftechnical-documentation-page-fcc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anabrtorres%2Ftechnical-documentation-page-fcc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anabrtorres","download_url":"https://codeload.github.com/anabrtorres/technical-documentation-page-fcc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243945622,"owners_count":20372898,"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":["codepen","css3","fcc","freecodecamp-project","html5","responsive-web-design","technical-documentation-page"],"created_at":"2024-10-13T08:11:03.756Z","updated_at":"2025-03-16T23:22:26.042Z","avatar_url":"https://github.com/anabrtorres.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n    Technical Documentation Page | freeCodeCamp\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e Project of Responsive Web Design free course from freeCodeCamp 💻✔️ \u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#objective\"\u003eObjective\u003c/a\u003e •\n \u003ca href=\"#technologies\"\u003eTechnologies\u003c/a\u003e • \n \u003ca href=\"#user\"\u003eUser Story\u003c/a\u003e • \n \u003ca href=\"#contribution\"\u003eContribution\u003c/a\u003e • \n \u003ca href=\"#author\"\u003eAuthor\u003c/a\u003e • \n \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"500\" style=\"border-radius: 10px\" height=\"auto\" alt=\"Page\" src=\"/public/images/page.png\" /\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e \n\t🚧 Technical Documentation Page | freeCodeCamp 💻✔️ Complete! 🚧\n\u003c/h4\u003e\n\n\u003ch2 id=\"objective\" \u003e 🎯 Objective \u003c/h2\u003e\n\nBuild a \u003ca href=\"https://codepen.io/\"\u003eCodePen.io\u003c/a\u003e app that is functionally similar to \u003ca href=\"https://codepen.io/freeCodeCamp/full/NdrKKL\"\u003ethis technical documentation page\u003c/a\u003e.\n\n\u003ch2 id=\"technologies\"\u003e 🛠 Technologies \u003c/h2\u003e\n\nThe following tools were used in the construction of the project:\n\n- [Codepen.io](https://codepen.io/anabrtorres/full/NWNZMmL)\n- HTML\n- CSS\n- [VSCode](https://code.visualstudio.com)\n\n\u003ch2 id=\"user\"\u003e 😄 User Story \u003c/h2\u003e\n\nThe following items must be applied on the page:\n\n\u003ch4\u003eUser Story #1:\u003c/h4\u003e\n\u003cp\u003eI can see a main element with a corresponding id=\"main-doc\", which contains the page's main content (technical documentation).\u003c/p\u003e\n\u003ch4\u003eUser Story #2:\u003c/h4\u003e\n\u003cp\u003eWithin the #main-doc element, I can see several section elements, each with a class of main-section. There should be a minimum of 5.\u003c/p\u003e\n\u003ch4\u003eUser Story #3:\u003c/h4\u003e\n\u003cp\u003eThe first element within each .main-section should be a header element which contains text that describes the topic of that section.\u003c/p\u003e\n\u003ch4\u003eUser Story #4:\u003c/h4\u003e\n\u003cp\u003eEach 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\").\u003c/p\u003e\n\u003ch4\u003eUser Story #5:\u003c/h4\u003e\n\u003cp\u003eThe .main-section elements should contain at least 10 p elements total (not each).\u003c/p\u003e\n\u003ch4\u003eUser Story #6:\u003c/h4\u003e\n\u003cp\u003eThe .main-section elements should contain at least 5 code elements total (not each).\u003c/p\u003e\n\u003ch4\u003eUser Story #7:\u003c/h4\u003e\n\u003cp\u003eThe .main-section elements should contain at least 5 li items total (not each).\u003c/p\u003e\n\u003ch4\u003eUser Story #8:\u003c/h4\u003e\n\u003cp\u003eI can see a nav element with a corresponding id=\"navbar\".\u003c/p\u003e\n\u003ch4\u003eUser Story #9:\u003c/h4\u003e\n\u003cp\u003eThe navbar element should contain one header element which contains text that describes the topic of the technical documentation.\u003c/p\u003e\n\u003ch4\u003eUser Story #10:\u003c/h4\u003e\n\u003cp\u003eAdditionally, 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.\u003c/p\u003e\n\u003ch4\u003eUser Story #11:\u003c/h4\u003e\n\u003cp\u003eThe header element in the navbar must come before any link (a) elements in the navbar.\u003c/p\u003e\n\u003ch4\u003eUser Story #12:\u003c/h4\u003e\n\u003cp\u003eEach 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\").\u003c/p\u003e\n\u003ch4\u003eUser Story #13:\u003c/h4\u003e\n\u003cp\u003eWhen I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text \"Hello world\", the page navigates to a section element that has that id and contains the corresponding header.\u003c/p\u003e\n\u003ch4\u003eUser Story #14:\u003c/h4\u003e\n\u003cp\u003eOn 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.\u003c/p\u003e\n\u003ch4\u003eUser Story #15:\u003c/h4\u003e\n\u003cp\u003eMy Technical Documentation page should use at least one media query.\u003c/p\u003e\n\n\u003ch2 id=\"contribution\"\u003e 🤝 Contribution \u003c/h2\u003e\n\nThis project is for study purposes too, so send me an email telling me what you are doing and why you are doing it, teach me what you know. All kinds of contributions are very welcome and appreciated!\n\n\u003ch2 id=\"author\"\u003e 💻 Author \u003c/h2\u003e\n\n\u003cimg style=\"{{border-radius| 50%}}\" src=\"https://avatars3.githubusercontent.com/u/71350840?s=400\u0026u=02afaa6318aee076b5e3a398e531296a7fb30dc0\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\n\nBy Ana Torres 👋🏽 Find me!\n\n[![Linkedin Badge](https://img.shields.io/badge/-anabrtorres-blue?style=flat-square\u0026logo=Linkedin\u0026logoColor=white\u0026link=https://www.linkedin.com/in/anabrtorres/)](https://www.linkedin.com/in/anabrtorres/)\n[![Gmail Badge](https://img.shields.io/badge/-anabrtorres19@gmail.com-c14438?style=flat-square\u0026logo=Gmail\u0026logoColor=white\u0026link=mailto:anabrtorres19@gmail.com)](mailto:anabrtorres19@gmail.com)\n\n\u003ch2 id=\"license\"\u003e 📝 License \u003c/h2\u003e\n\nThis project is under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanabrtorres%2Ftechnical-documentation-page-fcc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanabrtorres%2Ftechnical-documentation-page-fcc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanabrtorres%2Ftechnical-documentation-page-fcc/lists"}