INDUSTRIAL TRAINING REPORT

 
UDEMY, INDIA (ONLINE) 
Date: 03/06/2023 - 09/07/2023 

A SUMMER TRAINING REPORT 

Submitted By: 
 
SAGAR PATEL 
UE215085
 
in partial fulfillment for the award of the degree
of

BACHELOR OF ENGINEERING
IN
DEPARTMENT OF ELECTRONICS AND COMMUNICATION
ENGINEERING
 
UNIVERSITY INSTITUTE OF ENGINEERING AND
TECHNOLOGY
 
PANJAB UNIVERSITY ,
CHANDIGARH
JULY, 2023 

1|Page
 TABLE OF CONTENTS

1. Udemy Certificate 3

2. Acknowledgement 4
2.1. About Udemy India 4

3. Web Devlopment Project: web page Uiet 5

4. Language used in project: 6

4.1. HTML 6
4.2. CSS 6
4.3. JavaScript 7
4.4. Visual Studio Code 8

5. Project Details: 10

6. CSS Code 11

7. Final Project Output 19

8. Conclusion 21

9. Future Scope of this Project 21

10. References 21

2|Page
 UDEMY CERTIFICATE

 This certificate above verifies that Sagar Patel successfully completed the course The

Complete 2023 Web Development Bootcamp on 07/09/2023 as taught by Dr. Angela
Yu on Udemy. The certificate indicates the entire course was completed as validated
by the student. The course duration represents the total video hours of the course at
time of most recent completion.

3|Page
Acknowledgement  

 I would foremost like to pay thanks to my parents and then to the almighty God
by which I am able to complete this project. 

 I am grateful to Dr. Angela Yu (Head of Training Department Udemy , India) for

providing me an opportunity to do the project work in his Institute and giving his all
support and guidance which made me complete the project duly. 

 I owe my deep gratitude to my project guide, who took keen interest on our project
work and guided me all along, till the completion of my project work by providing all
the necessary information for developing a good system. 

 
About Udemy, India 
 
 Udemy, Inc. is an education technology company that provides an online learning
and teaching platform. It was founded in May 2010 by Eren Bali, Gagan Biyani, and
Oktay Caglar. 
 As of March 2023, the platform has 62 million learners, over 210,000 courses, and
more than 70,000 instructors teaching courses in nearly 75 languages, with over 830
million course enrollments. 
 Students take courses primarily to improve job-related skills. Some courses generate
credit toward technical certification. Udemy attracts corporate trainers seeking to
create coursework for employees of their company. 

 Products or Services offered: 

 Also listed in Computer Training Institutes, Tally Training Institutes, Computer
Training Institutes For CCC, Computer Training Institutes for C++ Programming,
Computer Training Institutes for C Programming etc. Udemy is one of the most
trustworthy names in the field. They have received a 4.3 rating from their customers.  

4|Page
Introduction of the Project 
 
 
 This project is based is based on web development. Using new stack technologies to
create online portals for effective communication and conveying messages to people
around the globe connected via internet. 
 This project is a working online website of university which is helpful for both
student and organization. 

 Our Aim is to provide a platform for interaction of students to university via online
mode. 
 This website is helpful to: - 
 Organisation. 
 Students who want to take admissions. 
 Students who cannot reach university easily. 
 Students staying far from college. 
 During covid time.   

Scope of project 
 

 Provide online window portal for students and organization. 
 Platform where students can raise their issues. 
 Time saving and money saving of both students and organization. 
 Reducing paper work and increasing efficiency. 
 Effetive way of conveying useful information among students.  
 Teachers, students, administration all of interact at same place. 
 Teacher, and administration related issues  can also be resolved.  
 Univeristy can display its result on site. 
 University can display notice. 
 University can display professor vacancy posts. 
 University can display notice regarding counselling.        

5|Page
  
Technology Used     

 HTML and CSS are actually not technically programming languages; they're just page
structure and style information. But before moving on to JavaScript and other true
languages, you need to know the basics of HTML and CSS, as they are on the front
end of every web page and application. 

 An overview: 
HTML provides the basic structure of sites, which is enhanced and modified by other
technologies like CSS and JavaScript. 
 CSS is used to control presentation, formatting, and layout. 
 JavaScript is used to control the behaviour of different elements. 

 
HTML 
 

 HTML stands for Hypertext Markup Language. "Markup language" means that, rather
