Skip to content

Commit a45ab12

Browse files
harigopalharigopal
committed
Add more lessons
1 parent 3f72b08 commit a45ab12

File tree

15 files changed

+450
-8
lines changed

15 files changed

+450
-8
lines changed

‎style-matters/introduction-to-tailwind-css/README.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
In the previous lesson, we added classes to a CSS file, and used them in the HTML file.
2+
3+
I'd mentioned that this is helpful in avoiding repetition in our code.
4+
5+
Now in most courses that you might have seen before, you would be taught how to write more CSS, what more of these properties do, etc.
6+
7+
That would take a lot of time. Also, there are plenty of resources online that can teach you all about the different CSS properties that exist.
8+
9+
So instead of that, we're going to jump ahead a bit, and show you what a lot of professional developers do these days - which is to use a CSS library that makes styling much simpler.
10+
11+
We're going to include a CSS library called Tailwind in our web page.
12+
13+
_ACTION: Show https://tailwindcss.com_
14+
15+
One of the ways we can include Tailwind's CSS in our page is to simply put a link to a hosted version of CSS into our HTML.
16+
17+
Let's actually start by removing all CSS from this page, and see how it looks without any additional styling. I'll keep the image's styling in-place, because it'll be too large without it.
18+
19+
_ACTION: Remove all styling except the one on the image._
20+
21+
Now, when we reload the page, we can see that by default, the first-level heading is the biggest element - it's bold and big. The second-level heading is still bold, but smaller, and the regular paragraph text is smaller still.
22+
23+
Let's try and introduce the Tailwind CSS library by copying a link to the entire Tailwind CSS library and including it in our page.
24+
25+
_ACTION: Copy-paste from https://tailwindcss.com/docs/installation#using-tailwind-via-cdn_
26+
27+
```html
28+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
29+
```
30+
31+
Notice how the different level headings, and the paragraphs all look the same now.
32+
33+
One of the things that CSS libraries like Tailwind do is to _reset_ the default styling of HTML elements to a blank slate. This makes it much easier to have identical styling on all web browsers.
34+
35+
I'm not going to go into detail about this particular aspect. If you're interested, you can find more information about this below this video.
36+
37+
So, at this point, you might be wondering what exactly Tailwind has introduced, besides making everything look very _bland_.
38+
39+
What Tailwind has added are CSS classes. A _very_ large number of CSS classes that let you do a wide variety of things.
40+
41+
For example, to add some color back to this first heading, I can add a few classes:
42+
43+
```html
44+
<h1 class="font-bold bg-green-400 text-xl underline italic">
45+
```
46+
47+
When we refresh the page, we can see that these classes I just added are changing how the element looks. The names of classes are also somewhat self-explanatory, making it easy to both write and understand what the element is going to look like.
48+
49+
Now, this looks about right. But let's try to make it better. I think that the heading isn't big enough. I'd also like to add some space between the text, and the edges of the screen. And let's lose that underline.
50+
51+
```html
52+
<h1 class="font-bold bg-green-400 text-3xl italic p-4">
53+
```
54+
55+
There, that looks much better.
56+
57+
In the next lesson, I'm going to demonstrate how we can use Tailwind to further improve how this page looks, and talk a bit about how you can learn to use Tailwind properly.

‎style-matters/introduction-to-tailwind-css/_templates/index.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.my-heading {
2+
background-color: chartreuse;
3+
text-decoration: underline;
4+
}
5+
6+
.emphasis {
7+
font-style: italic;
8+
}

