{"id":18863167,"url":"https://github.com/yappy2000d/classpagetemplate","last_synced_at":"2026-02-16T10:01:28.083Z","repository":{"id":169422537,"uuid":"299117637","full_name":"yappy2000d/ClassPageTemplate","owner":"yappy2000d","description":null,"archived":false,"fork":false,"pushed_at":"2021-03-31T04:18:06.000Z","size":1981,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-25T09:32:49.770Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://yappy2000d.github.io/ClassPageTemplate/","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yappy2000d.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-09-27T20:55:47.000Z","updated_at":"2022-12-02T00:35:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"00484b42-e2a8-45f6-9eb2-9ab1e223fed9","html_url":"https://github.com/yappy2000d/ClassPageTemplate","commit_stats":null,"previous_names":["yappy2000d/classpagetemplate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yappy2000d/ClassPageTemplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yappy2000d%2FClassPageTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yappy2000d%2FClassPageTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yappy2000d%2FClassPageTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yappy2000d%2FClassPageTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yappy2000d","download_url":"https://codeload.github.com/yappy2000d/ClassPageTemplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yappy2000d%2FClassPageTemplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29505662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: 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":[],"created_at":"2024-11-08T04:36:49.365Z","updated_at":"2026-02-16T10:01:28.066Z","avatar_url":"https://github.com/yappy2000d.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# ClassPageTemplate\nA class page template to my self-learning.\n\n[![GitHub All Releases](https://img.shields.io/github/downloads/yappy2000d/ClassPageTemplate/total?style=flat-square\u0026logo=GitHub)](https://github.com/yappy2000d/ClassPageTemplate/archive/master.zip)\n[![GitHub package.json version](https://img.shields.io/github/package-json/v/yappy2000d/ClassPageTemplate?style=flat-square\u0026logo=visual-studio-code)](https://github.com/yappy2000d/ClassPageTemplate/branches)\n[![GitHub](https://img.shields.io/github/license/yappy2000d/ClassPageTemplate?style=flat-square)](https://github.com/yappy2000d/ClassPageTemplate/blob/master/LICENSE)\n\n----\n\nthis is results presented [page](https://yappy2000d.github.io/ClassPageTemplate/).\n\n## Introduction\nExcluding my past experience in writing web crawlers, this is my first contact with Front End, so I have to learn a new field by myself. Facing unfamiliar grammar and structure will test my ability to solve problems when facing new things.\n\n## Experience\nWith tools, we can quickly build products on the basis of our predecessors.Quoted from the Wiki's explanation of the software framework: using tools is like performing on a stage set up by others, easy but not simple.\n\n## Procedure\nThis is a brief record of the difficulties I encountered in the process.\n\n### Goal\nCreate a static website template that introduces the class. This time I will mainly use Bootstrap Studio to set up. Try not to use the template. Instead, use more basic elements to compile a website structure, and then fill in the randomly generated text to complete a template.\n\n### Process\nSince my JavaScript is poor, I won't use it this time. Mainly use HTML as the framework, and then add CSS to embellish it. Because it is using a tool, there is no explanation of the grammar. It's mainly in the part of thinking and the attitude of solving problems.\n\n![](./images/image1.jpg)\n\n#### Idea\nOriginal design:\nProblem\nThe main reason is that I want the main menu and menu to remain on the screen, but because it requires JavaScript, I abandoned this method.\n\n![](./images/image2.png)\n\nNew idea:\nThis time it’s all made statically, so it won't involve issues like JavaScript and JQuery\n\n![](./images/image3.png)\n\n#### Making\nCreate a blank template.\n\n![](./images/image4.PNG)\n\nDivide the block and plan the publication.\nUse HTML to create rows and columns, and CSS styles to divide blocks and positions.\n\n![](./images/image5.PNG)\n\nFill in the elements and limit the height of the button\nProblem\nI found that the top of the page could not be aligned when filling in elements\n\n![](./images/image6.PNG)\n\nSo I decided to remove the header image from the field and use displacement alignment\n\n![](./images/image7.png)\n\nPreview\nAs you can see, the banner of \"綜二丁\" is not aligned with the button\n\n![](./images/image8.PNG)\n\nGuess\nDuring the preview, I found that the browser does not seem to support the displacement of the header.\nIdea:\n1. It may be that the browser does not eat CSS\n(Failed) So I decided to export the project first and try to open it.\n2. It may be that the browser version is too old or does not support the displacement made by Margin.\n(Speculation error) Using IE did not improve\n\n![](./images/image9.PNG)\n\nDecide\n(Success) Use a layer of Column to add a layer of Container to force the image to indent.\n\n![](./images/image10.PNG)\n\nContinue to add elements:\nProblem\nTo make a school icon link to our school website.\nFirst put in an image element, because I remember that the link uses the a href attribute, so I went to the options of the image to find the option, but no matter how I found it, I couldn’t find it, so I tried to search to see if there is a Link element , I later learned that in Bootstrap 4, that is another independent element. Finally, use the Link element to wrap the picture to complete the following:\n\n![](./images/image11.png)\n\nAdd links and more elements.\n\n![](./images/image12.png)\n\nProblem: I want to place the button in the center, but I have difficulty.\n\n![](./images/image13.png)\n\nIdea:\n1. I intend to wrap it with a certain element. After trying, it is concluded that it is the Div element\n(Failure) Due to unfamiliar grammar, this element cannot be used effectively.\nDecide:\nSearch for relevant information online. Keyword: put+button+middle\nFinally:\nAfter searching, I found that it is a CSS called align, so I changed Alignment to center in the options.\n\n![](./images/image14.png)\n\nAs shown in the figure: you can see an extra circle outside the school icon.\n\nProblem:\nIn order to complete the effect of the small blackboard (because the original small blackboard is a picture, it means that every time you change the text above, you must redraw the picture.) The blackboard picture is changed to the background, but there is a problem that it cannot be aligned with the school picture below .\n\nSolution: Change the icon to the background of Column and put a blank Link, but the blank Link will not be clicked. Later, I found an option called Stretch, which means that it will take the length and width of the parent set as the Link the size of.\n\n![](./images/image15.PNG)\n\nHome page is complete!!!\nAs shown below:\n\n![](./images/image16.PNG)\n\n\nCopy the homepage and make slight modifications to complete the information group page.\nThen comes the other tabbed parts. (Chemicals \u0026 Computer)\n\n![](./images/image17.PNG)\n\nAdd pictures and other elements.Complete is shown in the figure:\n\n![](./images/image18.PNG)\n\nIn the same way, complete the paging of the chemical group:\n\n![](./images/image19.PNG)\n\nFinally, add a small website icon and publish it to the GitHub Page\nWebsite: https://yappy2000d.github.io/ClassPageTemplate/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyappy2000d%2Fclasspagetemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyappy2000d%2Fclasspagetemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyappy2000d%2Fclasspagetemplate/lists"}