├── index.html
├── README.md
└── main.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Grid Template Areas Tutorial Project
2 |
3 | This is the project based on the following tutorial:
4 | [Easily Structure your Layout with CSS Grid's 'grid-template-areas'](https://youtu.be/qTGbWfEEnKI)
5 |
6 | ## More Awesome Content
7 |
8 | Do me a big ol' favor and check out these awesome links. I release new video tutorials on full stack development Monday-Thursday @ 10:30 AM ET!
9 |
10 | * Subscribe to the [DesignCourse YouTube Channel](http://youtube.com/designcourse)
11 | * Check out the associated website [Coursetro Full Stack Development Training](https://coursetro.com)
12 | * Chat with me and others on Discord: [DesignCourse Discord Server](https://discord.gg/a27CKAF)
13 | * [Twitter](https://twitter.com/designcoursecom)
14 | * [Facebook](https://facebook.com/coursetro)
15 |
16 | Enjoy!
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | height: 100vh;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | display: grid;
8 | grid-template-columns: 100%;
9 | grid-template-rows: repeat(auto, 5);
10 | grid-template-areas:
11 | "sect1"
12 | "sect2"
13 | "sect3"
14 | "main"
15 | "footer";
16 | }
17 |
18 | aside {
19 | grid-area: sidebar;
20 | background-color: #007FFF;
21 | }
22 |
23 | header {
24 | grid-area: header;
25 | background-color: #91C8FF;
26 | }
27 |
28 | section:nth-of-type(1) {
29 | grid-area: sect1;
30 | background-color: #B3D8FD;
31 | }
32 | section:nth-of-type(2) {
33 | grid-area: sect2;
34 | background-color: #5E86AF;
35 | }
36 | section:nth-of-type(3) {
37 | grid-area: sect3;
38 | background-color: #6D9FD2;
39 | }
40 | main {
41 | grid-area: main;
42 | background-color: #7DA9D5;
43 | }
44 |
45 | footer {
46 | grid-area: footer;
47 | background-color: #588EC3;
48 | }
49 |
50 | @media only screen and (min-width: 768px) {
51 |
52 | body {
53 | margin: 0;
54 | display: grid;
55 | grid-template-columns: auto 27% 27% 27%;
56 | grid-template-rows: 8% 30% auto 10%;
57 | grid-template-areas:
58 | "sidebar header header header"
59 | "sidebar sect1 sect2 sect3"
60 | "sidebar main main main"
61 | "sidebar footer footer footer";
62 | }
63 |
64 | }
--------------------------------------------------------------------------------