‎style-matters/introduction-to-tailwind-css/_templates/index.end.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
2+
3+
<h1 class="font-bold bg-green-400 text-3xl italic p-4">
4+
This is my first webpage, and its title.
5+
</h1>
6+
7+
<h2>A story about the time when I visited a backwaters.</h2>
8+
9+
<img style="width: 600px" src="backwaters.jpg" alt="A scenic backwater image" />
10+
11+
<p>Last year, I visited a backwater, before everything changed.</p>
12+
13+
<p>
14+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non
15+
volutpat turpis. Fusce lectus orci, sodales vitae rutrum et, accumsan ut urna.
16+
Cras leo est, bibendum in faucibus in, efficitur commodo justo. Nam accumsan
17+
dolor et dui ullamcorper, a porta tellus ultrices. Sed iaculis auctor
18+
tincidunt. Quisque suscipit sit amet tortor in aliquet. Fusce in lacus tortor.
19+
Nam convallis mollis gravida. Etiam metus justo, convallis nec lacus id,
20+
sagittis auctor mi. Duis urna ipsum, malesuada a dui sit amet, elementum
21+
fermentum mauris. Vivamus placerat massa elementum, pharetra massa in,
22+
imperdiet sapien.
23+
</p>
24+
25+
<p>
26+
Vestibulum scelerisque felis et lorem maximus, et sollicitudin felis finibus.
27+
In risus urna, congue sed felis eget, bibendum porta libero. Curabitur
28+
vulputate vel magna nec faucibus. Etiam placerat volutpat elit vel
29+
scelerisque. Ut vel imperdiet dolor. Etiam sit amet finibus nunc. Nulla quis
30+
blandit magna, et hendrerit arcu. Nam elit leo, lacinia a ex a, tempor mattis
31+
justo. Vestibulum quis maximus ante. Praesent posuere velit nulla, et semper
32+
odio facilisis et. Vivamus non aliquet magna. Curabitur non tristique lectus.
33+
Cras tristique malesuada risus, vel fermentum eros aliquet vitae. Curabitur
34+
sapien tortor, vehicula id viverra eget, tincidunt ut purus.
35+
</p>

‎style-matters/introduction-to-tailwind-css/_templates/index.start.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<link rel="stylesheet" href="index.css" />
2+
3+
<h1 class="my-heading emphasis">This is my first webpage, and its title.</h1>
4+
5+
<h2>A story about the time when I visited a backwaters.</h2>
6+
7+
<img style="width: 600px" src="backwaters.jpg" alt="A scenic backwater image" />
8+
9+
<p>Last year, I visited a backwater, before everything changed.</p>
10+
11+
<p>
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non
13+
volutpat turpis. Fusce lectus orci, sodales vitae rutrum et, accumsan ut urna.
14+
Cras leo est, bibendum in faucibus in, efficitur commodo justo. Nam accumsan
15+
dolor et dui ullamcorper, a porta tellus ultrices. Sed iaculis auctor
16+
tincidunt. Quisque suscipit sit amet tortor in aliquet. Fusce in lacus tortor.
17+
Nam convallis mollis gravida. Etiam metus justo, convallis nec lacus id,
18+
sagittis auctor mi. Duis urna ipsum, malesuada a dui sit amet, elementum
19+
fermentum mauris. Vivamus placerat massa elementum, pharetra massa in,
20+
imperdiet sapien.
21+
</p>
22+
23+
<p>
24+
Vestibulum scelerisque felis et lorem maximus, et sollicitudin felis finibus.
25+
In risus urna, congue sed felis eget, bibendum porta libero. Curabitur
26+
vulputate vel magna nec faucibus. Etiam placerat volutpat elit vel
27+
scelerisque. Ut vel imperdiet dolor. Etiam sit amet finibus nunc. Nulla quis
28+
blandit magna, et hendrerit arcu. Nam elit leo, lacinia a ex a, tempor mattis
29+
justo. Vestibulum quis maximus ante. Praesent posuere velit nulla, et semper
30+
odio facilisis et. Vivamus non aliquet magna. Curabitur non tristique lectus.
31+
Cras tristique malesuada risus, vel fermentum eros aliquet vitae. Curabitur
32+
sapien tortor, vehicula id viverra eget, tincidunt ut purus.
33+
</p>

‎style-matters/introduction-to-tailwind-css/index.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.my-heading {
2+
background-color: chartreuse;
3+
text-decoration: underline;
4+
}
5+
6+
.emphasis {
7+
font-style: italic;
8+
}

