Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit b579ed9

Browse files
PB2204PB2204
committedJul 17, 2023
Lesson-01
0 parents  commit b579ed9

File tree

10 files changed

+637
-0
lines changed

10 files changed

+637
-0
lines changed
 

‎images/arrow.png

70.6 KB
Loading

‎images/code.png

8.44 KB
Loading

‎images/dgm-1.png

131 KB
Loading

‎images/dgm-2.png

115 KB
Loading

‎images/dgm-3.png

84.9 KB
Loading

‎images/dsa-logo.png

30.9 KB
Loading

‎images/menu.png

75.4 KB
Loading

‎index.html

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="shortcut icon" href="images/dsa-logo.png" type="image/x-icon" />
8+
<link rel="stylesheet" href="style.css" />
9+
<title>Learn DSA Using Python || Code Explorer</title>
10+
</head>
11+
12+
<body class="body">
13+
<marquee>Learn DSA Using Python || Chapter 01 - Introduction || Code
14+
Explorer</marquee>
15+
<div class="main-body">
16+
<div class="left">
17+
<a href="https://explorecode.newsgoogle.org">
18+
<div class="logo"><img src="images/code.png" alt="" height="100px" width="100px" class="logo-img" />
19+
<div class="logo-div"><span class="code">Code</span><span class="explorer">Explorer</span></div>
20+
<span class="dropdown"></span>
21+
</div>
22+
</a>
23+
<hr class="one" />
24+
<div class="hide-on-small-screen">
25+
<span class="contents">Contents</span>
26+
<hr class="two" />
27+
<ul type="none">
28+
<li>
29+
<img src="images/arrow.png" alt="" class="arrow-img" />
30+
<a href="https://youtube.com">
31+
<span class="lesson">Lesson 1 / Intro</span>
32+
</a>
33+
</li>
34+
<hr class="two" />
35+
<li>
36+
<img src="images/arrow.png" alt="" class="arrow-img" />
37+
<a href="https://youtube.com">
38+
<span class="lesson">Lesson 2 / Revision</span>
39+
</a>
40+
</li>
41+
<hr class="two" />
42+
<li>
43+
<img src="images/arrow.png" alt="" class="arrow-img" />
44+
<a href="https://youtube.com">
45+
<span class="lesson">Lesson 3 / Testing</span>
46+
</a>
47+
</li>
48+
<hr class="two" />
49+
<li>
50+
<img src="images/arrow.png" alt="" class="arrow-img" />
51+
<a href="https://youtube.com">
52+
<span class="lesson">Lesson 4 / Output</span>
53+
</a>
54+
</li>
55+
<hr class="two" />
56+
<li>
57+
<img src="images/arrow.png" alt="" class="arrow-img" />
58+
<a href="https://youtube.com">
59+
<span class="lesson">Lesson 1 / Intro</span>
60+
</a>
61+
</li>
62+
<hr class="two" />
63+
<li>
64+
<img src="images/arrow.png" alt="" class="arrow-img" />
65+
<a href="https://youtube.com">
66+
<span class="lesson">Lesson 2 / Revision</span>
67+
</a>
68+
</li>
69+
<hr class="two" />
70+
<li>
71+
<img src="images/arrow.png" alt="" class="arrow-img" />
72+
<a href="https://youtube.com">
73+
<span class="lesson">Lesson 3 / Testing</span>
74+
</a>
75+
</li>
76+
<hr class="two" />
77+
<li>
78+
<img src="images/arrow.png" alt="" class="arrow-img" />
79+
<a href="https://youtube.com">
80+
<span class="lesson">Lesson 4 / Output</span>
81+
</a>
82+
</li>
83+
<hr class="two" />
84+
<li>
85+
<img src="images/arrow.png" alt="" class="arrow-img" />
86+
<a href="https://youtube.com">
87+
<span class="lesson">Lesson 1 / Intro</span>
88+
</a>
89+
</li>
90+
<hr class="two" />
91+
<li>
92+
<img src="images/arrow.png" alt="" class="arrow-img" />
93+
<a href="https://youtube.com">
94+
<span class="lesson">Lesson 2 / Revision</span>
95+
</a>
96+
</li>
97+
<hr class="two" />
98+
<li>
99+
<img src="images/arrow.png" alt="" class="arrow-img" />
100+
<a href="https://youtube.com">
101+
<span class="lesson">Lesson 3 / Testing</span>
102+
</a>
103+
</li>
104+
<hr class="two" />
105+
<li>
106+
<img src="images/arrow.png" alt="" class="arrow-img" />
107+
<a href="https://youtube.com">
108+
<span class="lesson">Lesson 4 / Output</span>
109+
</a>
110+
</li>
111+
<hr class="two" />
112+
<li>
113+
<img src="images/arrow.png" alt="" class="arrow-img" />
114+
<a href="https://youtube.com">
115+
<span class="lesson">Lesson 1 / Intro</span>
116+
</a>
117+
</li>
118+
<hr class="two" />
119+
<li>
120+
<img src="images/arrow.png" alt="" class="arrow-img" />
121+
<a href="https://youtube.com">
122+
<span class="lesson">Lesson 2 / Revision</span>
123+
</a>
124+
</li>
125+
<hr class="two" />
126+
<li>
127+
<img src="images/arrow.png" alt="" class="arrow-img" />
128+
<a href="https://youtube.com">
129+
<span class="lesson">Lesson 3 / Testing</span>
130+
</a>
131+
</li>
132+
<hr class="two" />
133+
<li>
134+
<img src="images/arrow.png" alt="" class="arrow-img" />
135+
<a href="https://youtube.com">
136+
<span class="lesson">Lesson 4 / Output</span>
137+
</a>
138+
</li>
139+
<hr class="two" />
140+
</ul>
141+
</div>
142+
</div>
143+
<div class="right">
144+
<h1 class="h1">
145+
Welcome To DSA Complete Course Using Python By Code Explorer
146+
</h1>
147+
<hr class="one" />
148+
<h1 class="h1">This Is Introduction To DSA Using Python</h1>
149+
<center>
150+
<div id="box">
151+
<span>Full PlayList</span>
152+
</div>
153+
</center>
154+
<hr class="one" />
155+
<p class="p" style="color: aqua !important;">
156+
DSA (Data Structures and Algorithms) in Python is a fundamental course
157+
that introduces the principles and implementation of various data
158+
structures and algorithms using the Python programming language.
159+
</p>
160+
161+
<p class="p" style="color: aqua !important;">
162+
In this course, you will learn about essential data structures such as
163+
arrays, linked lists, stacks, queues, trees, graphs, and hash tables, and
164+
explore their strengths and weaknesses in different scenarios. You will
165+
understand how to manipulate and organize data efficiently, improving the
166+
performance of your programs.
167+
</p>
168+
169+
<p class="p" style="color: aqua !important;">
170+
Additionally, the course delves into algorithm analysis and design
171+
techniques, enabling you to create efficient solutions for a wide range of
172+
problems. You will explore algorithms like sorting, searching, graph
173+
traversal, and dynamic programming. By understanding the underlying
174+
concepts, you will be able to write clean and optimized code.
175+
</p>
176+
177+
<p class="p" style="color: aqua !important;">
178+
Throughout the course, you will gain hands-on experience by implementing
179+
data structures and algorithms in Python. The practical exercises and
180+
coding assignments will reinforce your understanding and help you develop
181+
problem-solving skills.
182+
</p>
183+
184+
<p class="p" style="color: aqua !important;">
185+
Whether you are a beginner or an experienced programmer, this DSA course
186+
in Python will equip you with the necessary tools and knowledge to tackle
187+
complex programming challenges, enhance your logical thinking, and become
188+
a more proficient developer.
189+
</p>
190+
<hr class="one" />
191+
<h1 class="story">A Very Short Story</h1>
192+
<hr class="two" />
193+
<p class="p" style="color: aqua !important;">
194+
Once upon a time, a skilled architect named Alice faced a challenge while
195+
designing a bakery's order management system. Reflecting on her past
196+
experience of choosing wooden blocks for a window in her home, she
197+
realized the importance of selecting the perfect data structure. Inspired
198+
by the flexibility and adaptability of wooden blocks, she opted for a
199+
priority queue to efficiently manage the bakery's orders. Her decision
200+
proved to be a game-changer, streamlining operations and delighting
201+
customers. Alice's ability to draw from past experiences and choose the
202+
right data structure showcased her problem-solving prowess.
203+
</p>
204+
<br />
205+
<div class="div-img">
206+
<img class="img"
207+
src="images/dgm-1.png"
208+
alt="" />
209+
</div>
210+
<br />
211+
<p class="p" style="color: aqua !important;">
212+
As per the above image you will never use bricks to build a window, like
213+
that as a Software Engineer , you have to choose the perfect Data
214+
Structures to solve a problem.
215+
</p>
216+
<hr class="two" />
217+
<center>
218+
<p class="p" style="color: aqua !important;">Now look at this picture very carefully...</p>
219+
</center>
220+
<div class="div-img"><img class="img"
221+
src="images/dgm-2.png"
222+
alt="" /></div>
223+
<center>
224+
<p class="p" style="color: aqua !important;">This is the solution for the problem...</p>
225+
</center>
226+
<div class="div-img"><img class="img"
227+
src="images/dgm-3.png"
228+
alt="" /></div>
229+
<hr class="one" />
230+
<h1 class="h1">
231+
Some Very Popular Data Structures In Different Programming Languages
232+
</h1>
233+
<div id="table">
234+
<table>
235+
<thead>
236+
<th>Data Structure</th>
237+
<th>Python</th>
238+
<th>Java</th>
239+
<th>C++</th>
240+
</thead>
241+
<tbody>
242+
<tr>
243+
<td>Array</td>
244+
<td>Lists</td>
245+
<td>
246+
Native Array
247+
<br />
248+
ArrayList
249+
</td>
250+
<td>
251+
Native Array
252+
<br />
253+
std::vector
254+
</td>
255+
</tr>
256+
<tr>
257+
<td>Hash Table</td>
258+
<td>Dictionary</td>
259+
<td>
260+
HashMap <br />
261+
LinkedHashMap
262+
</td>
263+
<td>std::map</td>
264+
</tr>
265+
<tr>
266+
<td>Linked List</td>
267+
<td>Not Available</td>
268+
<td>LinkedList</td>
269+
<td>std::list</td>
270+
</tr>
271+
</tbody>
272+
</table>
273+
</div>
274+
</div>
275+
</div>
276+
<footer class="footer">
277+
Copyright &copy; 2023 || Developed By :: <a href="https://explorecode.newsgoogle.org"><span class="footer-code">Code
278+
Explorer</span></a>
279+
</footer>
280+
<script src="script.js"></script>
281+
</body>
282+
283+
</html>

