UDEMY

A TRAINING REPORT

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD OF

THE DEGREE OF

BACHELOR OF TECHNOLOGY
(Computer Engineering)

SUBMITTED TO
MAHARSHI DAYANAND UNIVERSITY, ROHTAK

SUBMITTED BY
Name of Student University Roll No.
Nishant 98149231

25 06-22 to 02-08-23

THE TECHNOLOGICAL INSTITUTE OF TEXTILE & SCIENCES,

BHIWANI HARYANA

1
 UDEMY
A TRAINING REPORT

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD OF

THE DEGREE OF

BACHELOR OF TECHNOLOGY
(Computer Engineering)

SUBMITTED TO
MAHARSHI DAYANAND UNIVERSITY, ROHTAK

SUBMITTED BY
Name of Student University Roll No.
Nishant 98149231

25 06-23 to 02-08-23

THE TECHNOLOGICAL INSTITUTE OF TEXTILE & SCIENCES,

BHIWANI HARYANA

2
 ACKNOWLEDGEMENT
I would like to place on record my deep sense of gratitude to Mr. Jonas Schmedtmann, the Web Developer at Udemy
for his generous guidance, help and useful suggestions.

I express my sincere gratitude to Eren Bali, the Founder at Udemy, for his stimulating guidance, and continuous
encouragement.

I am extremely thankful to Prof. Dr. Jyoti Chaudhary, HOD, The Technological Institute of Textile & Sciences,
Bhiwani for valuable suggestions and encouragement.

I am also thankful to Mr. Akhil Kaushik, Training, and placement officer, HOD, The Technological Institute of
Textile & Sciences, Bhiwani for providing the opportunity to get the knowledge.

Signature of Student

Nishant (98149231)

3
 CERTIFICATE

I hereby certify that I have completed the Four weeks/Six weeks/ Six months Training in partial fulfillment
of the requirements for the award of Bachelor of Technology in Computer Engineering or Information
Technology. I did my training in Udemy Trainings from 25-06-23 to 02-08-23.

The matter presented in this Report has not been submitted by me for the award of any other degree
elsewhere.

Signature of Student

Nishant (20CE004),

Signatures

Examined by:
Dr. Jyoti Chaudhary

Dr. Jyoti Chaudhary

HOD
Department of Computer Engineering & Information Technology

4
5
About Udemy
In the fast-paced digital age, the landscape of education has undergone significant transformations.
Traditional brick-and-mortar institutions are no longer the sole providers of knowledge and skills. Online
learning platforms have emerged as powerful alternatives, democratizing education and making it accessible
to people all over the world. Among the numerous platforms that have made their mark in this space, Udemy
stands out as a leading player.

Udemy, short for "You Academy," was founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani.
The founders envisioned a platform that would connect experts, instructors, and educators with learners,
allowing anyone to create and share knowledge. The inspiration for Udemy came from Eren Bali's personal
experience. He grew up in a small village in Turkey where access to quality education was limited. Eren's
story reflects the essence of Udemy's mission: to democratize education and make it accessible to all,
regardless of geographic location or socioeconomic background.

Udemy is an online learning platform that offers a wide variety of courses on a range of subjects. It is known
for providing a marketplace where instructors from around the world can create and sell their courses to
learners who want to acquire new skills or knowledge. Udemy courses cover a diverse range of topics,
including but not limited to:

1. Technology and programming

2. Business and entrepreneurship
3. Personal development
4. Health and fitness
5. Arts and music
6. Language learning
7. Science and mathematics
8. Marketing and digital marketing
9. Photography and videography
10. Cooking and culinary skills

Udemy courses are typically in video format, and they often include quizzes, assignments, and
supplementary resources to help students master the material. While some courses are free, most are
available for purchase, and students can access them for a lifetime once purchased.
Udemy has become a popular platform for both learners seeking to acquire new skills and instructors
looking to share their expertise with a global audience. It provides a flexible and accessible way to learn
a wide range of subjects from the comfort of one's own home or wherever there is an internet connection.
Please note that my knowledge is based on information available up to September 2021, and there may have
been developments or changes on the platform since then.

6
 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
goal of Udemy, where I had the honor to spend my first training period.

A solution has been proposed for the internationalization and customization of web applications in general.
Considering web standards and the 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.

7
Table of Contents

i. Acknoledgement........................................................3

ii. Abstract.....................................................................8

1. Introduction…..................................................................9

1.1 Intro web Development.........................................9

1.2. HTML…...............................................................12

1.3. CSS........................................................................15

2. Code Used........................................................................19

2.2 HTML code..........................................................19

2.3 CSS code...............................................................28