than using a programming language to perform functions, HTML uses tags to identify
different types of content and the purposes they each serve to the webpage. 

 Once a tag has been opened, all of the content that follows is assumed to be part of
that tag until you "close" the tag. When the paragraph ends, I'd put a closing
paragraph tag: </p>. Notice that closing tags look exactly the same as opening tags,
except there is a forward slash after the left angle bracket. Here's an example: 
 <p>This is a paragraph.</p> 
 Using HTML, you can add headings, format paragraphs, control line breaks, make
lists, emphasize text, create special characters, insert images, create links, build tables,
control some styling, and much more. 

 
 
CSS 
 

 CSS stands for Cascading Style Sheets. This programming language dictates how the
HTML elements of a website should actually appear on the frontend of the page. 
 

6|Page
 
 HTML provides the raw tools needed to structure content on a website. CSS, on the
other hand, helps to style this content so it appears to the user the way it was intended
to be seen. These languages are kept separate to ensure websites are built correctly
before they're reformatted. 

 If HTML is the drywall, CSS is the paint. 

 Whereas HTML was the basic structure of your website, CSS is what gives your
entire website its style. Those slick colors, interesting fonts, and background images?
All thanks to CSS. This language affects the entire mood and tone of a web page,
making it an incredibly powerful tool -- and an important skill for web developers to
learn. It's also what allows websites to adapt to different screen sizes and device
types. 

 CSS is a list of rules that can assign different properties to HTML tags, either
specified to single tags, multiple tags, an entire document, or multiple documents. It
exists because, as design elements like fonts and colors were developed, web
designers had a lot of trouble adapting HTML to these new features. 
 You see, HTML, developed back in 1990, was not really intended to show any
physical formatting information. It was originally meant only to define a document's
structural content, like headers versus paragraphs. HTML outgrew these new design
features, and CSS was invented and released in 1996: All formatting could be
removed from HTML documents and stored in separate CSS (.css) files. 
 So, what exactly does CSS stand for? It stands for Cascading Style Sheets -- and
"style sheet" refers to the document itself. Every web browser has a default style
sheet, so every web page out there is affected by at least one style sheet -- the default
style sheet of whatever browser the web page visitor is using -- regardless whether or
not the web designer applies any styles.

 
 
 Javascript 

 
 JavaScript is a more complicated language than HTML or CSS, and it wasn't released
in beta form until 1995. Nowadays, JavaScript is supported by all modern web
browsers and is used on almost every site on the web for more powerful and complex
functionality. 

7|Page
 JavaScript is a logic-based programming language that can be used to modify website
content and make it behave in different ways in response to a user's actions. Common
uses for JavaScript include confirmation boxes, calls-to-action, and adding new
identities to existing information. 
 In short, JavaScript is a programming language that lets web developers design
interactive sites. Most of the dynamic behavior you'll see on a web page is thanks to
JavaScript, which augments a browser's default controls and behaviors. 
 JavaScript is particularly useful for assigning new identities to existing website
elements, according to the decisions the user makes while visiting the page. For
example, let's say you're building a landing page with a form you'd like to generates
leads from by capturing information about a website visitor. You might have a
"string" of JavaScript dedicated to the user's first name. That string might look
something like this: 
 function updateFirstname() { 
let Firstname = prompt('First Name'); 
} 
 Then, after the website visitor enters his or her first name -- and any other information
you require on the landing page -- and submits the form, this action updates the
identity of the initially undefined "Firstname" element in your code. Here's how you
might thank your website visitor by name in JavaScript: 
para.textContent = 'Thanks, ' + Firstname + "! You can now download your eBook." 
 In the string of JavaScript above, the "Firstname" element has been assigned the first
name of the website visitor, and will therefore produce his or her actual first name on
the frontend of the webpage. To a user named Kevin, the sentence would look like
this: 
Thanks, Kevin! You can now download your eBook. 
 As a web developer, the three main languages we use to build websites are HTML,
CSS, and JavaScript. 
 JavaScript is the programming language, we use HTML to structure the site, and we
use CSS to design and layout the web page. 
 These days, CSS has become more than just a design language, though. You can
actually implement animations and smooth transitions with just CSS. 
In fact, you can do some basic programming with CSS too. An example of this is
when you use media queries, where you define different style rules for different kinds
of screens (resolutions). 
 JavaScript has also grown beyond being used just in the browser as well. We now use
