How To Create A Responsive 3 Column YouTube Video Web Page Layout Using HTML And CSS

Опубликовано: 05 Июнь 2026
на канале: Tech Talk Tutorials
1,507
19

How To Create A Responsive 3 Column YouTube Video Web Page Layout Using html5 And CSS3

This is a video tutorial on how to create a responsive three columns web page layout of YouTube Videos using html5 and CSS3. The videos will be fully controllable and responsive. Responsive means that when the screen is downsized such as viewing on a mobile device, the videos will stack on top of each other making for a better viewing experience. I will be using VS Code and the Google Chrome web browser. The html and css code have been saved to a text file below:

HTML & CSS FILES: https://drive.google.com/drive/folder...


Chapters
0:00 How To Create A Responsive 3 Column YouTube Video Layout In HTML
0:22 Example Of A Responsive 3 Column YouTube Video Web Page Layout
1:35 Create Folders And Files On VS Code
4:07 Create An HTML Boilerplate In VS Code
4:30 How To Connect A CSS File To Html In VS Code
6:10 Start Coding The HTML File
14:35 Begin Styling CSS
18:50 Create A Media Query To Make The Columns Responsive
20:25 Adding Titles In HTML For The Videos
22:20 How To Add More Rows Of Videos

#instructionaldesign #html5 #webdevelopment

You can email me at: [email protected]

Visit Me On Reddit At   / no_restforthewicked  

Follow Me On Facebook At   / no-rest-for-the-wicked-104557294721998  

Follow Me On Twitter At   / craigjohnson20