‎style-matters/introduction-to-tailwind-css/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<link
2+
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
3+
rel="stylesheet"
4+
/>
5+
6+
<h1 class="font-bold bg-green-400 text-3xl italic p-4">
7+
This is my first webpage, and its title.
8+
</h1>
9+
10+
<h2>A story about the time when I visited a backwaters.</h2>
11+
12+
<img style="width: 600px" src="backwaters.jpg" alt="A scenic backwater image" />
13+
14+
<p>Last year, I visited a backwater, before everything changed.</p>
15+
16+
<p>
17+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non
18+
volutpat turpis. Fusce lectus orci, sodales vitae rutrum et, accumsan ut urna.
19+
Cras leo est, bibendum in faucibus in, efficitur commodo justo. Nam accumsan
20+
dolor et dui ullamcorper, a porta tellus ultrices. Sed iaculis auctor
21+
tincidunt. Quisque suscipit sit amet tortor in aliquet. Fusce in lacus tortor.
22+
Nam convallis mollis gravida. Etiam metus justo, convallis nec lacus id,
23+
sagittis auctor mi. Duis urna ipsum, malesuada a dui sit amet, elementum
24+
fermentum mauris. Vivamus placerat massa elementum, pharetra massa in,
25+
imperdiet sapien.
26+
</p>
27+
28+
<p>
29+
Vestibulum scelerisque felis et lorem maximus, et sollicitudin felis finibus.
30+
In risus urna, congue sed felis eget, bibendum porta libero. Curabitur
31+
vulputate vel magna nec faucibus. Etiam placerat volutpat elit vel
32+
scelerisque. Ut vel imperdiet dolor. Etiam sit amet finibus nunc. Nulla quis
33+
blandit magna, et hendrerit arcu. Nam elit leo, lacinia a ex a, tempor mattis
34+
justo. Vestibulum quis maximus ante. Praesent posuere velit nulla, et semper
35+
odio facilisis et. Vivamus non aliquet magna. Curabitur non tristique lectus.
36+
Cras tristique malesuada risus, vel fermentum eros aliquet vitae. Curabitur
37+
sapien tortor, vehicula id viverra eget, tincidunt ut purus.
38+
</p>

‎style-matters/styling-html-using-css-files/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,6 @@ We can also add multiple classes to an element. For example, let's add another c
6161

6262
If we reload the page, we can see that the new styling has been applied.
6363

64-
The great thing about CSS is that we can re-use the styling for many different properties. This lets us avoid repeating ourselves.
64+
When writing CSS like this, we are able to re-use the same styling for many different elements. This lets us avoid repeating ourselves, when we write code.
6565

66-
In the next lesson, we'll actually add a library called Tailwind, that adds a lot of very useful CSS classes that will let us build a good looking UI very quickly.
66+
In the next lesson, we'll actually add a library called Tailwind, that adds a lot of very useful CSS classes. It's something that will let us build a good looking UI very quickly.

‎style-matters/styling-html-using-css-files/_templates/index.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.my-heading {
2+
background-color: chartreuse;
3+
text-decoration: underline;
4+
}
5+
6+
.emphasis {
7+
font-style: italic;
8+
}

‎style-matters/styling-html-using-css-files/_templates/index.end.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<link rel="stylesheet" href="index.css">
2+
3+
<h1 class="my-heading emphasis">
4+
This is my first webpage, and its title.
5+
</h1>
6+
7+
<h2>A story about the time when I visited a backwaters.</h2>
8+
9+
<img style="width: 600px" src="backwaters.jpg" alt="A scenic backwater image" />
10+
11+
<p>Last year, I visited a backwater, before everything changed.</p>
12+
13+
<p>
14+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non volutpat turpis. Fusce lectus orci, sodales
15+
vitae rutrum et, accumsan ut urna. Cras leo est, bibendum in faucibus in, efficitur commodo justo. Nam accumsan
16+
dolor et dui ullamcorper, a porta tellus ultrices. Sed iaculis auctor tincidunt. Quisque suscipit sit amet tortor in
17+
aliquet. Fusce in lacus tortor. Nam convallis mollis gravida. Etiam metus justo, convallis nec lacus id, sagittis
18+
auctor mi. Duis urna ipsum, malesuada a dui sit amet, elementum fermentum mauris. Vivamus placerat massa elementum,
19+
pharetra massa in, imperdiet sapien.
20+
</p>
21+
22+
<p>
23+
Vestibulum scelerisque felis et lorem maximus, et sollicitudin felis finibus. In risus urna, congue sed felis eget,
24+
bibendum porta libero. Curabitur vulputate vel magna nec faucibus. Etiam placerat volutpat elit vel scelerisque. Ut
25+
vel imperdiet dolor. Etiam sit amet finibus nunc. Nulla quis blandit magna, et hendrerit arcu. Nam elit leo, lacinia
26+
a ex a, tempor mattis justo. Vestibulum quis maximus ante. Praesent posuere velit nulla, et semper odio facilisis
27+
et. Vivamus non aliquet magna. Curabitur non tristique lectus. Cras tristique malesuada risus, vel fermentum eros
28+
aliquet vitae. Curabitur sapien tortor, vehicula id viverra eget, tincidunt ut purus.
29+
</p>

