0% found this document useful (0 votes)

99 views

CAP735 Right

Uploaded by

Adil khan

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

99 views

CAP735 Right

Uploaded by

Adil khan

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 58

Project on

Personal Portfolio Webpage

A training report

Submitted in partial fulfillment of the requirements for the award of degree of

Master of Computer Applications

Submitted to

LOVELY PROFESSIONAL UNIVERSITY

PHAGWARA, PUNJAB

From 01/06/2022 to 14/06/2021

SUBMITTED BY

Name of student:

Registration Number:

Signature of the student:

CONTENTS

Sr. No. Description Page No.

1 Introduction of the Course 6

2 Technical Learning from the course 7

3 Introduction of Mini Project or Technical Assignments

4 Details of Mini Project

4.1 Interfaces Designed (If any)

4.2 Code snippets (If any)

5 Grade sheet of assignments/ marks card from the MOOC

6 Bibliography or References
To whom so ever it may concern

I, name,registration no hereby declare that the work done by me on “Personal Portfolio

Webpage” from June, 2022 to July, 2022, is a record of original work for the partial fulfillment of
the requirements for the award of the degree, Master of Computer Applications.

Name

Registation no:

Signature of the student

Dated:
CERTIFICATE

Screen
shot
ACKNOWLEDGEMENT

First, I would like to thank Lovely Professional University for giving me the opportunity to do
Summer Training on Responsive Web Design. Although quite short, for me this was a great
experience I can learn from. It helped me to explore my skills and increased my interest in web
development. And Special thanks to FreeCodeCamp for being so accommodating and
understanding and helping me to learn new technology
Introduction of the Course

Responsive Web Design

This Responsive Web Design course is designed my the world largest open source free code
learning community name FreeCodeCamp. In this Responsive Web Design course, I’ll learn the
languages that developers use to build webpages: HTML (Hypertext Markup Language) for content,
and CSS (Cascading Style Sheets) for design.

First, I'll build a cat photo app to learn the basics of HTML and CSS. Later, I'll learn modern
techniques like CSS variables by building a penguin, and best practices for accessibility by building
a quiz site.

Finally, I'll learn how to make webpages that respond to different screen sizes by building a photo
gallery with Flexbox, and a magazine article layout with CSS Grid.

By the help of this course i am able to design fully responsive website in HTML and CSS.
HTML

HTML definition is Hyper Text Markup Language and it is a markup language. A markup language
is a set of markup tags and the tags describe document content. HTML documents contain HTML
tags and plain text. HTML documents are also called web pages.

HTML Tags:

HTML markup tags are usually called HTML tags and tags are keywords surrounded by angle
brackets like <html>. These tags are also called as basic html elements. HTML tags normally come
in pairs like <b> and </b>. The first tag in a pair is the start tag, the second tag is the end tag. The
end tag is written like the start tag, with a forward slash before the tag name. Start and end tags are
also called opening tags and closing tags. By using these tags we can create a simple HTML page
very easily.

Features of HTML:

HTML is the most common used language to write web pages. It has recently gained popularity due
to its advantages such as: -

1. It is the language which can be easily understood and can be modified.

2. Effective presentations can be made with the HTML with the help of its all formatting tags.

3. It provides the more flexible way to deign web pages along with the text.

4. Links can also be added to the web pages so it helps the readers to browse the information of
their interest.

5. You can display HTML documents on any platforms such as Macintosh, Windows and Linux etc.

6. Graphics, videos and sounds can also be added to the web pages which give an extra attractive
look to your web pages.

This course teach me the HTML by various implementation of code . As In this course, I build my
first certification code Survey Form .
CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language. Although most often used to set the visual style of web
pages and user interfaces written in HTML, the language can be applied to any HTML document
and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS
is a cornerstone technology used by most websites to create visually engaging webpage, user
interfaces for web applications, and user interfaces for many mobile applications.
CSS is designed primarily to enable the separation of presentation
and content, including aspects such as the layout, colors, and fonts.This separation can improve
content accessibility, provide more flexibility and control in the specification of presentation
characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in
a separate .css file, and reduce complexity and repetition in the structural content.
Changes to the graphic design of a document (or hundreds of documents) can be
applied quickly and easily, by editing a few lines in the CSS file they use, rather
than by changing markup in the documents. The CSS specification describes a priority scheme to
determine which style rulesapply if more than one rule matches against a particular element. In this
so-called cascade, priorities (or weights) are calculated and assigned to rules, so that the
results are predictable.

A sample HTML program with CSS:

<!DOCTYPE html>

<html>

<head>

<style>

#xyz { color: red; }

</style>

</head>

<body>

<p id="xyz"style="color: blue;"> To demonstrate specificity </p>

</body>
</html>

INTERFACE DESIGNS

Survey Form

Screen shot
Tribute Page

This is one of the required projects to earn your certification.

For this project, you will build a tribute page for a subject of your choosing, fictional or real.
Screen shot

Technical Documentation Page

