https://github.com/vinit-source/youtube-clone
Clone of YouTube to demonstrate frontend nitty-gritties to students.
https://github.com/vinit-source/youtube-clone
Last synced: 2 months ago
JSON representation
Clone of YouTube to demonstrate frontend nitty-gritties to students.
- Host: GitHub
- URL: https://github.com/vinit-source/youtube-clone
- Owner: Vinit-source
- Created: 2024-06-10T10:56:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-08T07:00:38.000Z (almost 2 years ago)
- Last Synced: 2025-06-04T09:31:30.840Z (about 1 year ago)
- Language: HTML
- Homepage: https://vinit-source.github.io/YouTube-clone/
- Size: 4.63 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Steps taken by me:
1. Select Design 
2. Draw wireframe on plain paper
3. Collect assets on local.
4. Using svg elements for icons taken directly from YouTube. Alternatively, download similar icons on local.
### Technical learnings:
1. For a webpage, there should be only one `main` tag.
2. `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.
3. Every `section` can have its own `header` tag.
4. 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).
5. 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`.
6. Similarly, assign the value for `margin-top` property to the `nav` with the height of the `header`.
7. 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.
### Other learnings:
1. Markdown practice - First step towards organizing stuff.
2. Design the wireframe on paper - Can you draw it on paper first? This activity stimulates the visualization nerves required for frontend development.
3. Good reference for common style layouts in CSS - [CSS Cookbook](https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook)
4.
### Icons used:
Hamburger menu
Next
Home
Shorts
Subscriptions
Your channel
History
Playlists
Your videos
Watch Later
Liked videos
Your clips
Search
Voice search
Create
Notification
Profile Photo
Menu icon
Questions:
- How to make styles from one class override another class when both classes are applied to the same element?