CSS website layout in 9 minutes! 🗺️

Показать описание

#CSS #course #tutorial

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

Рекомендации по теме

Комментарии

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bro Code</title>
<link rel="stylesheet" href="style.css">
<body>

<header>
<h1>Header</h1>
</header>

<nav class="navbar">
</nav>

<main>
<aside>
<h2>This is Aside</h2>
<p>This is side content</p>
<ul>
<li>author information</li>
<li>fun facts</li>
<li>quotes</li>
<li>external links</li>
<li>comments</li>
<li>related content</li>
</ul>
</aside>

<section>
<h2>This is a Section</h2>
<p>This is dependent content</p>
<p>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?</p>
<p>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?</p>
</section>

<article>
<h2>This is an Article</h2>
<p>This is independent content</p>
<ul>
<li>News Article</li>
<li>Job Post</li>
<li>Blog Post</li>
</ul>
<p>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?</p>
</article>
</main>

<footer>
<h2>Footer</h2>
</footer>

</body>
</html>

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

BroCodez

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.

chromaticworkshop

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

kadafiblaze

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

Epic_coding

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

guchfun

redwanfzr

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

efyzfui

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

qlpwldn

It is nice to layout using flexbox rather float

yfjsdgzjdnfn

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

Wolphypwi

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?

JasonTRogers

you are doing a great job! Thanks for all

khakimov_

Thank you very much, this is good stuff.

sdy

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😅

tavrel

Thank you very much @Brocode you are a genius

abduljayconteh

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

renoman

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

alwinsantos

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

reaper

is there a way to make the footer smaller?

SpongeknobSquarenut

CSS website layout in 9 minutes! 🗺️

HTML CSS Fully Responsive Holy Grail Layout || Web Development

How to create Website Page Layout in HTML CSS | using Float - Web Layout Design Tutorial 01

The secret to mastering CSS layouts

Responsive Service Box Using CSS Grid Layout

10 CSS Pro Tips - Code this, NOT that!

Learn CSS Position In 9 Minutes

Responsive CSS Grid Tutorial

Responsive Dashboard Layouts with CSS Grid

How to Create A Responsive Fintech Website Design Using HTML CSS JAVASCRIPT |

Flexbox in CSS | display flex property in CSS | Use flex property

Learn CSS Positioning Quickly With A Real World Example

Build a Responsive Grid CSS Website Layout From Scratch

Top 10 Advanced CSS Responsive Design Concepts You Should Know

How to create Website Page Layout in HTML CSS | using Float - Web Layout Design Tutorial 02

Responsive Page Layout Using CSS Flexbox

Creating Responsive CSS Cards | Card Design HTM & CSS

How To Make Website Using HTML And CSS | Website Design With HTML And CSS

Master Media Queries And Responsive CSS Web Design Like a Chameleon!

How to Create Website Layouts Using CSS Grid | Learn HTML and CSS | HTML Tutorial

CSS Website Design Tutorial - External Style Sheets

#9 Blog Website Html CSS | HTML CSS 10 Practice Projects for Beginners | 2023 | Hindi

Css div box layout - Responsive HTML Container | Web Zone

Amazing, easy & customizable CSS patterns

How To Make An Responsive Equal Height Card Using HTML And CSS-FlexBox | Equal Height Card FlexBox