it on the server thanks to Node.js. 
But the basic fact remains: HTML, CSS, and JavaScript are the main languages of the
Web.

8|Page
Platform 
 
We are using VS code as code editor  And google chrome for browsing file. 
Visual Studio Code has some very unique features. They are listed as below : 

 Support for multiple programming languages: Supports multiple programming

languages. So earlier, programmers needed Web-Support: a different editor for
different languages, but it has built-in multi-language support. This also means it
easily detects if there’s any fault or cross-language reference, it’ll be able to detect it
easily. 
 Intelli-Sense: It can detect if any snippet of code is left incomplete. Also, common
variable syntaxes and variable declarations are made automatically. Ex: If a certain
variable is being used in the program and the user has forgotten to declare, intelli-
sense will declare it for the user. 
 Cross-Platform Support: Traditionally, editors used to support either Windows or
Linux or Mac Systems. But Visual Studio Code is cross-platform. So, it can work on
all three platforms. Also, the code works on all three platforms; else, the open-source
and proprietary software codes used to be different. 
 Extensions and Support: Usually supports all the programming languages but, if the
user/programmer wants to use the programming language which is not supported
then, he can download the extension and use it. And performance-wise, the extension
doesn’t slow down the editor as it rums as a different process. 
 Repository: With the ever-increasing demand for the code, secure and timely storage
is equally important. It is connected with Git or can be connected with any other
repository for pulling or saving the instances. 
 Web-Support: Comes with built-in support for Web applications. So web
applications can be built and supported in VSC. 
 Hierarchy Structure: The code files are located in files and folders. The required
code files also have some files, which may be required for other complex projects.
These files can be deleted as per convenience. 
 Improving Code: Some code snippets can be declared a bit differently, which might
help the user in the code. This function prompts the user, wherever necessary, to
change it to the suggested option. 
 Terminal Support: Many of the times, the user needs to start from the root of the
directory to start with a particular action, in-built terminal or console provides
user support to not to switch in-between two screens for the same. 
 Multi-Projects: Multiple projects containing multiple files/folders can be opened
simultaneously. These projects/folders might or might not be related to each other. 
 Git Support: Resources can be pulled from Git Hub Repo online and vice-versa;
saving can be done too. Resource pulling also means cloning the code which is made
available on the internet. This code can later be changed and saved. 
 Commenting: A common feature, but some of the languages do not support it.
Commenting on the code helps the user to recall or track according to the sequence he
wants. 
 

9|Page
 
 
Advantages 

There are many advantages over any other IDE; they are as follow: 
 Cross-platform support: 
 Windows 
 Linux 
 Mac 
 2. Light-weight 
 Robust Architecture 
 Intelli-Sense 
 Freeware: Free of Cost- probably the best feature of all for all the programmers out
there, even more for the organizations. 
 Many users will use it or might have used it for desktop applications only, but it also
provides great tool support for Web Technologies like; HTML, CSS, JSON. 

Advantages of Chrome browser 

 High speed browsing 
 Easy, stylish interface 
 Secure 
 Wide range of extensions 
 Sync across devices 
 Customizable 
 

Project details  

 We have first of created Index HTML file and along with  CSS file. 
 There are 5 HTML files we created in  project   
 Index
 About
 Course
 Alumni
 Contact
At last, we combined all the pages of HTML to create a meaning full website. 
 
10 | P a g e
CSS code 
 
*{ 
    margin: 0; 
    padding: 0; 
    font-family: 'Lato', sans-serif; 
} 
.header{ 
    min-height: 100vh; 
    width: 100%; 
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(Images/footer-
collage.png); 
    background-position: center; 
    background-size: cover; 
    position: relative; 
} 
nav{ 
    display: flex; 
    padding: 2% 6%; 
    justify-content: space-between; 
    align-items: center; 
} 
nav img{ 
    width: 100px; 
} 
.nav-links{ 
    flex: 1; 
    text-align: right; 
} 
.nav-links ul li{ 
    list-style: none; 
    display: inline-block; 
    padding: 8px 12px; 
    position: relative; 
    color: #E8F1F1; 
} 
.nav-links ul li a{ 
    color: #fff; 
    text-decoration: red; 
    font-size: 13px; 
} 
.nav-links ul li::after{ 
    content: ''; 
    width: 0%; 
    height: 2px; 
    background: #f44336; 
    display: block; 
    margin: auto; 
    transition: 0.3s; 
} 

