CSS website layout in 9 minutes! 🗺️

  Переглядів 48,621

Bro Code

Bro Code

7 місяців тому

#CSS #course #tutorial
CSS website layout header nav main aside section article footer tutorial example explained

КОМЕНТАРІ: 34
@BroCodez
@BroCodez 11 місяців тому
Bro Code Header This is Aside This is side content author information fun facts quotes external links comments related content This is a Section This is dependent content Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum est totam ducimus fugiat possimus consectetur architecto repudiandae, recusandae iusto aperiam eveniet quidem enim aliquam rem. Dolore voluptates nesciunt fuga quisquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum est totam ducimus fugiat possimus consectetur architecto repudiandae, recusandae iusto aperiam eveniet quidem enim aliquam rem. Dolore voluptates nesciunt fuga quisquam? This is an Article This is independent content News Article Job Post Blog Post Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quidem, repudiandae, suscipit illum animi ullam omnis at laborum eaque dolorem aliquam quos iure cum deserunt asperiores facere sed totam magni? Footer /* style.css */ *{ box-sizing: border-box; } body{ margin: 0; } header{ background-color: hsl(0, 0%, 86%); text-align: center; padding: 25px; } .navbar{ background-color: hsl(0, 0%, 15%); height: 50px; } aside{ width: 20%; float: left; padding: 10px; } section{ width: 40%; float: left; padding: 10px; } article{ width: 40%; float: left; padding: 10px; } footer{ display: block; clear: both; background-color: hsl(0, 0%, 86%); text-align: center; padding: 25px; } @media screen and (max-width:600px){ aside, section, article{ width: 100%; } }
@kadafiblaze9662
@kadafiblaze9662 5 місяців тому
Bro, this i this is dope. you are the best. love your work.
@guchfun
@guchfun 2 місяці тому
Thank you Bro Coder! I love the simplicity of this design as a starting point.
@Epic_coding200
@Epic_coding200 7 місяців тому
W3Schools but with text to speech (I hate reading articles but u have fixed it for me !!)
@c28ccd0e
@c28ccd0e 5 місяців тому
TRUE bro
@user-ql7pw7ld1n
@user-ql7pw7ld1n 2 місяці тому
Fantastic...I love it.very clean clear to the point..I'm confident now
@suyashman7964
@suyashman7964 7 місяців тому
Epic bro
@khakimov_18
@khakimov_18 3 місяці тому
you are doing a great job! Thanks for all
@eternalrinnegan8393
@eternalrinnegan8393 2 місяці тому
clean af, ty
@softwareengineer1
@softwareengineer1 7 місяців тому
Thankyou Bro
@walidwalid1669
@walidwalid1669 14 днів тому
Thank you 🎉
@abduljayconteh1858
@abduljayconteh1858 Місяць тому
Thank you very much @Brocode you are a genius
@ayubayanle
@ayubayanle 4 місяці тому
Thank you man
@TylerGraybeal4
@TylerGraybeal4 2 місяці тому
Nice video bro!!!!
@JasonTRogers
@JasonTRogers 5 місяців тому
wow, thank you for Going through that. It helped me understand how HTML and CSS work together. Do you have a video that explains the relationship of PHP with the other programing languages? How many programing languages are involved in building a website?
@yfjsdgzjdnfn
@yfjsdgzjdnfn Місяць тому
It is nice to layout using flexbox rather float
@ezeabataprisca9164
@ezeabataprisca9164 22 дні тому
Thank you bro
@tavrel4628
@tavrel4628 2 місяці тому
why doesn't my article align with section and aside? it's right under the navbar and no padding adding seems to work. total beginner here😅
@Wolphypwi
@Wolphypwi 4 місяці тому
man, I wish to be as good as you and have the knowledge.
@FushigiMigi
@FushigiMigi 3 місяці тому
you can do it!
@sherlockholms2544
@sherlockholms2544 8 днів тому
thanks bro ❤❤❤❤❤❤❤❤
@josepholaniyi8818
@josepholaniyi8818 Місяць тому
Thanks❤
@mothukurivenkatesh4641
@mothukurivenkatesh4641 11 місяців тому
@souleaterboss2246
@souleaterboss2246 3 місяці тому
Thanks 😮😮😮
@sereneflatun
@sereneflatun 3 місяці тому
THank you THank you Thank you ************************
@redwanfzr464
@redwanfzr464 28 днів тому
@renoman1195
@renoman1195 6 місяців тому
thank you so much!!!! This isn't plagiarism, is it? taking this code and making something else out of it?
@Yumiesthetic
@Yumiesthetic 6 місяців тому
of course not, as long as it's for personal usage and learning, it's fine
@MotoPortalTR
@MotoPortalTR 3 місяці тому
tenku tenku izmir -Turqey gut bye
@SpongeknobSquarenut
@SpongeknobSquarenut 3 місяці тому
is there a way to make the footer smaller?
@purplevanilla
@purplevanilla 3 місяці тому
Just reduce the height of the footer
@SpongeknobSquarenut
@SpongeknobSquarenut 3 місяці тому
@@purplevanillabut how?
@purplevanilla
@purplevanilla 3 місяці тому
@@SpongeknobSquarenut For example, if the footers height is 100. Just change the height into 80 or smth lower than that in css. footer{ height: 80; }
@user-my8kc6xi5c
@user-my8kc6xi5c Місяць тому
leuuuuu
How to create a CSS image gallery in 5 minutes! 📷
5:38
Bro Code
Переглядів 30 тис.
How to Properly Layout A Website (For Beginners)
14:50
The Website Architect
Переглядів 464 тис.
когда одна дома // EVA mash
00:51
EVA mash
Переглядів 5 млн
MINHA IRMÃ MALVADA CONTRA O GADGET DE TREM DE DOMINÓ 😡 #ferramenta
00:40
How to create a CSS navigation bar in 6 minutes! 🧭
6:28
Bro Code
Переглядів 170 тис.
How to create a simple layout using HTML and CSS
9:12
CodeWith_HKS
Переглядів 8 тис.
Learn CSS flexbox in 10 minutes! 💪
10:01
Bro Code
Переглядів 93 тис.
HTML & CSS Full Course for free 🌎 (2023)
4:02:43
Bro Code
Переглядів 1,8 млн
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Переглядів 1,3 млн
Learn CSS in 1 hour 🎨
1:00:00
Bro Code
Переглядів 950 тис.
Learn CSS Grid the easy way
37:04
Kevin Powell
Переглядів 855 тис.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Переглядів 867 тис.