This is one of the required projects to earn your certification.

For this project, you will build a technical documentation page to serve as instruction or reference
for a topic.

Screen shot
Product Landing Page

This is one of the required projects to earn your certification.

For this project, you will build a product landing page to market a product of your choice.

Screen shot
Personal Portfolio Webpage
This is one of the required projects to earn your certification.
For this project, you will build your own personal portfolio page.

Screen shot
CODESNIPPETS

Survey Form:

<!Doctype html>

<html>

<body>

<h1 id="title">freeCodeCamp Survey Form

</h1>

<p id="description">Thank you for taking the time to help us improve the platform</p>

<label id="email-label">Email</label>

<label id="number-label">Number</label>

<option>project</option>

<option>opensource</option>

</select>

</form>

</body>

</html>

Tribute Page:

<html>

<head>

</head>
<body>

<div id="title"><h1>Grace Hopper<h1></div>

<div id="img-caption"><h1>Photo introducing grace<h1></div>

</figcaption>

<h2 id= "tribute-info">The woman who transformed how we use and operate computers </h2>

<br>

<footer> To learn more about this amazing woman, try her

<a id="tribute-link" href="https://en.wikipedia.org/wiki/Grace_Hopper#See_also" target= "_blan
k">wikipedia page</a>

</footer>

</div>

</main>

</body>
</html>

<style>

img{

display:block;

}

#image{

max-width:100%;

height:auto;

}

</style>

Technical Documentation Page:

<header>JS Documentation</header>

<ul>

<li><a class="nav-link" href="#Introduction">Introduction</a></li>

<li>

<a class="nav-link" href="#What_you_should_already_know"

>What you should already know</a

</li>

<li>

<a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>

</li>

<li><a class="nav-link" href="#Hello_world">Hello world</a></li>
<li><a class="nav-link" href="#Variables">Variables</a></li>

<li>

<a class="nav-link" href="#Declaring_variables">Declaring variables</a>

</li>

<li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>

<li><a class="nav-link" href="#Global_variables">Global variables</a></li>

<li><a class="nav-link" href="#Constants">Constants</a></li>

<li><a class="nav-link" href="#Data_types">Data types</a></li>

<li>

<a class="nav-link" href="#if...else_statement">if...else statement</a>

</li>

<li><a class="nav-link" href="#while_statement">while statement</a></li>

<li>

<a class="nav-link" href="#Function_declarations"

>Function declarations</a

</li>

<li><a class="nav-link" href="#Reference">Reference</a></li>

</ul>

</nav>

<header>Introduction</header>

<p>
JavaScript is a cross-platform, object-oriented scripting language. It

is a small and lightweight language. Inside a host environment (for

example, a web browser), JavaScript can be connected to the objects of

its environment to provide programmatic control over them.

</p>

<p>

JavaScript contains a standard library of objects, such as Array, Date,

and Math, and a core set of language elements such as operators, control

structures, and statements. Core JavaScript can be extended for a

variety of purposes by supplementing it with additional objects; for

example:

</p>

<ul>

<li>

Client-side JavaScript extends the core language by supplying objects

to control a browser and its Document Object Model (DOM). For example,

client-side extensions allow an application to place elements on an

HTML form and respond to user events such as mouse clicks, form input,

and page navigation.

</li>

<li>

Server-side JavaScript extends the core language by supplying objects

relevant to running JavaScript on a server. For example, server-side

extensions allow an application to communicate with a database,
provide continuity of information from one invocation to another of

the application, or perform file manipulations on a server.

</li>

</ul>

</article>

</section>

<header>What you should already know</header>

<p>This guide assumes you have the following basic background:</p>

<ul>

<li>

A general understanding of the Internet and the World Wide Web (WWW).

</li>

<li>Good working knowledge of HyperText Markup Language (HTML).</li>

<li>

Some programming experience. If you are new to programming, try one of

the tutorials linked on the main page about JavaScript.

</li>

</ul>

</article>

</section>

<header>JavaScript and Java</header>
<article>

<p>

JavaScript and Java are similar in some ways but fundamentally different

in some others. The JavaScript language resembles Java but does not have

Java's static typing and strong type checking. JavaScript follows most

Java expression syntax, naming conventions and basic control-flow

constructs which was the reason why it was renamed from LiveScript to

JavaScript.

</p>

<p>

In contrast to Java's compile-time system of classes built by

declarations, JavaScript supports a runtime system based on a small

number of data types representing numeric, Boolean, and string values.

JavaScript has a prototype-based object model instead of the more common

class-based object model. The prototype-based model provides dynamic

inheritance; that is, what is inherited can vary for individual objects.

JavaScript also supports functions without any special declarative

requirements. Functions can be properties of objects, executing as

loosely typed methods.

</p>

<p>

JavaScript is a very free-form language compared to Java. You do not

have to declare all variables, classes, and methods. You do not have to

be concerned with whether methods are public, private, or protected, and
you do not have to implement interfaces. Variables, parameters, and