‎script.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
3+
4+
if (screenWidth <= 760) {
5+
const imgSrc = "images/menu.png"; // Replace with the actual image source
6+
7+
const imgElement = document.createElement("img");
8+
imgElement.src = imgSrc;
9+
imgElement.alt = "Image description";
10+
imgElement.style.height = "60px";
11+
imgElement.style.width = "60px";
12+
13+
const dropdownElement = document.querySelector(".dropdown");
14+
dropdownElement.appendChild(imgElement);
15+
}
16+
});

‎style.css

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
::-webkit-scrollbar {
2+
width: 8px;
3+
background-color: #fff;
4+
}
5+
6+
::-webkit-scrollbar-track {
7+
background-color: #f2f2f2;
8+
}
9+
10+
::-webkit-scrollbar-thumb {
11+
background-image: linear-gradient(to bottom, #ff9d00, #f07b3f, #d63d3d, #b3006e, #6a00a6);
12+
border-radius: 10px;
13+
border: 2px solid #fff;
14+
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
15+
}
16+
17+
::-webkit-scrollbar-thumb:hover {
18+
background-image: linear-gradient(to bottom, #ff9d00, #f07b3f, #d63d3d, #b3006e, #6a00a6);
19+
}
20+
21+
.body {
22+
background-color: black;
23+
}
24+
25+
marquee {
26+
text-shadow: rgb(65, 186, 69) -1px 1px 0px, rgb(198, 61, 43) 1px 1px 0px, rgb(66, 175, 172) 1px -1px 0px, rgb(198, 194, 63) -1px -1px 0px;
27+
color: rgb(18, 18, 18);
28+
letter-spacing: 5px;
29+
background: rgb(18, 18, 18);
30+
font-size: 4em;
31+
padding: 5px;
32+
}
33+
34+
p {
35+
color: skyblue;
36+
}
37+
38+
.main-body {
39+
display: flex;
40+
justify-content: space-between;
41+
flex-direction: row;
42+
padding-left: 10px;
43+
padding-right: 10px;
44+
padding-top: 10px;
45+
background-color: coral;
46+
}
47+
48+
.left {
49+
color: skyblue;
50+
min-width: 300px;
51+
margin-bottom: left;
52+
background-color: black;
53+
height: 100vh;
54+
overflow: auto;
55+
}
56+
57+
.logo {
58+
font-family: monospace;
59+
text-align: center;
60+
font-size: 30px;
61+
display: flex;
62+
flex-direction: row;
63+
}
64+
65+
.logo-div {
66+
display: flex;
67+
flex-direction: column;
68+
}
69+
70+
.logo-img {
71+
margin-top: 13px;
72+
margin-left: 20px;
73+
}
74+
75+
.code {
76+
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
77+
font-size: 25px !important;
78+
font-weight: 700;
79+
color: #00eeff;
80+
position: relative;
81+
margin-top: 30px;
82+
padding-left: 20px;
83+
}
84+
85+
.explorer {
86+
font-family: cursive;
87+
font-size: 30px !important;
88+
font-weight: 700;
89+
color: crimson;
90+
padding-left: 15px;
91+
}
92+
93+
.dropdown {
94+
display: none;
95+
}
96+
97+
hr.one {
98+
overflow: visible;
99+
/* For IE */
100+
height: 30px;
101+
border-style: solid;
102+
border-color: rgb(25, 204, 70);
103+
border-width: 1px 0 0 0;
104+
border-radius: 20px;
105+
}
106+
107+
hr.one:before {
108+
display: block;
109+
content: "";
110+
height: 30px;
111+
margin-top: -31px;
112+
border-style: solid;
113+
border-color: rgb(225, 15, 109);
114+
border-width: 0 0 1px 0;
115+
border-radius: 20px;
116+
}
117+
118+
hr.two {
119+
border: 0;
120+
height: 1px;
121+
background-image: linear-gradient(to right, #73101000, #e41717bf, #100f0f00);
122+
}
123+
124+
.contents {
125+
font-family: monospace;
126+
font-size: 40px;
127+
padding-left: 60px;
128+
}
129+
130+
ul {
131+
padding-left: 10px;
132+
}
133+
134+
li {
135+
display: flex;
136+
flex-direction: row;
137+
}
138+
139+
.arrow-img {
140+
max-height: 25px;
141+
max-width: 25px;
142+
}
143+
144+
a {
145+
text-decoration: none;
146+
}
147+
148+
.lesson {
149+
font-family: cursive;
150+
display: flex;
151+
justify-content: center;
152+
flex-direction: row;
153+
font-size: 20px;
154+
padding-left: 30px;
155+
color: chartreuse;
156+
}
157+
158+
/* RIGHT */
159+
160+
.right {
161+
background-color: black;
162+
height: 100vh;
163+
overflow: auto;
164+
margin-bottom: 10px;
165+
}
166+
167+
168+
.h1 {
169+
text-align: center;
170+
/* text-decoration: underline; */
171+
font-family: monospace;
172+
font-size: 30px;
173+
color: #00eeff;
174+
}
175+
176+
#box {
177+
background: rgba(255, 255, 255, 0.23);
178+
border-radius: 16px;
179+
width: fit-content;
180+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
181+
backdrop-filter: blur(5px);
182+
-webkit-backdrop-filter: blur(5px);
183+
border: 1px solid rgba(255, 255, 255, 0.3);
184+
padding: 10px;
185+
font-family: cursive;
186+
color: chartreuse;
187+
font-size: 20px;
188+
cursor: pointer;
189+
margin-bottom: 30px;
190+
}
191+
192+
.p {
193+
padding-left: 50px;
194+
padding-right: 50px;
195+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
196+
}
197+
198+
.story {
199+
font-family: Verdana, Geneva, Tahoma, sans-serif;
200+
font-style: italic;
201+
color: rgb(226, 249, 25);
202+
padding-left: 10px;
203+
}
204+
205+
/* Default styling for the image */
206+
207+
.img {
208+
width: 100%;
209+
height: auto;
210+
}
211+
212+
/* Media query for screens with a maximum width of 768 pixels */
213+
@media (max-width: 768px) {
214+
.img {
215+
max-width: 100%;
216+
}
217+
}
218+
219+
/* Media query for screens with a maximum width of 480 pixels */
220+
@media (max-width: 480px) {
221+
.img {
222+
max-width: 100%;
223+
}
224+
}
225+
226+
.div-img {
227+
padding-left: 20px;
228+
padding-right: 20px;
229+
}
230+
231+
#table {
232+
padding-left: 20px;
233+
padding-right: 20px;
234+
}
235+
236+
/* Default styling for the table */
237+
table {
238+
width: 100%;
239+
border-collapse: collapse;
240+
margin-bottom: 5px;
241+
}
242+
243+
th,
244+
td {
245+
padding: 10px;
246+
text-align: left;
247+
border: 1px solid #ccc;
248+
}
249+
250+
/* Styling for table header */
251+
thead th {
252+
background-color: #0a0a0a;
253+
color: #03f90b;
254+
}
255+
256+
/* Styling for table body */
257+
tbody td {
258+
background-color: #201a36;
259+
}
260+
261+
tbody tr {
262+
color: #b3006e;
263+
}
264+
265+
/* Hover effect for table rows */
266+
tbody tr:hover {
267+
background-color: #2f2a48;
268+
color: #fff;
269+
}
270+
271+
/* Responsive table styles */
272+
@media screen and (max-width: 768px) {
273+
table {
274+
overflow-x: auto;
275+
max-width: 100%;
276+
display: block;
277+
}
278+
279+
th,
280+
td {
281+
white-space: nowrap;
282+
}
283+
}
284+
285+
286+
/* Footer */
287+
288+
footer {
289+
background-color: #030340;
290+
padding: 20px;
291+
text-align: center;
292+
color: darkorange;
293+
font-size: 25px;
294+
}
295+
296+
.footer-code {
297+
color: #03f90b;
298+
}
299+
300+
/* RESPONSIVE */
301+
302+
@media screen and (max-width: 760px) {
303+
.hide-on-small-screen {
304+
display: none;
305+
}
306+
307+
.main-body {
308+
flex-direction: column;
309+
}
310+
311+
.left {
312+
min-width: unset;
313+
width: 100%;
314+
}
315+
316+
.right {
317+
width: 100%;
318+
}
319+
320+
.left {
321+
height: 115px;
322+
overflow: hidden;
323+
}
324+
325+
.dropdown {
326+
display: flex;
327+
flex-wrap: wrap;
328+
align-items: center;
329+
justify-content: flex-end;
330+
margin-left: auto;
331+
padding-right: 20px;
332+
}
333+
334+
.p {
335+
padding-left: 20px;
336+
padding-right: 20px;
337+
}
338+
}

0 commit comments

Comments
 (0)
Please sign in to comment.