A project report on

Front-end Development
(CODER PORTFOLIO WEBSITE)

Submitted in partial fulfilment of the Requirement for the award of

degree of BACHELOR OF TECHNOLOGY

In

ELECTRONICS AND COMMUNICATION ENGINEERING

By

Bheemarasetti. Ramya(20HQ1A0403)

Under the esteemed guidance of

Mrs.S. Madhu Bindu, M. Tech
Assistant Professor
Department of ECE

AVANTHI’S RESEARCH AND TECHNOLOGICAL ACADEMY

(Affiliated to JNTU-GV & Approved by AICTE, New Delhi)
BASAVAPALEM (V) BHOGAPURAM (M) VIZIANAGARAM DISTRICT
DEPARTMENT OF ELECTRONICS & COMMUNICATION ENGINEERING

2020-2024

1
 AVANTHI’S RESEARCH AND TECHNOLOGICAL ACADEMY
(Affiliated to JNTU Kakinada & Approved by AICTE, New Delhi)
BASAVAPALEM (V) BHOGAPURAM (M) VIZIANAGARAM DISTRICT
DEPARTMENT OF ELECTRONICS &COMMUNICATION ENGINEERING

BONAFIDE CERTIFICATE
This is to Certify that the Project “Front End Development (CODER
PORTFOLIO WEBSITE)” Is Bonafide work done by Bheemarasetti. Ramya
(20HQ1A0403). Who carried out the project under the supervision in the partial
fulfilment of the requirements for the award of degree of B. Tech in the discipline of
Electronics and Communication Engineering to Jawaharlal Nehru Technological
University, Gurajada Vizianagaram.

HEAD OF THE DEPARTMENT

Mrs.S. Madhu Bindu, M.Tech., EXTERNAL EXAMINER
Assistant Professor
ECE Department

2
 DECLARATION

We hereby declare that the work done on the desertion entitled

“Front End Development (CODER PORTFOLIO WEBSITE)” has been
carried by us and submitted in partial fulfilment of the curriculum for the
award of Bachelor of Technology in The Discipline of Electronics and
Communication Engineering to Jawaharlal Nehru Technological
University, Gurajada, Vizianagaram. We also declare that it has not
been submitted earlier in part or whole, to any university for the award of
any degree or diploma.

B. RAMYA (20HQ1A0403)

3
4
5
 TABLE OF CONTEXT

CHAPTER NO. TITLE PgNo.

ABSTRACT 7
1.0 INTRODUCTION 8-10
1.1 PROBLEM DEFINITION & OBJECTIVE 10-11
1.2 METHODOLOGY in Front-end 11
1.3 The Front-End Development Process 11-12
1.4 PROJECT OVERVIEW 12-13
2.0 FRONT-END DEVELOPER 14
2.1 HTML 14
2.2 HTML Elements 14-15
2.3 Brief History of HTML 15
2.4 HTML Versions 15-16
2.5 Features of HTML 16
2.6 HTML Formatting 16
2.7 HTML Image Example 17-18
2.8 Attributes of HTML img tag 18-19
3.0 CSS 19
3.1 HTML style using CSS 19-20
3.2 Three ways to apply CSS 20-21
3.3 HTML Classes 21
3.4 CSS Syntax 22
3.5 CSS Framework 22-23
3.6 Design methodologies of CSS 23
3.7 Browser Support for CSS 23-24
3.8 Limitations for CSS 25-26
3.9 Advantages of CSS 26
Disadvantages of CSS 27
4.0 JAVA SCRIPT 28
4.1 Definition of java script 28
4.2 What is JavaScript 29
4.3 Features of JavaScript 29-30
4.4 History of JavaScript 30
4.5 Application of JavaScript 30-32
4.6 Advantages of Java Script 32-33
5.0 About My Coder Portfolio Website& Pages 34-40

6
 ABSTRACT
A portfolio site is a website designed to showcase an individual's or a company's
work, skills, and achievements. It serves as a visual and interactive representation of them portfolio,
providing a platform to display projects, case studies, artwork, or any other
relevant work samples.
Take your portfolio as an opportunity to surprise and impress your potential clients. A portfolio website
lets you show off all of your work in one place. This not only looks good to a client, but it can also
help inspire you on your next projects.
Tell others about your skills and personality. Express your uniqueness through case studies. There are
certain areas where a website portfolio is more important than others. If you find yourself in one of the
following, it’s safe to assume that you need a portfolio like a book needs words:
Having your own website means customers are always able to find you and if interested, reach out for
you. If you don’t have an online presence nowadays, you are behind the times. A portfolio is a great
way for photographers, designers, developers and a wide range of artists to present their work online.
It lets you reflect your identity through your works – photos, graphic design, sketches, etc.
Time to roll up your sleeves! Today we’re going to dive into the topic of portfolio websites and which
industry experts should be using them. Learn how to create a good-looking site that uniquely showcases
your work and the importance of doing so. You want visitors and potential clients to remember you
for their next project.
Front-end developers may also use libraries and frameworks, such as React, Angular, or Vue.js, to
streamline their work and create more sophisticated and interactive UIs. Additionally, they often
collaborate with back-end developers, who are responsible for the server-side logic and data
management, to ensure seamless integration between the and much more. A front-end developer is a
professional who is in charge of creating the user interface and user experience (UI/UX) that users
interact with in order to access the application in question. The abstract also addresses the paramount
importance of responsiveness across diverse devices, necessitating the implementation of responsive
design techniques and the integration of evolving trends like Progressive Web Apps (PWAs) to ensure
seamless user experiences. Additionally, it underscores the significance of accessibility, performance
optimization, and UX design, crucial elements that shape the success and inclusivity of front-end
development.

