An internship report

On

WEB DEVELOPMENT

Submitted in partial fulfilment of the required degree of

B.TECH in Artificial Intelligence & Data Science
By
Ayush Jayesh Mayekar
PRN:- 2230421995057

Under the guidance of

Prof. Ravi Mante

Department of Artificial Intellignece and Data Science

Government College of Engineerig, Ratnagiri
(Affiliated to Dr. Babasahed Ambedkar Technology University, Lonere
Dist. Raigad)
Academic Year 2023-24
 Certificate
An intrernship report
“Web Development” submitted
By
Ayush Jayesh Mayekar

(PRN:-2230421995057) Is approved for the partial fulfilment of the

requirnments for the degree of B.Tech in Artificial Intelligence and Data
Science.

Prof. Ravi Mante

Head of Department
AI & DS
 INDEX

Sr.No. Content

1 Introduction

2 Context of Project

3 Context of internship

4 Technical Aspect

5 Discussion and Overview

 JSON
 HTML
 JS
 STYLE CSS
6 Problem and Suggestion
 Landing Page (HTML, CSS CODE and Output)
 Calculator (HTML, CSS, JS CODE and Output)
 Responsive Portfolio (HTML, CSS CODE and Output)
7 Conclusion
 Internship Report
Development of a multi-language solution for a web application
Acknowledgement
First I would like to thank Mr. Sandip Govit Champin for giving me the opportunity to do
an internship within the research centre TECHNOHACK’S. Although quite short, for me
this was a great experience I can learn from. It helped me to explore my skills and
increased my interest in web development.
Special thanks to Mr. Sandip Govit and Staff for being so accommodating and
understanding. I would also like to thank Ms. Sandip Govit and the staff at
TECHNOHACK’S for helping me during my mobility period. I appreciate their patience
and help.
 ii

Abstract
The key to having successful and fully functional web applications is in their
communication with the user. It is of no surprise that human/machine interaction is a
popular topic of research and development, as is the main goal at the research centre for
Information Technologies TECHNOHACK’S, where I had the honour to spend my first
training period.

A solution has been proposed for the internationalisation and customization of web
applications in general. Taking into account web standards and the back-end and front-
end architecture of web development, a method for providing a multi-language web
interface has been planned from scratch and explained in details in this report.
iii
Introduction
As a full time student at University of DBATU. I have decided to undertake a semester of
my second year studies at G.C.O.E.RATNAGIRI. The degree towards I am currently
studying is a Bachelor in technology. The course at the TECHNOHACK’S was quite
challenging for me for a few reasons: Firstly, the programming languages and development
tools I was using at the TECHNOHACK’S were new for me, hence I had to quickly integrate
not only with my new living environment but also academically. This was very beneficial for
me as at the end I could compare what I’ve learnt with what I already new and find a
connection between the two. Since I find myself more interested in the area of web
development and design, I was happy to be assigned the position of a trainee in web
development in a research centre situated on campus - TECHNOHACK’S.
This report is a description of my 4 week internship carried out as a compulsory component
of the course at TECHNOHACK’S. In the following chapter details of the activities of my
team are given. Afterwards, I explain my role and tasks as a trainee and give specific technical
details about my main tasks. Finally, a conclusion is drawn from the experience.

Context of Project
The team SILEX ( Supporting Interaction and Learning by Experience ) conducts research
in the field of knowledge construction, user assistance, system adaptation to the user, and

1
usage analysis by the user. The topic of the SILEX team is about the interaction between
human and machine. They design new methods and solutions to successful knowledge
transfer between users and web technology.

One of the projects that my team works on landing page, personal responsive portfolio and
landing page, trace.. consists of the design and implementation of a Trace-Base Management
System for the web platform.
The platform provides highly functional tools for the development of personal learning
environments or educational devices. Thus, users can manage, store, share and disseminate
information while having high level monitoring.
Traces of user activity are collected and stored for further exploration and analysis, which
contributes to the improvement of the learning experience. The so-called modelled trace
(MTrace) is proposed as a digital object with specified properties, well defined models, and
operators with a precise semantics.
While the implementation of this project requires complex back-end programming and data
management, it is of equally high importance that the delivered data to the user is
understandable and accessible through good design and communication, or front-end
programming.