function return types are not explicitly typed.

</p>

</article>

</section>

<header>Hello world</header>

To get started with writing JavaScript, open the Scratchpad and write your

first "Hello world" JavaScript code:

<code

>function greetMe(yourName) { alert("Hello " + yourName); }

greetMe("World");

</code>

Select the code in the pad and hit Ctrl+R to watch it unfold in your

browser!

</article>

</section>

<header>Variables</header>

<p>

You use variables as symbolic names for values in your application. The

names of variables, called identifiers, conform to certain rules.

</p>
<p>

A JavaScript identifier must start with a letter, underscore (_), or

dollar sign ($); subsequent characters can also be digits (0-9). Because

JavaScript is case sensitive, letters include the characters "A" through

"Z" (uppercase) and the characters "a" through "z" (lowercase).

</p>

<p>

You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers.

You can also use the Unicode escape sequences as characters in

identifiers. Some examples of legal names are Number_hits, temp99, and

_name.

</p>

</section>

<header>Declaring variables</header>

You can declare a variable in three ways:

<p>

With the keyword var. For example, <code>var x = 42.</code> This syntax

can be used to declare both local and global variables.

</p>

<p>

By simply assigning it a value. For example, <code>x = 42.</code> This

always declares a global variable. It generates a strict JavaScript

warning. You shouldn't use this variant.
</p>

<p>

With the keyword let. For example,<code> let y = 13.</code> This syntax

can be used to declare a block scope local variable. See Variable scope

below.

</p>

</article>

</section>

<header>Variable scope</header>

<p>

When you declare a variable outside of any function, it is called a

global variable, because it is available to any other code in the

current document. When you declare a variable within a function, it is

called a local variable, because it is available only within that

function.

</p>

<p>

JavaScript before ECMAScript 2015 does not have block statement scope;

rather, a variable declared within a block is local to the function (or

global scope) that the block resides within. For example the following

code will log 5, because the scope of x is the function (or global

context) within which x is declared, not the block, which in this case
is an if statement.

</p>

<code>if (true) { var x = 5; } console.log(x); // 5</code>

<p>

This behavior changes, when using the let declaration introduced in

ECMAScript 2015.

</p>

<code

>if (true) { let y = 5; } console.log(y); // ReferenceError: y is not

defined</code

</article>

</section>

<header>Global variables</header>

<p>

Global variables are in fact properties of the global object. In web

pages the global object is window, so you can set and access global

variables using the window.variable syntax.

</p>

<p>

Consequently, you can access global variables declared in one window or
frame from another window or frame by specifying the window or frame

name. For example, if a variable called phoneNumber is declared in a

document, you can refer to this variable from an iframe as

parent.phoneNumber.

</p>

</article>

</section>

<header>Constants</header>

<p>

You can create a read-only, named constant with the const keyword. The

syntax of a constant identifier is the same as for a variable

identifier: it must start with a letter, underscore or dollar sign and

can contain alphabetic, numeric, or underscore characters.

</p>

<code>const PI = 3.14;</code>

<p>

A constant cannot change value through assignment or be re-declared

while the script is running. It has to be initialized to a value.

</p>

<p>

The scope rules for constants are the same as those for let block scope
variables. If the const keyword is omitted, the identifier is assumed to

represent a variable.

</p>

<p>

You cannot declare a constant with the same name as a function or

variable in the same scope. For example:

</p>

<code

>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS WILL

CAUSE AN ERROR ALSO function f() { const g = 5; var g; //statements

}</code

However, object attributes are not protected, so the following statement

is executed without problems.

<code

>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key = "otherValue";</code

</article>

</section>

<header>Data types</header>

<p>The latest ECMAScript standard defines seven data types:</p>
<ul>

<li>

<p>Six data types that are primitives:</p>

<ul>

<li>Boolean. true and false.</li>

<li>

null. A special keyword denoting a null value. Because JavaScript

is case-sensitive, null is not the same as Null, NULL, or any

other variant.

</li>

<li>undefined. A top-level property whose value is undefined.</li>

<li>Number. 42 or 3.14159.</li>

<li>String. "Howdy"</li>

<li>

Symbol (new in ECMAScript 2015). A data type whose instances are

unique and immutable.

</li>

</ul>

</li>

<li>and Object</li>

</ul>

Although these data types are a relatively small amount, they enable you

to perform useful functions with your applications. Objects and functions

are the other fundamental elements in the language. You can think of
objects as named containers for values, and functions as procedures that

your application can perform.

</article>

</section>

<header>if...else statement</header>

Use the if statement to execute a statement if a logical condition is

true. Use the optional else clause to execute a statement if the condition

is false. An if statement looks as follows:

<code>if (condition) { statement_1; } else { statement_2; }</code>

condition can be any expression that evaluates to true or false. See

Boolean for an explanation of what evaluates to true and false. If

condition evaluates to true, statement_1 is executed; otherwise,

statement_2 is executed. statement_1 and statement_2 can be any statement,

