Skip to content

Commit 489542e

Browse files
Marc HaunschildMarc Haunschild
Marc Haunschild
authored and
Marc Haunschild
committed
the code from the talk
1 parent 2619781 commit 489542e

File tree

5 files changed

+147
-1
lines changed

5 files changed

+147
-1
lines changed

‎live-coding-result/css/main-min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎live-coding-result/css/main.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
body {
2+
background-color: rgba(200, 200, 200, 0.7);
3+
display: grid;
4+
grid-template-columns: 1fr 1fr;
5+
}
6+
header {
7+
background-color: red;
8+
grid-column: 1 / 3;
9+
}
10+
nav {
11+
background-color: white;
12+
grid-column: 1 / 3;
13+
}
14+
nav ul {
15+
list-style-type: none;
16+
padding-left: 0;
17+
display: flex;
18+
}
19+
nav li {
20+
margin-left: 10px;
21+
margin-right: 10px;
22+
}
23+
main {
24+
background-color: yellow;
25+
}
26+
aside {
27+
background-color: hotpink;
28+
}
29+
footer {
30+
background-color: green;
31+
grid-column: 1 / 3;
32+
}

‎live-coding-result/index.html

100644100755
+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link href="css/main.css" rel="stylesheet">
6+
<meta name="viewport" content="width=device-width,initial-scale=1">
7+
<title>Pizza Paolo</title>
8+
</head>
9+
10+
<body>
11+
<header>
12+
<h1>Pizza Paolo</h1>
13+
</header>
14+
<nav>
15+
<ul>
16+
<li><a href="#">Link 1</a></li>
17+
<li>
18+
<a href="#">Link 2</a>
19+
</li>
20+
<li>
21+
<a href="#">Link 3</a>
22+
</li>
23+
<li>
24+
<a href="#">Link 4</a>
25+
</li>
26+
<li>
27+
<a href="#">Link 5</a>
28+
</li>
29+
</ul>
30+
</nav>
31+
<main>
32+
<article>
33+
<h2>Hello world</h2>
34+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, reprehenderit, unde. Dolore autem ipsa dolor, accusamus nihil consectetur quos distinctio, quae vel culpa, ratione ex dolores beatae iure necessitatibus vitae?</p>
35+
<p>Illum culpa nam autem obcaecati iure unde, asperiores quibusdam dolorem, dolor voluptas adipisci nihil perferendis expedita soluta ratione fugit dignissimos? Unde iste ad pariatur fugit possimus soluta culpa repellat minus.</p>
36+
<p>Quisquam corporis ullam magni, porro doloribus, perspiciatis perferendis eos esse eligendi. Soluta, dolores, nemo? Totam atque vero eveniet iste! Vero quia enim debitis. Cumque omnis saepe aperiam nobis, hic vitae.</p>
37+
<p>Ullam nihil placeat quidem consequuntur vel magni dicta ratione tenetur error qui distinctio eos, quas et repellat animi deserunt quaerat dolorem voluptatum ipsa ipsam modi autem, ducimus cumque corporis. Impedit!</p>
38+
<p>Totam, quia dolorum nisi laborum, tempore qui, id velit aliquid consequuntur nostrum non a ducimus expedita perspiciatis autem? Alias tempore quasi similique voluptatem consequuntur atque autem, ex omnis animi assumenda.</p>
39+
</article>
40+
</main>
41+
<aside>
42+
<h3>
43+
Additional Information
44+
</h3>
45+
</aside>
46+
<footer>
47+
<p>© 2020</p>
48+
</footer>
49+
</body></html>

‎readme.html

+32
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,38 @@ <h1 id="maltacademytalkbasicsofhtmlandcss">malt academy Talk &#8220;Basics of HT
1414

1515
<p>Here you find the source code from the Malt academy talk &#8220;Basics of HTML and CSS&#8221;</p>
1616

