APSCHE – Edunet IBM SkillsBuild Virtual Internship

Report On
FRONT END DEVELOPMENT
Submitted in partial fulfillment of the requirements for the award of Degree of

BACHELOR OF TECHNOLOGY

In

INFORMATION TECHNOLOGY

Submitted by
KATIKIREDDI REKHA SAI SRI

20A21A1227

SWARNANDHRA
COLLEGE OF ENGINEERING & TECHNOLOGY
(AUTONOMOUS)
Accredited by NAAC with ‘A’ Grade
Approved by AICTE & Permanently Affiliated to JNTUK, Kakinada
Seetharamapuram, Narsapur-534280, West Godavari District, AP
2023-2024

1
Certificate

2
 Andhra Pradesh State Council of Higher Education
(APSCHE) &Edunet Foundation

STUDENT REGISTER 20A21A1227

NUMBER
STUDENT NAME KATIKIREDDI REKHA SAI SRI
NAME OF THE Andhra Pradesh State Council of Higher
ORGANISATION Education (APSCHE) & Edunet

DATE of REPORTING 05-06-2023

DATE OF LEAVING 10-07-2023

we Day Day Day Day Day Day Day Day Day9 Day10 Day11 Day12 Day13 Day14 Day15
ek\ 1 2 3 4 5 6 7 8
Acti
vity

we
ek1
✔ ✔ ✔ ✔ ✔ ✔

we
ek2
✔ ✔ ✔ ✔ ✔ ✔

we ✔
ek3

wee Day Day Day Day Day Day Day Day Day Day Day Day Day27 Day28 Day29 Day30
k\ 15 16 17 18 19 20 21 22 23 24 25 26
Acti
vity

wee ✔ ✔ ✔ ✔ ✔
k3

wee ✔ ✔ ✔ ✔ ✔ ✔
k4

wee ✔ ✔ ✔
k5

3
Activity 1:
Day 1: The first day of the internship program is the introduction to the
organization.

Day 2:The second day of the program is to learn about the Basics of
HTML and CSS.

Day 3: Day three of the programe we learnt about how to access the
visual studio code for the HTML and CSS code.

Day 4:we complete the activity of how to create the file and how to
access the files.

Day 5:we create the HTML files and CSS files and link the files in an easy
way to code it and how to solve it .

Day 6: we can see the full details about the HTML and about the <div>
tags .
Activity 2:
Day 7: we can learn about the full details about the tags and paragraphs
for using <p>.
Day 8:we can create a personal portfolio website for basic structure about
the HTML code is the body of the code.
Day 9: Day of the programe we learnt about how to access the visual
studio code for the HTML and CSS code for the design of the website .

Day 10:we complete the activity of how to create the file and how to
access the files to the visual studio code and linking process.

Day 11:we create the HTML files and CSS files and link the files easily,
how to code it and how to solve it .

Day 12: we can see the full details about the HTML and about the
<p>,<ul>, <div> tags .

Activity 3:
Day 13: we can learn about the full details about the tags and body.
Day 14:we can create a personal portfolio website for basic structure. the
HTML code is the body of the code for the personal website.

4
Day 15: visual studio code and github and how to process it and how to
handle the files and how to extract it .

Day 16:the main process about the github login process and also github
account creating and how to save the files. And how to create it

Day 17:we create the HTML files and how to edit them, the main key
process and how to compile the code in visual studio code .

Day 18: Go live process to show the live process of the personal website
in google chrome.
Activity 4:
Day 19: The main hosting of the personal website github is the main
website of the hosting
Day 20:We can create a personal portfolio website for basic structure. The
HTML code is the body of the code and the entire process contains the
github hosting.
Day 21: We can learn The remade of the files and linking the files in the
github and also visual studio code.
Day 22:The entire files contains a basic body structure and also style
sheets to the css files and images.
Day 23: we can learn how to access the entire code of the github uploaded
files and how to link and how to host the files.
Day 24: we can learn about the co-hosting and .jpg ,.html,.css linking
functions.