3. Screenshots.......................................................................37

4. References.........................................................................40

8
1.1 An Introduction To Web Development

1. Who is a web developer?

A web developer is at heart an interactive artist. They’re someone driven by a deep desire to create things. A
web developer’s canvas is a user’s web browser.

Much like how a curious child takes pleasure in making toys by joining LEGO blocks—and then
experiences a similar joy in taking things apart to see how they’re made, a web developer’s job is to use the
basic building blocks of the web (like HTML, CSS and JavaScript) to create something complex like a
webpage. Don’t sweat it! We’ll get into all of those terms soon.

It is also the web developer’s job to diagnose problems in a website’s functionality, to understand how
something works by reading the code behind it, and to make changes to fix any issues. That essentially
makes web developers the physicians of the world wide web. When we talk about the world wide web,
we’re mainly referring to websites and web applications. At this point, the curious aspiring developer in you
might be wondering, “What’s the difference between the two?”

Well, we’re glad you asked! A website is usually a simple page or a group of pages (the popular web comic
site, xkcd, for example). However, modern websites are much more than that. Take Google Docs, for
example. It has a nice interface that, once opened, looks very much like a desktop software like Microsoft
Office. Such complex websites are often termed web applications. A web developer today is expected to
know how to create and work with web applications. Having said that, most people use the terms
interchangeably, so don’t get too hung up on the terminology!

Types of web developers

There are different types of web developers who focus on different areas. These include:

● Frontend developers: Frontend developers implement web page designs using HTML and CSS.
They make sure the website looks pretty on different devices, and that the forms and buttons work.
● Backend developers: Backend developers create the backbone of the web application. They write
code logic that handles a user’s input (for example, what should happen when you click the
signup button after filling in a form).
● Full stack developers: Full stack developers do bits of both backend and frontend. Depending on

the problem at hand, they can switch cape ‍♀️‍♂️ and

move stacks.

Frontend Development

The part of a website that the user interacts directly is termed as front end. It is also referred to as the ‘client
side’ of the application.

9
 ● Frontend Roadmap:

● HTML: HTML stands for HyperText Markup Language. It is used to design the front end portion of
web pages using markup language. It acts as a skeleton for a website since it is used to make the
structure of a website.
● CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended
to simplify the process of making web pages presentable. It is used to style our website.
● JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our website.
● Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites and
web applications. It is the most popular CSS framework for developing responsive, mobile-first
websites. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for
all sizes of screens (Desktop, Tablets, Phablets, and Phones).
● Bootstrap 4
● Bootstrap 5
Frontend Frameworks and Libraries:
● AngularJS
● React.js
● VueJS
● jQuery
● Bootstrap
● Material UI
● Tailwind CSS
● jQuery UI
● Some other libraries and frameworks are: Handlebar.js Backbone.js, Ember.js etc.

Backend Development

Backend is the server side of a website. It is the part of the website that users cannot see and interact. It is
the portion of software that does not come in direct contact with the users. It is used to store and arrange
data.

1
 ● Backend Roadmap:

● PHP: PHP is a server-side scripting language designed specifically for web development.
● Java: Java is one of the most popular and widely used programming language. It is highly scalable.
● Python: Python is a programming language that lets you work quickly and integrate systems more
efficiently.
● Node.js: Node.js is an open source and cross-platform runtime environment for executing JavaScript
code outside a browser.
● Back End Frameworks: The list of back end
frameworks are: Express, Django, Rails, Laravel,
Spring, etc.

2. What are the skills required to become a web developer?

What does it take to become a web developer? Essentially, just three things: HTML, CSS and JavaScript—
the three pillars of the web, which we’ll be learning about over the next few days. Together, these three
pillars make every website work, defining the content to be displayed (HTML), telling a browser how to
display that content (CSS), and making the content interactive (JavaScript), respectively.

A web developer is well versed in these three technologies. They can read other people’s code and make
changes to it. They can find and debug bugs (shortcomings in existing code). A web developer might, at
times, work on a new project (a new website) from scratch, or may have to work on an existing website and
make it better. A typical day in the life of a web developer involves fixing bugs, developing new features
(that is, enhancements) and webpages, and working with other developers to discuss ways to solve
problems.

1
1.2 HTML

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our HTML tutorial is
developed for beginners and professionals. In our tutorial, every topic is given step-by-step so that you can
learn it in a very easy way. If you are new in learning HTML, then you can learn HTML from basic to a
professional level and after learning HTML with CSS and JavaScript you wil be able to create your own
interactive and dynamic website

The major points of HTML are given below:

o HTML stands for HyperText Markup Language.
o HTML is used to create web pages and web applications.
o HTML is widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming language.