11 | P a g e
.nav-links ul li:hover::after{ 
    width: 100%; 
    cursor: pointer; 
} 
.text-box{ 
    width: 90%; 
    color: white; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    text-align: center; 
} 
.text-box h1{ 
    font-size: 62px; 
    color: #E8F1F1; 
    text-decoration: double; 
    display: inline-block; 
} 
.text-box p{ 
    margin: 10px 0 40px; 
    font-size: 15px; 
    color: azure; 
} 
.hero-btn{ 
    display: inline-block; 
    text-decoration: double; 
    color: chocolate; 
    border: 1px solid #fff; 
    padding: 12px 36px; 
    font-size: 13px; 
    background-color: transparent; 
    position: relative; 
    cursor: pointer; 
} 
.hero-btn:hover{ 
    border: 1px solid #f44336; 
    background-color: #fff; 
    transition: 0.5s; 
} 
nav .fa{ 
    display: none; 
} 
@media(max-width: 700px){ 
    .text-box h1{ 
        font-size: 20px; 
    } 
    .nav-links ul li{ 
        display: block; 
    } 

12 | P a g e
    .nav-links{ 
        position: fixed; 
        background: #5D6D7E; 
        height: 50vh; 
        width: 100px; 
        top: 0; 
        left: -200px; 
        text-align: left; 
        z-index: 2; 
        transition: 1s; 
         
    } 
    nav .fa{ 
        display: block; 
        color: #fff; 
        margin: 10px; 
        font-size: 20px; 
        cursor: pointer; 
    } 
    .nav-links ul{ 
        padding: 5px; 
    } 
} 
.Course{ 
    width: 80%; 
    margin: auto; 
    text-align: center; 
    padding-top: 100px; 
} 
h1{ 
    font-size:36px ; 
    font-weight: 600; 
} 
p{ 
    color: chocolate; 
    font-size: 14px; 
    font-weight: 300; 
    line-height: 22px; 
    padding: 10px; 
} 
.row{ 
    margin-top: 5%; 
    display: flex; 
    justify-content: space-between; 
} 
.Course-col{ 
    flex-basis: 31%; 
    background: #fff3ff; 
    border-radius: 10px; 
    margin-bottom: 5%; 

13 | P a g e
    padding: 20px 12px; 
    box-sizing: border-box; 
    transition: 0.5s; 
} 
.Course-col:hover{ 
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2); 
} 
@media(max-width){ 
    .row{ 
        flex-direction: column; 
    } 
} 
/*--------campus-------*/ 
.campus{ 
    width: 80%; 
    margin: auto; 
    text-align: center; 
    padding-top: 50px; 
 
} 
.campus-col{ 
    flex-basis: 32%; 
    border-radius: 10px; 
    margin-bottom: 30px; 
    position: relative; 
    overflow: hidden; 
} 
.campus-col img{ 
    width: 100%; 
    display: block; 
} 
.layer{ 
    background: transparent; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    transition: 0.5s; 
} 
.layer:hover{ 
    background: rgba(226,0,0,0.7); 
} 
.layer h3{ 
    width: 100%; 
    font-weight: 500; 
    color: #fff; 
    font-size: 26px; 
    bottom: 0; 
    left: 50%; 

14 | P a g e
    transform: translateX(-50%); 
    position: absolute; 
    opacity: 0; 
    transition: 0.5s; 
} 
.layer:hover h3{ 
    bottom: 49%; 
    opacity: 1; 
} 
.facilities{ 
    width: 80%; 
    margin: auto; 
    text-align: center; 
    padding-top: 100px; 
} 
.facilities-col{ 
    flex-basis: 31%; 
    border-radius: 10px; 
    margin-bottom: 5%; 
    text-align: left; 
} 
.facilities-col img{ 
    width: 100%; 
    border-radius: 10px; 
} 
.testimonials{ 
    width: 80%; 
    margin: auto; 
    padding-top: 100px; 
    text-align: center; 
} 
.testimonials-col{ 
    flex-basis: 44%; 
    border-radius: 10px; 
    margin-bottom: 5%; 
    text-align: left; 
    background: #fff3f3; 
    padding: 25px; 
    cursor: pointer; 
    display: flex; 
} 
.testimonials-col img{ 
    height: 40px; 
    margin-left: 5px; 
    margin-right: 30px; 
    border-radius: 50%; 
} 
.testimonials-col p{ 
    padding: 0; 
} 

