Skip to content

Commit f2f4a46

Browse files
nuthancnuthanc
committed
Update
1 parent 66a4afd commit f2f4a46

File tree

8 files changed

+336
-261
lines changed

8 files changed

+336
-261
lines changed

‎README.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,4 +360,31 @@
360360
* Each of the Items occupies **exactly the space it needs for its Contents**
361361
* Vertically in our case all the Items are as tall as the Tallest element(One item given height of 150px) of the Flex Item
362362
* Centering is very easy with align-items: center
363-
* **Default of align-items is stretch**
363+
* **Default of align-items is stretch**
364+
* Flex Container and Flex Items Properties
365+
![flex](img/flexbox.png)
366+
367+
### Spacing And Aligning Items
368+
369+
* Checkout the flexbox image
370+
* For adding space between flex-items without space-around, we can use margin
371+
* Or gap in the flex-container
372+
373+
### The flex property
374+
375+
* flex property shorthand for flex-grow, flex-shrink and flex-basis
376+
* Default for flex-grow is 0, flex-shrink is 1 and for flex-basis it's auto
377+
* flex-basis for width of the items and when the Content is larger, it fits the Content
378+
* Need to remove *gap* to see the flex-basis to what is being set
379+
* Flexbox shrinks an item to fit it in the Container even when the flex-basis is too high
380+
* Setting flex-shrink: 0(no), then allows it to have the width specified in flex-basis
381+
* flex-grow: 1(yes) for all elements, fills up the available space evenly between the remaining items
382+
* It doesn't have to be 1, it can be 1 and 2 for the other.
383+
* The one having 2 will be double the size of Available empty space than the other ones
384+
* Always use flex property
385+
386+
### Adding Flexbox to Our Project
387+
388+
* Manually giving article a flex-basis of 825px(which involves calculation) defeats the purpose of having flex-box
389+
* So we just use flex-grow to 1 to take up available space
390+
* Add flex: 1 to both the layouts to have equal width

‎img/flexbox.png

392 KB
Loading

‎starter/04-CSS-Layouts/css-grid.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
}
4444

