CSS website layout in 9 minutes! 🗺️

[@BroCodez]

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%;
}
}

[@LiveINtheGood53]

This instructor is wonderful. He explains each step very well and uses great examples to back up those steps.

[@Epic_coding200]

W3Schools but with text to speech
(I hate reading articles but u have fixed it for me !!)

[@rouisaek]

TRUE bro

[@chromaticworkshop2669]

Thank you for all of these tutorial videos. I took the LinkedIn course on responsive design and you were a lot better in explaining things.

[@kadafiblaze9662]

Bro, this i this is dope. you are the best. love your work.

[@redwanfzr464]

[@guchfun]

Thank you Bro Coder! I love the simplicity of this design as a starting point.

[@tariqniazai-35t]

thanks sir it's very helpful for me to know how to creat the perfect layout .

[@visitor_t-w3p]

Fantastic...I love it.very clean clear to the point..I'm confident now

[@yfjsdgzjdnfn]

It is nice to layout using flexbox rather float

[@小郭子游戏-v4r]

pretty good. The content is good. It showing how to make a basic websites with all the basic factors instructed step by step.

[@JasonTRogers]

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?

[@Wolphypwi]

man, I wish to be as good as you and have the knowledge.

[@FushigiMigi]

you can do it!

[@mforkan]

That was extremely helpful! Thanks

[@LisaElsie]

amazing explanation, thank you !

[@abduljayconteh1858]

Thank you very much @Brocode you are a genius

[@khakimov_18]

you are doing a great job! Thanks for all

[@LloydChristmas1195]

thank you so much!!!! This isn't plagiarism, is it? taking this code and making something else out of it?

[@Yumiesthetic]

of course not, as long as it's for personal usage and learning, it's fine

[@tavrel4628]

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😅

[@SBisLive435]

Let's grow together

[@SBisLive435]

Let's grow together

[@Yehor-v7y]

​@@SBisLive435 fungi be like:

[@reaper8305]

Sir bro code will you create a full actuall website with design

[@sdy2024]

Thank you very much , this is good stuff.

[@FrederikWoellert]

Yeah Bro nice Video.

[@eternalrinnegan8393]

clean af, ty

[@alwinsantos3807]

hello what if i dont use style.css where to put this code" @media screen and (max-width:600px) {
aside, section, article{
width: 100%;
}
}
"
thankss

[@AdeelAhmad0007]

Nice Video

[@AdeelAhmad0007]

good

[@sereneflatun]

THank you THank you Thank you ************************

[@AdeelAhmad0007]

amazing

[@TylerGraybeal]

Nice video bro!!!!

[@walidwalid1669]

Thank you 🎉

[@suyashman7964]

Epic bro

[@mothukurivenkatesh4641]

❤

[@ezeabataprisca9164]

Thank you bro

[@ayubayanle]

Thank you man

[@SpongeknobSquarenut]

is there a way to make the footer smaller?

[@purplevanilla]

Just reduce the height of the footer

[@SpongeknobSquarenut]

@@purplevanillabut how?

[@purplevanilla]

@@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;
}

[@rejuzaman6365]

[@josepholaniyi8818]

Thanks❤

[@softwareengineer1]

Thankyou Bro

[@sherlockholms2544]

thanks bro ❤❤❤❤❤❤❤❤

[@souleaterboss2246]

Thanks 😮😮😮

[@buivandat-md8fd]

tks bro !

[@felixtinnerholm4458]

epic

[@MotoPortalTR]

tenku tenku izmir -Turqey gut bye

[@AdeelAhmad0007]

lop

[@puranlimbu-r3k]

leuuuuu

[@AdeelAhmad0007]

good