8

CHAPTER1

INTRODUCTION

When a web designer is given an end goal like "create a webpage that has this header,
this font, these colors, these pictures, and an animated unicorn walking across the screen
when users click on this button," the web designer's job is to take that big idea and break
it apart into tiny pieces, and then translate these pieces into instructions that the
computer can understand -- including putting all these instructions in the correct order or
syntax.

Every page on the web that you visit is built using a sequence of separate instructions,
one after another. Your browser (Chrome, Firefox, Safari, and so on) is a big actor in
translating code into something we can see on our screens and even interact with. It can
be easy to forget that code without a browser is just a text file -- it's when you put that
text file into a browser that the magic happens. When you open a web page, your
browser fetches the HTML and other programming languages involved and interprets it.

HTML and CSS are actually not technically programming languages; they're just page
structure and style information. But before moving on to JavaScript and other true
languages, you need to know the basics of HTML and CSS, as they are on the front end
of every web page and application.

In the very early 1990s, HTML was the only language available on the web. Web
developers had to painstakingly code static sites, page by page. A lot changed since
then: Now there are many computer programming languages available.
 9

1.1 HTML

HTML is at the core of every web page, regardless the complexity of a site or number of
technologies involved. It's an essential skill for any web professional. It's the starting
point for anyone learning how to create content for the web. And, luckily for us, it's
surprisingly easy to learn.

Markup languages work in the same way as you just did when you labeled those content
types, except they use code to do it -- specifically, they use HTML tags, also known as
"elements." These tags have pretty intuitive names: Header tags, paragraph tags, image
tags, and so on.

Every web page is made up of a bunch of these HTML tags denoting each type of
content on the page. Each type of content on the page is "wrapped" in, i.e. surrounded
by, HTML tags. For example, the words you're reading right now are part of a
paragraph. If I were coding this web page, I would have started this paragraph with
an opening paragraph tag: <p>. The "tag" part is denoted by open brackets, and the letter
"p" tells the computer that we're opening a paragraph instead of some other type of
content.

Once a tag has been opened, all of the content that follows is assumed to be part
of that tag until you "close" the tag. When the paragraph ends, I'd put a closing
paragraph tag: </p>. Notice that closing tags look exactly the same as opening tags,
except there is a forward slash after the left angle bracket. Here's an example:

<p>This is a paragraph.</p>
 10

Using HTML, you can add headings, format paragraphs, control line breaks, make lists,
emphasize text, create special characters, insert images, create links, build tables, control
some styling, and much more.

Fig 1.1 A simple HTML with Title Tag

1.2 CSS

CSS stands for Cascading Style Sheets. This programming language dictates how the
HTML elements of a website should actually appear on the frontend of the page.

If HTML is the drywall, CSS is the paint. Whereas HTML was the basic structure of
your website, CSS is what gives your entire website its style. Those slick colors,
interesting fonts, and background images? All thanks to CSS. This language affects the
entire mood and tone of a web page, making it an incredibly powerful tool -- and an
important skill for web developers to learn. It's also what allows websites to adapt to
different screen sizes and device types.
 11

To show you what CSS does to a website, look at the following two screenshots. The
first screenshot is my colleague's blog post, but shown in Basic HTML, and the second
screenshot is that same blog post with HTML and CSS.

Fig 1.2 An Example Without CSS

 12

Fig 1.3 An Example After CSS

Isn't that prettier?

Put simply, CSS is a list of rules that can assign different properties to HTML tags,
either specified to single tags, multiple tags, an entire document, or multiple documents.
It exists because, as design elements like fonts and colors were developed, web
designers had a lot of trouble adapting HTML to these new features.

You see, HTML, developed back in 1990, was not really intended to show any physical
formatting information. It was originally meant only to define a document's structural
content, like headers versus paragraphs. HTML outgrew these new design features, and
CSS was invented and released in 1996: All formatting could be removed from HTML
documents and stored in separate CSS (.css) files.
 13

So, what exactly does CSS stand for? It stands for Cascading Style Sheets -- and "style
sheet" refers to the document itself. Ever web browser has a default style sheet, so every
web page out there is affected by at least one style sheet -- the default style sheet of
whatever browser the web page visitor is using -- regardless whether or not the web
designer applies any styles. For example, my browser's default font style is Times New
Roman, size 12, so if I visited a web page where the designer didn't apply a style sheet
of their own, I would see the web page in Times New Roman, size 12.

