Skip to content

Commit 8e38f7a

Browse files
jamesacox53jamesacox53
committed
Completed Introduction to CSS Grid
1 parent 7aeb33a commit 8e38f7a

File tree

12 files changed

+627
-0
lines changed

12 files changed

+627
-0
lines changed

‎myWork/04-CSS-Layouts/CSSGrid/blog.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Blog</title>
6+
</head>
7+
<body>
8+
<h1>Blog</h1>
9+
<a href="index.html" target="_blank">📘 The Code Magazine</a>
10+
</body>
11+
</html>

‎myWork/04-CSS-Layouts/CSSGrid/content.txt

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
📘 The Code Magazine
2+
3+
The Basic Language of the Web: HTML
4+
5+
Posted by Laura Jones on Monday, June 21st 2027
6+
7+
All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web.
8+
9+
In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.
10+
11+
What is HTML?
12+
13+
HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language).
14+
15+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites.
16+
17+
In HTML, each element is made up of 3 parts:
18+
19+
The opening tag
20+
The closing tag
21+
The actual element
22+
You can learn more at the MDN Web Docs.
23+
24+
Why should you learn HTML?
25+
26+
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
27+
28+
To be able to use the fundamental web dev language
29+
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
30+
To build web applications
31+
To impress friends
32+
To have fun 😃
33+
34+
Hopefully you learned something new here. See you next time!

‎myWork/04-CSS-Layouts/CSSGrid/css-grid.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CSS Grid</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
}
28+
.el--7 {
29+
background-color: yellow;
30+
}
31+
.el--8 {
32+
background-color: crimson;
33+
}
34+
35+
.container--1 {
36+
/* STARTER */
37+
font-family: sans-serif;
38+
background-color: #ddd;
39+
font-size: 40px;
40+
margin: 40px;
41+
42+
/* CSS GRID */
43+
display: grid;
44+
grid-template-columns: 250px 150px;
45+
46+
column-gap: 20px;
47+
row-gap: 10px;
48+
}
49+
50+
.container--2 {
51+
/* STARTER */
52+
font-family: sans-serif;
53+
background-color: black;
54+
font-size: 40px;
55+
margin: 100px;
56+
57+
width: 1000px;
58+
height: 600px;
59+
60+
/* CSS GRID */
61+
display: none;
62+
}
63+
</style>
64+
</head>
65+
<body>
66+
<div class="container--1">
67+
<div class="el el--1">(1) HTML</div>
68+
<div class="el el--2">(2) and</div>
69+
<div class="el el--3">(3) CSS</div>
70+
<div class="el el--4">(4) are</div>
71+
<div class="el el--5">(5) amazing</div>
72+
<div class="el el--6">(6) languages</div>
73+
<div class="el el--7">(7) to</div>
74+
<div class="el el--8">(8) learn</div>
75+
</div>
76+
77+
<div class="container--2">
78+
<div class="el el--1">(1)</div>
79+
<div class="el el--3">(3)</div>
80+
<div class="el el--4">(4)</div>
81+
<div class="el el--5">(5)</div>
82+
<div class="el el--6">(6)</div>
83+
<div class="el el--7">(7)</div>
84+
</div>
85+
</body>
86+
</html>

‎myWork/04-CSS-Layouts/CSSGrid/flexbox.html

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Flexbox</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
}
28+
.el--7 {
29+
background-color: yellow;
30+
}
31+
.el--8 {
32+
background-color: crimson;
33+
}
34+
35+
.container {
36+
/* STARTER */
37+
font-family: sans-serif;
38+
background-color: #ddd;
39+
font-size: 25px;
40+
margin: 20px;
41+
42+
/* FLEXBOX */
43+
display: flex;
44+
/*
45+
align-items: center;
46+
align-items: flex-start;
47+
align-items: flex-end;
48+
align-items: stretch;
49+
*/
50+
align-items: center;
51+
justify-content: flex-start;
52+
53+
gap: 5px;
54+
}
55+
56+
.el {
57+
/*
58+
flex-grow: 0;
59+
flex-shrink: 1;
60+
flex-basis: auto;
61+
*/
62+
63+
/* flex-basis: 200px;
64+
flex-grow: 1;
65+
flex-shrink: 0;
66+
*/
67+
flex: 1 0 auto;
68+
}
69+
70+
.el--1 {
71+
align-self: flex-start;
72+
}
73+
</style>
74+
</head>
75+
<body>
76+
<div class="container">
77+
<div class="el el--1">HTML</div>
78+
<div class="el el--2">and</div>
79+
<div class="el el--3">CSS</div>
80+
<div class="el el--4">are</div>
81+
<div class="el el--5">amazing</div>
82+
<div class="el el--6">languages</div>
83+
<div class="el el--7">to</div>
84+
<div class="el el--8">learn</div>
85+
</div>
86+
</body>
87+
</html>

‎myWork/04-CSS-Layouts/CSSGrid/images/challenges.jpg

120 KB
Loading

‎myWork/04-CSS-Layouts/CSSGrid/images/laura-jones.jpg

6.64 KB
Loading

‎myWork/04-CSS-Layouts/CSSGrid/images/post-img.jpg

53.4 KB
Loading

‎myWork/04-CSS-Layouts/CSSGrid/images/related-1.jpg

50.2 KB
Loading

‎myWork/04-CSS-Layouts/CSSGrid/images/related-2.jpg

33 KB
Loading

‎myWork/04-CSS-Layouts/CSSGrid/images/related-3.jpg

43.5 KB
Loading

0 commit comments

Comments
 (0)