How To Create A Responsive 2 Column Layout Using HTML And CSS

Опубликовано: 06 Февраль 2022
на канале: Tech Talk Tutorials

10,759

114

How To Create A Responsive 2 Column Layout In html5 And CSS3

This is a video tutorial on how to create a responsive two column layout using html5 and CSS3. Responsive means that when the screen is downsized such as viewing on a mobile device, the columns 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.

Chapters
0:00 How To Create A Responsive 2 Column Layout In HTML
0:30 Example Of A Responsive Two Column Layout
1:20 Create A Folder On The Desktop
2:10 Open The Folder In VS Code
2:40 Create An HTML File
3:25 Create A CSS File
3:40 Save Your Files
4:30 How To Connect The HTML And CSS Files
6:00 Create An h1 Tag With A Class
7:20 Create A Div With A Class For The Columns
8:00 Create A Div With A Class For The Rows
9:05 Create An h2 Tag With A Class
9:50 Create A Paragraph Tag & Insert Lorem Ipsum Text
10:25 Copy Your Columns Div And Paste It Below
11:55 Begin Styling CSS
12:40 Style The Heading Class
13:10 Style The Columns Class
14:40 Style The Rows Class
16:20 Create A Media Query
17:45 Example Of A Responsive Two Column Layout

#technicalwriter #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

Смотрите видео How To Create A Responsive 2 Column Layout Using HTML And CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tech Talk Tutorials 06 Февраль 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 10,759 раз и оно понравилось 114 людям.