7
 WHAT IS FRONT-END DEVELOPER?

HYPERTEXT MARKUP LANGUAGE, JAVA SCRIPT, CASCADING STYLE

8
 CHAPTER 1
INTRODUCTION
It outlines the pivotal role of HTML in structuring web content, CSS in styling and layout design, and
JavaScript in bestowing interactivity and dynamism upon web interfaces. Furthermore, it explores the
dynamic ecosystem of frameworks, libraries, and tools, such as React, Angular, and Vue. is, which
expedite the creation of intricate and reusable components, along with preprocessors like SASS and
LESS, enhancing the capabilities of CSS. Additionally, it underscores the significance of accessibility,
performance optimization, and UX design, crucial elements that shape the success and inclusivity of
front-end development endeavors.
In 1952, an economist named Harry Markowitz wrote his dissertation on “Portfolio Selection” a
paper that contained theories which transformed the landscape of portfolio management, a paper which
would earn him the Nobel Prize in Economics nearly four decades later.
➢ As the philosophical antithesis of traditional stock selection, his Modern Portfolio Theory (MPT)
continues to be a popular investment strategy, and this portfolio management tool If used
correctly can result in a diverse, profitable investment portfolio. Front-end development
continues to evolve rapidly, incorporating new technologies and trends such as Progressive Web
Apps (PWAs), which combine web and mobile application features to offer enhanced user
experiences.
➢ An introduction to a portfolio site is typically a brief and engaging statement that introduces the
purpose, content, and overall theme of the website. It aims to capture the attention of visitors and
provide them with a glimpse into the creator's skills, experience, and accomplishments While
the specific wording and style may vary depending on the individual and the nature of the
portfolio.
➢ As a front-end developer, my focus revolves around crafting engaging user interfaces using
HTML, CSS, and JavaScript to ensure seamless and intuitive user experiences. I specialize in
converting design mock ups into responsive, pixel-perfect web applications, emphasizing both
functionality and aesthetics. With a strong grasp of modern front-end frameworks like
React, Vue, and Angular, I excel in building dynamic and interactive web solutions.
➢ My expertise includes optimizing websites for performance, accessibility, and cross-browser
compatibility, ensuring a smooth browsing experience across various devices. I collaborate
closely with design and back-end teams, implementing their visions into functional, visually
compelling interfaces that enhance user engagement.

➢ My passion for front-end development extends to exploring emerging technologies, continuously

learning and implementing best practices to deliver cutting-edge solutions.
I leverage my understanding of user experience (UX) principles to create interfaces that not only
look great but also prioritize usability and accessibility for diverse audiences.
Having a keen eye for design, I ensure the seamless integration of visual elements, animations,
and transitions to elevate the overall user interface.

9
 ➢ My experience extends to optimizing front-end workflows, employing task runners, bundlers,
and version control systems, streamlining development processes for efficient project delivery.
I 'm adept at troubleshooting and debugging, employing a methodical approach to identify and
resolve front-end issues, thereby maintaining the integrity and performance of applications.
➢ A portfolio site is typically a brief and engaging statement that introduces the purpose, content,
and overall theme of the website. It aims to capture the attention of visitors and provide them
with a glimpse into the creator's skills, experience, and accomplishments. While the specific
wording and style may vary depending on the individual and the nature of the portfolio.
➢ A portfolio site is a website designed to showcase an individual's or a company's work, skills,
and achievements. It serves as a visual and interactive representation of their portfolio, providing
a platform to display projects, case studies, artwork, or any other relevant work samples.
Portfolio sites are commonly used by professionals in various fields, including designers,
photographers, artists, writers, web developers, and more.
➢ A portfolio site should have an attractive design that reflects the creator's
style and aesthetics. It should make good use of colors, typography, images, and other
visual elements to create a visually pleasing experience.

1.1 PROBLEM DEFINITION & OBJECTIVE