including further nested if statements.

<p>

You may also compound the statements using else if to have multiple

conditions tested in sequence, as follows:

</p>

<code

>if (condition_1) { statement_1; } else if (condition_2) { statement_2;

} else if (condition_n) { statement_n; } else { statement_last; }

</code>
In the case of multiple conditions only the first logical condition which

evaluates to true will be executed. To execute multiple statements, group

them within a block statement ({ ... }) . In general, it's good practice

to always use block statements, especially when nesting if statements:

<code

>if (condition) { statement_1_runs_if_condition_is_true;

statement_2_runs_if_condition_is_true; } else {

statement_3_runs_if_condition_is_false;

statement_4_runs_if_condition_is_false; }</code

It is advisable to not use simple assignments in a conditional expression,

because the assignment can be confused with equality when glancing over

the code. For example, do not use the following code:

<code>if (x = y) { /* statements here */ }</code> If you need to use an

assignment in a conditional expression, a common practice is to put

additional parentheses around the assignment. For example:

<code>if ((x = y)) { /* statements here */ }</code>

</article>

</section>

<header>while statement</header>

A while statement executes its statements as long as a specified condition
evaluates to true. A while statement looks as follows:

<code>while (condition) statement</code> If the condition becomes false,

statement within the loop stops executing and control passes to the

statement following the loop.

<p>

The condition test occurs before statement in the loop is executed. If

the condition returns true, statement is executed and the condition is

tested again. If the condition returns false, execution stops and

control is passed to the statement following while.

</p>

<p>

To execute multiple statements, use a block statement ({ ... }) to group

those statements.

</p>

Example:

<p>The following while loop iterates as long as n is less than three:</p>

<code>var n = 0; var x = 0; while (n < 3) { n++; x += n; }</code>

<p>

With each iteration, the loop increments n and adds that value to x.
Therefore, x and n take on the following values:

</p>

<ul>

<li>After the first pass: n = 1 and x = 1</li>

<li>After the second pass: n = 2 and x = 3</li>

<li>After the third pass: n = 3 and x = 6</li>

</ul>

<p>

After completing the third pass, the condition n < 3 is no longer

true, so the loop terminates.

</p>

</article>

</section>

<header>Function declarations</header>

A function definition (also called a function declaration, or function

statement) consists of the function keyword, followed by:

<ul>

<li>The name of the function.</li>

<li>

A list of arguments to the function, enclosed in parentheses and

separated by commas.
</li>

<li>

The JavaScript statements that define the function, enclosed in curly

brackets, { }.

</li>

</ul>

<p>

For example, the following code defines a simple function named square:

</p>

<code>function square(number) { return number * number; }</code>

<p>

The function square takes one argument, called number. The function

consists of one statement that says to return the argument of the

function (that is, number) multiplied by itself. The return statement

specifies the value returned by the function.

</p>

<code>return number * number;</code>

<p>

Primitive parameters (such as a number) are passed to functions by

value; the value is passed to the function, but if the function changes

the value of the parameter, this change is not reflected globally or in

the calling function.

</p>

</article>
</section>

<header>Reference</header>

<ul>

<li>

All the documentation in this page is taken from

href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide"

target="_blank"

>MDN</a

</li>

</ul>

</article>

</section>

</main>

<style>

html,

body {

min-width: 290px;

color: #4d4e53;

background-color: #ffffff;

font-family: 'Open Sans', Arial, sans-serif;

line-height: 1.5;
}

#navbar {

position: fixed;

min-width: 290px;

top: 0px;

left: 0px;

width: 300px;

height: 100%;

border-right: solid;

border-color: rgba(0, 22, 22, 0.4);

header {

color: black;

margin: 10px;

text-align: center;

font-size: 1.8em;

font-weight: thin;

#main-doc header {

text-align: left;

margin: 0px;

}
#navbar ul {

height: 88%;

padding: 0;

overflow-y: auto;

overflow-x: hidden;

#navbar li {

color: #4d4e53;

border-top: 1px solid;

list-style: none;

position: relative;

width: 100%;

#navbar a {

display: block;

padding: 10px 30px;

color: #4d4e53;

text-decoration: none;

cursor: pointer;

#main-doc {
position: absolute;

margin-left: 310px;

padding: 20px;

margin-bottom: 110px;

section article {

color: #4d4e53;

margin: 15px;

font-size: 0.96em;

section li {

margin: 15px 0px 0px 20px;

code {

display: block;

text-align: left;

white-space: pre-line;

position: relative;

word-break: normal;

word-wrap: normal;

line-height: 2;

background-color: #f7f7f7;
padding: 15px;

margin: 10px;

border-radius: 5px;

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

/* For mobile phones: */

#navbar ul {

border: 1px solid;

height: 207px;

}

#navbar {

background-color: white;

position: absolute;

top: 0;

padding: 0;

margin: 0;

width: 100%;

max-height: 275px;

border: none;

z-index: 1;

border-bottom: 2px solid;

}
#main-doc {

position: relative;

margin-left: 0px;

margin-top: 270px;

}

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

