{"id":18869332,"url":"https://github.com/codersales/webassignment1v3","last_synced_at":"2026-01-25T13:31:35.627Z","repository":{"id":230736353,"uuid":"773542401","full_name":"CoderSales/WebAssignment1v3","owner":"CoderSales","description":"WebAssignment1v3","archived":false,"fork":false,"pushed_at":"2024-03-19T20:49:31.000Z","size":1282,"stargazers_count":0,"open_issues_count":17,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-30T16:52:24.101Z","etag":null,"topics":["2024","2024-03","2024-mar","2024-march","2024-q1","assignment","assignment1","msc","msc-y1","msc-y1-s2","msc-y1-s2-w8","web","web-dev","web-development"],"latest_commit_sha":null,"homepage":"","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/CoderSales.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,"zenodo":null}},"created_at":"2024-03-17T23:35:01.000Z","updated_at":"2024-03-31T13:45:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"4f24a228-a101-4761-acd5-9e9378acf065","html_url":"https://github.com/CoderSales/WebAssignment1v3","commit_stats":null,"previous_names":["codersales/webassignment1v3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CoderSales/WebAssignment1v3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderSales%2FWebAssignment1v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderSales%2FWebAssignment1v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderSales%2FWebAssignment1v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderSales%2FWebAssignment1v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CoderSales","download_url":"https://codeload.github.com/CoderSales/WebAssignment1v3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderSales%2FWebAssignment1v3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28753432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T10:25:12.305Z","status":"ssl_error","status_checked_at":"2026-01-25T10:25:11.933Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["2024","2024-03","2024-mar","2024-march","2024-q1","assignment","assignment1","msc","msc-y1","msc-y1-s2","msc-y1-s2-w8","web","web-dev","web-development"],"created_at":"2024-11-08T05:16:29.020Z","updated_at":"2026-01-25T13:31:35.621Z","avatar_url":"https://github.com/CoderSales.png","language":"HTML","readme":"# WebAssignment1v3\n\n## Description\n\nWebAssignment1v3\n\n## Content with references\n\n### commands\n\n```bash\n$ git rm index.html --cached\n```\n\nfilename can then be added to the .gitignore file\n\nGoogle Search: [stop tracking a file in git that was previously tracked](https://www.google.com/search?q=stop+tracking+a+file+in+git+that+was+previously+tracked\u0026oq=stop+tracking+a+file+in+git+that+was+previously+tracked\u0026gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigAdIBCDk1NjZqMGo3qAIAsAIA\u0026sourceid=chrome\u0026ie=UTF-8)\n\n[To stop tracking a file that is currently tracked | git-scm.com](https://git-scm.com/docs/gitignore#:~:text=To%20stop%20tracking%20a%20file,being%20reintroduced%20in%20later%20commits.)\n\n____\n\n```bash\ngit update-index --skip-worktree \u003cfile\u003e\n```\n\nTo cancel\n\n```bash\ngit update-index --no-skip-worktree \u003cfile\u003e\n```\n\nUpdate, a better option [How do I make Git forget about a file that was tracked, but is now in .gitignore? | StackOverflow](https://stackoverflow.com/questions/1274057/how-do-i-make-git-forget-about-a-file-that-was-tracked-but-is-now-in-gitignore)\n\n____\n\ncode quote:\n\n```json\n \"workbench.colorCustomizations\": {\n\n  \"editorGutter.addedBackground\": \"#333\",\n  \"editorGutter.deletedBackground\": \"#333\",\n  \"editorGutter.modifiedBackground\": \"#333\",\n  \"editor.background\": \"#333\",\n }\n```\n\nmodified color to match current vscode settings:\n\n```json\n \"workbench.colorCustomizations\": {\n\n    \"editorGutter.addedBackground\": \"#202020\",\n    \"editorGutter.deletedBackground\": \"#202020\",\n    \"editorGutter.modifiedBackground\": \"#202020\",\n    \"editor.background\": \"#202020\",\n }\n```\n\nSummary:\n\nchange background color from:\n#333 (light grey / black)\nto\n#202020 (darker black)\n\nProcedure:\n\nSettings \u003e Search: workbench.colorCustomizations \u003e click: edit in settings.json \u003e paste code quote \u003e edit colors to #202020\n\n[VSCode setting to disable git status colors in editor gutter [duplicate] | StackOVerflow](https://stackoverflow.com/questions/45880172/vscode-setting-to-disable-git-status-colors-in-editor-gutter)\n\n____\n\n```css\n.card {\n        margin: 0 auto; /* Added */\n        float: none; /* Added */\n        margin-bottom: 10px; /* Added */\n}\n```\n\n[How to center cards in bootstrap 4? | StackOverflow](https://stackoverflow.com/questions/39031224/how-to-center-cards-in-bootstrap-4)\n____\n\nSelect all child elements.\n\n```css\nparentSelector \u003e * {\n  // CSS Styles\n}\n```\n\n[How to select all child elements recursively using CSS? | geeks4geeks.org](https://www.geeksforgeeks.org/how-to-select-all-child-elements-recursively-using-css/)\n\n____\n\n```css\n@media only screen and (max-width: 460px) {\n  body {\n    background-color: white;\n  }\n}\n```\n\n[What is a Media Query? | W3Schools.com](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)\n____\n\nOn Windows OS, the forward-slash (/) wasn't working, so I switched to back-slash (\\) and that fixed it. For example, try using the following:\n\n```html\n\"..\\..\\index.html\"\n```\n\n[How do I put a hyperlink to \"two levels above in the directory tree\"? | StackOverflow](https://stackoverflow.com/questions/7051735/how-do-i-put-a-hyperlink-to-two-levels-above-in-the-directory-tree#:~:text=to%20go%20two%20level%20up,to%20go%20more%20levels%20up.\u0026text=You%20can%20use%20..%2Findex.)\n\n____\n\n### Images\n\n[HTML Images | W3Schools](https://www.w3schools.com/html/html_images.asp)\n\n____\n\n### Center Oversized Image in div\n\n#### Failed Attempt\n\n[How to avoid overflow of a bootstrap card image in card-body?](https://stackoverflow.com/questions/72150450/how-to-avoid-overflow-of-a-bootstrap-card-image-in-card-body)\n\n____\n\n#### Successful Attempt\n\n```css\n.parent {\n    position: relative;\n    overflow: hidden;\n    //optionally set height and width, it will depend on the rest of the styling used\n}\n\n.child {\n    position: absolute;\n    top: -9999px;\n    bottom: -9999px;\n    left: -9999px;\n    right: -9999px;\n    margin: auto;\n\n}\n```\n\n[Center Oversized Image in Div | StackOverflow](https://stackoverflow.com/questions/14562457/center-oversized-image-in-div)\n\n____\n\n### Scale Image Responsively\n\nAn image can be made responsive by using CSS and setting the width of the image to be a percentage of its parent container, rather than a fixed pixel value. This way, when the size of the parent container changes (e.g. due to different screen sizes), the size of the image will also change proportionally.\n\n```css\nimg {\n\nmax-width: 100%;\n\nheight: auto;\n\n}\n\n```\n\n[How to make images responsive | Browser Stack](https://www.browserstack.com/guide/how-to-make-images-responsive#:~:text=An%20image%20can%20be%20made,image%20will%20also%20change%20proportionally.)\n\n____\n\n```html\n\u003cnav class=\"navbar navbar-expand-lg navbar-light bg-light\"\u003e\n  \u003c!-- Container wrapper --\u003e\n  \u003cdiv class=\"container-fluid\"\u003e\n    \u003c!-- Toggle button --\u003e\n    \u003cbutton\n      class=\"navbar-toggler\"\n      type=\"button\"\n      data-mdb-toggle=\"collapse\"\n      data-mdb-target=\"#navbarCenteredExample\"\n      aria-controls=\"navbarCenteredExample\"\n      aria-expanded=\"false\"\n      aria-label=\"Toggle navigation\"\n    \u003e\n      \u003ci class=\"fas fa-bars\"\u003e\u003c/i\u003e\n    \u003c/button\u003e\n\n    \u003c!-- Collapsible wrapper --\u003e\n    \u003cdiv\n      class=\"collapse navbar-collapse justify-content-center\"\n      id=\"navbarCenteredExample\"\n    \u003e\n      \u003c!-- Left links --\u003e\n      \u003cul class=\"navbar-nav mb-2 mb-lg-0\"\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eHome\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n        \u003c/li\u003e\n        \u003c!-- Navbar dropdown --\u003e\n        \u003cli class=\"nav-item dropdown\"\u003e\n          \u003ca\n            class=\"nav-link dropdown-toggle\"\n            href=\"#\"\n            id=\"navbarDropdown\"\n            role=\"button\"\n            data-mdb-toggle=\"dropdown\"\n            aria-expanded=\"false\"\n          \u003e\n            Dropdown\n          \u003c/a\u003e\n          \u003c!-- Dropdown menu --\u003e\n          \u003cul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\"\u003e\n            \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003chr class=\"dropdown-divider\" /\u003e\u003c/li\u003e\n            \u003cli\u003e\n              \u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\n            \u003eDisabled\u003c/a\n          \u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n      \u003c!-- Left links --\u003e\n    \u003c/div\u003e\n    \u003c!-- Collapsible wrapper --\u003e\n  \u003c/div\u003e\n  \u003c!-- Container wrapper --\u003e\n\u003c/nav\u003e\n```\n\n[How to center Bootstrap Navbar](https://mdbootstrap.com/how-to/bootstrap/navbar-center/)\n\n____\n\n```html\n\u003cnav class=\"navbar navbar-expand-lg navbar-light bg-light\"\u003e\n  \u003cdiv class=\"container-fluid\"\u003e\n    \u003ca class=\"navbar-brand\" href=\"#\"\u003eNavbar\u003c/a\u003e\n    \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n      \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\"\u003e\n      \u003cul class=\"navbar-nav me-auto mb-2 mb-lg-0\"\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eHome\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item dropdown\"\u003e\n          \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n            Dropdown\n          \u003c/a\u003e\n          \u003cul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\"\u003e\n            \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003chr class=\"dropdown-divider\"\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cform class=\"d-flex\"\u003e\n        \u003cinput class=\"form-control me-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n        \u003cbutton class=\"btn btn-outline-success\" type=\"submit\"\u003eSearch\u003c/button\u003e\n      \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/nav\u003e\n```\n\n[Bootstrap Documentation \u003e Navbar \u003e Supported content](https://getbootstrap.com/docs/5.0/components/navbar/#supported-content)\n\n____\n\n### Attempt to make Bootstrap Navbar Responsive\n\n____\n\n[Bootstrap Navbar Active Disabled | freecodecamp.org](https://forum.freecodecamp.org/t/bootstrap-navbar-active-disabled/33111/2)\n\n____\n\n```html\n\u003cdiv id=\"topheader\"\u003e\n  \u003cnav class=\"navbar navbar-default\"\u003e\n\t\t\u003cdiv class=\"container-fluid\"\u003e\n\t\t\t \u003cdiv class=\"navbar-header\"\u003e\n\t\t\t\t  \u003cbutton type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\"\u003e\n\t\t\t\t\t\t\u003cspan class=\"sr-only\"\u003eToggle navigation\u003c/span\u003e\n\t\t\t\t\t\t\u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n\t\t\t\t\t\t\u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n\t\t\t\t\t\t\u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n\t\t\t\t  \u003c/button\u003e\n\t\t\t\t  \u003ca class=\"navbar-brand\" href=\"#\"\u003eBrand\u003c/a\u003e\n\t\t\t \u003c/div\u003e\n\t\t\t \u003cdiv class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\"\u003e\n\t\t\t\t  \u003cul class=\"nav navbar-nav\"\u003e\n\t\t\t\t\t\t\u003cli class=\"active\"\u003e\u003ca href=\"#home\"\u003ehome\u003cspan class=\"sr-only\"\u003e(current)\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\t\u003cli\u003e\u003ca href=\"#page1\"\u003epage 1\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\t\u003cli\u003e\u003ca href=\"#page2\"\u003epage 2\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\t\u003cli\u003e\u003ca href=\"#page3\"\u003epage 3\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t  \u003c/ul\u003e\n\t\t\t\t  \u003cul class=\"nav navbar-nav navbar-right\"\u003e\n\t\t\t\t\t\t\u003cli\u003e\u003ca href=\"#\"\u003eLink\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t  \u003c/ul\u003e\n\t\t\t \u003c/div\u003e\n\t\t\u003c/div\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n```\n\n```css\n#topheader .navbar-nav li \u003e a {\n\ttext-transform: capitalize;\n\tcolor: #333;\n\ttransition: background-color .2s, color .2s;\n\t\n\t\u0026:hover,\n\t\u0026:focus {\n\t\tbackground-color: #333;\n\t\tcolor: #fff;\n\t}\n}\n\n#topheader .navbar-nav li.active \u003e a {\n\tbackground-color: #333;\n\tcolor: #fff;\n}\n```\n\n```javascript\n$( '#topheader .navbar-nav a' ).on( 'click', function () {\n\t$( '#topheader .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );\n\t$( this ).parent( 'li' ).addClass( 'active' );\n});\n```\n\n[Bootstrap Navbar Change Active Class Link [codepen.io]](https://codepen.io/gearmobile/pen/bByZdG)\n____\n\n[How to make a .nav-link inactive?](https://stackoverflow.com/questions/15648329/how-to-make-a-nav-link-inactive)\n\n____\n\n### Fix Bootstrap navbar\n\n#### Summary\n\nAdd JS CDN link\n\n[navbar Bootstrap](https://getbootstrap.com/docs/5.1/components/navbar/)\n\nAdd JavaScript CDN\n\n```javascript\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\n[Bootstrap Documentation](https://getbootstrap.com/)\n\n#### Add reference to Bootstrap\n\n[Bootstrap Documentation](https://getbootstrap.com/docs/5.3/components/navbar/)\n\n\n\u003chr\u003e\n\n\u003ca href=\"https://stackoverflow.com/questions/69140350/how-to-display-html-code-without-rendering-on-page#:~:text=You%20can%20show%20HTML%20tags,you%20want%20to%20be%20visible.\"\u003eHow to Add HTML code unrendered\u003c/a\u003e\n\n\u003cp\u003e\n    You can show HTML tags as plain text in HTML on a website or webpage by replacing \u003c with \u0026lt; or \u002660; and \u003e with \u0026gt; or \u002662; on each HTML tag that you want to be visible.\n\u003c/p\u003e\n\n\n____\n\n## References\n\ncenter bootstrap div [mdbootstrap](https://mdbootstrap.com/docs/b4/jquery/utilities/horizontal-align/)\n\nstop tracking file [How to stop tracking a file in Git?](https://medium.com/@timmouskhelichvili/how-to-stop-tracking-a-file-in-git-88a75e3f421#:~:text=You%20need%20to%20use%20the,it%20in%20the%20working%20directory.)\n\nQuantitative Research Methods - Sweeney, J.\n\nWeb Development - Ryan, C.\n\nIntermediate Programming - Alrimawi, F.\n\nHuman Computer Interaction - Motti Ader, L.\n\nRequirements - Richardson, I.\n\n____\n\nFor GitHub Repository on which this code was developed,\n\nCode development documented on my GitHub:\n\nCode Developed at:\n\n[CoderSales / WebAssignment1v3](https://github.com/CoderSales/WebAssignment1v3)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodersales%2Fwebassignment1v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodersales%2Fwebassignment1v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodersales%2Fwebassignment1v3/lists"}