The current user interface lacks responsiveness, interactivity, and a seamless user experience.
Users encounter difficulties navigating the platform, resulting in a decrease in engagement metrics and
increased bounce rates. Additionally, the absence of a mobile-responsive design limits accessibility,
hampering the ability to reach a broader audience. As a result, there's a pressing need to revamp the
front-end architecture and design to address these shortcomings and deliver an enhanced, user-centric
interface.

The problem is that programmers and software developers struggle to effectively showcase
their coding skills and projects to potential employers or clients. They lack a
comprehensive and visually appealing way to present their portfolio of code, making it difficult to
demonstrate their expertise, creativity, and problem-solving abilities. This results in missed
opportunities for career advancement or securing new clients. Therefore, there is a need for a solution
that enables programmers to create and maintain an impressive portfolio of their coding projects,
making it easier for them to showcase their skills and stand out in a competitive market.

The main objective for a frontend developer is to create user-friendly, responsive, and
visually engaging interfaces for websites or applications by implementing designs using language
like HTML, CSS, and JavaScript. They focus on optimizing performance, ensuring cross-browser
compatibility, and collaborating closely with design and backend teams to deliver seamless user
Experiences.

10
 The primary objective of this front-end development initiative is to overhaul the user
interface, focusing on responsiveness, user-friendliness, and improved accessibility across multiple
devices. This involves implementing modern front-end technologies and frameworks to create a
visually appealing, intuitive, and interactive interface

1.2 METHODOLOGY
1.Designing Front-End of the Website
Front-end of the website will be created using HTML for styling the Page with its layout structure.
Dynamic images which will be Handled by Admins. Front-end development refers to the creation of
the user interface and user experience of a website or web application. It involves translating the design
and visual elements into code that can be understood by web browsers. As a full-stack developer, you
need to have a solid understanding of front-end development to create visually appealing and
interactive web applications.

2.Designing Back-End of the website

Back end of the website is created using Any website that needs registration, posting, storage of data,
and more will need a backend system. you will also need a server-side programming language like
CSS etc. for server-side logic.

3.Designing Database
The websites I have built for other people all use a database because they need to handle user data and
dynamically generate content. Understanding how to store, retrieve, and manage data efficiently is
fundamental. You should be familiar with both relational and non-relational databases and know when
to use each.

1.3 The Front-End Development Process

The front-end development process can be divided into several key steps:
1. Gathering Requirements: The first step in the front-end development process is to gather all the
requirements and specifications for the project. This involves understanding the client’s need
and goals, as well as any design or functionality requirements.
2. Designing: Once the requirements are gathered, the next step is to create a visual design for the
website or application. This includes creating wireframes and mock-ups to showcase the layout, color
scheme, typography, and overall look and feel of the front end.
3. Development: After the design is finalized, the development stage begins. This involves writing
the code for the front end using HTML, CSS, and JavaScript. It also includes implementing any
interactive elements, such as forms or animations, and ensuring that the website or application is
responsive and compatible with different devices and browsers.

11
4. Testing: Once the front-end development is complete, thorough testing is done to ensure that
everything is functioning as expected. This includes testing for bugs, usability, performance, and
compatibility across different platforms.
5. Deployment: After testing, the front end is ready to be deployed to a live server. This involves
uploading the code to a web hosting service or deploying it to a cloud Platform. It also includes
configuring any necessary server settings and setting up a domain name.
6.Maintenance: Once the front end is live, ongoing maintenance is required to ensure that the
website or application continues to function properly. This includes regular updates, bug fixes, and
monitoring for any issues that may arise.

1.4 PROJECT OVERVIEW

A portfolio site is a website designed to showcase an individual's or a company's work, skills, and
achievements. It serves as a visual and interactive representation of their portfolio, providing a platform
to display projects, case studies, artwork, or any other relevant work samples.
Absolutely, showcasing your coding skills through a portfolio website is a fantastic way to demonstrate
your abilities as a frontend developer. Here's an expanded overview with more points you could
include:

1. Home Page: Create an engaging landing page that introduces yourself, your expertise, and what
visitors can expect from your portfolio.

2. Projects Section: Showcase your best work with detailed descriptions, images, or videos. Highlight
the technologies used, your role, and the challenges you faced.

3. Skills & Technologies: Display a comprehensive list of programming languages, frameworks,

libraries, and tools you're proficient in. Categorize them based on expertise levels if possible.

4. About Me: Provide a brief background about yourself, your passion for coding, your journey into
frontend development, and what drives you in this field.

5. Resume/CV: Offer a downloadable version of your resume or CV for visitors interested in a more
detailed view of your experiences and skills.

6. Testimonials/Reviews: If available, feature testimonials from clients, colleagues, or managers.

Social proof adds credibility to your work.

7. Blog/Articles: Share insights, tips, tutorials, or case studies related to frontend development. This
showcases your knowledge and helps visitors learn from your expertise.