#main-doc {

margin-left: -10px;

}

code {

margin-left: -20px;

width: 100%;

padding: 15px;

padding-left: 10px;

padding-right: 45px;

min-width: 233px;

}

</style>
Product Landing Page:

<div>

</div>

<ul>

<li><a href="#features" class="nav-link">Features</a></li>

<li><a href="#howitworks" class="nav-link">How It Works</a></li>

<li><a href="#pricing" class="nav-link">Pricing</a></li>

</ul>

</nav>

</header>

<h2>Handcrafted, home-made masterpieces</h2>

</form>

</section>

</div>

<h3>Premium Materials</h3>

<p>

Our trombones use the shiniest brass which is sourced locally.

This will increase the longevity of your purchase.

</p>

</div>

</div>

<h3>Fast Shipping</h3>

<p>

We make sure you recieve your trombone as soon as we have finished

making it. We also provide free returns if you are not satisfied.

</p>

</div>

</div>

<h3>Quality Assurance</h3>

<p>

Our trombones use the shiniest brass which is sourced locally.

This will increase the longevity of your purchase.

</p>

</div>

</section>

</section>

<p class="card-title">TENOR TROMBONE</p>

<p>Lorem ipsum.</p>

<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>

<a href="#" class="btn btn-link">SELECT</a>

</div>

<p class="card-title">BASS TROMBONE</p>

<p>Lorem ipsum.</p>

<a href="#" class="btn btn-link">SELECT</a>

</div>

<p class="card-title">VALVE TROMBONE</p>

<p>Lorem ipsum.</p>

<a href="#" class="btn btn-link">SELECT</a>

</div>

</section>

</div>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

