{"id":20357968,"url":"https://github.com/prak112/devschool-html","last_synced_at":"2026-03-08T06:32:23.658Z","repository":{"id":187281312,"uuid":"676623267","full_name":"prak112/DevSchool-HTML","owner":"prak112","description":"Learning Frontend development tools and frameworks at Sakky","archived":false,"fork":false,"pushed_at":"2023-10-16T12:10:44.000Z","size":24422,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T17:50:28.916Z","etag":null,"topics":["freecodecamp","front-end-development","html-css-javascript","learning-by-doing","mdn-docs"],"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/prak112.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-08-09T16:13:14.000Z","updated_at":"2023-08-17T16:28:20.000Z","dependencies_parsed_at":"2024-11-14T23:26:00.788Z","dependency_job_id":"39a17d88-6beb-4c6b-9801-af13bb093c14","html_url":"https://github.com/prak112/DevSchool-HTML","commit_stats":null,"previous_names":["prak112/devschool-html"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/prak112/DevSchool-HTML","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prak112%2FDevSchool-HTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prak112%2FDevSchool-HTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prak112%2FDevSchool-HTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prak112%2FDevSchool-HTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prak112","download_url":"https://codeload.github.com/prak112/DevSchool-HTML/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prak112%2FDevSchool-HTML/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30247359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T05:41:50.788Z","status":"ssl_error","status_checked_at":"2026-03-08T05:41:39.075Z","response_time":56,"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":["freecodecamp","front-end-development","html-css-javascript","learning-by-doing","mdn-docs"],"created_at":"2024-11-14T23:24:46.625Z","updated_at":"2026-03-08T06:32:23.617Z","avatar_url":"https://github.com/prak112.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Development\n- Recently published project - \u003ca href=\"https://prak112.github.io/DevSchool-HTML/\" target=\"_blank\" rel=\"noopener\"\u003eMultimedia Content\u003c/a\u003e\n- Tools being used :\n    - HTML5\n    - CSS3, Getting started with [Bootstrap](/test_html/index.html) \n    - Javascript\n\n\u003c/br\u003e\n\n- Helpful Resources :\n    - [freeCodeCamp learning platform](https://www.freecodecamp.org/learn) \n    - freeCodeCamp blogpost - [Automate and Improve Web development workflow](https://www.freecodecamp.org/news/how-to-improve-your-web-development-workflow/)\n    - MDN Docs - [Getting Started with the web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software)\n    - [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/) \n\n\n## Projects\n- [SuperCats](https://github.com/prak112/DevSchool-HTML/tree/supercats)\n    - Build website using HTML, CSS \u0026 JS\n    - Publish website using GitHub\n- [DevJournal](https://github.com/prak112/DevSchool-HTML/tree/devjournal)\n    - Work in progress\n    - Simple idea for a personal webpage\n- [MyGoogle](https://github.com/prak112/DevSchool-HTML/tree/googletest)\n    - Simplified version of Google homepage\n    - Part of CS50 Web Dev part1-project\n    - Add animation of Google logo\n    - Built in record-time with Codeium's help\n- [Multimedia content](https://github.com/prak112/DevSchool-HTML/tree/multimedia)\n    - Embed video content with poster and subtitles\n    - Style page in grid format\n    - Build navigation menu (as in devjournal) between different topics\n- [Mockup]()\n    - Build a mockup site of the original Pulse webpage\n    - Strong focus on learning from In-Browser DevTools\n    - Useful resources from [FrontEndPractice](https://www.frontendpractice.com/projects/)\n\n\n## Topics Learned\n\u003cdetails\u003e\n\u003csummary\u003eBasic website interactivity with Javascript\u003c/summary\u003e\n\n####  Browser/Web APIs\n- They aid in the interaction between HTML conent and CSS styles and collecting, generating/manipulating audio and/or video content.\n- Amongst a [different categories of APIs](https://www.educative.io/answers/what-are-browser-apis), following are the ones we used.\n#### Document Object Model (DOM) API  \n- Builds interaction by addressing specific elements in `index.html` such as,\n    - on_click Events for alerts, swapping content\n    - Modify headers, paragraphs\n#### Web Storage API\n- Locally stores the user input on their browser\n- Allows access and displaying the content using DOM API\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eGIT Orphan Branch\u003c/summary\u003e\n\n#### What is a Git Orphan branch ?\n- A Git branch, in general, is used for developing a feature or resolving a bug, so a project progresses without lag.\n- A Git Orphan branch provides the possibility to start from zero, i.e., not share any commit history with either the main branch or any other branches.\n- Hence a perfect setup for hosting a static github page!\n- Thanks to the [short snippet from DEV Community blog](https://dev.to/mcaci/how-to-create-an-orphan-branch-in-git-35ac)\n- They are used for :\n    - static websites, \n    - static parts of major project like a thesis,\n    - to host an open-source part of a commercial software\n\n#### How to create and handle a Git Orphan branch ?\n```bash\n    $ git checkout --orphan newbranch  \n    :'to create and move to created orphan branch -\"newbranch\"'\n```\n    \n```bash\n    $ git rm directory/*  \n    :'to remove non-essential directory from \"newbranch\" including the files\n    OR'\n    $ git rm -rf .\n    :'forced and recursive removal of all files in the current directory'\n```\n\n```bash\n    : 'different ways to create a file'\n\n    $ touch README.md       : 'only creates a README'\n    $ echo newFile.txt      : 'only creates a newFile'\n    $ cat \u003e anyFile.txt     : 'creates and can start appending right away'\n```\n\n```bash\n    :'generally used after git commit'\n\n    $ git fetch origin  \n    :'to identify if any changes in upstream(remote branch)'\n```\n\n```bash\n    $ git diff HEAD @{u} --name-only \t\n    :'to check which files will be changed on the next pull'\n```\n\n```bash\n    $ git pull --rebase newbranch\n    :'to fetch changes from remote repo, rebase current branch on top of fetched branch. NOT recommended, Do your research'\n```\n\u003c/details\u003e\n    \n\n\n\u003cdetails\u003e\n\u003csummary\u003ePublishing static website using GitHub Pages\u003c/summary\u003e\n\n#### What is a Static website ?\n- Websites which are read-only, and the content does not change based on the user activity\n- This website is build from pre-built component files (HTML, CSS, JS) stored on a web server, in our case GitHub Pages.\n- Check [Hubspot blogpost](https://blog.hubspot.com/website/static-vs-dynamic-website) more info.\n\n#### How to publish a Static website ?\n- There are many services [as mentioned](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website) in MDN Web Docs\n- A free reliable source would be [GitHub Pages](https://docs.github.com/en/pages)\n- The process is as simple as hosting a repo and [following the instructions](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) to deploy the website.\n- However, there are also certain details, which I learned the hard-way.\n1. IF the `index.html` file is accomodated with `styles.css` and `main.js` files, then it is mandatory to add `.nojekyll` file in the same directory as the `index.html`.  This step renders the static website without looking for `_config.yml` to define the Jekyll theme.\n2. Filepaths must begin with directory name, NEVER a \"/\"\n3. Keep image formats uniform, i.e., either all images are in `.jpg` or `.png` format, not both.\n4. Filepaths inside `.css` file must [begin from the root directory.](https://github.com/prak112/DevSchool-HTML/tree/supercats#overview)\n\n\n\u003c/details\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprak112%2Fdevschool-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprak112%2Fdevschool-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprak112%2Fdevschool-html/lists"}