12
8. Contact Information: Make it easy for potential clients or collaborators to reach out to you. Include
a contact form or your preferred method of communication.

9. Responsive Design: Ensure your website is mobile-friendly and looks great across different devices
and screen sizes.

10. UI/UX Design: Highlight your attention to design aesthetics and usability by demonstrating a clean
and intuitive user interface.

11. Accessibility Considerations: Showcase your commitment to inclusivity by implementing

accessibility features like alt text for images and ensuring proper color contrast.

12. Version Control/GitHub: Include links to your GitHub or other version control platforms where
visitors can explore your code repositories and contributions.

FRONT-END DEVELOPMENT

13
 CHAPTER-2
FRONT-END DEVELOPER
❖ A front-end developer is a programmer who specializes in creating the client-side of a website
or web application.
❖ A Front-End Developer is someone who creates websites and web applications.
❖ The difference between Front-End and Back-End is that Front-End refers to how a web page
looks, while back-end refers to how it works.
❖ Front-End as “client-side”and “Back-End" as server-side.
❖ The basic languages for Front-End Development are HTML, CSS, and JavaScript.

2.1 HTML
What is HTML?
HTML is an acronym which stands for “Hyper Text Mark-up Language “which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Mark-up
Language, and Web page.
Hyper Text: Hyper Text simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked
on a hypertext. Hyper Text is a way to link two or more web pages (HTML documents) with
each other.
Mark-up language: A mark-up language is a computer language that is used to apply layout
and formatting conventions to a text document. mark-up language makes text more interactive
and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by
a web browser. A web page can be identified by entering an URL. A Web page can be of the
static or dynamic type. With the help of HTML only, we can create static web pages.
➢ HTML is a mark-up language which is used for creating attractive web pages with
the help of styling, and which looks in a nice format on a web browser.
➢ An HTML document is made of many HTML tags and each HTML tag contains different
Content.

14
2.2 HTML Elements
➢ An HTML element is a start tag and an end tag with content in between:
<h1>This is a Heading</h1>
➢ HTML elements can have attributes

HTML elements are the building blocks of HTML pages.

● The <! DOCTYPE html> declaration defines this document to be HTML5

● The <html> element is the root element of an HTML page
● The lang attribute defines the language of the document
● The <meta> element contains meta information about the document
● The charset attribute defines the character set used in the document
● The <title> element specifies a title for the document
● The <body> element contains the visible page content
● The <h1> element defines a large heading
● The <p> element defines a paragraph

2.3 Brief History of HTML

In the late 1980's, a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for
CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system.
Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a
document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5.

2.4 HTML Versions

Since the time HTML was invented there are lots of HTML versions in market, the brief introduction
about the HTML version is given below:
HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML language,
and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was the standard language
version for website design. HTML 2.0 was able to support extra features such as form-based file
upload, form elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable of
creating tables and providing support for extra options for form elements. It can also support a web
page with complex mathematical equations. It became an official standard for any browser till January
1997. Today it is practically supported by most of the browsers.

15
HTML 4.01: HTML 4.01 version was released in December 1999, and it is a very stable version of
HTML language. This version is the current official standard, and it provides added support for
stylesheets (CSS) and scripting ability for various multimedia elements.

HTML5: HTML5 is the newest version of Hyper Text Mark-up language. The first draft of this version
was announced in January 2008. There are two major organizations one is W3C (World Wide Web
Consortium), and another one is WHATWG (Web Hypertext Application Technology Working
Group) which are involved in the development of the HTML 5 version, and still, it is under
development.

2.5 Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.
3) It is a mark-up language, so it provides a flexible way to design web pages along with the text. 4) It
facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest
of browsing the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and
Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it
more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-

16
2.6 HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML provides us the ability
to format text without using CSS. There are many formatting tags in HTML. These tags are used to
make text bold, italicized, or underlined. There are almost 14 options available for how text appears in
HTML and XHTML.
In HTML the formatting tags are divided into two categories:
Physical tag: These tags are used to provide the visual appearance to the text.
Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give the same visual appearance, but they
will be different in semantic Here, we are going to learn 14 HTML formatting tags.

Element
Name Description

<b> This is a physical tag, which is used to bold the text written between it.
<i> This is a physical tag, which is used to bold the text written between it.
<u> This tag is used to underline text written between it.
<del> This tag is used to display the deleted content.
<mark> This tag is used to highlight text.

2.7 HTML Image Example

HTML Image HTML img tag is used to display images on the web page. HTML img tag is an empty
tag that contains attributes only, closing tags are not used in HTML image elements.
Let's see an example of HTML image.
1.<h2>HTML Image Example</h2>
2.<img src=” good_morning.jpg” alt=” Good Morning Friends”/>

Output:

17
 2.8 Attributes of HTML img tag
The src and alt are important attributes of HTML img tag.
All attributes of the HTML image tag are given below.

