Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit eac958a

Browse files
coding4beginnercoding4beginner
committed
-
1 parent 1d12675 commit eac958a

38 files changed

+1377
-4
lines changed

‎.devcontainer/devcontainer.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "devenv-4girls-python",
2+
"name": "devenv-codetogether",
33
"dockerComposeFile": [
44
"docker-compose.yml"
55
],

‎.devcontainer/docker-compose.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ services:
66
context: .
77
dockerfile: Dockerfile
88

9-
container_name: devenv-coding4girls
9+
container_name: devenv-codetogether
1010
volumes:
1111
- ..:/HERE
1212
- ../Courses:/workspace/courses
13+
- ../Lessons:/workspace/lessons
1314
- ../Notebooks:/workspace/notebooks
1415
- ../Repositories:/workspace/repositories
1516

‎.vscode/extensions.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
"ms-python.vscode-pylance",
1010
"ms-toolsai.jupyter-keymap",
1111
"ms-vscode-remote.remote-containers",
12+
"ms-vsliveshare.vsliveshare",
1213
"mtxr.sqltools",
1314
"onatm.open-in-new-window",
14-
"peterschmalfeldt.explorer-exclude",
15-
15+
"peterschmalfeldt.explorer-exclude"
1616
]
1717
}

‎Lessons/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Repositories.CSS
2+
Repositories.JS

‎Lessons/EXERCISES.md

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
# CSS Exercises with Solutions
2+
3+
## Basic Text Styling
4+
5+
Change the color and size of paragraph text.
6+
7+
```html
8+
<p>This is a sample text.</p>
9+
```
10+
11+
Solution:
12+
13+
```css
14+
p {
15+
color: red;
16+
font-size: 20px;
17+
}
18+
```
19+
20+
## Centering Elements
21+
22+
Center a div horizontally and vertically.
23+
24+
```html
25+
<div class="centered">Center me!</div>
26+
```
27+
28+
Solution:
29+
30+
```css
31+
.centered {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
height: 100vh;
36+
}
37+
```
38+
39+
## Styling Links
40+
41+
Change the color of links on hover.
42+
43+
```html
44+
<a href="#">Hover over me!</a>
45+
```
46+
47+
Solution:
48+
49+
```css
50+
a:hover {
51+
color: green;
52+
}
53+
```
54+
55+
## Creating a Sticky Footer
56+
57+
Create a footer that sticks to the bottom of the viewport.
58+
59+
```html
60+
<footer class="sticky-footer">I'm a sticky footer!</footer>
61+
```
62+
63+
Solution:
64+
65+
```css
66+
.sticky-footer {
67+
position: fixed;
68+
bottom: 0;
69+
width: 100%;
70+
background-color: #ccc;
71+
}
72+
```
73+
74+
## Using Flexbox for Navigation Bar
75+
76+
Create a horizontal navigation bar using Flexbox.
77+
78+
```html
79+
<nav>
80+
<a href="#">Home</a>
81+
<a href="#">About</a>
82+
<a href="#">Services</a>
83+
<a href="#">Contact</a>
84+
</nav>
85+
```
86+
87+
Solution:
88+
89+
```css
90+
nav {
91+
display: flex;
92+
justify-content: space-around;
93+
background-color: #333;
94+
padding: 10px 0;
95+
}
96+
97+
nav a {
98+
color: white;
99+
text-decoration: none;
100+
}
101+
```
102+
103+
## Styling Forms
104+
105+
Style a simple login form.
106+
107+
```html
108+
<form>
109+
<label for="username">Username:</label>
110+
<input type="text" id="username" name="username">
111+
<label for="password">Password:</label>
112+
<input type="password" id="password" name="password">
113+
<button type="submit">Login</button>
114+
</form>
115+
```
116+
117+
Solution:
118+
119+
```css
120+
form {
121+
display: grid;
122+
gap: 10px;
123+
width: 200px;
124+
margin: auto;
125+
}
126+
127+
input, button {
128+
width: 100%;
129+
}
130+
```
131+
132+
## Custom Checkboxes
133+
134+
Style custom checkboxes.
135+
136+
```html
137+
<label class="custom-checkbox">
138+
<input type="checkbox">
139+
<span>Check me</span>
140+
</label>
141+
```
142+
143+
Solution:
144+
145+
```css
146+
.custom-checkbox input {
147+
display: none;
148+
}
149+
150+
.custom-checkbox span {
151+
padding: 5px;
152+
border: 1px solid #ddd;
153+
display: inline-block;
154+
}
155+
156+
.custom-checkbox input:checked + span {
157+
background-color: #f00;
158+
color: #fff;
159+
}
160+
```
161+
162+
## Simple Dropdown Menu
163+
164+
Create a simple CSS-only dropdown menu.
165+
166+
```html
167+
<div class="dropdown">
168+
<button>Menu</button>
169+
<div class="dropdown-content">
170+
<a href="#">Link 1</a>
171+
<a href="#">Link 2</a>
172+
<a href="#">Link 3</a>
173+
</div>
174+
</div>
175+
```
176+
177+
Solution:
178+
179+
```css
180+
.dropdown {
181+
position: relative;
182+
display: inline-block;
183+
}
184+
185+
.dropdown-content {
186+
display: none;
187+
position: absolute;
188+
background-color: #f9f9f9;
189+
min-width: 160px;
190+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
191+
z-index: 1;
192+
}
193+
194+
.dropdown:hover .dropdown-content {
195+
display: block;
196+
}
197+
```
198+
199+
## Zebra Striped Table
200+
201+
Create a table with zebra-striped rows.
202+
203+
```html
204+
<table>
205+
<tr>
206+
<td>Row 1, Cell 1</td>
207+
<td>Row 1, Cell 2</td>
208+
</tr>
209+
<tr>
210+
<td>Row 2, Cell 1</td>
211+
<td>Row 2, Cell 2</td>
212+
</tr>
213+
<tr>
214+
<td>Row 3, Cell 1</td>
215+
<td>Row 3, Cell 2</td>
216+
</tr>
217+
</table>
218+
```
219+
220+
Solution:
221+
222+
```css
223+
tr:nth-child(odd) {
224+
background-color: #f2f2f2;
225+
}
226+
```
227+
228+
## Fullscreen Background Image
229+
230+
Set a fullscreen background image that covers the entire viewport.
231+
232+
```html
233+
<div class="fullscreen-background"></div>
234+
```
235+
236+
Solution:
237+
238+
```css
239+
.fullscreen-background {
240+
background-image: url("your-image.jpg");
241+
height: 100vh;
242+
background-position: center;
243+
background-repeat: no-repeat;
244+
background-size: cover;
245+
}
246+
```

0 commit comments

Comments
 (0)