17+
<p>** CHANGE in the HTML-Document after the talk! **</p>
18+
19+
<p>I wanted to place the element <code>aside</code> next to <code>main</code>.</p>
20+
21+
<p>So need it to be a sibling of <code>main</code> - so I took the <code>aside</code> element out of main and put it after <code>main</code>.</p>
22+
23+
<p>Do this in your own project only, if it makes sense. Because HTML is all about sense and meaning.</p>
24+
25+
<p>By the way: if the <code>aside</code> can stay in the <code>main</code> element, make the <code>main</code> a grid conatiner. Everything in body does not have to be placed in a grid, anyway all the other elements are standing on top of each other.</p>
26+
27+
<p>This is the reason why I have to give all children of body the style <code>grid-colum: 1 / 3;</code></p>
28+
29+
<p>This tells the browser to place an element from line one to line three of the grid. Line one is before the first column, line two is between column one and column two and line three is after column 2 (and before column three. if there is a thir column).</p>
30+
31+
<p>So <code>1 / 3</code> means column 1 and 2.</p>
32+
33+
<p>See also https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column</p>
34+
35+
<p>While talking it did not work, because I wrote <code>0 / 2</code> - for a reason I don&#8217;t understand myself, I thought I have to start counting at 0&#8230;</p>
36+
37+
<p>Of course on a real life web page, the main article would be wider than the sidebar, so try playing around with the fraction values in line 4 of the css file.</p>
38+
39+
<p>Think of them as a ratio between the elements in each row. If you write <code>5fr 2fr</code> for example this means that the first row gets 5 parts of the whole and the second row will get 2 parts.</p>
40+
41+
<p>If you want something behaving like on a bootstrap grid, you need the sum of the fractions to equal 12 like so: 8fr 4fr</p>
42+
43+
<p>But you already can see in this little example, that you have much less constraints than in a bootstrap layout, not even mentioning, that css grid is smart, whre bootstrap is dull like a stone. Because with css grid you can make responsive layouts without media queries. If you are interested in this feature of css grid, search the Mozilla developer Network for autofill and autofit.</p>
44+
45+
<p>By the way. you are free to combine css grid and flex: put a flex container into an grid item and enjoy the magic!</p>
46+
47+
<p>Heve fun!</p>
48+
1749
</body>
1850
</html>
1951

‎readme.md

+33-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,36 @@
33
![alt text](https://raw.githubusercontent.com/MarcHaunschild/malt-talk-css-html-basics/master/assets/300420_Basics_HTML_CSS_EN.png "Logo Title Text 1")
44

55

6-
Here you find the source code from the Malt academy talk "Basics of HTML and CSS"
6+
Here you find the source code from the Malt academy talk "Basics of HTML and CSS"
7+
8+
** CHANGE in the HTML-Document after the talk! **
9+
10+
I wanted to place the element `aside` next to `main`.
11+
12+
So need it to be a sibling of `main` - so I took the `aside` element out of main and put it after `main`.
13+
14+
Do this in your own project only, if it makes sense. Because HTML is all about sense and meaning.
15+
16+
By the way: if the `aside` can stay in the `main` element, make the `main` a grid conatiner. Everything in body does not have to be placed in a grid, anyway all the other elements are standing on top of each other.
17+
18+
This is the reason why I have to give all children of body the style `grid-colum: 1 / 3;`
19+
20+
This tells the browser to place an element from line one to line three of the grid. Line one is before the first column, line two is between column one and column two and line three is after column 2 (and before column three. if there is a thir column).
21+
22+
So `1 / 3` means column 1 and 2.
23+
24+
See also https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
25+
26+
While talking it did not work, because I wrote `0 / 2` - for a reason I don't understand myself, I thought I have to start counting at 0...
27+
28+
Of course on a real life web page, the main article would be wider than the sidebar, so try playing around with the fraction values in line 4 of the css file.
29+
30+
Think of them as a ratio between the elements in each row. If you write `5fr 2fr` for example this means that the first row gets 5 parts of the whole and the second row will get 2 parts.
31+
32+
If you want something behaving like on a bootstrap grid, you need the sum of the fractions to equal 12 like so: 8fr 4fr
33+
34+
But you already can see in this little example, that you have much less constraints than in a bootstrap layout, not even mentioning, that css grid is smart, whre bootstrap is dull like a stone. Because with css grid you can make responsive layouts without media queries. If you are interested in this feature of css grid, search the Mozilla developer Network for autofill and autofit.
35+
36+
By the way. you are free to combine css grid and flex: put a flex container into an grid item and enjoy the magic!
37+
38+
Heve fun!

0 commit comments

Comments
 (0)