.container {

background-color: #d2d2d2;

.header {

position: fixed;

top: 0;

width: 100%;

padding: 0.4rem;

height: 4rem;

display: flex;

justify-content: space-between;

align-items: center;

background-color: #28a1da;

color: #f6f4f3;

font-size: 1.4em;
}

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

.nav-bar {

display: none;

}

.nav-bar ul li {

list-style: none;

display: inline-block;

.nav-bar ul li a {

margin-left: 1rem;

padding: 0.4rem 0;

text-decoration: none;

color: #f6f4f3;

opacity: 0.8;

transition: all 0.6s;

.nav-bar ul li a:hover {

opacity: 1;

border-bottom: 1px solid #f6f4f3;

}
.section {

width: 75%;

margin: 1rem auto;

.title {

margin-top: 4rem;

text-align: center;

line-height: 2.2rem;

.form-control {

display: block;

margin: auto;

padding: 0.3rem 0.2rem;

width: 20rem;

.btn {

display: inline-block;

border: none;

background-color: rgb(27, 141, 235);

padding: 0.6rem 1rem;

border-radius: 0.2rem;
cursor: pointer;

margin-top: 0.3rem;

color: #f6f4f3;

.feature {

padding: 1rem;

display: flex;

.icon {

display: flex;

align-items: center;

justify-content: center;

height: 125px;

width: 20vw;

color: #28a1da;

.content {

display: flex;

flex-direction: column;

justify-content: center;

height: 125px;

width: 80vw;
padding: 5px;

.price-cards {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

.video-section {

display: flex;

justify-content: center;

#video {

width: 600px;

height: 320px;

.price-card {

margin: 0.6rem;

border: 1px solid #000;

text-align: center;

width: auto;
line-height: 2;

.card-title {

padding: 1rem 5.2rem;

font-size: 16px;

background-color: #a5a5a5;

font-weight: 600;

.price {

font-size: 24px;

font-weight: bold;

.btn-link {

text-decoration: none;

padding: 0.2rem 1rem;

margin: 1rem;

.footer {

padding: 2rem;

text-align: center;

margin: auto;
background-color: #686868;

</style>

Personal Portfolio Website:

<a href="#welcome-section">Contact</a>

<a href="#profile-link">About</a>

</nav>

<main>

<h1>Hey I am Yash Singh,</h1>

<p>a fullstack developer.</p>

<p>Currently updating my knowledge on the great FreeCodeCamp website</p>

</section>

<section id="projects">
<h1>These are some of my projects.</h1>

<div>freeCodeCamp : Build a Tribute Page</div>

</a>

</div>

<div>freeCodeCamp : Build a Technical Documentation Page</div>

</a>

</div>

<div>freeCodeCamp : Build a Survey Form</div>

</a>
</div>

<div>freeCodeCamp : Build a Product Landing Page</div>

</a>

</div>

<div>

</section>

<h1>Let's work together...</h1>

<p>Currently looking for a job in Germany</p>

</div>

</section>

</section>
</main>

<style>

body {

margin: 0;

#navbar {

position: fixed;

top: 0px;

width: 100%;

display: flex;

flex-direction: row;

justify-content: flex-end;

background: deepskyblue;

#navbar a {

text-decoration: none;

display: block;

padding: 1em;

font-size: 1.5em;

font-weight: bold;

color: white;
}

#navbar a:hover {

background: #00abe5;

main {

display: grid;

grid-template-rows: 100vh auto 300px 100px;

#welcome-section {

text-align: center;

background: lightgrey;

padding-top: 45vh;

#projects {

text-align: center;

background: white;

#profile {

text-align: center;

background: lightgrey;
display: grid;

grid-template-columns: 1fr;

justify-items: center;

.circle {

background: grey;

border-radius: 50%;

width: 100px;

height: 100px;

text-align: center;

vertical-align: middle;

line-height: 100px;

#profile-link {

text-decoration: none;

color: black;

font-size: 1.2em;

#copyright {

text-align: center;

background: deepskyblue;

padding: 1em;
}

.tiles {

display: grid;

grid-template-columns: 1fr 1fr 1fr 1fr;

justify-items: center;

.project-tile {

background: white;

padding: 2em;

.project-tile a {

text-decoration: none;

color: grey;

font-weight: bold;

font-size: 0.9em;

.responsive {

max-width: 100%;

height: auto;

}
@media all and (max-width: 800px) {

#navbar {

justify-content: space-around;

}

.tiles {

grid-template-columns: 1fr 1fr;

}

@media all and (max-width: 600px) {

#navbar {

flex-flow: column wrap;

padding: 0;

}

#navbar a {

text-align: center;

padding: 10px;

border-top: 1px solid rgba(255, 255, 255, 0.3);

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

#navbar a:last-of-type {

border-bottom: none;
}

.tiles {

grid-template-columns: 1fr;

}

</style>

CONCLUSION

After completion of extensive 300 Hours summer training on the course of Responsive Web
Development, I had a brief and thorough knowledge of various terms and technologies related to
Web Development. It in itself is a very wide subject with numerous opportunities to grab, to excel
in the field of web developing all we need is to explore our imagination and think outside the box.
As we all know nowadays everything is going online, from the simplest thing to the most complex
jobs in the world, everything takes place on internet and for those to happen, we need a steady
platform, which is provided by a reliant web site. A website is not limited; we can extend its use up
to no limit and reach great outcomes. I, through the course of two months of responsive web
development, was able to learn some of the technologies which played a vital role in web
development.
The very first technology or in simpler words language I learnt was
HTML, which extends to Hyper Text Markup Language, this is the most basic technology used for
the development of web pages. We start from the most basic but most important and reach to the
level of perfection, so in web development we need to start from HTML, and steadily need to reach
to perfection. HTML is used for the development of web pages and web applications, from very
basic web pages containing just a form or table to the most advanced web pages which includes
great amount of animation and various other parameters can be created using HTML. It can be
paired up with other languages in order to create more efficient web pages.
In conclusion, I would say that through the course I was able to grab efficient and useful knowledge
which would definitely help me in future, in this era of internet. Now HTML can be easily paired up
with several other technologies for creation of great web pages. Out of many available, I was able to
get knowledge of CSS as well. All these languages play great amount of role for the formation of a
web page.

First, I would talk about CSS. Now CSS expands to Cascading Style Sheet, this language cannot be
used alone as it is necessary for it to be paired up with HTML. This language is not used for
creating any webpage but for providing various attributes to it, in simpler words we can say, to
provide styling to the web page.
CSS can be used to from the very simple, like changing font of text, to achieve complex jobs, like
defining transitions for slideshow on a web page, and various other parameters. No one would like
to look at static web pages with very less or no animations and with less amount of styling. So to
make a page look more attractive and effective CSS is used. When we use web application or
website or any interface, we don’t want it to look unattractive and unappealing, we always want it to
be catchy, therefore to achieve such we need to use CSS. HTML paired up with CSS can result in
the formation of attractive and appealing web pages. I was able to learn CSS up to some extent
during Course. of designing an entire web page, it needs to be paired up with JavaScript.
JS is programmed under script tag in HTML. Overall, if we want our website to be more effective
then HTML, CSS.
So, In conclusion I would say that I was able to grab knowledge about these important web
technologies which are important for a front-end web developer. After the completion of course, I
was able to create a simple basic yet working website. The most important outcome of the course
was that now I am having a sound knowledge of various important technologies for
webdevelopment and I have strong belief that these will always help me in future.
REFERENCES

 https://www.freecodecamp.org/learn/2022/responsive-web-design/

HTML & CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design
From Everand
HTML & CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design
David DuRocher
4/5 (19)
Shopify Theme Customization With Liquid
0% (1)
Shopify Theme Customization With Liquid
2 pages
O Level Project HTML Programe PDF
70% (10)
O Level Project HTML Programe PDF
32 pages
Bhushan Intership Report 5 Sem Real
No ratings yet
Bhushan Intership Report 5 Sem Real
9 pages
Module 1
No ratings yet
Module 1
22 pages
Internship Training
No ratings yet
Internship Training
23 pages
CONTENT-Student Management System
No ratings yet
CONTENT-Student Management System
10 pages
Tour Management File - 1
No ratings yet
Tour Management File - 1
53 pages
Rajat Training
No ratings yet
Rajat Training
36 pages
Industrial Training
No ratings yet
Industrial Training
13 pages
WTL - Experiment No 02
No ratings yet
WTL - Experiment No 02
7 pages
Project AF1781 Sameer Saaeb
No ratings yet
Project AF1781 Sameer Saaeb
15 pages
Course Code: CSE 326 Internet Programming Laboratory
No ratings yet
Course Code: CSE 326 Internet Programming Laboratory
62 pages
WEB
No ratings yet
WEB
32 pages
Web Development IT Report
No ratings yet
Web Development IT Report
68 pages
Modern Web Development Using CSS & HTML: Ronak Jain, Vishal Shrivastava, Akhil Pandey, Aarti Sharma
No ratings yet
Modern Web Development Using CSS & HTML: Ronak Jain, Vishal Shrivastava, Akhil Pandey, Aarti Sharma
4 pages
Cse 443
No ratings yet
Cse 443
21 pages
Report On Web Development Technology
No ratings yet
Report On Web Development Technology
20 pages
SIWES Presentation
No ratings yet
SIWES Presentation
26 pages
Six Weeks Summer Training Web Development Report
No ratings yet
Six Weeks Summer Training Web Development Report
20 pages
Creative Web Design Modules
No ratings yet
Creative Web Design Modules
49 pages
Web Designing Using HTML5
No ratings yet
Web Designing Using HTML5
104 pages
Mansi Final File
0% (1)
Mansi Final File
56 pages
Mini Proj Print
No ratings yet
Mini Proj Print
42 pages
ITELECT, REVIEWER
No ratings yet
ITELECT, REVIEWER
8 pages
MSD Unit 1
No ratings yet
MSD Unit 1
29 pages
HTML
No ratings yet
HTML
6 pages
Creative_HTML_and_CSS_Presentation
No ratings yet
Creative_HTML_and_CSS_Presentation
9 pages
MSD Unit 1 - Converted
No ratings yet
MSD Unit 1 - Converted
15 pages
20811A0564 Presentation
No ratings yet
20811A0564 Presentation
9 pages
NCCS Secondary School Paknajol Kathmandu: in Partial Fulfillement of The Requriments For Grade Xi in Computer Science
No ratings yet
NCCS Secondary School Paknajol Kathmandu: in Partial Fulfillement of The Requriments For Grade Xi in Computer Science
14 pages
MTA 98-383 Introduction To Programming Using HTML and CSS
No ratings yet
MTA 98-383 Introduction To Programming Using HTML and CSS
3 pages
Fundamental of Web Design Assignment 1
No ratings yet
Fundamental of Web Design Assignment 1
10 pages
20811A0564 Presentation
No ratings yet
20811A0564 Presentation
9 pages
E Commerce PDF
No ratings yet
E Commerce PDF
62 pages
Training Report 1
No ratings yet
Training Report 1
38 pages
Unit-II-Web-Technologies
No ratings yet
Unit-II-Web-Technologies
17 pages
Web Assignment No 02
No ratings yet
Web Assignment No 02
7 pages
Project.repo 2
No ratings yet
Project.repo 2
37 pages
Presentation of Intership
No ratings yet
Presentation of Intership
14 pages
Project - Viii Class
No ratings yet
Project - Viii Class
19 pages
WT Unit - 2notes
No ratings yet
WT Unit - 2notes
22 pages
COURSE COMPACT
No ratings yet
COURSE COMPACT
10 pages
8D24A0F7
No ratings yet
8D24A0F7
13 pages
Ultimate HTML CSS Guide
No ratings yet
Ultimate HTML CSS Guide
3 pages
UNIT-2-1
No ratings yet
UNIT-2-1
17 pages
WEB TECHNOLOGY_39072812_2025_01_23_16_04
No ratings yet
WEB TECHNOLOGY_39072812_2025_01_23_16_04
35 pages
HTML CSS Interview Questions
No ratings yet
HTML CSS Interview Questions
68 pages
(eBook PDF) New Perspectives on HTML 5 and CSS: Comprehensive 8th Edition instant download
100% (1)
(eBook PDF) New Perspectives on HTML 5 and CSS: Comprehensive 8th Edition instant download
45 pages
Report by Jitesh Mehta
No ratings yet
Report by Jitesh Mehta
25 pages
Unit 2 All notes
No ratings yet
Unit 2 All notes
12 pages
Presentation on Summer Internship Training on WEB DEVELOPMENT
No ratings yet
Presentation on Summer Internship Training on WEB DEVELOPMENT
18 pages
Radhe
No ratings yet
Radhe
17 pages
HTML
No ratings yet
HTML
9 pages
Html And CSS
No ratings yet
Html And CSS
7 pages
FORMAT
No ratings yet
FORMAT
11 pages
pdf for theory part
No ratings yet
pdf for theory part
10 pages
Ecommerce Notes on HTML - Copy
No ratings yet
Ecommerce Notes on HTML - Copy
10 pages
Ayush Project
No ratings yet
Ayush Project
17 pages
The Evolution of Web Development
From Everand
The Evolution of Web Development
Thandazani Mbutho
No ratings yet
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
From Everand
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
i Code Academy
4/5 (11)
Mini Project Abhi
No ratings yet
Mini Project Abhi
31 pages
Edmodo: A Guide To It All
100% (3)
Edmodo: A Guide To It All
53 pages
Msp430 Coding Tutorial
No ratings yet
Msp430 Coding Tutorial
22 pages
2017intro To Web Development
No ratings yet
2017intro To Web Development
221 pages
Whatsapp Marketing Tool
No ratings yet
Whatsapp Marketing Tool
13 pages
Quiz 1 Lab - Who Owns Your Data
0% (1)
Quiz 1 Lab - Who Owns Your Data
4 pages
Oosf
No ratings yet
Oosf
1 page
Tor CMC
No ratings yet
Tor CMC
19 pages
Summative Test in Empowerment Technologies
100% (1)
Summative Test in Empowerment Technologies
4 pages
MSDN Drop Down Menu
No ratings yet
MSDN Drop Down Menu
20 pages
Benefits of SAMA5D2 SIP and SOM: Scope
No ratings yet
Benefits of SAMA5D2 SIP and SOM: Scope
15 pages
CV en 14
100% (1)
CV en 14
2 pages
Literature Review of Iot Based Plant Watering System
No ratings yet
Literature Review of Iot Based Plant Watering System
8 pages
Bosch Releaseletter ConfigManager 7.71.0169
No ratings yet
Bosch Releaseletter ConfigManager 7.71.0169
18 pages
Employability Skills Mcqs
100% (1)
Employability Skills Mcqs
14 pages
Tides Foundation List of Grantees 2010
No ratings yet
Tides Foundation List of Grantees 2010
42 pages
Web Programming Unit - I
80% (10)
Web Programming Unit - I
45 pages
Summit Archive 1569863860
No ratings yet
Summit Archive 1569863860
50 pages
Second Workshop For Product Evaluation
No ratings yet
Second Workshop For Product Evaluation
97 pages
Google Sites Basics
No ratings yet
Google Sites Basics
10 pages
Shopee X Local Brands Collaboration Proposal
No ratings yet
Shopee X Local Brands Collaboration Proposal
18 pages
Industrial Cellular VPN Router NR300 User Manual: Guangzhou Navigateworx Technologies Co, LTD
No ratings yet
Industrial Cellular VPN Router NR300 User Manual: Guangzhou Navigateworx Technologies Co, LTD
71 pages
En Crypt Ing Query Strings With
No ratings yet
En Crypt Ing Query Strings With
3 pages
Biometric Fingerprint Based ATM Transaction System
50% (2)
Biometric Fingerprint Based ATM Transaction System
46 pages
Fortigate Study Guide Page 237: "By Default, Logs Older Than 7 Days Are Deleted From Disk (Log Age Is Configurable) "
No ratings yet
Fortigate Study Guide Page 237: "By Default, Logs Older Than 7 Days Are Deleted From Disk (Log Age Is Configurable) "
50 pages
Computer Application - II (Lab File)
No ratings yet
Computer Application - II (Lab File)
8 pages
Python Random Module: W3schools
No ratings yet
Python Random Module: W3schools
5 pages
RUBY SHARMA - FinalProjectReport 1 - Ruby Sharma
No ratings yet
RUBY SHARMA - FinalProjectReport 1 - Ruby Sharma
26 pages
how to boost facebook - Google Search
No ratings yet
how to boost facebook - Google Search
1 page

CAP735 Right

Uploaded by

CAP735 Right

Uploaded by

Project on

Personal Portfolio Webpage

Submitted in partial fulfillment of the requirements for the award of degree of

Master of Computer Applications

LOVELY PROFESSIONAL UNIVERSITY

From 01/06/2022 to 14/06/2021

Signature of the student:

Sr. No. Description Page No.

1 Introduction of the Course 6

2 Technical Learning from the course 7

3 Introduction of Mini Project or Technical Assignments

4 Details of Mini Project

4.1 Interfaces Designed (If any)

4.2 Code snippets (If any)

5 Grade sheet of assignments/ marks card from the MOOC

I, name,registration no hereby declare that the work done by me on “Personal Portfolio

Signature of the student

Responsive Web Design

1. It is the language which can be easily understood and can be modified.

A sample HTML program with CSS:

#xyz { color: red; }

<p id="xyz"style="color: blue;"> To demonstrate specificity </p>

This is one of the required projects to earn your certification.

Technical Documentation Page

This is one of the required projects to earn your certification.

This is one of the required projects to earn your certification.

Technical Documentation Page:

Personal Portfolio Website:

You might also like