Obviously, the vast majority of web pages I visit don't use Times New Roman, size 12 --
that's because the web designers behind those pages started out with a default style sheet
that had a default font style, and then they overrode my browser's defaults with custom
CSS. That's where the word "cascading" comes into play. Think about a waterfall -- as
water cascades down the fall, it hits all the rocks on the way down, but only the rocks at
the bottom affect where it will end up flowing. In the same way, the last defined style
sheet informs my browser which instructions have precedence.

1.3 JavaScript

JavaScript is a logic-based programming language that can be used to modify website

content and make it behave in different ways in response to a user’s actions. Common
uses for JavaScript include confirmation boxes, calls-to-action, and adding new
identities to existing information.

JavaScript is a more complicated language than HTML or CSS, and it wasn't released in
beta form until 1995. Nowadays, JavaScript is supported by all modern web browsers
 14

and is used on almost every site on the web for more powerful and complex
functionality.

In short, JavaScript is a programming language that lets web developers design

interactive sites. Most of the dynamic behavior you'll see on a web page is thanks to
JavaScript, which augments a browser's default controls and behaviors.

Below are some of the examples.

Ex1 Creating Confirmation Boxes

One example of JavaScript in action is boxes that pop up on your screen. Think
about the last time you entered your information into an online form and a confirmation
box popped up, asking you to press "OK" or "Cancel" to proceed. That was made
possible because of JavaScript -- in the code, you'd find an "if ... else ..." statement that
tells the computer do one thing if the user clicks "OK," and a different thing if the user
clicks "Cancel.

Ex 2 Storing New Information

JavaScript is particularly useful for assigning new identities to existing website

elements, according to the decisions the user makes while visiting the page. For
example, let's say you're building a landing page with a form you'd like to generates
leads from by capturing information about a website visitor. You might have a "string"
of JavaScript dedicated to the user's first name. That string might look something like
this:

function updateFirstname() {
let Firstname = prompt('First Name');
}
 15

Then, after the website visitor enters his or her first name -- and any other information
you require on the landing page -- and submits the form, this action updates the identity
of the initially undefined "Firstname" element in your code. Here's how you might thank
your website visitor by name in JavaScript:

para.textContent = 'Thanks, ' + Firstname + "! You can now

download your ebook."

In the string of JavaScript above, the "Firstname" element has been assigned the first
name of the website visitor, and will therefore produce his or her actual first name on the
frontend of the webpage. To a user named Kevin, the sentence would look like this:

Thanks, Kevin! You can now download your ebook.

Ex 3 Security, Games, and Special Effects

Other uses for JavaScript include security password creation, check forms, interactive
games, animations, and special effects. It's also used to build mobile apps and create
server-based applications. You can add JavaScript to an HTML document by adding
these "scripts," or snippets of JavaScript code, into your document's header or body.
16
 16

CHAPTER 2

MOVIE REVIEW WEBSITE

2.1 About My Project

Movie Review Website is a simple project in HTML, CSS, and JavaScript. This is an
amazing website made for the user convenient, to help Users to see the brief description
and insights about any particular movie of their desired search. It just tells users an
overlook of any particular movie that how the movie is and what plot has been in any
particular movie that the user searches.

Movie Review Website project is simply made in HTML, CSS, and JavaScript. Talking
about the main features of this project, the user can also see the details and reviews of
many trending movies or many new movies on the main webpage

Also, this project includes a lot of JavaScript for making validations to certain parts of
the project.

I used API key of TMDB whose API service is for those of you interested in using our
movie, TV show or actor images or data in your application. This API is a system that
provides us to programmatically fetch and use data and/or images of TMDM site.
 17

2.2 Snap Shots of my Project

Fig 2.1 The main Webpage of my Project

It is the main Webpage of my project Movie Review Website here shows many
trending movies and new movies which are featured here and at the top there is a search
bar which can search any movie around the globe whether HOLLYWOOD or
BOLLYWOOD.

And at the extreme right side of the webpage there is a scroll bar which can scroll the
webpage and let you see more movies of your desired searched keywords.
 18

Fig 2.2 Webpage showing review of movie VENOM

In the above Fig 2.2 shows the overview of the movie. We just have to put our Cursor

on the movie and it will show you the overview of that movie.
 19

Fig 2.3 Webpage showing our Searched Movie

Fig 2.4 Webpage showing overview of our Searched Movie

 20

2.3 Flow Chart of My Project

 21

CHAPTER 3

Source Code of My Project

3.1 HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="style.css"
/>
<title>Movie Review Website</title>
</head>
<body>
<header>
<form id="form">
<input type="text" id="search"
class="search" placeholder="Search">
</form>
</header>

<main id="main"></main>

<script src="script.js"></script>
 22

</body>
</html>
3.2 Styles

