-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (105 loc) · 3.37 KB
/
index.html
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
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML-CSS</title>
<link href="./index.css" rel="stylesheet" />
</head>
<body>
<h1>Most remarkable projects done in this tut</h1>
<p>To come back to this page use the back button of your browser :)</p>
<a
href="./29-collaborate-with-uiux-designer/gym-landing-page/gym-landing-page.html"
>
Landing page for a gym
</a>
<a href="./28-has/color-picker/color-picker.html">
Theme changer with HTML/CSS
</a>
<a href="./28-has/resume/resume.html">Resume</a>
<a href="./examples/css/facebook/facebook.html">Facebook</a>
<a href="./22-fonts-colors-animations/practice/parallel.html">
Parallel gallery
</a>
<a href="./22-fonts-colors-animations/practice2/movie-banner.html">
Movie banner
</a>
<a href="./22-fonts-colors-animations/practice3/blog-gallery.html">
Blog gallery
</a>
<a href="./21-grid-box/practice/ishadeed-store/ishadeed-store.html">
myStore (design credit goes to iShadeed)
</a>
<a href="./21-grid-box/practice/playstore/index.html">
Google play store
</a>
<a href="./20-flex-box/practice/1/1.html">A weblog with flat design</a>
<a href="./20-flex-box/practice/2/index.html">Yet another gallery</a>
<a href="./20-flex-box/practice/2/live-coding/index.html">
Same as previous gallery with a slight difference
</a>
<a href="./20-flex-box/practice/3/calculator.html">Calculator</a>
<a href="./19-box-layout/logical-properties-example.html">
90 degree rotated (clockwise) weblog
</a>
<h1>Practice by doing these projects</h1>
<ul>
<li>
<a
href="https://github.com/kasir-barati/html-css/tree/main/28-has#practice-time"
>
Practice time -- <code>:has</code>
</a>
</li>
<li>
<a
href="https://github.com/kasir-barati/html-css/tree/main/28-has#practice-transform"
>
Practice <code>transform</code>
</a>
</li>
<li>
<a
href="https://github.com/kasir-barati/html-css/tree/main/27-nesting-layers-container#practice-time"
>
Practice time for <code>@container</code>, <code>@layer</code> and CSS
nesting
</a>
</li>
<li>
<a
href="https://github.com/kasir-barati/html-css/tree/main/22-fonts-colors-animations#practice-time"
>
Some practices you need to complete to master
<code>background</code> css property and some other
</a>
</li>
<li>
<a
href="https://github.com/kasir-barati/html-css/tree/main/22-fonts-colors-animations#practice-time-1"
>
Animations practice
</a>
</li>
<li>
<a
href="https://github.com/kasir-barati/html-css/tree/main/21-grid-box#practice"
>
Some practices related to grid
</a>
</li>
<li>
<a
href="https://github.com/kasir-barati/html-css/tree/main/20-flex-box#practice-time"
>
Some practices related to flex
</a>
</li>
</ul>
<p>
And you can literally practice even more by just going to websites such as
codepen, css-tricks, w3schools, etc.
</p>
</body>
</html>