HTML Example with HTML Editor

In this tutorial, you will get a lot of HTML examples, at least one example for each topic with
explanation. You can also edit and run these examples, with our online HTML editor. Learning
HTML is fun, and it's very easy to learn.
What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages
and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.
Hyper Text: HyperText 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.
HyperText is a way to link two or more web pages (HTML documents) with each other.
Markup language: A markup language is a computer language that is used to apply layout and formatting
conventions to a text document. Markup 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.
Hence, HTML is a markup 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.
Let's see a simple example of HTML.

1
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web
document. It is a container for all other elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the metadata(information
about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the
browser window. It must be placed inside the head tag and should close immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible to the end user. This tag
contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
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, which we will
learn later in this tutorial.
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 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.

1
HTML 4.01: HTML 4.01 version was released on 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 HyperText Markup 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 HTML 5 version, and still, it is under development.
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 markup 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 of 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-case.

1
1.3 CSS

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 markup 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.
What does CSS do
o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes in CSS code.

Why use CSS

These are the three major benefits of CSS:
1) Solves a big problem
Before CSS, tags like font, color, background style, element alignments, border and size had to be repeated
on every web page. This was a very long process. For example: If you are developing a large website where
fonts and color information are added on every single page, it will be become a long and expensive process.
CSS was created to solve this problem. It was a W3C recommendation.
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change the entire website by
changing just one file.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look and feel of the website.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a semicolon.
For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color
property
Selector{Property1: value1; Property2: value2; ;}
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS
selectors select HTML elements according to its id, class, type, attribute etc.

1
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>

Output:

This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is always
unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

<!DOCTYPE html>

1
 <html>

<head>

<style>

#para1 {

text-align: center;

color: blue;

</style>

</head>

<body>

<p id="para1">Hello Javatpoint.com</p>

<p>This paragraph will not be affected.</p>

</body>

</html>

Output:

Hello Javatpoint.com
This paragraph will not be affected.
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character .
(full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>

1
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

Output:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you should use the
element name with class selector.
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.
5) CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.
Advantages of CSS:
● CSS plays an important role, by using CSS you simply got to specify a repeated style for element once
& use it multiple times as because CSS will automatically apply the required styles.
● The main advantage of CSS is that style is applied consistently across variety of sites. One instruction
can control several areas which is advantageous.
● Web designers needs to use few lines of programming for every page improving site speed.
● Cascading sheet not only simplifies website development, but also simplifies the maintenance as a
change of one line of code affects the whole web site and maintenance time.
● It is less complex therefore the effort are significantly reduced.
● It helps to form spontaneous and consistent changes.
● CSS changes are device friendly. With people employing a batch of various range of smart devices to
access websites over the web, there’s a requirement for responsive web design.
● It has the power for re-positioning. It helps us to determine the changes within the position of web
elements who are there on the page.
● These bandwidth savings are substantial figures of insignificant tags that are indistinct from a mess of
pages.
● Easy for the user to customize the online page
● It reduces the file transfer size.

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
affects on all the browsers.
● The programing 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.
● There are multiple levels which creates confusion for non-developers and beginners.
1
2. Code Used

2.1 HTML code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="css/style.css" />

<link rel="stylesheet" href="css/vendors/normalize.css" />

<title>Document</title>

</head>

<body>

<section class="section-hero">

<div class="grey-background"></div>

<header class="header">

<div class="header left">

<button class="header logo">

<img src="img/logo-dark.svg" alt="Logo" />

</button>

<nav class="header nav">

<a href="#" class="header link">Demos</a>

<a href="#" class="header link">UI Kit (Components)</a>

<a href="#" class="header link">Documentation</a>

</nav>

</div>

<div class="header right">

1
 <button class="btn btn-finder">Buy Finder</button>

</div>

</header>

<h1 class="heading-1">Find your ideal</h1>

<div class="hero grid ma-3">

<figure class="hero arrow-img">

<img src="img/swirly-arrow.svg" alt="" />

</figure>

<figure class="hero img hero img--1">

<figcaption>Property</figcaption>

<img src="img/real-estate.png" alt="Real Estate Finder" />

</figure>

<figure class="hero img hero img--2">

<figcaption>Job</figcaption>

<img src="img/job-board.png" alt="Job Finder" />

</figure>

<figure class="hero img hero img--3">

<figcaption>City place</figcaption>

<img src="img/city-guide.png" alt="City Guide" />

</figure>

<figure class="hero img hero img--4">

<img src="img/car-finder.png" alt="Car Finder" />

<figcaption>Car</figcaption>

</figure>