Context of Internship
I have been assigned the task to provide translation(internationalisation) for the Trace
collecting web extension Trace-Me, and suggest a solution to translating and dynamically
editing the content of a web page in general. As previously mentioned, the M-Trace object

2
contains information of the user traces (action history on the ClarolineConnect platform)
which allows a detailed preview of each trace, containing information, such as date and URL.
This is where I fit in. For a better user experience, an option to choose a language of
preference had to be added to the pages displaying and managing the trace view. This is way
of establishing good communication with the user, while making it accessible for a wider
audience. Furthermore, the solution had to be extended and modified in order to comply with
any web page written in HTML.
More details on my weekly tasks can be found in Appendix A. Implementations will be
discussed further ahead in the report.

Technical Aspect
For the completion of the tasks the following web languages and scripts have been used:
HTML for the construction of the layout, CSS for the design of the layout, JavaScript for
dynamic functioning and JSON for data storage.
Kango - a cross-browser extension platform was used to provide compatibility to the
extension for all major browsers. The Kango framework includes useful features. Along with
the options to write background scripts that process large data in background and browser
management, the kango storage has been found useful to the Trace-Me extension for reasons
including storing user made changes, such as the language preference.

3
Solutions TraceMe
During the first half of my internship I was working on the translation of the web plug-in
Trace-Me. The extension consists of a pop-up window which allows the user to choose when
traces are collected by activating/deactivating the application. Notifications are therefore used
to notify the user whether traces are collected while they are browsing. Additional option
page is available in order to manually add a new trace.

As seen on the figure 1 and 2 (see page *), a list of three flags of the countries of the
languages are displayed on the upper right corner of both pop-up and option windows. A
single click changes the language settings of the extension, storing the preference in local
storage for future reference.
I have used two different strategies for the translation of the windows. However, a general
solution has been developed and will be further explained in the report.

For better display in the po-up I have decided to include the image buttons as another
header cell, whereas in the option window they are stored inside a list table.
The solution is specific for the extension as all text values are collected and replaced using
id recognition of predefined id’s.
By clicking a flag, a function according to the desired language is called. What the function
does, is create a JSON object which contains the new text values to be displayed and
replace the previous ones by calling the tags by their id’s.

Translate and Edit Module

While the first solution is simple and functional, it is not developer-friendly and does
not give any room for further user and admin configurations. A more general solution
has been proposed for the following scenario:

4
My main task was to find a solution for this scenario that would also work for other web
applications. What I was striving for is to develop a small extension (in the form of a
folder) that can be built into any web source and provide the functionality to edit text data
on the client side for the users and on server side for the administrators and give the ability
to translate the same data, without affecting its accessibility levels.

I found myself sifting through large amounts of information trying to find the best solution
for this problem, therefore some aspects of it are not yet fully developed. In the next
chapter you will find more deeper explanation of how I went about suggesting the above
solution.

Discussion/Overview
The Translate and Edit application had been planned to consist of two partsfront-end and
back-end development. The front-end is the part of the web that you can see and interact
with (e.g. Client-side programming). While front-end code interacts with the user in real
time, the back-end interacts with a server to return user ready results. The front-end is a
combination of HTML,CSS and JavaScript coding. By using JavaScript, modifications
of the design of a web page can be made immediately, however only temporary and
visible only by the user.
Normally the user would not have rights to modify web content dynamically on the
server side.
Logically, administrators are the ones who deal with back-end modification of databases
for example, as they often contain sensitive data which should not be available to see or

5
modify by the general public. Back-end programming languages include PHP, Python,
Ruby and others.
As I have minimal experience with back-end programming, I have initially focused on
the front-end development of the Translate and Edit module. However, if a developer
were to extend its functionality, they would be able to reuse code that manages user edits
for their benefit.
On figure 3 (see page *) it can be seen clearly seen how front-end and back-end
development differentiate and where is their common point. Further explained you will
find out more about each of the components in the above-described module.

JSON
The database in this case is the JSON library file, stored on the server-side and parsed
upon request. As JSON was used primarily in the Trace-Me web extension to store data,
I have decided it would be a good idea to use it as a method of internationalisation for
the Assistant of Trace-Me, mainly because of the simplicity of adding data, which is an
important part of the module. By creating an array of objects, each containing default
text from the Assistant and it’s translations, I was able to compare every text attribute
on the page with the existing ones in the library and replace them appropriately.