1) src It is a necessary attribute that describes the source or path of the image. It instructs the browser
where to look for the image on the server. The location of the image may be on the same directory
or another server.
2) alt The alt attribute defines an alternate text for the image, if it can't be displayed. The value of
the alt attribute describes the image in words. The alt attribute is considered good for SEO
prospective.
3) width It is an optional attribute which is used to specify the width to display the image.
It is not
recommended now. You should apply CSS in place of width attribute.
4) height It h3 the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of the height attribute.

Use of height and width attribute with img tag

You have learnt about how to insert an image in your web page, now if we want to give some height
and width to display image according to our requirement, then we can set it with height and width
attributes of image.

Example:

<img src="animal.jpg" height="180" width="300" alt="animal image"

Output:

18
19
 Advantages:

 HTML helps to build structure of a website and is a widely used Markup language.
 It is easy to learn.
 Every browser supports HTML Language.
 HTML is light weighted and fast to load.
 Storage of big files are allowed because of the application cache feature.
 Do not get to purchase any extra software because it’s by default in every window.
 Loose syntax (although, being too flexible won’t suit standards).
 HTML is simple to edit as being a plain text.
 It integrates easily with other languages such as JavaScript, CSS etc.
 HTML is that it is easy to code even for novice programmers.
 HTML also allows the utilization of templates, which makes designing a webpage easy.
 It is fast to download as the text is compressible.
 Very useful for beginners in the web designing field.
 HTML can be supported to each and every browser, if not supported to all the browsers.
 HTML is built on almost every website, if not all websites.
 HTML is increasingly used for data storage as like XML syntax.
 HTML has many tag and attributes which can short your line of code.

20
 Disadvantages:

 It cannot produce dynamic output alone, since it’s a static language.

 Making the structure of HTML documents becomes tough to understand.
 Errors can be costly.
 It is the time consuming as the time it consumes to maintain on the color scheme of a page and to
make lists, tables and forms.
 We need to write a lot of code for just creating a simple webpage.
 We have to check up the deprecated tags and confirm not to use them to appear because another
language that works with HTML has replaced the first work of the tag, and hence the opposite
language needs to be understood and learned.
 Security features offered by HTML are limited.
 If we need to write down long code for creating a webpage, then it produces some complexity.
 HTML can create only static and plain pages so if we’d like dynamic pages then HTML isn’t
useful.
 Editing of web page need to be done separately, they are not centralized.

21
 CHAPTER-3
CSS
(CASCADING STYLE SHEETS)

➢ CSS stands for Cascading Style Sheets

➢ CSS describes how HTML elements are to be displayed.
➢ Building Strong expertise to develop front end applications using CSS3.
➢ Implement MVC and responsive design to scale well across PC, tablet and Mobile Phone.
➢ CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
the look and formatting of a document written in mark-up language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user
interfaces. It can also be used with any kind of XML documents including plain XML, SVG
and XUL.
➢ CSS is used along with HTML and JavaScript in most websites to create user interfaces for
web applications and user interfaces for many mobile applications.

3.1 HTML style using CSS

❖ Let's suppose we have created our web page using a simple HTML code, and we want something
which can present our page in a correct format, and be visibly attractive. So to do this, we can
style our web page with CSS (Cascading Stylesheet) properties.

❖ CSS is used to apply the style in the web page which is made up of HTML elements. It describes
the look of the webpage.

❖ CSS provides various style properties such as background color, padding, margin, bordercolor,
and many more, to style a webpage.

❖ Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).

22
3.2 Three ways to apply CSS
To use CSS with HTML document, there are three ways:

Inline CSS: Define CSS properties using style attributes in the HTML elements.

Internal or Embedded CSS: Define CSS using <style> tag in <head> section.

External CSS: Define all CSS property in a separate .css file, and then include the file with

HTML file using tag in section.

Inline CSS: Inline CSS is used to apply CSS in a single element. It can apply style uniquely in
each element. To apply inline CSS, you need to use style attribute within the HTML element. We
can use as many properties as we want, but each property should be separated by a semicolon (;).

Example:
1.<h3 style="color: red;
2. font-style: italic;
3. text-align: center;
4. font-size: 50px;
5. padding-top: 25px;">Learning HTML using Inline CSS</h3>

Output:

Learning HTML using Inline CSS

Internal CSS:
An Internal style sheet contains the CSS properties for a webpage in a section of an HTML document.
To use Internal CSS, we can use class and id attributes. We can use internal CSS to apply a style for
a single HTML page.

23
 External CSS:
An external CSS contains a separate CSS file which only contains style code using the class name,
id name, tag name, etc. We can use this CSS file in any HTML file by including it in the HTML file
using tag.
If we have multiple HTML pages for an application and which use similar CSS, then we can use
external CSS.
There are two files need to create to apply external CSS
1.First, create the HTML file
2.Create a CSS file and save it using the .css extension (This file will only contain the styling code.)
3.Link the CSS file in your HTML file using tag in header section of HTML document.

