SHARDA
University
School of Engineering and Technology
Internship Guidelines (Rubrics and Reports)
2th Semester Summer Internship
Mailing Address:
2022582150.jatin@ug.sharda.ac.in
Internship Supervisor:
Supervisor Title:
Supervisor Phone Number: Supervisor Email Address:
Student Name: Jatin Kumar Program B.tech Specialization
Host Organization/Company:
Faculty Supervisor: Date of Evaluation:
The purpose of this assessment is to evaluate and provide the student intern with constructive
feedback on his/her internship experience. The student’s grade is partially based on your
evaluation of his/her/their performance on each of the internship dimensions identified below.
Use the evaluation rubric to assess the student’s performance on each dimension by specifying
a score based on the performance ratings and descriptors delineated in the rubric form.
Internship Evaluation Dimensions – Grading Criteria
Evaluation of Internship -Grading Rubric
Evaluation Performance Rating
Dimensions Needs Improvement Meets Expectations Excellent
1 2 3 4 5 6
Quality of Work was done in a Adequately performed Thoroughly and
Work with careless manner; most work accurately
cognitive work assignments requirements; most work performed all work
modelling were assignments submitted in a requirements;
achieved usually late and timely manner; made submitted all work
required review; occasional errors assignments on time;
made numerous made few if any errors
errors
Level of Asked few In most cases, asked Asked relevant
ability to questions, Students relevant questions; questions and sought
transfer one was unable or slow exhibited acceptable out additional
context into to understand new understanding of new information from
Session: Dept: Project No.: Date of Evaluation:
another concepts, ideas, and concepts, ideas, and work appropriate sources;
context work assignments; assignments very quickly
was unable or understood new
unwilling to make concepts, ideas, and
changes. work assignments; was
always willing to make
needed changes and
improvements
Level of logic Had little logic In some cases, found Was a self-starter;
building / building drive and problems to; offered some consistently sought
programming required close creative ideas new challenges and
level supervision; showed asked for additional
little if any interest; work assignments;
did not seek out regularly approached
additional work; and solved problems
suggested no new independently;
ideas or options
Core None 1 >1
inequities if
any
(Language
Proficiency)
Attentiveness Regularly exhibited a Except in a few minor Demonstrated an
/ focus negative attitude instances, demonstrated a exceptionally positive
during positive attitude; attitude; attentive and
sessions proactive
readiness in Low Medium High
core field
Summary performance rating on Internship
Evaluation Criteria Score (from above)
Quality of Work with cognitive modelling
achieved
Level of ability to transfer one context into
another context
Level of logic building / programming level
Core inequities if any (Language
Proficiency)
Attentiveness / focus during sessions
readiness in core field
Total
Session: Dept: Project No.: Date of Evaluation:
Responsive Web-design
Summer Internship Report
Submitted to
Sharda University
In partial fulfilment of the requirements of the award of the
Degree of Bachelor of Technology
in
Computer Science Engineering
by
Jatin Kumar
2022582150-CSG(G2)
Under the guidance of
Dr. Sonia Setia
Department of Computer Science Engineering
School of Engineering & Technology
Sharda University
Greater Noida
Session: Dept: Project No.: Date of Evaluation:
DECLARATION
We hereby declare that the project entitled is an outcome of our own efforts under the guidance
of Dr.Sonia Setia. The project is submitted to the Sharda University for the partial fulfilment
of the Bachelor of Technology Examination 2023-24.
We also declare that this project report has not been previously submitted to any other
university.
Name: Jatin Kumar
Syst id:2022582150
Session: Dept: Project No.: Date of Evaluation:
CERTIFICATE
Session: Dept: Project No.: Date of Evaluation:
CERTIFICATE
This is to inform that Jatin Kumar of Sharda University has successfully completed the Front-
End Web Development and Rules of Engagement in partial fulfilment of the Bachelor of
Technology Examination 2023-24 by Sharda University.
This project report is the record of authentic work carried out by them during the period from
July 2023 to September 2023.
(Student Signature)
Jatin Kumar
2022582150
(Mentor’s Signature)
Dr.Sonia Setia
Associate professor
(HoD’s signature)
Dr. Sanjeev Kumar Pippal
Professor & Head of Department
Computer Science Engineering
Session: Dept: Project No.: Date of Evaluation:
ABSTRACT
This Specialization includes creating grammatically accurate HTML5 and CSS3 content as well
as building interactive web pages with JavaScript. Developing your knowledge of these
technologies can help you design better websites that work seamlessly on tablets, smartphones,
and large-screen browsers. As part of the capstone project, you will put up a polished online
portfolio that highlights your growth as a web developer and your comprehension of accessible
web design. In order to create a responsive website that can be used by people of all abilities,
including those with mental, physical, visual, and auditory impairments, technologies will need
to be employed in its design and development.
Session: Dept: Project No.: Date of Evaluation:
ACKNOWLEDGEMENT
To everyone who gave me the chance to finish my report, I would want to sincerely thank you.
Any project's success is greatly influenced by the assistance and suggestions of other
individuals, not just me. I would want to use this time to express my gratitude to everyone that
made this project possible to finish. I am really appreciative to Dr.Sonia Setia for being our
mentor. I cannot find the words to convey how much I appreciate all of her support and
assistance. Her meetings always leave me inspired and uplifted. She provided the direction and
support this endeavor required to be successful. To everyone who allowed me to complete this
report, I would want to express my profound appreciation.. Every endeavor is substantially
aided by the advice and help of several other people in addition to myself. This is my chance
to express my gratitude to everyone who helped us finish the project successfully. My deepest
appreciation is go to Dr.Sonia Setia, our mentor. But I can't express how grateful I am for allof
her verbal support. After her meetings, I'm constantly encouraged and motivated. She
directed and supported this endeavor in a way that made it successful.
Session: Dept: Project No.: Date of Evaluation:
TABLE OF CONTENTS
Sr. Contents Page
No. No.
1 TITLE PAGE
2 DECLARATION
3 CERTIFICATE
4 ABSTRACT
5 ACKNOWLEDGMENT
6 INTRODUCTION
7 LITERATURE SURVEY
8 DESIGN AND IMPLEMENTATION
9 RESULT AND DISCUSSION
10 CONCLUSION
11 REFERENCES
Session: Dept: Project No.: Date of Evaluation:
INTRODUCTION
This is a frontend development specialized course for web developers starting from the ground
up. HTML, CSS, JavaScript, and Bootstrap are all covered throughout the course. The acronym
for Hyper Text Markup Language is HTML. When creating Web pages, HTML is the
recommended markup language. The structure of a Web page is explained by HTML. HTML is
made up of several components. Different sorts of information are identified by HTML
elements, which include "this is a heading," "this is a paragraph," "this is a link," and so on.
The browser is given instructions on how to display material by HTML elements.
Cascading Style Sheets is what CSS stands for. The appearance of HTML components on
displays, in print, and in other media is specified by CSS. Significant time and labor savings
are achieved with CSS. It is capable of handling many web page designs at once. External
stylesheets are kept in files called CSS. JavaScript is the most used programming language in
the world. It serves as the main programming language for the Web. It's easy to learn JavaScript.
JavaScript is an interpreted computer language that is portable and cross-platform. It is also
widely referred to as the scripting language for webpages. Web page construction is a widely
acknowledged technique that is utilized in non-browser scenarios. Bootstrap is a free front-end
framework for easier and faster web development.
Session: Dept: Project No.: Date of Evaluation:
LITERATURE SURVEY
Associated work The internship concentrated on building landing pages, and every project was
linked to an already-existing website might get ideas for more projects later on. While the
focus of other projects, such as CSS3 Animations and blogging sites, was on creating simple
landing pages
The basis for voter registration was creating a simple landing page equivalent to the National
Voter Service Portal Form Replica. Tutor Point, EarBot, Opexx, and Alumni Management were
built on a basic landing page akin to www.tutorialspoint.com, whereas Opexx was built on
www.boat-lifestyle.com. Tutor Point was built upon the basis of www.tutorialspoint.com,
whereas www.oppex.com served as its predecessor.
Summary
Learning the necessary computer languages for creating websites that give the user interface
(UI) a look, such as graphics, fonts, backgrounds, designs, and animations, falls under front
end web development. Every time a person visits a website, they see the front end. Also known
as the clientside, this. The front end of the application and all of its components are considered
to be on the client side.
In this project, I have learned the languages that developers use to build a web page or website
i.e., HTML and CSS and have learned about how responsive web designs work on different
screen size. This course is designed for the student who already knows basies about web
designing and is ready to dive deeper into using those skills via making different interesting
cool projects system.
Session: Dept: Project No.: Date of Evaluation:
LIST OF PROJECTS
Figure 1: Survey Form
Figure 2: Tribute Page
Figure 3: Build a Technical Documentation Page
Figure 4: Product landing Page
Figure 5: Personal Portfolio Webpage
Session: Dept: Project No.: Date of Evaluation:
DESIGN AND IMPLEMENTATION
Methodology
Front-end
I used HTML to create the framework for the website. HTML , which sets a foundation and
logic for web content, is used in front-end development. Browsers display text or load HTML
elements to render webpages for users, including ones containing hyperlinks and linkages to
other webpages.
A website's skeleton or body alone is insufficient; it also needs to be attractive and provide a
positive user experience. To this end, CSS must be used. The language for expressing the
representation of cascading Style Sheets, including font styles, picture placement, and
language.
Numerous platforms, including PCs, tablets, and mobile devices; adding colors; and using CSS
to manage the design layout and its components
Apart from HTML and CSS, JavaScript (JS) adds functionality to webpages. With JS's
assistance:
Websites can dynamically refresh themselves and react to the user without necessitating a page
refresh.
o Pop-up windows, image sliders, and resizable menus are examples of animated user interface
elements that can be simulated.
However, JavaScript was not used for this internship's projects because they did not require
high level funetionality that would require the usage of JS, only the creation of straightforward
landing pages.
The three main files a user needs to access a website are HTML, CSS and JS
Frameworks
A popular free framework called Bootstrap is needed to create flexible and
responsive websites. It offers templates for CSS and JavaScript files containing components
you may add to webpages, like navigation bars, footers, accordions, and dropdown menus.
Bootstrap implements responsive pictures through integrated code, automatically scaling them
to fit the available screen space. Using the jQuery plugins in Bootstrap, you may also devise
and apply original solutions for integrating popups, image sliders, and transitions.
Session: Dept: Project No.: Date of Evaluation:
Responsive Web Design
A common query is "What Is Responsive Web Development?". The Ul and UX are given top
priority while creating web pages using the responsive web design strategy. The idea is to
ensure that pages load correctly on a variety of platforms, displays, and windows with different
sizes, shapes, etc. Real-world RWD implementations abound, but because most users are
preoccupied with the functionality and appearance of websites, they are rarely aware of them.
The techniques listed below can be used to customise websites for various situations:
1. Adaptable grids. The grid is a frequent design element used while making websites. For
responsive webpages, an adjustable grid that can render in multiple ways based on the size of
the device screen is required.
2. BreakpointsIn the same way that flexible grids allow website content to move around on the
screen, breakpoints are markers on the page that designate threshold points. The three most
common device screens should be taken into mind, even if the majority of websites contain
several breakpoints.
3. Prioritization. By placing the most important images and information higher on the page.
efficient designs guarantee that visitors will see them. This visual hierarchy is crucial since
responsive websites show less of a page at once on smaller devices. Putting the most important
components first keeps mobile device users interested.
Worflow
Choosing a design was the first step in creating any website. That involved researching the kind
of website that was required. I had to conduct research on the layouts of existing business
consultancy websites because the projeet required me to create a website for business
consulting. In addition to creating, this step calls for me to compile all the required materials,
including photographs, fonts. colour schemes, and many others, in order to align the website
with the design.
The developing phase begins after the design is complete. Code authoring and breaking the
project up into numerous parts are required for this. The refactoring of the code is the last step.
This involves tidying up the code. adding comments, and eliminating lines of code that are
redundant.
Session: Dept: Project No.: Date of Evaluation:
Design
Figure 1: Survey Form
Session: Dept: Project No.: Date of Evaluation:
Figure 2: Tribute Page
Session: Dept: Project No.: Date of Evaluation:
Figure 3: Technical Documentation Page
Figure 4: Product Landing Page
Session: Dept: Project No.: Date of Evaluation:
Figure 5: Personal Portfolio Webpage
Summary
The projects were created in HTML, CSS and JS thre languages. Creating a wireframe
for the website was the first stage. The HTML files for each of the many web pages
were created in the second stage. For each of the HTML pages, CSS was created in
order to beautify them.
Session: Dept: Project No.: Date of Evaluation:
RESULTS AND DISCUSSION
Result
For this internship, a project has to be finished. The project parameters were strictly
adhered to in order to obtain the intended outcome. For this assignment, we had to
create web pages for a banking system that looked like actual websites and had
relevant information on them. By the end, every need had been satisfied. obtained the
highest possible mark on each of the mandatory quizzes.
The following fundamental tasks were finished:
Using HTML, CSS, JS
• Build a Survey Form Build a Tribute Page
• Build a Technical Documentation Page
• Build a Product Landing Page
• Build a Personal Portfolio Webpage
Discussion
The main programming languages used for the project's implementation were HTML
and CSS. The HTML template was easy to create because it didn't involve a lot of
thinking on the part of the developers. Contrarily. CSS can necessitate lengthy lines of
code that are prone to being jumbled.
The difficulty of declaring and using variables in CSS makes it tough to develop code.
Functions are used by CSS as well. therefore there is code. The developer must picture
the web page as a box model even though most CSS properties are self-explanatory. As
the size of the screen shrunk. these two components made sure that the content did not
overflow. HTML. CSS. and JavaScript are no longer frequently used by web
developers for creating websites. Frameworks have been made available.
Summary
At the conclusion of the internship, all of the prescribed projects were finished
successfully and on time, and the quizzes that were part of the projects were passed
with an enviable grade. The main programming languages used for the project's
implementation were HTML and CSS. The HTML template was easy to create because
it doesn't involve a lot of logic on the part of the developer.
Contrarily, CSS can necessitate lengthy lines of code that are readily unorganised. I am
fully proficient in front-end web development, including HTML, CSS, and JS
Session: Dept: Project No.: Date of Evaluation:
CONCLUSION
In conclusion, my course completion sparked an interest in front-end web development
and gave me a better understanding of the creation of websites. Throughout this
adventure, a variety of programming languages were learned and investigated. A
project was created to evaluate my knowledge and comprehension using these newly
acquired languages. The project's objective was to create straightforward and many
landing pages for using frontend libraries and languages while adhering to specified
limitations and sharpening the necessary skills.
Limitations
• There is no one available on higher post of MANAGER
• The client does not have authority t delete the it own account
The drawbacks in HTML were:
1. Since it is a static language, no dynamic results may be produced by it.
2. Because there are so many elements that need to be tracked, maintaining the HTML
document's structure is exceedingly challenging.
3. Mistakes can be expensive since bad HTML can destroy the web document's entire
structure.
4. It takes a lot of time because many lines of code are needed to create forms, tables,
and lists.
5. It takes a lot of code to create even a basic webpage.
The disadvantages in CSS were:
1. The CSS is available in multiple forms, including CSS1, CSS2, and CSS3. This
makes web. browsers ambiguous.
2. Not all CSS features are supported by every browser. Before going live, the website
needs to be checked on several browsers to make sure CSS is compatible.
Security is not taken into account
4. Developers must validate modifications if there are any computability problems.
Adaptations apply to all browsers.
5. Since CSS has more than 100 attributes, learning and using it can be overwhelming
for inexperienced developers from first.
Future scope
Simple components required a lot of repeated code written in long lines, which was
time-consuming. Future use of frameworks like Sass, React, Angular, or Vue may be
necessary to keep the process efficient and up to date with industry standards. The most
popular front-end framework is called React. React is a declarative JavaScript
framework that has gained community acceptance. It was originally used by Facebook
in 2011. Code reuse is encouraged by component-based design, which also allows for
free object model documentation.
Session: Dept: Project No.: Date of Evaluation:
REFERENCES
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/html/default.asp
https://internship.suvenconsultants.com/
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.geeksforgeeks.org/web-technology/html-css/