HTML
What I had to take in mind prior to starting the project was accessibility issues and web
standards.
I had written a strict HTML file that contains two sections - one list (<ul>) section for
the flag buttons and another (<div>) for the modification buttons. One major concern of
web accessibility is the use of images.It is considered best practice to add “alt” and “title”
attributes for users who cannot distinct images. For example the image of the German
flag has a title “Deutsch” and alt attribute set to “german flag”.

6
The lang attribute is also set as english (lang=”en”) in order to inform the browser of the
default human language of the script, which is essential for the proper reading of the web
page by certain technologies for the disabled.

Style/ CSS
The main styling is stored in an external spreadsheet, although the HTML DOM style
object has also been used to change some settings while the JavaScript is being loaded.
For example the Save button for the edit module has set visibility to “hidden” in the
external stylesheet, but the property changes to “visible” when the edit button is clicked
to avoid potential confusion.

Another method I have used to change properties inside JS is the jQuery .css() method.
I have found it to be effective in changing background and border properties of objects.

JavaScript
All functionality of the modules has been programmed in JavaScript, including jQuery
and AJAX. jQuery is a fast and small JavaScript library that offers many useful features
that make event handling among other things much simpler with an easy-to-use API that
works across a multitude of browsers.

AJAX, though not another programming language or library is a way of using existing
standards. It is the art of exchanging data with a server and updating parts of a web page,
without the need to reload the entire web page.

7
As AJAX was already used to dynamically load data for the Trace-Me Assistant, I have
found certain AJAX event handlers in jQuery to be useful for my application.
I used the jQuery.ajax() handler which performs an asynchronous HTTP (ajax) request.
The request is sent to the translation library (or the json file) leading to the creation of a
JSON object upon success. The object, stored in a variable called libData will be further
used to refer to text values in the application. The idea of the edit module is that once
the user decides they want to change the screen text of a web page, all of the text values
would become editable by a single button click. For this purpose, the following actions
need to occur:

 Collect all HTML tags on the web page and store them in variables; 
Perform a check if each tag contains text;

 Highlight the tags with found text values upon mouse hover;

 Wrap the text inside a text box and allow modification;

 Distinct the modified text from the unmodified (e.g. Outline the text box);

The next step of the edit process would be to save the changes by clicking on the ‘Save’
button. What happens is the following:

 Input values are collected and stored in arrays;

 A new JSON object is created;

 Whenever the user changes a text value, it is stored locally inside a JSON object; 
Display new text values on reload;

Optionally, the user should be able to reset all text nodes in their original state. That is
made possible by adding another button called ‘Default’, which deletes the object in
local storage.Some of the main JavaScript code can be find attached as Appendix B on
page *Explanation of what each bit of code does are provided.
The functionality of the back-end office modifications would be exactly the same
with the only difference that the changes will be made permanent. It would be possible

8
 to reset default(old) values, however that would mean not only changing data but adding
more to the database. This could bring up some complications, the most obvious one
being processing time.

Problems and Suggestions

All in all, the methods proposed in the solution are quite general, however not fully
completed. There is plenty of room left for improvement. For instance, while accessibility
issues have been handled, some JavaScript functions remain accessible only at user click
which could be difficult for those that do not use a mouse output. I would suggest that tab
properties are added to all text that allows modification in order to make sifting through them
easier and on click event handlers are extended to work on key press events as well. I have
struggled to find the best practice of comparing strings. Not all web applications are
programmed perfectly with text that is always enclosed in tags, or properly spelled, which
means a comparison is not full and might result in a glitch.

MY COMPLETED TASKS
Landing Page
HTML CODE
1) <!DOCTYPE html>
2) <html lang="en">
3) <head>
4) <meta charset="UTF-8" />
5) <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6) <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7) <link rel="stylesheet" href="style.css">