3.6 Design methodologies of CSS

As the size of CSS resources used in a project increases, a development team often needs to
decide on a common design methodology to keep them organized. The goals are ease of
development, ease of collaboration during development, and performance of the deployed
stylesheets in the browser. Popular methodologies include OOCSS (object-oriented CSS), ACSS
(atomic CSS), CSS (organic Cascade Style Sheet), SMACSS (scalable and modular architecture
for CSS), and BEM (block, element, modifier) documented systems for authoring CSS in a way
that allows us to develop, maintain and scale the front-end as a set of small, isolated
modules. They help us to avoid the scalability and maintainability issues that arise when working
with large, complex, rapidly-iterated systems . Some of the popular CSS methodologies are:

1. Object-Oriented CSS (OOCSS): This methodology advocates the separation of structure from
skin. The methodology makes a clear distinction between content and its containers. In OOCSS,
style rules are written exclusively using CSS class selectors .
2. Block, Element, Modifier (BEM): This methodology is based on the concept of dividing the user
interface into independent blocks. Each block is a self-contained entity that can be reused across
different pages. BEM uses a naming convention that helps to identify the purpose of each block,
element, and modifier .
3. Scalable and Modular Architecture for CSS (SMACSS): This methodology is based on the
idea of categorizing CSS rules into five categories: Base, Layout, Module, State, and
Theme. SMACSS provides guidelines for writing CSS that is flexible, modular, and scalable .
Each CSS methodology offers a slightly different set of solutions to the CSS
scalability/maintainability problem. A CSS methodology will often define guidelines for CSS and

24
 HTML best practices, class- and ID-naming conventions, ordering and grouping of CSS style
rules, and code formatting .It’s important to note that there is no “best” CSS methodology.
Different approaches work better for different individuals/teams/projects. Hopefully, looking at a
few existing CSS methodologies will help you discover one that fits your needs. Or it might
inspire you to create your own custom CSS-authoring guidelines

3.7 Browser Support for CSS

Each web browser uses a layout engine to render web pages, and support for CSS functionality is not
consistent between them. Because browsers do not parse CSS perfectly, multiple coding techniques
have been developed to target specific browsers with workarounds (commonly known as hack CSS
Hack or CSS filters). The adoption of new functionality in CSS can be hindered by a lack of support
in major browsers. For example, Internet Explorer was slow to add support for many CSS 3 features,
which slowed the adoption of those features and damaged the browser's reputation among developers.
Additionally, a proprietary syntax for the non-vendor prefixed property was used in some versions. In
order to ensure a consistent experience for their users, web developers often test their sites across
multiple operating systems, browsers, and browser versions, increasing development time and
complexity. Tools such as Browser Stack have been built to reduce the complexity of maintaining these
environments.

In addition to these testing tools, many sites maintain lists of browser support for
specific CSS properties, including Can I Use and the MDN Web Docs. Additionally, CSS 3 defines
feature queries, which provide a directive that will allow developers to target browsers with support
for certain functionality directly within their CSS. CSS that is not supported by older browsers can also
sometimes be patched in using JavaScript polyfills, which are pieces of JavaScript code designed to
make browsers behave consistently.

These workarounds and the need to support fallback functionality can add complexity to
development projects, and consequently, companies frequently define a list of browser versions that
they will and will not provide.

As websites adopt newer code standards that are incompatible with older browsers,
these browsers can be cut off from accessing many of the resources on the web (sometimes
intentionally). Many of the most popular sites on the internet are not just visually degraded on older
browsers due to poor CSS support but do not work at all, in large part due to the evolution of JavaScript
and other web technologies.

3.8 Limitations for CSS

Some noted limitations of the current capabilities of CSS include:

Cannot explicitly declare new scope independently of position:

Scoping rules for properties such as z-index look for the closest parent element with a position: absolute
or position: relative attribute. This odd coupling has undesired effects. For example, it is impossible to

25
avoid declaring a new scope when one is forced to adjust an element's position, preventing one from
using the desired scope of a parent element.

Pseudo-class dynamic behavior not controllable

CSS implements pseudo-classes that allow a degree of user feedback by conditional application of
alternate styles. One CSS pseudo-class, is dynamic (equivalent of JavaScript "onmouseover") and has
potential for misuse (e.g., implementing cursor-proximity popups), but CSS has no ability for a client
to disable it (no "disable"-like property) or limit its effects (no "nochange"-like values for each
property).
Cannot name rules
There is no way to name a CSS rule, which would allow (for example) client-side scripts to refer to the
rule even if its selector changes.

Cannot include styles from a rule into another rule

