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

Skip to content

Commit b44d32e

Browse files
coding4beginnercoding4beginner
committed
Changes
1 parent b62300b commit b44d32e

File tree

107 files changed

+1132
-14
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+1132
-14
lines changed

‎.devcontainer/Dockerfile

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ RUN echo $TZ > /etc/timezone
2222
FROM builder as base
2323

2424
RUN apt-get update
25-
RUN apt-get install -y tzdata \
26-
&& rm /etc/localtime \
27-
&& ln -snf /usr/share/zoneinfo/$TZ /etc/localtime \
28-
&& dpkg-reconfigure -f noninteractive tzdata \
25+
RUN apt install --yes tzdata \
26+
&& rm /etc/localtime \
27+
&& ln -snf /usr/share/zoneinfo/$TZ /etc/localtime \
28+
&& dpkg-reconfigure -f noninteractive tzdata \
2929
&& apt-get clean
3030

3131
RUN apt install --yes build-essential lsb-release curl sudo git vim unzip
32-
RUN apt install --assume-yes software-properties-common
32+
RUN apt install --yes software-properties-common
3333

3434
# -------------------------------------------------------------------------------------------------
3535
# WITH-USER
@@ -66,15 +66,34 @@ RUN npm install -g ijavascript
6666

6767
RUN echo 'export PATH="$HOME/bin:$PATH"\n' >>${USR_HOME}/.bashrc
6868

69+
# -------------------------------------------------------------------------------------------------
70+
# DOTNET
71+
# -------------------------------------------------------------------------------------------------
72+
FROM with-nodejs as with-dotnet
73+
74+
RUN apt-get update \
75+
&& apt install --yes dotnet-sdk-8.0
76+
77+
78+
# -------------------------------------------------------------------------------------------------
79+
# PHP
80+
# -------------------------------------------------------------------------------------------------
81+
FROM with-dotnet as with-php
82+
83+
RUN apt-get update \
84+
&& apt install --yes php libapache2-mod-php
85+
6986
# -------------------------------------------------------------------------------------------------
7087
# DJANGO
7188
EXPOSE 8000
7289

90+
# -------------------------------------------------------------------------------------------------
91+
FROM with-php as with-apps
7392

7493
# =================================================================================================
7594
# USER
7695
# =================================================================================================
77-
FROM with-nodejs as final
96+
FROM with-apps as final
7897

7998
USER user
8099

@@ -85,29 +104,24 @@ WORKDIR /workspace
85104
# PYTHON
86105
RUN python -m venv ${USR_HOME}/.venv
87106
RUN echo '\n\n. /home/user/.venv/bin/activate\n' >>${USR_HOME}/.bashrc
88-
89107
COPY requirements.txt requirements.txt
90108
RUN ${USR_HOME}/.venv/bin/pip install -r requirements.txt
91109

92110
# -------------------------------------------------------------------------------------------------
93111
# DENO
94112
RUN curl -fsSL https://deno.land/install.sh | sh
95-
96113
RUN echo '\n\n# Deno\nexport DENO_INSTALL="/home/user/.deno"\n' >>${USR_HOME}/.bashrc
97114
RUN echo 'export PATH="$DENO_INSTALL/bin:$PATH"\n' >>${USR_HOME}/.bashrc
98115

99-
100116
# -------------------------------------------------------------------------------------------------
101117
# JUPYTER
102118
RUN sudo npm install ijavascript
103-
RUN PATH=${USR_HOME}/.venv/bin:$PATH: ijsinstall --install=local
104-
119+
RUN PATH=${USR_HOME}/.venv/bin:$PATH: ijsinstall --install=local
105120
RUN PATH=${USR_HOME}/.venv/bin:${USR_HOME}/.deno/bin:$PATH: deno jupyter --install
106121

107122