‎style-matters/styling-html-using-css-files/_templates/index.start.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<h1 style="background-color: chartreuse;">
2+
This is my first webpage, and its title.
3+
</h1>
4+
5+
<h2>A story about the time when I visited a backwaters.</h2>
6+
7+
<img style="width: 600px" src="backwaters.jpg" alt="A scenic backwater image" />
8+
9+
<p>Last year, I visited a backwater, before everything changed.</p>
10+
11+
<p>
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non volutpat turpis. Fusce lectus orci, sodales
13+
vitae rutrum et, accumsan ut urna. Cras leo est, bibendum in faucibus in, efficitur commodo justo. Nam accumsan
14+
dolor et dui ullamcorper, a porta tellus ultrices. Sed iaculis auctor tincidunt. Quisque suscipit sit amet tortor in
15+
aliquet. Fusce in lacus tortor. Nam convallis mollis gravida. Etiam metus justo, convallis nec lacus id, sagittis
16+
auctor mi. Duis urna ipsum, malesuada a dui sit amet, elementum fermentum mauris. Vivamus placerat massa elementum,
17+
pharetra massa in, imperdiet sapien.
18+
</p>
19+
20+
<p>
21+
Vestibulum scelerisque felis et lorem maximus, et sollicitudin felis finibus. In risus urna, congue sed felis eget,
22+
bibendum porta libero. Curabitur vulputate vel magna nec faucibus. Etiam placerat volutpat elit vel scelerisque. Ut
23+
vel imperdiet dolor. Etiam sit amet finibus nunc. Nulla quis blandit magna, et hendrerit arcu. Nam elit leo, lacinia
24+
a ex a, tempor mattis justo. Vestibulum quis maximus ante. Praesent posuere velit nulla, et semper odio facilisis
25+
et. Vivamus non aliquet magna. Curabitur non tristique lectus. Cras tristique malesuada risus, vel fermentum eros
26+
aliquet vitae. Curabitur sapien tortor, vehicula id viverra eget, tincidunt ut purus.
27+
</p>

‎style-matters/styling-html-using-css-files/index.html

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,26 @@ <h1 class="my-heading emphasis">
44
This is my first webpage, and its title.
55
</h1>
66

7-
<h2>This is my second heading.</h2>
8-
9-
<p>This is my paragraph.</p>
7+
<h2>A story about the time when I visited a backwaters.</h2>
108

119
<img style="width: 600px" src="backwaters.jpg" alt="A scenic backwater image" />
1210

13-
<h2>A story about the time when I visited a backwaters.</h2>
14-
1511
<p>Last year, I visited a backwater, before everything changed.</p>
1612

17-
<p>Last year, I visited a backwater, before everything changed.</p>
13+
<p>
14+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non volutpat turpis. Fusce lectus orci, sodales
15+
vitae rutrum et, accumsan ut urna. Cras leo est, bibendum in faucibus in, efficitur commodo justo. Nam accumsan
16+
dolor et dui ullamcorper, a porta tellus ultrices. Sed iaculis auctor tincidunt. Quisque suscipit sit amet tortor in
17+
aliquet. Fusce in lacus tortor. Nam convallis mollis gravida. Etiam metus justo, convallis nec lacus id, sagittis
18+
auctor mi. Duis urna ipsum, malesuada a dui sit amet, elementum fermentum mauris. Vivamus placerat massa elementum,
19+
pharetra massa in, imperdiet sapien.
20+
</p>
21+
22+
<p>
23+
Vestibulum scelerisque felis et lorem maximus, et sollicitudin felis finibus. In risus urna, congue sed felis eget,
24+
bibendum porta libero. Curabitur vulputate vel magna nec faucibus. Etiam placerat volutpat elit vel scelerisque. Ut
25+
vel imperdiet dolor. Etiam sit amet finibus nunc. Nulla quis blandit magna, et hendrerit arcu. Nam elit leo, lacinia
26+
a ex a, tempor mattis justo. Vestibulum quis maximus ante. Praesent posuere velit nulla, et semper odio facilisis
27+
et. Vivamus non aliquet magna. Curabitur non tristique lectus. Cras tristique malesuada risus, vel fermentum eros
28+
aliquet vitae. Curabitur sapien tortor, vehicula id viverra eget, tincidunt ut purus.
29+
</p>

