Slides at: https://goo.gl/2JLRGu https://nushackers.github.io/html-css
HTML | Output |
---|---|
|
h1 |
|
h2 |
|
h3 |
|
h4 |
|
h5 |
|
h6 |
<!DOCTYPE html>
<html>
<head>
<title>Your Awesome Webpage</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
Alternatively,
HTML | Output |
---|---|
|
content division
|
|
paragraph |
|
HTML | Output |
---|---|
|
|
|
Photos by erondu on Unsplash |
HTML | Output |
---|---|
|
|
|
|
HTML | Output | ||||||
---|---|---|---|---|---|---|---|
|
|
<div style="background: yellow;">Hello</div>
<style>
#hello {
background: yellow;
}
</style>
<div id="hello">Hello</div>
<style>
.hello {
background: yellow;
}
</style>
<div class="hello">Hello</div>
box-sizing: border-box;
as it's easier to calculate
.table th {
padding: 1rem;
}
Targetting the direct tbody within the class table
.table > tbody {
background: red;
}
.table th {
padding: 1rem;
}
this
.table > tbody {
background: red;
}
display: flex;
display: flex;
/* by default */
flex-direction: row;
/* x-axis in row, y-axis in col */
align-items: center;
/* y-axis in row, x-axis in col */
justify-content: space-around;
display: grid;
.page {
display: grid;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: repeat(1fr, 3);
grid-template-columns: 150px 1fr;
}
.header {
grid-area: head;
background-color: #8ca0ff;
}
.nav {
grid-area: nav;
background-color: #ffa08c;
}
.main {
grid-area: main;
background-color: #ffff64;
}
.footer {
grid-area: foot;
background-color: #8cffa0;
}
Useful for hiding ads/modals.
Upload all your files to sites like
then buy a domain from a registrar like