9
8) <link rel="stylesheet" type="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.4.2/css/al
l.min.css">
9) <link
10) rel="stylesheet"
11) href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outl
ined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
12) />
13) <title>S22 UTLRA - Burgundy</title>
14) </head>
15)
16) <body>
17) <div class = "container">
18) <header>
19) <div class="logo">
20) <img src="/logos/samsung-logo.png" />
21) <!-- <h2>SAMSUNG</h2> -->
22) </div>
23)
24) <nav>
25) <div class="navbar">
26) <ul class="items">
27) <li><a href="#">Mobile</a></li>
28) <li><a href="#">TV & AV</a></li>
29) <li><a href="#">Home Appliances</a></li>
30) <li><a href="#">Laptop & Monitors</a></li>
31) <li><a href="#">Displays</a></li>
32) <li><a href="#">Accesories</a></li>
33) <li><a href="#">SmartThings</a></li>
34) <li><a href="#">Offers</a></li> 35) </ul>

36) </div>

37) <div class="extra">

10
38) <ul class="items">
39) <li><a href="#">Support</a></li>
40) <li><a href="#">For Buiness</a></li> 41) </ul>
42) </div>
43)
44) <div class="utility">
45) <span class="material-symbols-outlined"> search </span>
46) <span class="material-symbols-outlined"> shopping_cart </span>
47) <span class="material-symbols-outlined">person</span>
48) </div>
49) </nav>
50) </header>
51)
52) <main>
53) <section class="presentation">
54) <div class="introduction">
55) <div class="intro-text">
56) <h2>Samsung Galaxy S22 Ultra</h2>
57) <p>
58) The Galaxy S22 Ultra is Samsung's flagship this year, and was
59) launched alongside the Galaxy S22 and Galaxy S22+. The highlight
60) of the Galaxy S22 Ultra is its support for an S Pen stylus, which
61) thus far, has been exclusive to the Galaxy Note series.
Samsung
62) has also chosen the Qualcomm Snapdragon 8 Gen 1 SoC for the
Indian
63) market, which is a first since all previous flagship Galaxy phones
64) here have used Samsung's own Exynos SoCs. While my first
65) impressions of the smartphone were positive, it's time to find out
66) what it's like to live with Galaxy S22 Ultra.
67) </p>
68) </div>
69) </div>
70) <div class="options">

71) <a href="/burgundy.html"><div class="burgundy"></div></a>

11
72) &nbsp; &nbsp;

73)
74) <a href="/phantom-black.html"> <div class="phantomblack"></div></a>
75) &nbsp; &nbsp;
76) <a href="/phantom-white.html"><div class="phantomwhite"></div></a>
77)
78) &nbsp; &nbsp;
79) <a href="/green.html"><div class="green"></div></a> 80)
</div>
81) <div class="product">
82) <img src="/images/s22ultra_1.png" />
83) </div>
84) </section>
85) </main> 86) </body>
87) <footer>
88) <div class="footer-content">
89) <div class="footer-logo">
90) <img src="/logos/samsung-logo.png" alt="Samsung Logo" /> 91)
</div>
92) <div class="footer-links">
93) <ul>
94) <li><a href="#">About Us</a></li>
95) <li><a href="#">Contact Us</a></li>
96) <li><a href="#">Privacy Policy</a></li>
97) <li><a href="#">Terms of Service</a></li>
98) </ul>
99) </div>
100) </div>
101) <div class="footer-social">
102) <ul>
103) <li><a href="#"><i class="fab fa-facebook"></i></a></li>
104) <li><a href="#"><i class="fab fa-twitter"></i></a></li>
105) <li><a href="#"><i class="fab fa-instagram"></i></a></li>
106) </ul> 107) </div>
108) </footer>
109) </div>
110) </html>
111)

12
STYLE CSS CODE
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); * { margin:
0px; padding:
0px; box-sizing: border-box;
} body {
overflow: hidden;
}

/* HEADER AND NAVBAR */ header { height:

62px; display: flex; box-shadow: 0px
15px 15px rgba(0,0,0,0.3);
} li { liststyle: none;
} a { font-family: "Lato", sans-serif; text-
decoration:
none; color: black; } .logo {
align-items:
center; justifycontent: center;
display: flex;
}
.logo img { justify-content: center;
align-items: center; height: 100px;
width: 114px; animation: slide ease
1s;
}
@keyframes slide {
0% {

opacity: 0; transform: translateX(-

100px); }

13
100% {

opacity: 1; transform:

14
translateX(0px);
}
}
.navbar {
/* background-color: red; */ display:
flex; justify-content: center; align-
items: center; float: left; margin-left:
64px;
}