‎style-matters/working-with-tailwind/README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
In the last lesson we added the Tailwind CSS library and made some changes to how the heading at the top looks.
2+
3+
Let me quickly make some more improvements:
4+
5+
```html
6+
<h2 class="font-bold text-xl my-2">A story about the time when I visited a backwaters.</h2>
7+
8+
<img class="float-left max-w-auto md:max-w-lg md:mr-4" src="backwaters.jpg" alt="A scenic backwater image" />
9+
10+
<p class="p-2">
11+
```
12+
13+
All right. I think that looks better.
14+
15+
The reason I'm able to write these classes quickly is because I already what classes Tailwind makes available.
16+
17+
If you didn't know beforehand, how would you find out?
18+
19+
Now something that's still wrong with this page is that the content goes all the way to the edges, and it doesn't look right at different browser widths.
20+
21+
_ACTION: Resize the browser and show effect._
22+
23+
If we look at a well-designed website like `reddit.com`, we can see how it changes its layout based on the width of the page.
24+
25+
_ACTION: Resize the browser on reddit.com and show effect._
26+
27+
We can get started with doing something similar with Tailwind very easily.
28+
29+
One of the best things about using a library like Tailwind is the excellent documentation that it has that shows you exactly what all of its classes do.
30+
31+
_ACTION: View page https://tailwindcss.com/docs_
32+
33+
The feature we're looking for is `container`.
34+
35+
_ACTION: View page https://tailwindcss.com/docs/container_
36+
37+
This documentation tells us that what we should probably do, is wrap the content we want to center in a `div` that has these classes. Let's copy that, and paste it into our code.
38+
39+
I'll also add some margin to the top to distance it from the first heading.
40+
41+
```html
42+
<div class="container mx-auto px-4 mt-4">
43+
<!-- ... -->
44+
</div>
45+
```
46+
47+
Watch what happens when I change the width of the browser window.
48+
49+
Using a container div like this is one of ways that we can implement responsive styling - this means having a web page look different, or more optimized for different devices that have different screen sizes.ß
50+
51+
In this lesson, we've learned how using a CSS library like Tailwind can quickly let you add styling to a webpage.
52+
53+
Yes, learning all of it's features will take some time, but it's worth learning your way around at least one such library.

‎style-matters/working-with-tailwind/_templates/index.end.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<link
2+
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
3+
rel="stylesheet"
4+
/>
5+
6+
<h1 class="font-bold bg-green-400 text-3xl italic p-4">
7+
This is my first webpage, and its title.
8+
</h1>
9+
10+
<div class="container mx-auto px-4 mt-4">
11+
<h2 class="font-bold text-xl my-2">
12+
A story about the time when I visited a backwaters.
13+
</h2>
14+
15+
<img
16+
class="float-left max-w-auto md:max-w-lg md:mr-4"
17+
src="backwaters.jpg"
18+
alt="A scenic backwater image"
19+
/>
20+
21+
<p class="p-2">
22+
Last year, I visited a backwater, before everything changed.
23+
</p>
24+
25+
<p class="p-2">
26+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non
27+
volutpat turpis. Fusce lectus orci, sodales vitae rutrum et, accumsan ut
28+
urna. Cras leo est, bibendum in faucibus in, efficitur commodo justo. Nam
29+
accumsan dolor et dui ullamcorper, a porta tellus ultrices. Sed iaculis
30+
auctor tincidunt. Quisque suscipit sit amet tortor in aliquet. Fusce in
31+
lacus tortor. Nam convallis mollis gravida. Etiam metus justo, convallis nec
32+
lacus id, sagittis auctor mi. Duis urna ipsum, malesuada a dui sit amet,
33+
elementum fermentum mauris. Vivamus placerat massa elementum, pharetra massa
34+
in, imperdiet sapien.
35+
</p>
36+
37+
<p class="p-2">
38+
Vestibulum scelerisque felis et lorem maximus, et sollicitudin felis
39+
finibus. In risus urna, congue sed felis eget, bibendum porta libero.
40+
Curabitur vulputate vel magna nec faucibus. Etiam placerat volutpat elit vel
41+
scelerisque. Ut vel imperdiet dolor. Etiam sit amet finibus nunc. Nulla quis
42+
blandit magna, et hendrerit arcu. Nam elit leo, lacinia a ex a, tempor
43+
mattis justo. Vestibulum quis maximus ante. Praesent posuere velit nulla, et
44+
semper odio facilisis et. Vivamus non aliquet magna. Curabitur non tristique
45+
lectus. Cras tristique malesuada risus, vel fermentum eros aliquet vitae.
46+
Curabitur sapien tortor, vehicula id viverra eget, tincidunt ut purus.
47+
</p>
48+
</div>

0 commit comments

Comments
 (0)