</div>

</section>

<section class="section-features">

2
<div class="section-features left">

<h2 class="heading-2 mb-2">Finder feature highlights</h2>

<img src="img/turn-right-arrow.svg" alt="" />

</div>

<div class="grid features">

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

2
 component library

</p>

</div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

2
 </p>

</div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

2
 </div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</

2
</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</

</

2
<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</div>

</div>

<div class="grid-item">

<div class="card">

<figure class="card img">

<img src="img/bootstrap.png" alt="bootstrap logo" />

</figure>

<h3 class="heading-3 card title">Built with Bootstrap 5</h3>

<p class="card para">

Finder is the powerful front-end solution based on Bootstrap 5 —

the world’s most popular responsive, mobile-first front-end

component library

</p>

</div>

</

</

2
 </section>

<section class="section-support">

<div class="support-container">

<p>Still not convinced?</p>

<h2 class="heading-2">

Add premium support and lifetime updates to this!

</h2>

<button class="btn">Buy Finder</button>

</div>

</section>

<footer class="footer">

<h3 class="heading-2">Subscribe to our newsletter</h3>

<div class="footer subscribe">

<input type="text" / placeholder="Your email">

<button class="btn">Subscribe*</button>

</div>

<p class="footer disclaimer">

*Subscribe to our newsletter to receive early discount offers, updates

and new products info.

</p>

<p class="footer copyright">

&copy; All rights reserved. Made by Createx Studio

</p>

</footer>

</body>

</html>

2
2.2 CSS CODE

@keyframes alertMe {

from {

border-width: 3px;

border-color: gold; }

to {

border-width: 0;

border-color: rgba(255, 215, 0, 0.1); } }