4545
.container--2 {
46+
display: none;
4647
/* STARTER */
4748
font-family: sans-serif;
4849
background-color: black;

‎starter/04-CSS-Layouts/flexbox.html

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<style>
99
.el--1 {
1010
background-color: blueviolet;
11+
order: 1;
12+
flex-grow: 1;
1113
}
1214
.el--2 {
1315
background-color: orangered;
@@ -18,9 +20,11 @@
1820
}
1921
.el--4 {
2022
background-color: goldenrod;
23+
flex-grow: 2;
2124
}
2225
.el--5 {
2326
background-color: palevioletred;
27+
align-self: flex-end;
2428
}
2529
.el--6 {
2630
background-color: steelblue;
@@ -43,6 +47,13 @@
4347
display: flex;
4448
align-items: center;
4549
justify-content: center;
50+
/* gap: 30px; */
51+
}
52+
53+
.el {
54+
/* flex-basis: 200px; */
55+
flex-shrink: 0;
56+
/* flex-grow: 1; */
4657
}
4758
</style>
4859
</head>
@@ -53,9 +64,9 @@
5364
<div class="el el--3">CSS</div>
5465
<div class="el el--4">are</div>
5566
<div class="el el--5">amazing</div>
56-
<div class="el el--6">languages</div>
57-
<div class="el el--7">to</div>
58-
<div class="el el--8">learn</div>
67+
<!-- <div class="el el--6">languages</div> -->
68+
<!-- <div class="el el--7">to</div>
69+
<div class="el el--8">learn</div> -->
5970
</div>
6071
</body>
6172
</html>

‎starter/04-CSS-Layouts/index.html

Lines changed: 131 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -31,132 +31,143 @@ <h1>📘 The Code Magazine</h1>
3131
<!-- <div class="clear"></div> -->
3232
</header>
3333

34-
<article>
35-
<header class="post-header">
36-
<h2>The Basic Language of the Web: HTML</h2>
37-
38-
<img
39-
src="img/laura-jones.jpg"
40-
alt="Headshot of Laura Jones"
41-
height="50"
42-
width="50"
43-
class="author-img"
44-
/>
45-
46-
<p id="author" class="author">
47-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
48-
</p>
34+
<div class="row">
35+
<article>
36+
<header class="post-header">
37+
<h2>The Basic Language of the Web: HTML</h2>
38+
<div class="author-box">
39+
<img
40+
src="img/laura-jones.jpg"
41+
alt="Headshot of Laura Jones"
42+
height="50"
43+
width="50"
44+
class="author-img"
45+
/>
46+
47+
<p id="author" class="author">
48+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
49+
</p>
50+
</div>
4951

50-
<img
51-
src="img/post-img.jpg"
52-
alt="HTML code on a screen"
53-
width="500"
54-
height="200"
55-
class="post-img"
56-
/>
57-
<button>❤️ Like</button>
58-
</header>
59-
60-
<p>
61-
All modern websites and web applications are built using three
62-
<em>fundamental</em>
63-
technologies: HTML, CSS and JavaScript. These are the languages of the
64-
web.
65-
</p>
52+
<img
53+
src="img/post-img.jpg"
54+
alt="HTML code on a screen"
55+
width="500"
56+
height="200"
57+
class="post-img"
58+
/>
59+
<button>❤️ Like</button>
60+
</header>
61+
62+
<p>
63+
All modern websites and web applications are built using three
64+
<em>fundamental</em>
65+
technologies: HTML, CSS and JavaScript. These are the languages of
66+
the web.
67+
</p>
6668

67-
<p>
68-
In this post, let's focus on HTML. We will learn what HTML is all
69-
about, and why you too should learn it.
70-
</p>
69+
<p>
70+
In this post, let's focus on HTML. We will learn what HTML is all
71+
about, and why you too should learn it.
72+
</p>
7173

72-
<h3>What is HTML?</h3>
73-
<p>
74-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
75-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
76-
language that web developers use to structure and describe the content
77-
of a webpage (not a programming language).
78-
</p>
79-
<p>
80-
HTML consists of elements that describe different types of content:
81-
paragraphs, links, headings, images, video, etc. Web browsers
82-
understand HTML and render HTML code as websites.
83-
</p>
84-
<p>In HTML, each element is made up of 3 parts:</p>
85-
86-
<ol>
87-
<li class="first-li">The opening tag</li>
88-
<li>The closing tag</li>
89-
<li>The actual element</li>
90-
</ol>
91-
92-
<p>
93-
You can learn more at
94-
<a
95-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
96-
target="_blank"
97-
>MDN Web Docs</a
98-
>.
99-
</p>
74+
<h3>What is HTML?</h3>
75+
<p>
76+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
77+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
78+
language that web developers use to structure and describe the
79+
content of a webpage (not a programming language).
80+
</p>
81+
<p>
82+
HTML consists of elements that describe different types of content:
83+
paragraphs, links, headings, images, video, etc. Web browsers
84+
understand HTML and render HTML code as websites.
85+
</p>
86+
<p>In HTML, each element is made up of 3 parts:</p>
87+
88+
<ol>
89+
<li class="first-li">The opening tag</li>
90+
<li>The closing tag</li>
91+
<li>The actual element</li>
92+
</ol>
93+
94+
<p>
95+
You can learn more at
96+
<a
97+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
98+
target="_blank"
99+
>MDN Web Docs</a
100+
>.
101+
</p>
100102

101-
<h3>Why should you learn HTML?</h3>
103+
<h3>Why should you learn HTML?</h3>
102104

103-
<p>
104-
There are countless reasons for learning the fundamental language of
105-
the web. Here are 5 of them:
106-
</p>
105+
<p>
106+
There are countless reasons for learning the fundamental language of
107+
the web. Here are 5 of them:
108+
</p>
107109

108-
<ul>
109-
<li class="first-li">
110-
To be able to use the fundamental web dev language
111-
</li>
112-
<li>
113-
To hand-craft beautiful websites instead of relying on tools like
114-
Worpress or Wix
115-
</li>
116-
<li>To build web applications</li>
117-
<li>To impress friends</li>
118-
<li>To have fun 😃</li>
119-
</ul>
120-
121-
<p>Hopefully you learned something new here. See you next time!</p>
122-
</article>
123-
124-
<aside>
125-
<h4>Related posts</h4>
126-
127-
<ul class="related">
128-
<li>
129-
<img
130-
src="img/related-1.jpg"
131-
alt="Person programming"
132-
width="75"
133-
height="75"
134-
/>
135-
<a href="#">How to Learn Web Development</a>
136-
<p class="related-author">By Jonas Schmedtmann</p>
137-
</li>
138-
<li>
139-
<img
140-
src="img/related-2.jpg"
141-
alt="Lightning"
142-
width="75"
143-
height="75"
144-
/>
145-
<a href="#">The Unknown Powers of CSS</a>
146-
<p class="related-author">By Jim Dillon</p>
147-
</li>
148-
<li>
149-
<img
150-
src="img/related-3.jpg"
151-
alt="JavaScript code on a screen"
152-
width="75"
153-
height="75"
154-
/>
155-
<a href="#">Why JavaScript is Awesome</a>
156-
<p class="related-author">By Matilda</p>
157-
</li>
158-
</ul>
159-
</aside>
110+
<ul>
111+
<li class="first-li">
112+
To be able to use the fundamental web dev language
113+
</li>
114+
<li>
115+
To hand-craft beautiful websites instead of relying on tools like
116+
Worpress or Wix
117+
</li>
118+
<li>To build web applications</li>
119+
<li>To impress friends</li>
120+
<li>To have fun 😃</li>
121+
</ul>
122+
123+
<p>Hopefully you learned something new here. See you next time!</p>
124+
</article>
125+
126+
<aside>
127+
<h4>Related posts</h4>
128+
129+
<ul class="related">
130+
<li class="related-post">
131+
<img
132+
src="img/related-1.jpg"
133+
alt="Person programming"
134+
width="75"
135+
height="75"
136+
/>
137+
<div>
138+
<a href="#" class="related-link"
139+
>How to Learn Web Development</a
140+
>
141+
<p class="related-author">By Jonas Schmedtmann</p>
142+
</div>
143+
</li>
144+
<li class="related-post">
145+
<img
146+
src="img/related-2.jpg"
147+
alt="Lightning"
148+
width="75"
149+
height="75"
150+
/>
151+
<div>
152+
<a href="#" class="related-link">The Unknown Powers of CSS</a>
153+
<p class="related-author">By Jim Dillon</p>
154+
</div>
155+
</li>
156+
<li class="related-post">
157+
<img
158+
src="img/related-3.jpg"
159+
alt="JavaScript code on a screen"
160+
width="75"
161+
height="75"
162+
/>
163+
<div>
164+
<a href="#" class="related-link">Why JavaScript is Awesome</a>
165+
<p class="related-author">By Matilda</p>
166+
</div>
167+
</li>
168+
</ul>
169+
</aside>
170+
</div>
160171

161172
<footer>
162173
<p id="copyright" class="copyright text">

0 commit comments

Comments
 (0)