Activity 5:
Day 25: we can use the css for the basic body structure and also design
the user experiences .
Day 26: This day we can learn about the UI and Ux experiences.
Day 27: Day of the programe we learnt about how to access the github
save files and how to edith the code for the HTML and CSS code for the
design of the website .
Day 28:we complete the activity of how to create the file and how to access
the files to the visual studio code and linking process.
Day 29:we create the HTML files and CSS files and link the files easily,
how to code it and how to solve it and create the website .

Day 30: The entire project we can do and upload the files github hosting
account and create a public link and submit my link through a ppt.

5
 PROJECT ON FRONT END DEVELOPMENT IN
EDUNET FOUNDATION BY APSCHE

PROJECT BY : KATIKIREDDI REKHA SAI SRI

PROJECT DONE AT : VIRTUAL
PROJECT PERIOD : 05-06-2023 TO 10-07-2023
REGD.NO: 20A21A1227

6
 Contents
Week NAME OF THE TOPIC PAGE NO

1 INTRODUCTION TO FRONT END 8

DEVELOPMENT

2 SELF LEARNING PLAN 9

3 PROBLEM STATEMENT/PROJECT 10
TOPIC

4 PROJECT 11
IMPLEMENTATION

5 GITHUB HOSTING 12

6 PROJECT OVERVIEW 15

7
Week 1:-
To build a website, we need to use three important
things: HTML, CSS, and JavaScript. HTML is like the skeleton of a website.
It helps us create the structure and layout of the page. It's like building
blocks that we use to put everything in the right place.CSS is like the clothes
or the website's design. It helps us make the website look pretty and
colourful. We can choose different styles, colours, and fonts to make itlook
nice.

● The main takeaway is that to build a front end for a website, you need
to have a good understanding of HTML, CSS, and JavaScript.
Additionally, using tools like bundlers, transpilers, preprocessors, and
frameworks can greatly enhance your development process and make
it easier to work with these languages. Finally, understanding how the
front end communicates with the backend using technologies like
XMLHttpRequest, axios, or fetch is also important.

1. JavaScript is a powerful programming language used for building

interactive and dynamic websites.

2. Browsers like Google Chrome can only understand normal JavaScript, so we

use a transpiler like Babel to convert enhanced JavaScript code into normal
JavaScript

3.Browsers like Google Chrome can only understand normal JavaScript, so we

use a transpiler like Babel to convert enhanced JavaScript code into normal
JavaScript

8
Week 2:-
Self Learning plan :

1. Learn the basics of HTML: Start by understanding the structure and

syntax of HTML. Learn how to create different elements, tags, and
attributes.
2. Master CSS fundamentals: Dive into CSS and learn how to style your
HTML elements. Understand selectors, properties, and values. Practice
creating layouts, applying colours, and adding typography.
3. Get familiar with JavaScript: Begin learning JavaScript to add
interactivity to your web pages. Start with basic concepts like variables,
data types, and functions. Practice manipulating the DOM (Document
Object Model) to dynamically change elements on a page.
4. Explore responsive web design: Understand the importance of creating
websites that adapt to different screen sizes. Learn about media queries,
flexible grids, and responsive images to ensure your websites look good
on all devices.
5. Study CSS frameworks: Explore popular CSS frameworks like
Bootstrap or Tailwind CSS. Understand how to use their pre-built
components and grid systems to speed up your development process.
6. Learn a CSS preprocessor: Dive into a CSS preprocessor like Sass or
Less. Understand how to use variables, mixins, and nested styles to write
more efficient and organized CSS code.
7. Master a JavaScript framework/library: Choose a popular JavaScript
framework or library like React, Angular, or Vue.js. Learn how to build
dynamic and interactive web applications using these tools.
8. Understand version control: Learn how to use Git, a version control
system, to track changes in your code and collaborate with other
developers. Understand concepts like repositories, branches, commits,
and pull requests.
9. Practice responsive web design: Build responsive websites from
scratch, focusing on mobile-first design principles. Ensure your websites
are accessible and user-friendly across different devices.

9
 Week 3:-

Problem Statement/Project Topic:

The process of a portfolio website is very easy for junior web developers.
During the website-making process, I'm facing a problem in linking the
process in CSS files to HTML files and also linking the photos to an HTML
file. But later I can study the syntax about how to link the files and photos in
HTML to solve the problem.