.navbar ul { display: flex;

align-items: center; height:
80px; lineheight: 1.33;
}
.navbar ul li a { border-radius: 10px; padding: 0px 15px 0px
10px; transition: color 0.4s ease-in-out; transition:
backgroundcolor 0.4s ease-in-out;
}
.navbar ul li a:hover { color: white;
backgroundcolor: black;
}
.extra {
/* background-color: green; */ display:
flex; justifycontent: center; align-items:
center; float: left; margin-left: 100px;
}
.extra ul { display: flex;
align-items: center; height:
80px;

line-height: 1.33; } .extra ul li a {

padding:
0px 10px 0px 10px;

15
}

16
.extra ul li a { border-radius: 10px; padding: 0px 15px 0px
10px; transition: color 0.4s ease-in-out; transition:
backgroundcolor 0.4s ease-in-out;
}
.extra ul li a:hover { color: white;
backgroundcolor: black;
}

.utility {
/* background-color: honeydew; */ display:
flex; justifycontent: center; align-items:
center; float: left; marginleft: 80px;
}
.utility span { padding: 0px 20px 0px
0px; display: flex; align-items: center;
height: 80px; line-height: 1.33; cursor:
pointer; transition: color 0.8s ease;
}
.utility span:hover { color: grey;
}

/* MAIN CONTENT */ main::before {

position: absolute; content: "";
background: rgb(101, 101, 101);
/* top: 0px; */ right:
0px; width: 100%;

height: 100%; z-index: -1; }

