This is a small personal exploration of CSS and HTML on the SuperSimpleDev Youtube's course on both languages. It does teach the fundamental tools that composes both languages, and wraps it all together replicating Youtube interface. This upload corresponds to that replication.
Download the repo
Open the youtube.html with a browser
Project-path-here/youtube.html
Good to go
The project is made up of a few folders, each of which containing: Channel-pictures: pictures of some youtube channels, as the name states. Icons: some of the webpage svg files. styles: the files that define the styles for the youtube.html general.css: defines styles for main classes header.css: defines the styles and builds the layout of the webpage header sidebar.css: defines the styles for Youtube's left navigator video.css: holds the layout logic for the video grid (Thinking it again, the names CSS names seem to be pretty self-describing actually)
The youtube.html holds a few main structures: a header, a navigator(left), and a grid of videos. The header is divided into three sections: 1. The first one, holding the three-lines options menu and Youtube's logo. 2. A second one, including the search-bar, the search-bar-button, and the Voice-search-button 3. And the third one, that features all the buttons at the right, namely Upload, Apps, Notifications and the User's profile picture. The Navigator is a flexbox vertically holding some buttons, that react to the hovering cursor.
The grid is made up of some video-preview structures, each of which describing some properties belonging to the video they link: 1. A Thumbnail for the video 2. A video name 3. Duration 4. Author, or channel name 5. Channel profile picture
Feel free to download the project, edit it as you please, and have a nice day
We accept contributions. Nonetheless, they make probably little sense for this project, being not a project that will practically profit from them in any sense.
Most of the data here displayed belongs to youtube, the featured channels and/or their respective authors
Feel free to contact me at jeremiaspini7@gmail.com
Have a nice day!