{"id":19094028,"url":"https://github.com/bekcodingaddict/front-end_tricks","last_synced_at":"2026-02-23T08:33:42.329Z","repository":{"id":148062038,"uuid":"619449766","full_name":"BekCodingAddict/Front-End_Tricks","owner":"BekCodingAddict","description":"Front-end tricks\" refers to creative and clever techniques used in web development to enhance the visual appearance, interactivity, and user experience of a website","archived":false,"fork":false,"pushed_at":"2023-06-11T10:22:39.000Z","size":3911,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T18:51:39.591Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/BekCodingAddict.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":"2023-03-27T07:00:08.000Z","updated_at":"2023-08-09T12:10:54.000Z","dependencies_parsed_at":"2024-11-09T03:27:52.114Z","dependency_job_id":null,"html_url":"https://github.com/BekCodingAddict/Front-End_Tricks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BekCodingAddict/Front-End_Tricks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FFront-End_Tricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FFront-End_Tricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FFront-End_Tricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FFront-End_Tricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BekCodingAddict","download_url":"https://codeload.github.com/BekCodingAddict/Front-End_Tricks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FFront-End_Tricks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29740017,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"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-09T03:27:13.746Z","updated_at":"2026-02-23T08:33:42.203Z","avatar_url":"https://github.com/BekCodingAddict.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front-End Trick\n\n\nThere are many front-end tricks that can help you improve your website’s performance and user experience. Here are some of them:\n\n|   NAME  |     DISCRIPTION |\n|:--------------:|:----------:|\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Sample%20Responsive%20Homepage\"\u003eSample of Basic Responsive Homepage\u003c/a\u003e| This is just responsive page sample which was i build at the frist time|\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Button_Shake_Effect\" title=\"Link\"\u003eCSS Button Shake Effect\u003c/a\u003e| CSS SHake Animation Sample |\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Gradient_Button_Effect\" title=\"Link\"\u003eGradient Button Effect\u003c/a\u003e| A stylish button with a smooth gradient shadow hover effect.|\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Text%20Hower%20Effect\" title=\"Link\"\u003eText Hover Effect\u003c/a\u003e|A CSS hover effect takes place when a user hovers over an element, and the element responds with transition effects. It is used to mark the key items on the web page and it’s an effective way to enhance the user experience.|\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Responsive_Card\" title=\"Link:\"\u003eResponsive Card\u003c/a\u003e| Responsive Card Desiging basic Samples!|\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Navbar_Hover_Effect\" title=\"Link:\"\u003eNavbar Hover Effect\u003c/a\u003e|Navbar hover effect designing and example|\n\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Image_Zoom_Effect\" title=\"Link:\"\u003eImage Zoom Effect\u003c/a\u003e|Image hover zoom effect is a visual effect that occurs when a user hovers their mouse pointer over an image and the image enlarges or zooms in to provide a closer view.|\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Simple_SignUp_Form\" title=\"Link:\"\u003eSimple SignUp Form\u003c/a\u003e|A sign-up form in web development is a type of form used to collect information from users who want to create an account on a website or web application.|\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Responsive_Hamburger_Menu\" title=\"Link:\"\u003eResponsive Hamburger Menu and Navbar\u003c/a\u003e|A responsive hamburger menu is a type of user interface design pattern used on websites and mobile applications|\n|\u003ca href=\"https://github.com/BekCodingAddict/Front-End_Tricks/tree/main/Card%20Hover%20Interactions\" title=\"Link:\"\u003eCard Hover Interactions\u003c/a\u003e|Card hover interactions refer to interactive behaviors or effects that occur when a user hovers their cursor over a card-like element on a website or application interface.|\n\nAll of the above in the list might not be the most practical but some of them are definitely not used enough in frontend development and can really help you expand your frontend skills. I’m sure there are a lot more tricks!\n\nHope you’ve enjoyed reading!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Ffront-end_tricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbekcodingaddict%2Ffront-end_tricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Ffront-end_tricks/lists"}