{"id":26475186,"url":"https://github.com/vinit-source/youtube-clone","last_synced_at":"2026-04-20T03:36:47.480Z","repository":{"id":243933925,"uuid":"813020306","full_name":"Vinit-source/YouTube-clone","owner":"Vinit-source","description":"Clone of YouTube to demonstrate frontend nitty-gritties to students.","archived":false,"fork":false,"pushed_at":"2024-07-08T07:00:38.000Z","size":4851,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-04T09:31:30.840Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vinit-source.github.io/YouTube-clone/","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/Vinit-source.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":"2024-06-10T10:56:38.000Z","updated_at":"2024-09-05T08:38:40.000Z","dependencies_parsed_at":"2024-07-08T08:21:38.817Z","dependency_job_id":null,"html_url":"https://github.com/Vinit-source/YouTube-clone","commit_stats":null,"previous_names":["vinit-source/youtube-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Vinit-source/YouTube-clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinit-source%2FYouTube-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinit-source%2FYouTube-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinit-source%2FYouTube-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinit-source%2FYouTube-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vinit-source","download_url":"https://codeload.github.com/Vinit-source/YouTube-clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinit-source%2FYouTube-clone/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264816504,"owners_count":23668205,"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":[],"created_at":"2025-03-19T23:16:17.734Z","updated_at":"2026-04-20T03:36:42.449Z","avatar_url":"https://github.com/Vinit-source.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Steps taken by me:\n1. Select Design ![YouTube](design.png)\n2. Draw wireframe on plain paper\n3. Collect assets on local. \n4. Using svg elements for icons taken directly from YouTube. \u003ci\u003eAlternatively, download similar icons on local.\u003c/i\u003e\n\n### Technical learnings:\n1. For a webpage, there should be only one `main` tag.\n2. `aside` should be inside of main and not beside main. It should include the content not directly related to the main content for eg. glossary entries, author biography, related links, etc.\n3. Every `section` can have its own `header` tag.\n4. Read through the [MDN code on structuring a webpage](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/structuring-a-page-of-content-finished).\n5. Save the width of the `nav` in a variable in the `root` rule, so that the left margin to the `main` section can be assigned using the same variable. This keeps only one editable copy of the width of the `nav` section. I have used two variables: `--mini-nav-width` and `--full-nav-width`.\n6. Similarly, assign the value for `margin-top` property to the `nav` with the height of the `header`.\n7. Start with header. Add icons and logo. Refer [Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) to give proper sizes to images and icons.\n\n### Other learnings:\n1. Markdown practice - First step towards organizing stuff.\n2. Design the wireframe on paper - Can you draw it on paper first? This activity stimulates the visualization nerves required for frontend development.\n3. Good reference for common style layouts in CSS - [CSS Cookbook](https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook)\n4. \n\n### Icons used:\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z\"\u003e\u003c/path\u003e\u003c/svg\u003e Hamburger menu\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"M4.97 12.65 9.62 8 4.97 3.35l.71-.71L11.03 8l-5.35 5.35-.71-.7z\"\u003e\u003c/path\u003e\u003c/svg\u003e Next\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"m12 4.44 7 6.09V20h-4v-6H9v6H5v-9.47l7-6.09m0-1.32-8 6.96V21h6v-6h4v6h6V10.08l-8-6.96z\"\u003e\u003c/path\u003e\u003c/svg\u003e \u003csvg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=black\u003e\u003cg\u003e\u003cpath d=\"M4 21V10.08l8-6.96 8 6.96V21h-6v-6h-4v6H4z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e Home\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25zm-.23 5.86-8.5 4.5c-1.34.71-3.01.2-3.72-1.14-.71-1.34-.2-3.01 1.14-3.72l2.04-1.08v-1.21l-.69-.28-1.11-.46c-.99-.41-1.65-1.35-1.7-2.41-.05-1.06.52-2.06 1.46-2.56l8.5-4.5c1.34-.71 3.01-.2 3.72 1.14.71 1.34.2 3.01-1.14 3.72L15.5 9.26v1.21l1.8.74c.99.41 1.65 1.35 1.7 2.41.05 1.06-.52 2.06-1.46 2.56z\"\u003e\u003c/path\u003e\u003c/svg\u003e Shorts\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"M10 18v-6l5 3-5 3zm7-15H7v1h10V3zm3 3H4v1h16V6zm2 3H2v12h20V9zM3 10h18v10H3V10z\"\u003e\u003c/path\u003e\u003c/svg\u003e Subscriptions\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" stroke=grey style=\"vertical-align:middle\"\u003e\u003cpath d=\"M4 20h14v1H3V6h1v14zM6 3v15h15V3H6zm2.02 14c.36-2.13 1.93-4.1 5.48-4.1s5.12 1.97 5.48 4.1H8.02zM11 8.5a2.5 2.5 0 015 0 2.5 2.5 0 01-5 0zm3.21 3.43A3.507 3.507 0 0017 8.5C17 6.57 15.43 5 13.5 5S10 6.57 10 8.5c0 1.69 1.2 3.1 2.79 3.43-3.48.26-5.4 2.42-5.78 5.07H7V4h13v13h-.01c-.38-2.65-2.31-4.81-5.78-5.07z\"\u003e\u003c/path\u003e\u003c/svg\u003e Your channel\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\"\u003e\u003cg\u003e\u003cpath d=\"M14.97 16.95 10 13.87V7h2v5.76l4.03 2.49-1.06 1.7zM22 12c0 5.51-4.49 10-10 10S2 17.51 2 12h1c0 4.96 4.04 9 9 9s9-4.04 9-9-4.04-9-9-9C8.81 3 5.92 4.64 4.28 7.38c-.11.18-.22.37-.31.56L3.94 8H8v1H1.96V3h1v4.74c.04-.09.07-.17.11-.25.11-.22.23-.42.35-.63C5.22 3.86 8.51 2 12 2c5.51 0 10 4.49 10 10z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e History\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"M22 7H2v1h20V7zm-9 5H2v-1h11v1zm0 4H2v-1h11v1zm2 3v-8l7 4-7 4z\"\u003e\u003c/path\u003e\u003c/svg\u003e Playlists\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"m10 8 6 4-6 4V8zm11-5v18H3V3h18zm-1 1H4v16h16V4z\"\u003e\u003c/path\u003e\u003c/svg\u003e Your videos\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"M14.97 16.95 10 13.87V7h2v5.76l4.03 2.49-1.06 1.7zM12 3c-4.96 0-9 4.04-9 9s4.04 9 9 9 9-4.04 9-9-4.04-9-9-9m0-1c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2z\"\u003e\u003c/path\u003e\u003c/svg\u003e Watch Later\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11H3v10h4h1h9.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z M7,20H4v-8h3V20z M19.98,13.17l-1.34,6 C18.54,19.65,18.03,20,17.43,20H8v-8.61l5.6-6.06C13.79,5.12,14.08,5,14.38,5c0.26,0,0.5,0.11,0.63,0.3 c0.07,0.1,0.15,0.26,0.09,0.47l-1.52,4.94L13.18,12h1.35h4.23c0.41,0,0.8,0.17,1.03,0.46C19.92,12.61,20.05,12.86,19.98,13.17z\"\u003e\u003c/path\u003e\u003c/svg\u003e Liked videos\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; vertical-align:middle\" stroke=grey\u003e\u003cpath d=\"M8 7c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1zm-1 9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm3.79-7.77L21 18.44V20h-3.27l-5.76-5.76-1.27 1.27c.19.46.3.96.3 1.49 0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4c.42 0 .81.08 1.19.2l1.37-1.37-1.11-1.11C8 10.89 7.51 11 7 11c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4c0 .43-.09.84-.21 1.23zm-.71.71-.43-.44.19-.58c.11-.34.16-.64.16-.92 0-1.65-1.35-3-3-3S4 5.35 4 7s1.35 3 3 3c.36 0 .73-.07 1.09-.21l.61-.24.46.46 1.11 1.11.71.71-.71.71-1.37 1.37-.43.43-.58-.18C7.55 14.05 7.27 14 7 14c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3c0-.38-.07-.75-.22-1.12l-.25-.61.47-.47 1.27-1.27.71-.71.71.71L18.15 19H20v-.15l-9.92-9.91zM17.73 4H21v1.56l-5.52 5.52-2.41-2.41L17.73 4zm.42 1-3.67 3.67 1 1L20 5.15V5h-1.85z\"\u003e\u003c/path\u003e\u003c/svg\u003e Your clips\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"vertical-align:middle;\"\u003e\u003cpath clip-rule=\"evenodd\" d=\"M16.296 16.996a8 8 0 11.707-.708l3.909 3.91-.707.707-3.909-3.909ZM18 11a7 7 0 11-14 0 7 7 0 0114 0Z\" fill-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e Search\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\"\u003e\u003cpath d=\"M12 3c-1.66 0-3 1.37-3 3.07v5.86c0 1.7 1.34 3.07 3 3.07s3-1.37 3-3.07V6.07C15 4.37 13.66 3 12 3zm6.5 9h-1c0 3.03-2.47 5.5-5.5 5.5S6.5 15.03 6.5 12h-1c0 3.24 2.39 5.93 5.5 6.41V21h2v-2.59c3.11-.48 5.5-3.17 5.5-6.41z\"\u003e\u003c/path\u003e\u003c/svg\u003e Voice search\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\"\u003e\u003cpath d=\"M14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2zm3-7H3v12h14v-6.39l4 1.83V8.56l-4 1.83V6m1-1v3.83L22 7v8l-4-1.83V19H2V5h16z\"\u003e\u003c/path\u003e\u003c/svg\u003e Create\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\"\u003e\u003cpath d=\"M10 20h4c0 1.1-.9 2-2 2s-2-.9-2-2zm10-2.65V19H4v-1.65l2-1.88v-5.15C6 7.4 7.56 5.1 10 4.34v-.38c0-1.42 1.49-2.5 2.99-1.76.65.32 1.01 1.03 1.01 1.76v.39c2.44.75 4 3.06 4 5.98v5.15l2 1.87z\"\u003e\u003c/path\u003e\u003c/svg\u003e Notification\n\n\u003cimg id=\"img\" draggable=\"false\" class=\"style-scope yt-img-shadow\" alt=\"Avatar image\" height=\"32\" width=\"32\" src=\"https://yt3.ggpht.com/yti/ANjgQV-Nglspq491ye9Q4BzHs-WybKP6Ac84-8f_72yanOkKjks=s88-c-k-c0x00ffffff-no-rj\"\u003e Profile Photo\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\" style=\"pointer-events: none; display: inherit; width: 100%; height: 100%;\"\u003e\u003cpath d=\"M12 16.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zM10.5 12c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5zm0-6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5z\"\u003e\u003c/path\u003e\u003c/svg\u003e Menu icon\n\nQuestions:\n- How to make styles from one class override another class when both classes are applied to the same element?\n  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinit-source%2Fyoutube-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinit-source%2Fyoutube-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinit-source%2Fyoutube-clone/lists"}