:root {

--color-grey-dark: #454056;

--color-grey: #f5f4f8;

--color-secondary: #fd5631;

--color-white: #fff; }

*,

*::before,

*::after {

margin: 0;

padding: 0;

box-sizing: inherit; }

html {

font-size: 62.5%;

box-sizing: border-box; }

@media only screen and (max-width: 1000px) {

html {

font-size: 55%; } }

2
button {

cursor: pointer;

outline: none;

border: none;

background: transparent; }

body {

font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans,

Ubuntu, Cantarell, Helvetica Neue, sans-serif;

font-size: 1.6rem;

color: #666276; }

.heading-1 {

display: inline-block;

font-size: 6rem; }

.heading-2 {

color: #1f1b2d;

font-size: 3.2rem;

line-height: 1.5;

letter-spacing: 1px; }

.mb-2 {

margin-bottom: 2rem; }

.ma-3 {

margin: 3rem; }

2
.btn {

background-color: var(--color-secondary);

color: var(--color-white);

padding: 1.4rem 3.5rem;

font-size: 1.8rem;

font-weight: bold;

border-radius: 100px;

transition: all 0.2s; }

.btn:hover {

background-color: #fd390e;

border-color: #fd390e;

color: #fff;

box-shadow: 0 0.25rem 0.25rem 0.125rem rgba(253, 86, 49, 0.01), 0 0.375rem 0.75rem -0.125rem rgba(253, 86,
49, 0.4); }

.card {

padding: 2rem;

transition: all 0.2s;

cursor: pointer;

border-radius: 4px; }

.card > * {

margin-bottom: 2rem; }

.card img img {

width: 6rem; }

.card title {

color: #1f1b2d; }

.card para {

word-break: break-all; }

.card:hover {

box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31, 27, 45, 0.08), 0 0.25rem 0.75rem rgba(31, 27, 45, 0.08); }

3
.footer {

height: 45rem;

background-color: #1f1b2d;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center; }

.footer subscribe {

position: relative; }

.footer subscribe input {

border: 1px solid rgba(255, 255, 255, 0.15);

color: var(--color-white);

height: 6rem;

width: 60rem;

background: #282435;

border-radius: 100px;

outline: none;

padding-left: 3rem; }

.footer subscribe button {

position: absolute;

right: 1%;

top: 50%;

transform: translateY(-50%); }

.footer disclaimer {

font-size: 1.2rem;

color: #fff;

opacity: 0.7;

margin-top: 2rem; }

3
 .footer copyright {

color: #fff;

margin-top: 7rem; }

.header {

display: flex;

justify-content: space-between;

padding: 3rem 2rem;

align-items: center; }

.header left {

display: flex;

align-items: center; }

.header logo {

width: 12rem;

margin-right: 4rem; }

.header link {

color: var(--color-grey-dark);

opacity: 0.8;

font-size: 1.5rem;

font-weight: bold;

text-decoration: none; }

.header link:hover {

color: var(--color-secondary); }

.header link:not(:last-child) {

margin-right: 3rem; }

.grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

3
.hero grid {

display: grid;

grid-template-columns: repeat(18, 1fr);

grid-row-gap: 5rem; }

.section-hero {

position: relative; }

.grey-background {

background-color: var(--color-grey);

height: 100%;

width: 90rem;

border-bottom-right-radius: 10px;

z-index: -1;

position: absolute; }

@media only screen and (max-width: 1125px) {

.grey-background {

width: 100%; } }

.hero img {

cursor: pointer;

color: var(--color-grey-dark); }

.hero img img {

width: 100%;

transition: all 0.4s; }

.hero img--1 {

z-index: 3;

grid-column: 4 / span 9;

3
 margin-top: 5rem; }

.hero img--2 {

grid-column: 13 / -1;

margin-left: -8rem;

margin-top: -10rem; }

.hero img--3 {

grid-column: 1 / 9; }

.hero img--4 {

grid-column: 10 / -1;

margin-top: -15rem; }

.hero img:hover {

color: var(--color-secondary); }

.hero img:hover img {

transform: scale(1.02); }

.hero img figcaption {

color: inherit;

font-size: 2.6rem;

font-weight: bold; }

@media only screen and (max-width: 1000px) {

.hero img {

grid-column: 2 / span 16;

margin: 0; } }

.hero arrow-img {

position: absolute;

top: 30%; }

@media only screen and (max-width: 1000px) {

.hero arrow-img {

display: none; } }

3
.section-features {

display: flex;

padding: 8rem 2rem; }

.section-features left {

padding-right: 1.5rem; }

@media only screen and (max-width: 1000px) {

.section-features left img {

display: none; } }

@media only screen and (max-width: 1000px) {

.section-features {

display: block; } }

.section-support {

position: relative;

padding: 2rem;

height: 30rem; }

.support-container {

height: 35rem;

width: 96%;

position: absolute;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: var(--color-grey);

border-radius: 10px; }

.support-container p {

3
 color: #1f1b2d;

font-size: 2rem;

.support-container > * {

margin-bottom: 3rem; }

3
3. SCREENSHOTS

Finder

3
Bitcoin.org clone

3
Nexter

3
4. References

1. "W3C Html".
2. ^ "HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and
recommendations". w3. World Wide Web Consortium. December 18, 1997. Archived from the
original on July 5, 2015. Retrieved July 6, 2015.
3. ^ Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989,
May 1990). W3.org
4. ^ Tim Berners-Lee, "Design Issues"
5. "CSS developer guide". MDN Web Docs. Archived from the original on 2015-09-25.
Retrieved 2015-09-24.
6. ^ Flanagan, David (18 April 2011). JavaScript: the definitive guide. Beijing; Farnham:
O'Reilly. p. 1. ISBN 978-1-4493-9385-4. OCLC 686709345.
7. ^ "What is CSS?". World Wide Web Consortium. Archived from the original on 2010-11-29.
Retrieved 2010-12-01.
8. ^ "Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript".
HTMLGoodies. 23 July 2010. Archived from the original on 2014-10-20. Retrieved 2014-10-
16.
9. Press release announcing JavaScript, "Netscape and Sun announce JavaScript", PR
Newswire, December 4, 1995
10. ^ "ECMAScript® 2021 language specification". June 2021. Retrieved 27 July 2021.
11. ^ https://tc39.es/ecma262/; retrieved: 27 July 2021; publication date: 22 July 2021.
12. ^ "nodejs/node-eps". GitHub. Archived from the original on 2020-08-29. Retrieved 2018-07-
05.
13. ^ Jump up to:a b Seibel, Peter (September 16, 2009). Coders at Work: Reflections on the Craft
of Programming. ISBN 9781430219484. Archived from the original on December 24, 2020.
Retrieved December 25, 2018.
14. ^ Jump up to:a b c d e "Chapter 4. How JavaScript Was
Created". speakingjs.com. Archived from the original on 2020-02-27. Retrieved 2017-11-21.
15. ^ "Popularity – Brendan Eich".
16. "Bootstrap 5.2.3". November 22, 2022. Retrieved November 22, 2022.
17. ^ Otto, Mark (January 17, 2012). "Bootstrap in A List Apart No. 342". Mark Otto's
blog. Archived from the original on October 28, 2016. Retrieved February 23, 2017.
18. ^ Otto, Mark (August 19, 2011). "Bootstrap from Twitter". Developer Blog.
Twitter. Archived from the original on February 23, 2017. Retrieved February 23, 2017.
19. ^ "About". Bootstrap. Retrieved February 23, 2017.