15 | P a g e
.testimonials-col h3{ 
    margin-top: 15px; 
    text-align: left; 
} 
.testimonials-col .fa{ 
    color: #f44336; 
} 
.cta{ 
    margin: 100px auto; 
    width: 80%; 
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/
Homepagedemo.jpg) ; 
    background-position: center; 
    background-size: cover; 
    border-radius: 10px; 
    text-align: center; 
    padding: 100px 0; 
} 
.cta h1{ 
   color: #fff;  
   margin-bottom: 40px; 
   padding: 0; 
} 
.footer{ 
    width: 100%; 
    text-align: center; 
    padding: 30px 0; 
} 
.footer h4{ 
    margin-bottom: 25px; 
    margin-top: 20px; 
    font-weight: 600; 
} 
icons .fa{ 
    color: red; 
    color: 0 13px; 
    cursor: pointer; 
    padding: 18px 0;    
} 
.fa-heart{ 
    color: black; 
} 
/*-----about us page-------*/ 
.sub-header{ 
    height: 50vh; 
    width: 100%; 
    background-image: linear-
gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(Images/Homepagedemo.jpg); 
    background-position: center; 
    background-size: cover; 

16 | P a g e
    text-align: center; 
    color: #fff; 
} 
.sub-header h1{ 
    margin-top: 100px; 
} 
.about-us{ 
    width: 80%; 
    margin: auto; 
    padding-top: 80px; 
    padding-bottom: 50px; 
} 
.about-col{ 
    flex-basis: 48%; 
    padding: 30px 2px; 
} 
.about-col img{ 
    width: 100%; 
} 
.about-col h1{ 
    padding-top: 0; 
    text-align: center; 
} 
.about-col p{ 
    padding: 15px 0 25px; 
} 
.red-btn{ 
    border: 1px solid #f44336; 
    background: transparent; 
    color: #f44336; 
} 
.red-btn:hover{ 
    color: black; 
    background: chocolate; 
} 
.alumini{ 
    width: 80%; 
    margin: auto; 
    text-align: center; 
    padding-top: 100px; 
} 
.alumini-col{ 
    flex-basis: 31%; 
    border-radius: 10px; 
    margin-bottom: 5%; 
    text-align: left; 
} 
.alumini-col img{ 
    width: 100%; 
    border-radius: 10px; 

17 | P a g e
} 
.location{ 
    width: 80%; 
    margin: auto; 
    padding: 80px 0; 
} 
.location iframe{ 
    width: 100%; 
} 
.contact-us{ 
    width: 80%; 
    margin: auto; 
} 
.contact-col{ 
    flex-basis: 48%; 
    margin-bottom: 30px; 
} 
.contact-col div{ 
    display: flex; 
    align-items: center; 
    margin-bottom: 40px; 
} 
.contact-col div .fa{ 
    font-size: 28px; 
    color: #f44336; 
    margin: 10px; 
    margin-right: 30px; 
} 
.contact-col div h5{ 
    font-size: 20px; 
    margin-bottom: 5px; 
    color: #555; 
    font-weight: 400; 
} 
.contact-col input, .contact-col textarea{ 
    width: 100%; 
    padding: 15px; 
    margin-bottom: 17px; 
    outline: none; 
    border: 1px solid #ccc; 

18 | P a g e
OUTPUT 
 

19 | P a g e
20 | P a g e
 CONCLUSION 

I have tried my best to complete this project successfully,

amidst a pleasurable environment of constant

cooperation and remarkable guidance.

 FUTURE SCOPE OF THE PROJECT 

 
 The e-Shakari App is saving time and manpower as well as providing a transparency
throughout the process. Work can be done further and simplified and integrate
current system with online Database options or online server for global usages. The
project has a great future for serving a greater number of candidates in an organized
an efficient manner.

REFERENCES 
 
For the development of this project, I have taken reference from internet and shared those
experiences during the designing, feasibility and actual coding of the project, here are the
few: - 
 
 Learning Java Basics 
  
 Tutorials from YouTube. 

 Google for reference. 

  
 Android Studio Documentation 
 

21 | P a g e
22 | P a g e