The above picture shows the problem faced in linking the process in CSS
Before we can style our webpage with CSS, we need to connect our
CSS file to our HTML file. It's like giving the HTML file instructions on how to
make things look pretty. We do this by adding a link in the HTML file's head
section. We tell the link where the CSS file is located and what type of file it
is. Once we do this, the HTML file knows to listen to the CSS file for styling
instructions. It's like the HTML file and CSS file become friends and work
together to make the webpage look nice.

10
Week 4:-
Building a website using HTML and CSS is a fundamental skill for web
developers and designers. HTML (Hypertext Markup Language) is the
backbone of any web page, providing the structure and content, while CSS
(Cascading Style Sheets) is responsible for the visual presentation and
layout.To start building a website, you need to create an HTML file that will
serve as the foundation. In this file, you define the structure of the page
using HTML tags such as headings, paragraphs, images, links, and more.

Each element is enclosed within opening and closing tags, and you can nest
elements inside one another to create a hierarchy. Once the HTML structure
is in place, you can enhance the appearance of the website using CSS.

CSS allows you to control the colours, fonts, spacing, and overall layout of the
elements on the page. By selecting HTML elements and applying styles to them
using CSS selectors, you can create a visually appealing and

The Above picture represents the color segment in the CSS file
consistent design across all pages of your website.

11
 Week 5:-
To build a final website using HTML and CSS and host it on GitHub, follow
these steps:
1. Create the HTML structure: Open a text editor and create a new HTML
file. Start by adding the basic structure of an HTML document by typing
`DOCTYPE html>` at the top. Inside the `` tags, create a `` section and a ``
section. The `` section is where you will link your CSS file and add other
meta information, while the `` section is where you will add the content of
your website.

2. Link the CSS file: Create a new CSS file and save it with a .css extension,
such as "styles.css". In the `` section of your HTML file, add a `` tag to link
the CSS file. Use the `href` attribute to specify the path to your CSS file,
and set the `rel` attribute to "stylesheet". For example: ``. This will tell the
HTML document to apply the styles from the CSS file to the elements in
the HTML file.

3. Style the website using CSS: Open the CSS file and start writing CSS
rules to style your website. Use CSS selectors to target specific HTML
elements and apply styles to them. For example, to style all the headings
on your website, you can use the selector `h1, h2, h3 {colour: blue; }`.
Experiment with different CSS properties to change the font, colours,
layout, and other visual aspects of your website.

4. Add content to your website: Inside the `` section of your HTML file, start
adding content using HTML tags. Use tags like `` for headings, `` for
paragraphs, `` for images, `` for links, etc. Structure your content using
appropriate HTML tags to create a well-organized layout. Add as much
content as you want to make your website informative and engaging.

5. Commit your code to a GitHub repository: Create a GitHub account if you

don't have one already. Create a new repository on GitHub by clicking on
The "New" button. Follow the instructions to initialize the repository with a
README file. Once the repository is created, copy the repository URL.

12
 6. Push your code to GitHub: Open a terminal or command prompt and
navigate to your project folder. Initialize a Git repository by typing `git init`.
Add your files to the repository using `git add .`. Commit the changes
using
`git commit -m "Initial commit"`. Connect your local repository to the GitHub
repository using `git remote add origin `. Finally, push your code to GitHub
using `git push -u origin master`.

7. Enable GitHub Pages: In your GitHub repository, go to the "Settings"

tab. Scroll down to the "GitHub Pages" section. Under "Source", select the
branch you want to use for GitHub Pages (usually "master"). Click on
"Save" to enable GitHub Pages for your repository. GitHub will provide you
with a URL where your website is hosted.

8. View your website: Open a web browser and enter the URL provided
by GitHub Pages. Your website should now be live and accessible to
anyone. Remember to update your code and push changes to GitHub
whenever you make updates to your website.

13
The above process in Github is hosting my personal portfolio website.

