Newer
Older
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Siddhi Bodhe Fab Academy 2024</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free HTML Templates" name="keywords">
<meta content="Free HTML Templates" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<style>
/* Use flexbox to create a row layout */
.image-container {
display: flex;
}
/* Optional: Add some spacing between images */
.image-container img {
margin-right: 10px;
}
h2 {
margin: 20px;
}
h3 {
margin: 20px;
}
h4 {
margin: 20px;
}
p {
margin: 30px;
}
</style>
<style>
div {
text-align: justify;
text-justify: inter-word;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
p {
margin-right: 150px;
margin-left: 150px;
}
p {
font-size: 24px;
}
</style>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<!-- Topbar Start -->
<div class="container-fluid bg-dark py-3 px-lg-5 d-none d-lg-block">
<div class="row">
<div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center">
<a class="text-body pr-3" href=""><i class="fa fa-phone-alt mr-2"></i>+91 7057760100</a>
<span class="text-body">|</span>
<a class="text-body px-3" href=""><i class="fa fa-envelope mr-2"></i>siddhibodhe100@gmail.com</a>
</div>
</div>
<div class="col-md-6 text-center text-lg-right">
<div class="d-inline-flex align-items-center">
<a class="text-body px-3" href="">
<i class="fab fa-facebook-f"></i>
</a>
<a class="text-body px-3" href="">
<i class="fab fa-twitter"></i>
</a>
<a class="text-body px-3" href="">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="text-body px-3" href="">
<i class="fab fa-instagram"></i>
</a>
<a class="text-body pl-3" href="">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar Start -->
<div class="container-fluid position-relative nav-bar p-0">
<div class="position-relative px-lg-5" style="z-index: 9;">
<nav class="navbar navbar-expand-lg bg-secondary navbar-dark py-3 py-lg-0 pl-3 pl-lg-5">
<a href="" class="navbar-brand">
<h1 class="text-uppercase text-primary mb-1">Fab Academy</h1>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between px-3" id="navbarCollapse">
<div class="navbar-nav ml-auto py-0">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="assignment.html" class="nav-item nav-link">Assignment</a>
<a href="finalproject.html" class="nav-item nav-link">Final Project</a>
</div>
</div>
</nav>
</div>
</div>
<!-- Navbar End -->
<br>
<!-- Page Header Start -->
<div class="container-fluid page-header">
<h1 class="display-3 text-uppercase text-white mb-3">Week-01</h1>
<div class="d-inline-flex text-white">
<h6 class="text-uppercase m-0"><a class="text-white" href="">Assignments</a></h6>
<h6 class="text-body m-0 px-3">/</h6>
<h6 class="text-uppercase text-body m-0">Project Management</h6>
</div>
</div>
<!-- Page Header Start -->
<!--Documentation Start-->
<!--Day-01 start-->
<h3 style="text-align:center;"></h3style><FONT COLOR="f77d0a"><u>DAY-01</u></h3>
<div>
<p><FONT COLOR="black">On this day, MIT Professor Mr. Neil Gershenfold Sir has taken our first global online session of Fab Academy 2024. At first time I felt very nervous but he makes everyone calm by his friendly interaction with each and every person present in the meeting. He has given a brief idea on what Fab Academy 2024 course is and what actually we are going to do. Firstly, he explain the history of Fab Lab, how Fab Lab originated and how Fab Lab gets evolute. Later on he has given the brief ideal flow of course and explained the assignments of Week-01 includes website developement, project management and version control. At the end, he has motivated everyone with his extraordinary positive thoughts which encouraged everyone to work dedicatively.</p>
</div>
<!--Day-01 end-->
<!--Day-02 start-->
<h3 style="text-align:center;"></h3style><FONT COLOR="f77d0a"><u>DAY-02</u></h3>
<div>
<p><FONT COLOR="black">Now I have to develope my own website but I didn't have any idea about it. On 2nd day, Instructor Mr. Suhas Labade Sir has taken online meet to give brief idea on website development. He taught us developement of webiste using html, css and js. By referring him, I downloaded free html-css template from <a href="https://www.free-css.com/free-css-templates/page282/royal-cars"><FONT COLOR="sky blue"><u>Free CSS Templates, CSS Layouts.</u></a><br><font color="black"><u><ul><li>Follow the image for downloading template:- </li></ul></u></p>
</div>
<div>
<img width="700" height="450"src="img/week01-image-01.png">
</div>
<div>
<p><FONT COLOR="black">According to above image, I have downloaded my website template and started editing in Web development softwares includes <a href="https://www.free-css.com/free-css-templates/page282/royal-cars"><FONT COLOR="sky blue"><u>VSCode</u></a> <a href="https://www.free-css.com/free-css-templates/page282/royal-cars"><FONT COLOR="sky blue"><u>NotePad++.</u></a><br><FONT COLOR="black"> Firstly I have made changes in header of my website. I have added my contact number, email address and tabs includes "Home", "About", "Assignments" and "Final Project".
</div>
<div>
<img width="700" height="450"src="img/week01-image-02.png">
</div>
</div>
<div>
<p><FONT COLOR="black">According to above image, I have used following commands which I have refer from W3School.
<br>
1) "DOCTYPE html" declaration defines that this document is HTML Document.<br>
2) "html" shows the main element of HTML page. <br>
3) "head" shows element contains meta information about HTML page.<br>
4) "title" used to specify title to HTML page.<br>
5) "body" defines the document's body includes whole construction of HTML page.<br>
6) "h1 to h6" used to give font size to text (h1-largest heading, h6-smallest heading).<br>
7) "p" defines a paragraph.<br>
8) "br" used to break line or to add blank line.<br>
9) "< !--Comment-- >" used to add comment to respective region or line.<br>
10) "u" used for underline the text.<br>
11) "b" used to bold the text.<br>
12) "font color" declares color to text.<br>
13) "img src" used to add image.<br>
14) "a href" used to link another page or hyperlink.<br>
15) "div" used to divide text into blocks.
<br>
These are the basic commands which I have used to edit my website.
</p>
<!--Day-02 end-->
<!--Day-03 start-->
<h3 style="text-align:center;"></h3style><FONT COLOR="f77d0a"><u>DAY-03</u></h3>
<div>
<p><FONT COLOR="black">On 3rd day, My instructor Mr. Kiran Wakchaure sir has checked my whole code and website that I have edited using basic commands of HTML. He suggested me to make some changes to make my website more attractive and interesting. <br> I have made following changes by taking his suggestions.
<br><br>
<b><FONT COLOR="red">1) I have removed background images of "Home" page and added some quotations using "img src" command and "h4" heading command.</b>
<br>
<FONT COLOR="black">Here is the view of change:-
</p>
<div class="row">
<div class="column">
<img src="img/week01-image-03.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img/week01-image-04.png" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img/week01-image-05.png" alt="Mountains" style="width:100%">
</div>
</div>
</div><br>
<div>
<p><b><FONT COLOR="red">2) I wanted to change color of word "Fab Academy" in header. So, I used "FONT COLOR" command which changes color from white to orange. To get exact color of the text I used Microsoft power tool which help me to find the hexadecimal code of the respective colour.</b>
<br>
<FONT COLOR="black">Here is the view of change:-</p>
</div>
<div>
<img width="700" height="450"src="img/week01-image-06.png">
</div>
<br>
<div>
<p><b><FONT COLOR="red">3) Now I wanted to add my profile photo along with my short introduction.</b>
<br>
<FONT COLOR="black">Here is the view of change:- </p>
</div><br>
<div>
<img width="800" height="450"src="img/week01-image-07.png">
</div> <br>
<div>
<p><b><FONT COLOR="red">4) Here I have created blocks of weekly assignments includes logo, text and hyperlink of respective week assignment page.</b>
<br>
<FONT COLOR="black">Here is the view of change:- </p>
</div><br>
<div>
<img width="800" height="450"src="img/week01-image-08.png">
</div> <br>
<div>
<p><b><FONT COLOR="red">5) I wanted to add footer to my website includes my location and contact details.</b>
<br>
<FONT COLOR="black">Here is the view of change:- </p>
</div><br>
<div>
<img width="700" height="450"src="img/week01-image-09.png">
</div> <br>
<div>
<p><b><FONT COLOR="red">6) Here is my about page.</b></p>
</div><br>
<div>
<img width="700" height="450"src="img/week01-image-10.png">
</div>
<br>
<div>
<p><b><FONT COLOR="red">7) Here is weekly assignment page.</b></p>
</div><br>
<div>
<img width="700" height="450"src="img/week01-image-11.png">
</div><br>
<div>
<p><b><FONT COLOR="red">8) Here is final project page</b></p>
</div><br>
<div>
<img width="700" height="450"src="img/week01-image-12.png">
</div><br>
<div>
<p><b><FONT COLOR="red">9) Finally my website is ready.</b>
<br>
<FONT COLOR="black">Here is the Before view:-</p>
</div><br>
<div>
<img width="700" height="450"src="img/week01-image-13.png">
</div>
<p><FONT COLOR="black">Here is the After view:-</p>
</div><br>
<div>
<img width="700" height="450"src="img/week01-image-14.png">
</div>
<!--Day-03 end-->
<!--Day-04 start-->
<h3 style="text-align:center;"></h3style><FONT COLOR="f77d0a"><u>DAY-04</u></h3>
<div>
<p><FONT COLOR="black">On this day, Mr. Suhas sir conducted online meeting to explain the process of version control. He taught step by step process of GitLab and how we can push our website on Git. By reffering him, I did following steps to push my website on Git. </p>
<p>I used <a href="https://git-scm.com/downloads">Git</a> bash for windows to clone my repository on fabcloud to my local computer.</p>
<center><img class="w-50" src="img/week01-image-15.jpeg" alt="Image"></center>
<p>I have followed the <a href="https://fabacademy.org/2019/docs/FabAcademy-Tutorials/week01_principles_practices_project_management/git_simple.html">(tutorial)</a> of Git</p>
<p> <b>Git Workflow -</b><br>
1. Working directory: This is your local machine in which we can make changes in our website.<br>
2. Staging area or Index: This is an intermediate saving area, in which the data is stored in virtual memory on cloud.<br>
3. Git repository: This is your Git repository or central server, on which website is uploaded.</p>
<center><img class="w-50" src="img/week01-image-16.png" alt="Image"></center>
<p>Reference: <a href="https://k21academy.com/devops-foundation/git-overview-workflow-advantages/">k21academy</a></p>
<p><b>How Basic Git Workflow Works?</b><br>
The working directory is where all your files are present, where you make changes in your files.<br>
The staging area is an intermediate layer where you stage those changes that you want to be part of your next commit,
so you add only those changes to the staging area.<br>
Once you commit, it takes these files from the staging area and stores them permanently to the Git repository.</p>
<p><b>Advantages of Git</b><br>
1. It is a Free and Open Source software.<br>
2. Git branches are easy and cheap to merge.<br>
3. No need to connect to the central server.
All the operations can be performed on the local copy stored on the developer machine making it really fast.</p>
<p> <b>Commands used in Git</b> <br>
1. ssh-keygen -t rsa -C "Email ID" -b 4096<br>
--Used to generate keygen<br>
2. cat ~/.ssh/id_rsa.pub | clip<br>--Used to copy the key<br>
3. ssh -T git@gitlab.fabcloud.org<br>--It initiates the SSH connection to the gitlab.fabcloud.org server<br>
4. $ git config --global user.name "USER NAME"<br>--used to set global user name<br>
5. $ git config --global user.email "Your mail ID"<br>--stores your email in global configuration file of git<br>
6. $ git clone < copylink ><br>--It will creates a local copy of the git repository on computer<br>
7. git pull<br>--used to fetch and download content from a remote repository<br>
8. git add --all<br>--Used to add the files or changes to the repository.<br>
9. git commit -m"mesaage"<br>--Commits the changes to local git repository<br>
10. git push<br>--used to upload local repository content to a remote repository<br>
</p>
<center>
<div class="image-container">
<img class="w-50" src="img/week01-image-17.png" alt="Image">
<img class="w-50" src="img/week01-image-18.png" alt="Image">
</div><br>
</center>
<center>
<div class="image-container"></div>
<img class="w-50" src="img/week01-image-19.png" alt="Image">
<img class="w-50" src="img/week01-image-20.png" alt="Image">
</div><br></center>
<!--Day-04 end-->
<!-- Footer Start -->
<div>
<p><center><u><h3><FONT COLOR="2b2e4a">Siddhi Bodhe Fab Academy😁</FONT></h3></u></center></p><br><br>
</div>
<!-- Footer End -->
<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="fa fa-angle-double-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/tempusdominus/js/moment.min.js"></script>
<script src="lib/tempusdominus/js/moment-timezone.min.js"></script>
<script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>