CSS styles often must be duplicated in several rules to achieve the desired effect, causing additional
maintenance and requiring more thorough testing. Some new CSS features were proposed to solve this
but were abandoned afterward. Instead, authors may gain this ability by using more sophisticated
stylesheet languages which compile to CSS, such as Sass, Less, or Stylus.

Cannot target specific text without altering mark up

Besides the: firstletter pseudo-element, one cannot target specific ranges of text without needing to
utilize placeholder elements.

CSS Key Features

 CSS specifies how HTML elements should be displayed on screens.
 The Major key feature of CSS includes styling rules which are interpreted by the client browser
and applied to various elements.
 Using CSS, you can control the color text, the style of fonts, spacing between elements, how
columns are sized, variation in display for different devices and screen size as well as a variety
of other effects.

3.9 Advantages of CSS

Separation of content from presentation
Main article: Separation of content and presentation
CSS facilitates the publication of content in multiple presentation formats based on nominal
parameters. Nominal parameters include explicit user preferences, different web browsers, the type of
device being used to view the content (a desktop computer or mobile device), the geographic location
of the user, and many other variables.

26
Site-wide consistency
Main article: Style sheet (web development)
When CSS is used effectively, in terms of inheritance and "cascading", a global style sheet can be used
to affect and style elements site-wide. If the situation arises that the styling of the elements should be
changed or adjusted, these changes can be made by editing rules in the global style sheet. Before CSS,
this sort of maintenance was more difficult, expensive, and time-consuming.

Bandwidth
A stylesheet, internal or external, specifies the style once for a range of HTML elements
selected by class , type or relationship to others. This is much more efficient than repeating style
information inline for each occurrence of the element. An external stylesheet is usually stored in the
browser cache and can therefore be used on multiple pages without being reloaded, further reducing
data transfer over a network.
Page reformatting
Main article: Progressive enhancement
With a simple change of one line, a different style sheet can be used for the same page. This has
advantages for accessibility, as well as providing the ability to tailor a page or site to different target
devices. Furthermore, devices not able to understand the styling still display the content.

Accessibility
Main article: Table less web design &Accessibility
Without CSS, web designers must typically lay out their pages with techniques such as HTML tables
that hinder accessibility for vision-impaired url.

Disadvantages of CSS:
 CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.
 With CSS, what works with one browser might not always work with another. The web developers
need to test for compatibility, running the program across multiple browsers.
 There exists a scarcity of security.
 After making the changes we need to confirm the compatibility if they appear. The similar change
effects on all the browsers.
The programming language world is complicated for non-developers and beginners.
Different levels of CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.
 Browser compatibility (some styles sheet are supported and some are not).
 CSS works differently on different browsers. IE and Opera supports CSS as different logic. There
might be cross-browser issues while using CSS.

27
 CHAPTER-4
JAVA SCRIPT
4.1 Definition of java script:
JavaScript is a versatile, lightweight, client-side scripting language used in web development. It
can be used for both Client-side as well as Server-side developments. JavaScript is also known as
a scripting language for web pages, it supports variables, data types, operators, conditional
statements, loops, functions, arrays and objects with JavaScript, you can create dynamic,
interactive, and engaging websites.

JavaScript is a programming language that executes on the browser. It turns static

HTML web pages into interactive web pages by dynamically updating content, validating form
data, controlling multimedia, animate images, and almost everything else on the web pages.

JavaScript is used to create client-side dynamic pages. JavaScript is an object-based scripting

language which is lightweight and cross-platform. JavaScript is not a compiled language, but it is a
translated language. The JavaScript Translator (embedded in the browser) is responsible for
translating the JavaScript code for the web browser.

4.2 What is JavaScript:

JavaScript (js) is a light-weight object-oriented programming language which is used by several
websites for scripting the webpages. It is an interpreted, full-fledged programming language that
enables dynamic interactivity on websites when applied to an HTML document. It was introduced
in the year 1995 for adding programs to the webpages in the Netscape Navigator browser. Since
then, it has been adopted by all other graphical web browsers. With JavaScript, users can build
modern web applications to interact directly without reloading the page every time. The traditional
website uses js to provide several forms of interactivity and simplicity. Although, JavaScript has no
connectivity with Java programming language. The name was suggested and provided in the times when Java was gaining popularity
in the market. In addition to web browsers, databases such as Couch DB and

28
 4.3 Features of JavaScript:

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using
classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

4.4 History of JavaScript:

In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed to become
more dynamic. Thus, a 'glue language' was believed to be provided to HTML to make web
designing easy for designers and part-time programmers. Consequently, in 1995, the company
recruited Brendan Eich intending to implement and embed Scheme programming language to the
browser. But, before Brendan could start, the company merged with Sun Microsystems for
adding Java into its Navigator so that it could compete with Microsoft over the web technologies
and platforms. Now, two languages were there: Java and the scripting language. Further, Netscape
decided to give a similar name to the scripting language as Java's. It led to 'JavaScript'. Finally, in
May 1995, Marc Andreessen coined the first code of JavaScript named 'Mocha'. Later, the
marketing team replaced the name with 'Live Script'. But, due to trademark reasons and certain
other reasons, in December 1995, the language was finally renamed to 'JavaScript'. From then,
JavaScript came into existence.