14
Week 6:-
Project Overview :-
Purpose: The purpose of the personal portfolio website is to showcase my
skills, experiences, and achievements in a visually appealing and easily
accessible manner. It serves as an online representation of my professional
identity and acts as a hub for potential employers, clients, or collaborators to
learn more about me and my work.
1. Requirements Gathering: Understand the client's needs and
requirements for the website. This includes identifying the target audience,
desired features, and overall goals of the website.
2. Wireframing and Design: Create a wireframe or a visual representation
of the website's layout and structure. This helps in planning the placement
of different elements on the webpage. Design the visual aspects of the
website, including color schemes, typography, and graphics.
3. HTML Markup: Start by creating the HTML structure of the website.
Use semantic HTML tags to define the different sections and elements of
the webpage. Ensure that the HTML is clean, well-structured, and
accessible.
4. CSS Styling: Apply CSS styles to the HTML elements to define their
appearance. Use CSS properties to control the layout, colors, fonts, and
other visual aspects of the website. Make the design responsive, ensuring it
looks good on different devices and screen sizes.
5. JavaScript Interactivity: Enhance the website's functionality and
user experience using JavaScript. Add interactivity, such as form
validation, image sliders, dropdown menus, and other dynamic
elements. Use JavaScript libraries or frameworks if needed.

Scope: The scope of the personal portfolio website encompasses various

aspects of your professional life, including but not limited to:
● Introduction: Provide a brief introduction about yourself, highlighting
your background, expertise, and areas of interest.
● Work Samples: Showcase a selection of your best work samples, such
as projects, designs, or publications. Include descriptions and details
to give viewers a clear understanding of your contributions and
capabilities.
● Skills and Expertise: Outline your key skills and areas of expertise.
This section can include technical skills, programming languages,
tools, and any other relevant competencies.
● Experience: Present your professional experience, including previous
job positions, internships, or freelance projects. Provide a summary of
your responsibilities, accomplishments, and notable projects.
● Education and Certifications: Mention your educational background,
degrees, and certifications that add value to your professional profile.
15
Expected Outcomes and Impressions:
1. Form a positive impression of my professionalism, creativity, and
attention to detail.
2. Gain a comprehensive understanding of my skills, experiences,
and achievements.
3. Recognize my unique value proposition and how it aligns with
their needs or interests.
4. Find it easy to navigate and access the necessary information,
making it a user-friendly experience.
5. Be inspired and impressed by the quality of my work samples .

End Users :

Web Designers Digital Marketing profession

● Understand the perspectives of other website developers and thekind

of design they may be looking for.
● Learn about their needs for the realization of a strong online presence
and making their strategy work and marketing the product through the
online.
● Businesses man are expand there businesses in easy way through the
online website . It is very to easy marketing the product .It is very easy
to reach the product to the custome

16
My Solution and its Value Proposition:-
My Solution:
● The ultimate showcase of my works in an intuitive and creative
interface
Value Proposition:
● Unique design, ease of navigation, and fast load time to make an
impactful first impression on my audience.
Benefit to me:-
● Increased exposure, client opportunities, and an advancement of
profession within the industry.

How did you customize the project and make it your own?
The Theme:
● Customized theme chosen to reflect your identity as a professional.
Navigation Bars and Pages:
● Customized through my creativity to make the site unique,
user-friendly, and engaging.
Typography and Colors:
● My unique selection of color palettes and typography make my site
visually appealing to the audience and representing my personalityin
each text.

Modelling:
Framework:
● 1. Home , 2. About me , 3. Services , 4.certificates 5.contact me
Methodology:
● Build and customize,Gather and prepare content,Design and layout
Technologies:
 utilized technology principles to develop my solution. visual studio
code for coding .Include programming languages: HTML and CSS ,
web hosting services: GITHUB repositry, etc.

17
Results:
● In this portfoilo website I can present my professional academics to
others in easy way .
● I can add this portfoilo website in my resume during the interviews for
special identity .As a direct result of the portfolio website, I received
numerous career opportunities, including job offers, freelance projects,
and speaking engagements.
● The website acted as a powerful marketing tool, allowing me toattract
and impress prospective clients, employers, and collaborators.

Links:

Github Link:
https://rekhasaisri7.github.io/RekhaaPortfolio/portfolio/

Drive Link:

https://1drv.ms/f/s!Aq8pVR5w2p0gzwpto0EIAggDC_e?e=rC3Dhv

18
PORTFOLIO

19
20