{"id":27245831,"url":"https://github.com/marcosdlcs/static-catalog-101","last_synced_at":"2026-05-18T09:34:46.292Z","repository":{"id":181282806,"uuid":"664739239","full_name":"marcosDLCS/static-catalog-101","owner":"marcosDLCS","description":"static-catalog-101","archived":false,"fork":false,"pushed_at":"2023-07-22T18:41:15.000Z","size":2813,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-29T22:37:19.815Z","etag":null,"topics":["beginner-friendly","css","html","javascript","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/marcosDLCS.png","metadata":{"files":{"readme":"README.adoc","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}},"created_at":"2023-07-10T16:28:57.000Z","updated_at":"2023-07-22T18:41:20.000Z","dependencies_parsed_at":"2023-07-14T19:51:54.208Z","dependency_job_id":null,"html_url":"https://github.com/marcosDLCS/static-catalog-101","commit_stats":null,"previous_names":["marcosdlcs/static-catalog-101"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcosDLCS%2Fstatic-catalog-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcosDLCS%2Fstatic-catalog-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcosDLCS%2Fstatic-catalog-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcosDLCS%2Fstatic-catalog-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcosDLCS","download_url":"https://codeload.github.com/marcosDLCS/static-catalog-101/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248300941,"owners_count":21080805,"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":["beginner-friendly","css","html","javascript","web"],"created_at":"2025-04-10T21:29:29.062Z","updated_at":"2026-05-18T09:34:41.270Z","avatar_url":"https://github.com/marcosDLCS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"= static-catalog-101\n:toc: auto\n\n== TeachTech\n\nThis simple project has been created as an example during **TeachTech 2023** to illustrate concepts in mentoring assignments.\n\nhttps://www.teacht3ch.com/[TeachTech] is a non-profit initiative, composed solely of volunteer IT professionals, whose goal is to teach the basics of programming to people with no previous knowledge, free of charge.\n\n== Introduction\n\nThe goal of this repository is to show how to start and evolve a simple static catalog site using the most common web technologies such as HTML, CSS and Javascript.\n\nThe purpose is not no create a complex excercise but to explain the basic usage of the mentioned technologies and provide guidance to people with low experience with their first steps.\n\n== The best way to run the examples\n\nDownload Git and Visual Studio Code.\n\n* https://git-scm.com/\n* https://code.visualstudio.com/#alt-downloads\n\nInstall Live Server extension in Visual Studio Code.\n\n* https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer\n\nClone the project in your computer.\n\n[source, console]\n----\ngit clone https://github.com/marcosDLCS/static-catalog-101.git\n----\n\nWith **VSCode**, go to the desired folder and open the file **static-catalog.html**. Find the \"Go Live\" button in the right bottom part of the editor interface and press it.\n\n== The journey, step by step\n\nOn our way to programming a static catalog, we will start with a version with a **very basic structure** and, step by step, we will add styles and functionality to **make the page look better and better** using just plain HTML, CSS and JS.\n\n[cols=\"\u003ea,\u003ca\", frame=none, grid=none, align=center]\n|===\n| image::resources/img/step_1.png[Step 1,250]\n| image::resources/img/step_6.png[Step 6,250]\n|===\n\n---\n\n=== ☠️ 01. HTML skeleton and initial content\n\nFirst of all, the HTML structure to support the catalog must be created. The document will consist of different areas:\n\n* Header\n* Navigation / Actions\n* Catalog\n* Footer\n\nStart with basic HTML structures and 10-15 fake products with Lorem Ipsum text and basic stock images.\n\n---\n\n=== 💅🏻 02. Apply basic CSS styles\n\nIn the following step simple styles will be applied to make the website more usable and better looking. \n\nBased on the sketches we will try to centre the content and make it \"responsive\" to some extent. Also we are going to style the buttons and the other elements. \n\nThe introduction of custom text fonts and the use of background colors and shading will be an asset.\n\n---\n\n=== 🏎 03. Load content dynamically\n\nThe main goals for this step are 2:\n\n* Create a separate file with an array of products and load it as a module.\n* Use the new information in the array to generate the catalog dynamically. \n\n---\n\n=== 🌪️ 04. Add a filter based on product tags\n\nThe main objectives for this step are:\n\n* Use the tag information inside of the products array and show it in the interface.\n* Create a dropdown with the available tags that filters the elements of the catalog.\n\n---\n\n=== ❤️‍🔥 05. Favourite button and persist data in LocalStorage\n\nThe main objectives for this step are:\n\n* Create a button to indicate if you like the house or not.\n* Persist this info in the LocalStorage section of the browser and retrieve it in every page load. \n\n---\n\n=== 🛁 06. Final refactor and cleanup\n \n\n== References\n\n* https://html.spec.whatwg.org/multipage/\n* https://dom.spec.whatwg.org/\n* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference\n* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcosdlcs%2Fstatic-catalog-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcosdlcs%2Fstatic-catalog-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcosdlcs%2Fstatic-catalog-101/lists"}