29
 4.5 Application of JavaScript:
JavaScript is used to create interactive websites. It is mainly used for:

o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and
prompt dialog box),
o Displaying clocks etc.

4.6 Limitations of CSS:

JavaScript, like any programming language, has its own set of limitations. Here are a few
examples of the limitations of JavaScript:

1. Single threading: JavaScript is a single-threaded language, which means that it can only
execute one task at a time. This can lead to performance issues when working with large amounts
of data or when running complex calculations.

2. Limited precision of numbers: JavaScript uses a double-precision floating-point

format for numbers, which can lead to rounding errors and inaccuracies when working with very
large or very small numbers.

3. Limited support for multithreading: JavaScript lacks built-in support for

multithreading, which can make it difficult to take full advantage of multi-core processors.

30
4.Limited support for concurrency: JavaScript has a call back-based model
for handling concurrency, which can lead to call back hell and complex nested code, making
it difficult to read, understand and maintain.

5.Limited support for low-level operations: JavaScript is not a low-level

language and it does not provide direct access to memory, disk, or other resources, which
can make it less suitable for certain types of applications, such as operating systems or
device drivers.

6.Lack of type safety: JavaScript is a loosely typed language and it does not have strict
type checking, which can make it easier to introduce bugs and make it harder to catch them
during development.

7.Limited support for Object-Oriented programming: JavaScript's

prototype-based model of OOP is different from traditional class-based OOP and it can make
it harder to understand and maintain OOP code.

4.6 Advantages of JavaScript:

 Regardless of where you host JavaScript, it always gets executed on the client environment to
save lots of bandwidth and make the execution process fast.
 In JavaScript, XMLHttpRequest is an important object that was designed by Microsoft. The
object calls made by XMLHttpRequest as an asynchronous HTTP request to the server to
transfer the data to both sides without reloading the page
 The biggest advantage of JavaScript having the ability to support all modern browsers and
produce an equivalent result.
 Global companies support community development by creating projects that are important. An
example is Google (created the Angular framework) or Facebook (created
the React.js framework).
31
 JavaScript is employed everywhere on the web.
 JavaScript plays nicely with other languages and may be utilized in an enormous sort of
applications.
 There are many open-source projects that provide useful help for developers to add JavaScript.

32
 4.7 Disadvantages of JavaScript:

 This may be difficult to develop large applications, although you’ll also use the TypeScript
overlay.
 This applies to larger front-end projects. The configuration is often a tedious task to the number
of tools that require to figure together to make an environment for such a project. This is often
directly associated with the library’s operation.
 The main problem or disadvantage in JavaScript is that the code is always visible to everyone
anyone can view JavaScript code.
 No matter what proportion fast JavaScript interprets, JavaScript DOM (Document Object Model)
is slow and can be a never-fast rendering with HTML.
 If the error occurs in JavaScript, it can stop rendering the whole website. Browsers are extremely
tolerant of JavaScript errors.
 JavaScript is usually interpreted differently by different browsers. This makes it somewhat
complex to read and write cross-browser code.
 Though some HTML editors support debugging, it’s not as efficient as other editors like C/C++
editors. Hence difficult for the developer to detect the matter.
 This continuous conversion takes longer than the conversion of a number to an integer. This
increases the time needed to run the script and reduces its speed.

33
34
5.0 About My Coder Portfolio Website:

I used VISUAL STUDIO CODE as my tool for coding.

The portfolio is a collection of project works, skills, and

achievements of an individual or an organization.
It can be served for various purposes such as job applications or
any other business-client meetings.
These portfolio websites act as visual representations of the skills
and capabilities of an individual or any organization.
35
 I have used HTML for the structure, CSS for styling, and JavaScript for
responsiveness and interactivity.
 My website contains a navbar, cards, header, and footer.
 I added animation with the help of animate.css, animate on scroll, and
favicon for icons.
 I choose HTML, CSS, and JS as my platform to build my portfolio
website.
 I customize the layout, colors, fonts, and images to reflect my style and
purpose

36
ABOUT ME WEBPAGE

SERVICES WEB PAGE

37
PORTFOLIO WEBPAGE

38
DETAILS FOR CONTACT ME!!

39
LINKS:

MAIL ID: bheemarasettiramya@gmail.com

GITHUB REPOSITORY: https://github.com/Ramya596/Coder-Portfolio

LINKEDIN:https://www.linkedin.com/in/bheemarasetti-ramya56284424b/

Reference:
I Refer from IBM Portal by using Videos & modules of the front-
end development.
I Refer from Browsing on internet. Various Modules.

40