@import
url('https://fonts.googleapis.com/css2?
family=Poppins:wght@200;400&display=swap');

:root {
--primary-color: #22254b;
--secondary-color: #373b69;
}

* {
box-sizing: border-box;
}

body {
background-color: var(--primary-color);
font-family: 'Poppins', sans-serif;
margin: 0;
}

header {
padding: 1rem;
display: flex;
justify-content: center;
background-color: var(--secondary-color);
}
 23

.search {
background-color: transparent;
border: 2px solid var(--primary-color);
border-radius: 50px;
font-family: inherit;
font-size: 1rem;
padding: 0.5rem 1rem;
width: 50vw;
color: #fff;
}

.search::placeholder {
color: #7378c5;
}

.search:focus {
outline: none;
background-color: var(--primary-color);
}

main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.movie {
width: 300px;
margin: 1rem;
background-color: var(--secondary-color);
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
position: relative;
 24

overflow: hidden;
border-radius: 3px;
}

.movie img {
width: 100%;
}

.movie-info {
color: #eee;
display: flex;
align-items: center;
justify-content: space-between;
gap:0.2rem;
padding: 0.5rem 1rem 1rem;
letter-spacing: 0.5px;
}

.movie-info h3 {
margin-top: 0;
}

.movie-info span {
background-color: var(--primary-color);
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-weight: bold;
}

.movie-info span.green {
color: lightgreen;
}
 25

.movie-info span.orange {
color: orange;
}

.movie-info span.red {
color: red;
}

.overview {
color: #FFFFFF;
background-color: rgba(255, 255, 255,
0.02);
padding: 2rem;
position: absolute;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
transform: translateY(101%);
backdrop-filter: blur(40px);
overflow-y: auto;
transition: transform 0.3s ease-in;
}

.movie:hover .overview {
transform: translateY(0);
}

input {
background: transparent;
}
 26

3.2 Script

const API_URL =
'https://api.themoviedb.org/3/discover/movie
?
sort_by=popularity.desc&api_key=3fd2be6f0c70
a2a598f084ddfb75487c&page=1'
const IMG_PATH =
'https://image.tmdb.org/t/p/w1280'
const SEARCH_API =
'https://api.themoviedb.org/3/search/movie?
api_key=3fd2be6f0c70a2a598f084ddfb75487c&que
ry="'

const main = document.getElementById('main')

const form = document.getElementById('form')
const search =
document.getElementById('search')

// Get initial movies

getMovies(API_URL)

async function getMovies(url) {

const res = await fetch(url)
const data = await res.json()
 27

showMovies(data.results)
}

function showMovies(movies) {
main.innerHTML = ''

movies.forEach((movie) => {
const { title, poster_path,
vote_average, overview } = movie

const movieEl =
document.createElement('div')
movieEl.classList.add('movie')

movieEl.innerHTML = `
<img src="${IMG_PATH +
poster_path}" alt="${title}">
<div class="movie-info">
<h3>${title}</h3>
<span class="$
{getClassByRate(vote_average)}">$
{vote_average}</span>
</div>
<div class="overview">
<h3>Overview</h3>
${overview}
</div>
`
main.appendChild(movieEl)
})
}
 28

function getClassByRate(vote) {
if(vote >= 8) {
return 'green'
} else if(vote >= 5) {
return 'orange'
} else {
return 'red'
}
}

form.addEventListener('submit', (e) => {

e.preventDefault()

const searchTerm = search.value

if(searchTerm && searchTerm !== '') {

getMovies(SEARCH_API + searchTerm)

search.value = ''
} else {
window.location.reload()
}
})
 29

CHAPTER 4

Conclusion

The project is based on a final project on web page designing is really knowledgeable
project for me. HTML is necessary for the raising issues of audience, purpose, design,
and accessibility. Learning HTML need to be a barrier to learning writing, that is
possible to use HTML to address writing issues.

At last, I would like to conclude that my whole industrial training helped me a lot for
providing me the platform to learn the basics of HTML, CSS and JavaScript and I felt
that this course is the perfect course for the beginners who want to expand their
knowledge in the field of Web Development. And this course is worth to share with
every new commers.

In these four weeks I got plenty of knowledge in Front end Web Development,
they cleared all my doubts about the topic of web Development and helped me to create
my own website. The making of website gave me a lot of knowledge. And also, I get to
know better about concept of green screen and we done a few example on how to
change the pixels of background of any image.
 30

CHAPTER 5

Bibliography

5.1 Websites

https://blog.hubspot.com/marketing/web-design-html-css-javascript

5.2 Books

Laura Lemay
Rafe Colburn
Jennifer Kymin