🎨
CC10045 min
Day 18
Styling with Tailwind
Let's make your site beautiful!
Today's Lesson
Tailwind lets you style by adding classes - no CSS files needed. Instead of writing `font-size: 24px`, you write `text-2xl`. It's faster and keeps everything in one place.
Today's Tasks
- 1Style your Header to look professional
- 2Add a hero section to your homepage
- 3Make it look good on both desktop and mobile
Prompt to Use
Make my portfolio site look professional: 1. Style the Header with a nice background and proper spacing 2. Create a hero section on the homepage with a headline, subtitle, and call-to-action button 3. Make sure it looks good on mobile too (responsive) Use Tailwind CSS for all styling.
Expected Outcome
A styled, responsive homepage.
New Terms
- Tailwind
- Utility Classes
- Responsive
- Mobile-first
Pro Tip
Tailwind classes like `md:` and `lg:` change styles at different screen sizes. `md:text-2xl` means "larger text on medium screens and up".
Coming Tomorrow
We'll add a contact form.
P.S. Design doesn't have to be hard. Tailwind makes it accessible to everyone.
Your Study Progress
17%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
Day 18 of 100
Today's Tasks
0/3