.presentation {

17
font-family: "Roboto Condensed", sans-

18
serif; color: white; display: flex; width: 90%; margin: auto;
min-height:
80vh; align-items: center;
}
.introduction { margin:
0px 0px 0px -40px; flex:
1;
}
.intro-text p { background: linear-gradient(to right,
#b1eae6, #c471ff);
-webkit-background-clip: text; webkit-text-fill-color:
transparent; margin-top: 5px; font-size: 22px; color:
#585772;
}
.product { flex: 1;
}
.product img { margin: 150px; height: 50vh; filter:
drop-shadow(0px
5px 3px black); animation: drop ease
1s;
}
@keyframes drop {
0% { opacity: 0; transform: translateX(-
90px);
} 100% { opacity: 1;
transform: translateX(0px);
}
}

/* SELECT COLOR */
.options { display: flex;
/* flex-direction: column; */

19
 margin-left: 20px;
/* background-color: yellow ; */ }

.burgundy { padding: 0px 0px 0px

0px ; height: 20px; width: 20px;
border-radius: 50%; border: 2px solid
black; background-color:
#654d57;
}
.phantom-black { height: 20px; width:
20px; border-radius: 50%; border: 2px
solid black; background-color: black;
}
.phantom-white { height: 20px;
width: 20px; border-radius: 50%;
border: 2px solid black; background-
color: white; } .green { height: 20px;
width: 20px; border-radius: 50%;
border: 2px solid black; background-
color:
#2c4541;
}

/* Footer Styles */ footer {

backgroundcolor: #333; color:
#fff; padding: 20px 0; text-align:
center;

20
21
}

.footer-content { display: flex; justify-content: spacebetween; align-items: center; max-width:

1200px; margin: 0 auto; padding: 0 20px;
}

.footer-logo img {
height: 100px;
}

.footer-links ul { liststyle: none; padding: 0;

}

.footer-links ul li { marginbottom: 10px;

}

.footer-links ul li a { text-decoration: none; color: #fff;

}

.footer-social ul { liststyle: none; padding: 0;

}

.footer-social ul li { display: inline; margin: 0 10px;

}

.footer-social ul li a { text-decoration: none; color: #fff; fontsize: 24px;

}

22
/* Font Awesome Icons */
.fa-facebook { color:
#1877f2;
}

.fa-twitter { color:
#1da1f2;
}

.fa-instagram { color:
#e1306c;
}

/* Container Styles */ .container { max-

height: 100vh; overflow-y: auto; position:
relative;
}

23
FINAL OUTPUT

24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="styles.css"> -->
<link rel="stylesheet" href="style.css">
<title>Simple Calculator</title>
</head>

25
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendInput('7')">7</button>
<button onclick="appendInput('8')">8</button>
<button onclick="appendInput('9')">9</button>
<button onclick="appendInput('/')">/</button>
<button onclick="appendInput('4')">4</button>
<button onclick="appendInput('5')">5</button>
<button onclick="appendInput('6')">6</button>
<button onclick="appendInput('*')">*</button>
<button onclick="appendInput('1')">1</button>
<button onclick="appendInput('2')">2</button>
<button onclick="appendInput('3')">3</button>
<button onclick="appendInput('-')">-</button>
<button onclick="appendInput('0')">0</button>
<button onclick="appendInput('.')">.</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendInput('+')">+</button>
</div>
</div>
<script src="script.js"></script>
<!-- <script src="script.js"></script> -->
</body>
</html>

26
STYLE CSS CODE
body { display: flex; align-items: center; justifycontent: center;
height: 100vh; margin: 0; background-color: rgb(0, 0, 0);

.calculator { width: 300px; padding: 20px; border: 1px solid #ccc; border-
radius: 8px; box-shadow: 0 0
10px rgba(0, 0, 0, 0.1);
}

#display { width: 100%; margin-bottom: 10px; padding: 8px;

font-size:
16px; background-color:
aquamarine;
}

.buttons { display: grid; gridtemplate-columns: repeat(4, 1fr); gap: 10px;

transition: cubic-bezier(0.23, 1, 0.320, 1);

} button { padding: 10px; font-size: 16px; cursor: pointer; border: none; border-radius:
4px; background-color: #f0f0f0; transition: cubic-bezier(0.895, 0.03, 0.685, 0.22);

27
 } button:active {
background-color: #ccc;
}

JS CODE
let display = document.getElementById('display'); function
appendInput(value)
{ display.value += value;
} function clearDisplay()
{ display.value = '';
} function calculateResult() { try { display.value =
eval(display.value);
} catch (error) {
display.value = 'Error';
}
}

28
FINAL OUTPUT

29
<!DOCTYPE html>
<html lang="en">
<head>

30
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.4.2/css/all.min.css">
</head>
<body>
<div class="hero-header">
<div class="wrapper">
<header>
<div class="logo">
<i class="fa-solid fa-a"></i>
</div>
<nav>
<div class="togglebtn">
<span></span>
<span></span>
<span></span>
</div>
<ul class="navlinks">
<li><a href="#">Home</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About Us</a></li>

</ul>
</nav>
</header>
<div class="container">
<div class="hero-pic">
<img src="soham..jpg" alt="Profile pic"> </div>
<div class="hero-text">
<h5>Hi I'M <span class="input">web developer</span></h5>

<h1>So Mayekar </h1>

<p>Web development refers to the process of
creating and

31
32
maintaining websites or web applications. It involves a variety of tasks and skills that contribute to the
development and functionality of a website.
Here's a breakdown of key aspects </p>
<div class="btn-group">
<a href="#" class="btn active">Download CV</a>
<a href="#" class="btn">Contact</a> </div>

<div class="social">
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-pinterest"></i>
<i class="fa-brands fa-twitter"></i>
</div>
</div>
</div>
</div>
</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.js"></scrip t>
<script src="script.js"></script>
<script> var togglebtn=document.querySelector(".togglebtn"); var
nav=document.querySelector(".navlinks"); var
links=document.querySelector(".navlinks li");
togglebtn.addEventListener("click", function(){
this.classList.togglebtn("click"); nav.classList.toggle("open");
})

var typed=new typed(".input",{

String:["Frontend Developer","UX Designer", "Web
Developer"], typespeed:70, backspeed:55, loop:true

33
 })
</script>
</body>
</html>

STYLE CSS CODE

34
 text-decoration: none; } body{
overflow-x:
hidden;
}
.hero-header{ width: 100;
height: 100; minheight:
100vh; background: #222;
}
.wrapper{ width:
1280px; max-width:
95%; margin: 0 auto;
padding: 0 20px;
} header{ padding: 40px 0 30px; display:
flex; justify-content: space-between; align-
items: center; flexwrap: wrap;
} .logo{ display: inline-flex; justifycontent: center;
align-items: center;
} .logo i{ height: 45px; width: 45px;
background-color: #007ced; borderradius: 50%;

color: #fff; font-weight: 700; fontsize: 1.5rem; padding: 10px;

35
36
margin-right: 5px;

cursor: pointer; text-align: center;

} .logo .logo-text{ font-size: 24px;

37
 font-weight: 500; color: #fff;
} nav .togglebtn{ width:
35px; height: 35px;
position: absolute; top: 45px;
right: 3%; z-index: 5;
cursor: pointer; display: none;
} nav .togglebtn span{ display: block; background-color:
#007ced; margin: 5px 0px; width: 100%; height: 3px;
transition: 0.3s; transition-property:
transform, opacity; } nav
.navlinks{ list-style-type:
none;
} nav .navlinks li{
display: inline-block;
} nav .navlinks li a{ color:
#e5e5e5; margin-right:
2.5rem; }

38
.container{ display: flex;
justify-content: space-around; align-
items: center; paddingtop: 4rem; } .container
.hero-pic{ width: 300px; height: 300px;
border-radius: 50%; overflow: hidden;
border: 15px solid #444;

39
 box-shadow: 5px 7px 25px rgba(0,0,0,0.5);
}
.hero-pic img{ height: 100%;
width: 100%; transition: 0.5s;
}
.hero-pic img:hover{ transform: scale(1.2);
}
.hero-text{ maxwidth: 500px;
display: flex; flex-direction:
column;
}
.hero-text h5{ color: #e5e5e5;
font-size: 14px;
}
.hero-text h5 span{ color: #007ced;
fontsize: 14px;
}
.hero-text h1{ color: #007ced;
font-size: 3rem;
}
.hero-text p1{ color: #e5e5e5;

40
.btn-group{ margin: 45px 0;

41
}
.btn-group .btn{ bordercolor: #d5d5d5;
color: #fff; background-color:
#333; padding: 12px
25px; margin: 5px 0px; margin-right: 7px;
border-radius: 30px; border: 2px solid
#e5e5e5; box-shadow: 0 10px 10px --8px rgb(0 0 0 / 78%);

42
}
.btn.active{ bordercolor: #007ced;
}
.hero-text .social i{ color: #ededed;
fontsize: 18px; marginright: 10px;
transition:
0.5s;
}
.hero-text .social i:hover{ color: #007ced;
transform:
rotate(360deg);
}

@media (max-width:930px) {
nav .togglebtn{ display: initial;
}

.click{ top: 45px;

}
.click span{ position: absolute;
margin-top: 12px;
}
.click span:first-child{ transform: rotate(-40deg);
}
.click span:nth-child(2)

43
 { opacity: 0;
margin: 0;
}
.click span:last-child{ transform:
rotate(45deg); top: 0;

44
 } nav .navlinks{ position:
absolute; top: 110px; right:
-100%; bottom: 0; width:
60%;

45
 height: 100vh; background-color:
#222; z-index: 3; box-shadow: 5px 13px 30px rgba(0,0,0,0.1);
transition:
0.5s; padding: 25px 0px; } nav
.navlinks li{ display:
block;
} nav .navlinks li a{
display: block; margin-
bottom: 15px; text-align:
center; } nav .navlinks
.open{ right:0;
}
}
@media(max-widht:768px)
{
.container{ flexdirection: column;
padding-top: 2rem;
}
.hero.text{
padding: 40px 0px;
}
}

46
FINAL OUTPUT

47
Conclusion
In a nutshell, this internship has been an excellent and rewarding experience. I can conclude
that there have been a lot I’ve learnt from my work at the research centre. Needless to say,
the technical aspects of the work I’ve done are not flawless and could be improved provided
enough time.
As someone with no prior experience in JavaScript whatsoever I believe my time spent in
research and discovering new languages was well worth it and contributed to finding an
acceptable solution to an important aspect of web design and development. Two main things
that I’ve learned the importance of are time-management skills and self-motivation.
Although I have often stumbled upon these problems at University, they had to be
approached differently in a working environment.
I have yet to complete another two years of studies, in order to achieve a bachelor degree in
Computing (with Honours). Working with web development languages has increased my
interest in them, hence prompting me to transfer to the Web Design and Development course
at my university.

48