108123
# -------------------------------------------------------------------------------------------------
109124
# VSCODE
110-
111125
RUN mkdir -p /workspace/.vscode
112126
COPY vscode/* /workspace/.vscode
113127

@@ -117,4 +131,11 @@ COPY bin/* ${USR_HOME}/bin
117131
RUN sudo chown -R ${USR_NAME}:${GRP_NAME} ${USR_HOME}/bin
118132
RUN sudo chmod +x ${USR_HOME}/bin/*
119133

134+
# -------------------------------------------------------------------------------------------------
135+
# CLEANUP
136+
# -------------------------------------------------------------------------------------------------
137+
RUN sudo apt update \
138+
&& sudo apt upgrade --yes
139+
140+
120141
CMD ["bash", "-l"]

‎.devcontainer/docker-compose.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ services:
1010
volumes:
1111
- ..:/HERE
1212
- ../Courses:/workspace/courses
13+
- ../Playground:/workspace/playground
1314
- ../Lessons:/workspace/lessons
1415
- ../Notebooks:/workspace/notebooks
1516
- ../Repositories:/workspace/repositories

‎Courses/Course-WebDeveloper

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit a8fbd4a1bd6f26d892aac42e061485299eceba65

‎Lessons/Week01/01 Basic Text Styling.md renamed to ‎Lessons/01/exercises/01 Basic Text Styling.md

File renamed without changes.

‎Lessons/01/exercises/01.css

Whitespace-only changes.

‎Lessons/Week01/01.html renamed to ‎Lessons/01/exercises/01.html

File renamed without changes.

‎Lessons/Week01/02 Centering Elements.md renamed to ‎Lessons/01/exercises/02 Centering Elements.md

File renamed without changes.

‎Lessons/01/exercises/02.css

Whitespace-only changes.

‎Lessons/Week01/02.html renamed to ‎Lessons/01/exercises/02.html

File renamed without changes.

‎Lessons/Week01/03 Styling Links.md renamed to ‎Lessons/01/exercises/03 Styling Links.md

File renamed without changes.

‎Lessons/01/exercises/03.css

Whitespace-only changes.

‎Lessons/Week01/03.html renamed to ‎Lessons/01/exercises/03.html

File renamed without changes.

‎Lessons/Week01/04 Creating a Sticky Footer.md renamed to ‎Lessons/01/exercises/04 Creating a Sticky Footer.md

File renamed without changes.

‎Lessons/01/exercises/04.css

Whitespace-only changes.

‎Lessons/Week01/04.html renamed to ‎Lessons/01/exercises/04.html

File renamed without changes.

‎Lessons/Week01/05 Using Flexbox for Navigation Bar.md renamed to ‎Lessons/01/exercises/05 Using Flexbox for Navigation Bar.md

File renamed without changes.

‎Lessons/01/exercises/05.css

Whitespace-only changes.

‎Lessons/Week01/05.html renamed to ‎Lessons/01/exercises/05.html

File renamed without changes.

‎Lessons/Week01/06 Custom Checkboxes.md renamed to ‎Lessons/01/exercises/06 Custom Checkboxes.md

File renamed without changes.

‎Lessons/01/exercises/06.css

Whitespace-only changes.

‎Lessons/Week01/06.html renamed to ‎Lessons/01/exercises/06.html

File renamed without changes.

‎Lessons/Week01/07 Simple Dropdown Menu.md renamed to ‎Lessons/01/exercises/07 Simple Dropdown Menu.md

File renamed without changes.

‎Lessons/01/exercises/07.css

Whitespace-only changes.

‎Lessons/Week01/07.html renamed to ‎Lessons/01/exercises/07.html

File renamed without changes.

‎Lessons/Week01/08 Zebra Striped Table.md renamed to ‎Lessons/01/exercises/08 Zebra Striped Table.md

File renamed without changes.

‎Lessons/01/exercises/08.css

Whitespace-only changes.

‎Lessons/Week01/08.html renamed to ‎Lessons/01/exercises/08.html

File renamed without changes.

‎Lessons/Week01/09 Fullscreen Background Image.md renamed to ‎Lessons/01/exercises/09 Fullscreen Background Image.md

File renamed without changes.

‎Lessons/01/exercises/09.css

Whitespace-only changes.

‎Lessons/Week01/09.html renamed to ‎Lessons/01/exercises/09.html

File renamed without changes.

‎Lessons/Week01/09.webp renamed to ‎Lessons/01/exercises/09.webp

File renamed without changes.

‎Lessons/Week01/EXERCISES.md renamed to ‎Lessons/01/exercises/EXERCISES.md

File renamed without changes.

‎Lessons/Week01/default.css renamed to ‎Lessons/01/exercises/default.css

File renamed without changes.

‎Lessons/01/solutions/01 Basic Text Styling.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+
```

‎Lessons/Week01/01.css renamed to ‎Lessons/01/solutions/01.css

File renamed without changes.

‎Lessons/01/solutions/01.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" type="text/css" href="default.css" />
4+
<link rel="stylesheet" type="text/css" href="01.css" />
5+
</head>
6+
7+
<body>
8+
<div class="navigation">
9+
<a class="selected" href="01.html">01</a>
10+
<a href="02.html">02</a>
11+
<a href="03.html">03</a>
12+
<a href="04.html">04</a>
13+
<a href="05.html">05</a>
14+
<a href="06.html">06</a>
15+
<a href="07.html">07</a>
16+
<a href="08.html">08</a>
17+
<a href="09.html">09</a>
18+
</div>
19+
20+
<div class="exercise">
21+
<h1>Basic Text Styling</h1>
22+
Change the color and size of paragraph text.
23+
</div>
24+
25+
<div class="solution">
26+
<p>This is a sample text.</p>
27+
</div>
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)