Create Website using HTML & CSS
What Is a Front-End Developer?
Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant.
HTML
- HTML stands for Hyper Text Markup Language.
- Html is used to structure a web page and its content.
- Html consists of a series of elements.
CSS
- CSS – Cascading Style Sheet.
- CSS is the language for describing the presentation of web pages, including color’s , layout and fonts.
- It allows one to adapt the presentation to different types of devices , such as large screens, small screens or printers.
-------------------------------------------------------------------------------------------
Steps to create website:
1.Create a folder as public in VSC
2.Add a file into public folder and name it as index.html and write the above code.
<!DOCTYPE html>
<HTML>
<head>
<title>Dr.APJ Abdul kalam</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="container" >
<ul class="menu">
<img src="../apjimg/apjlogo.png" width="10%" height="50%"/>
<li><a href="index.html">HOME </a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="quote.html">QUOTE</a></li>
<li><a href="doctorate.html">DOCTORATES</a></li>
<li><a href="gallery.html">GALLIERY</a></li>
</ul>
<div class="apj">
<p>Avul Pakir Jainulabdeen Abdul Kalam <br>
<span>"THE MISSILE MAN"</span>
</p>
</div>
</body>
</HTML>
3.Add another file into public folder as about.html and write the above code.
-add required content in between <p> and </p>
<!DOCTYPE html>
<HTML>
<head>
<title>ABOUT</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="container">
<ul class="menu">
<img src="../apjimg/apjlogo.png" width="10%" height="50%"/>
<li><a href="index.html">HOME </a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="quote.html">QUOTE</a></li>
<li><a href="doctorate.html">DOCTORATES</a></li>
<li><a href="gallery.html">GALLIERY</a></li>
</ul>
<div class="profile">
<h2>PROFILE</h2>
<p>Avul Pakir Jainulabdeen Abdul Kalam (15 October 1931 – 27 July 2015) was an Indian aerospace scientist who served as the 11th President of India from 2002 to 2007. He was born and raised in Rameswaram, Tamil Nadu and studied physics and aerospace engineering. He spent the next four decades as a scientist and science administrator, mainly at the Defence Research and Development Organisation (DRDO) and Indian Space Research Organisation (ISRO) and was intimately involved in India's civilian
space programme and military missile development efforts. He thus came to be known as the Missile Man of India for his work on the development of ballistic missile and launch vehicle technology. He also played a pivotal organisational, technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.
</p>
<p>Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. Widely referred to as the "People's President",he returned to his civilian life of education, writing and public service after a single term. He was a
recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.
</p>
<p>While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83.Thousands, including national-level
dignitaries, attended the funeral ceremony held in his hometown of Rameswaram, where he was buried with full state honours.
</p>
<p>Avul Pakir Jainulabdeen Abdul Kalam was born on 15 October 1931 to a Tamil Muslim family in the pilgrimage centre of Rameswaram on Pamban Island, then in the Madras Presidency and now in the State of Tamil Nadu. His father Jainulabdeen Marakayar was a boat owner and imam of a local mosque;[9] his mother
Ashiamma was a housewife. His father owned a ferry that took Hindu pilgrims back and forth between Rameswaram and the now uninhabited Dhanushkodi. Kalam was the youngest of four brothers and one sister in his family.
</p>
<p>After graduating from the Madras Institute of Technology in 1960, Kalam joined the Aeronautical Development Establishment of the Defence Research and Development Organisation (by Press Information Bureau, Government of India) as
a scientist after becoming a member of the Defence Research & Development Service (DRDS). He started his career by designing a small hovercraft, but remained unconvinced by his choice of a job at DRDO.Kalam was also part of the INCOSPAR committee working under Vikram Sarabhai, the renowned space scientist.[13] In 1969, Kalam was transferred to the Indian Space Research Organisation (ISRO) where he was the project director of India's first Satellite Launch Vehicle (SLV-III) which successfully deployed the Rohini satellite in near-earth orbit in July 1980; Kalam had first started work on an expandable rocket project independently at DRDO in
1965. In 1969, Kalam received the government's approval and expanded the programme to include more engineers.
</p>
<p>Kalam served as the 11th President of India, succeeding K. R. Narayanan. He won the 2002 presidential election with an electoral vote of 922,884,
surpassing the 107,366 votes won by Lakshmi Sahgal. His term lasted from 25 July 2002 to 25 July 2007.
</p>
<p>On 27 July 2015, Kalam travelled to Shillong to deliver a lecture on "Creating a Livable Planet Earth" at the Indian Institute of Management Shillong.
While climbing a flight of stairs, he experienced some discomfort, but was able to enter the auditorium after a
brief rest.At around 6:35 p.m. IST, only five minutes into his lecture, he collapsed. He was rushed to
the nearby Bethany Hospital in a critical condition; upon arrival, he lacked a pulse or any other signs of life.
Despite being placed in the intensive care unit, Kalam was confirmed dead of a sudden cardiac arrest at 7:45 p.m. IST.His last words, to his aide Srijan Pal Singh, were reportedly: "Funny guy! Are you doing well?"
</p>
<p>India reacted to Kalam's death with an outpouring of grief; numerous tributes were paid to the former president across the nation and
on social media. The Government of India declared a seven-day state mourning period as a mark of respect.President Pranab Mukherjee, Vice-President Hamid Ansari, Home Minister Rajnath Singh, and other leaders condoled the former President's demise.Prime Minister Narendra Modi said "Kalam's death is a great loss to the scientific community.
He took India to great heights. He showed the way."Former Prime Minister Dr Manmohan Singh, who had served as prime minister under Kalam, said, "our country has lost a great human being who made phenomenal contributions to the promotion of self-reliance in defence technologies. I worked very closely with Dr.
Kalam as prime minister and I greatly benefited from his advice as president of our country. His life and work will be remembered for generations to come."
</p>
<p>The Dr. A. P. J. Abdul Kalam National Memorial was built in memory of Kalam by the DRDO in Pei Karumbu, in the island town of Rameswaram, Tamil Nadu. It was inaugurated by Prime Minister Narendra Modi in July 2017.
On display are the replicas of rockets and missiles which Kalam had worked with. Acrylic paintings about his life are also displayed along with hundreds of portraits depicting the
life of the mass leader. There is a statue of Kalam in the entrance showing him playing the Veena. There are two other smaller statues of the leader in sitting and standing posture.
</p>
</div>
</body>
</HTML>
4.Create another folder images as apjimg (Right click on folder--->reveal in file explorer)[to know the physical path]
5. Add downloaded images of APJ Abdul kalam and his quote pics into apjimg.
6.Add another file into public folder as gallery.html and and insert the images into HTML as follows
<!DOCTYPE html>
<HTML>
<head>
<title>GALLERY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="container">
<ul class="menu">
<img src="../apjimg/apjlogo.png" width="10%" height="50%" />
<li><a href="index.html">HOME </a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="quote.html">QUOTE</a></li>
<li><a href="doctorate.html">DOCTORATES</a></li>
<li><a href="gallery.html">GALLIERY</a></li>
</ul>
<h2>PHOTO GALLERY</h2>
<div class="im">
<div id="gallery" >
<div><img src="../apjimg/1.jpg" ></div>
<div><img src="../apjimg/2.jpg" ></div>
<div><img src="../apjimg/3.jpg" ></div>
<div><img src="../apjimg/4.jpg" ></div>
</div>
<div id="gallery">
<div><img src="../apjimg/5.jpg" ></div>
<div><img src="../apjimg/6.jpg" ></div>
<div><img src="../apjimg/7.jpg" ></div>
<div><img src="../apjimg/8.jpg" ></div>
</div>
<div id="gallery">
<div><img src="../apjimg/9.jpg" ></div>
<div><img src="../apjimg/10.jpg" ></div>
<div><img src="../apjimg/1.jpg" ></div>
<div><img src="../apjimg/2.jpg" ></div>
</div>
</div>
</body>
</HTML>
7.Add another file into public folder as quote.html
<!DOCTYPE html>
<HTML>
<head>
<title>QUOTE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="container" >
<ul class="menu">
<img src="../apjimg/apjlogo.png" width="10%" height="50%"/>
<li><a href="index.html">HOME </a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="quote.html">QUOTE</a></li>
<li><a href="doctorate.html">DOCTORATES</a></li>
<li><a href="gallery.html">GALLIERY</a></li>
</ul>
<h2>QUOTES BY ABDUL KALAM</h2>
<div class="quote">
<div><img src="../apjimg/q1.jpg"></div>
<div><img src="../apjimg/q2.jpg"></div>
<div><img src="../apjimg/q3.jpg"></div>
<div><img src="../apjimg/q4.jpg"></div>
<div><img src="../apjimg/q5.jpg"></div>
<div><img src="../apjimg/q6.jpg"></div>
<div><img src="../apjimg/q7.jpg"></div>
<div><img src="../apjimg/q8.jpg"></div>
<div><img src="../apjimg/q9.jpg"></div>
<div><img src="../apjimg/q10.jpg"></div>
</div>
</body>
</HTML>
8.Add another file into public folder as doctorate.html and write the above code.
<!DOCTYPE html>
<HTML>
<head>
<title>DOCTORATES</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="container" >
<ul class="menu">
<img src="../apjimg/apjlogo.png" width="10%" height="50%" />
<li><a href="index.html">HOME </a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="quote.html">QUOTE</a></li>
<li><a href="doctorate.html">DOCTORATES</a></li>
<li><a href="gallery.html">GALLIERY</a></li>
</ul>
<h2>LIST OF DOCTORATES</h2>
<table class="table" cellspacing="10" cellpadding="10">
<thead>
<tr>
<td>SNO</td>
<td>UNIVERSITY</td>
<td>YEAR</td>
<td>DOCTRATE</td>
<td>PLACE</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ANNA UNIVERSITY</td>
<td>1981</td>
<td>DOCTOR OF SCIENCE</td>
<td>CHENNAI</td>
</tr>
<tr>
<td>2</td>
<td>JADVAPUR UNIVERSITY</td>
<td>1980</td>
<td>DOCTOR OF SCIENCE</td>
<td>KOLKATA</td>
</tr>
<tr>
<td>3</td>
<td>KALYANI UNIVERSITY</td>
<td>1990</td>
<td>DOCTOR OF SCIENCE</td>
<td>KOLKATA</td>
</tr>
<tr>
<td>4</td>
<td>IIT KANPUR</td>
<td>1990</td>
<td>DOCTOR OF SCIENCE</td>
<td>KANPUR,UP</td>
</tr>
<tr>
<td>5</td>
<td>MAHARAJA SAYAJIRAO UNIVERSITY</td>
<td>1990</td>
<td>DOCTOR OF SCIENCE</td>
<td>GUJRAT</td>
</tr>
<tr>
<td>6</td>
<td>SHANTHINIKETHAN UNIVERSITY</td>
<td>1990</td>
<td>DOCTOR OF SCIENCE</td>
<td>KOLKATA</td>
</tr>
<tr>
<td>7</td>
<td>MADURAI UNIVERSITY</td>
<td>1990</td>
<td>DOCTOR OF SCIENCE</td>
<td>MADURAI</td>
</tr>
<tr>
<td>8</td>
<td>JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY</td>
<td>1997</td>
<td>DOCTOR OF PHILOSOPHY</td>
<td>HYDERABAD</td>
</tr>
<tr>
<td>9</td>
<td>PATNA UNIVERSITY</td>
<td>1990</td>
<td>DOCTOR OF SCIENCE</td>
<td>PATNA</td>
</tr>
<tr>
<td>10</td>
<td>IIT MUMBAI</td>
<td>1991</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>MUMBAI</td>
</tr>
<tr>
<td>11</td>
<td>BANARAS HINDU UNIVERSITY</td>
<td>1991</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA</td>
<td>BANARAS</td>
</tr>
<tr>
<td>12</td>
<td>UNIVERSITY OF HYDERABAD</td>
<td>1993</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA</td>
<td>HYDERABAD</td>
</tr>
<tr>
<td>13</td>
<td>UNIVERSITY OF ROORKEE</td>
<td>1994</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>ROORKEE</td>
</tr>
<tr>
<td>14</td>
<td>IIT DELHI</td>
<td>1995</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>DELHI</td>
</tr>
<tr>
<td>15</td>
<td>UNIVERSITY OF MYSORE</td>
<td>1995</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>MYSORE</td>
</tr>
<tr>
<td>16</td>
<td>BIRLA INSTITUTE OF TECHNOLOGY</td>
<td>1995</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>RANCHI</td>
</tr>
<tr>
<td>17</td>
<td>UNIVERSITY OF ALLAHABAD</td>
<td>1996</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>ALLAHABAD</td>
</tr>
<tr>
<td>18</td>
<td>UNIVERSITY OF DELHI</td>
<td>1998</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>DELHI</td>
</tr>
<tr>
<td>19</td>
<td>INDIAN SCHOOL OF MINES</td>
<td>1998</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>DHANBAD</td>
</tr>
<tr>
<td>20</td>
<td>BHARATHIDASAN UNIVERSITY</td>
<td>1998</td>
<td>DOCTOR OF SCIENCE(HONORIS CAUSA)</td>
<td>TRICHY</td>
</tr>
</tbody>
</table>
</body>
</HTML>
9.Add another file for style sheet into public folder as styles.css and write the above code.
.container{
background-image: url(../apjimg/APJ.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-size: 1366px 625px;
}
.quote img{
width:1000px;
margin-left:200px;
height: 200px;
margin-top: 20px;
}
.quote img:hover{
transition:2s;
margin-left:140px;
margin-top:10px;
margin-bottom:2px;
margin-right:3px;
}
.im div{
display: flex;
margin:20px;
padding:10px;
}
#gallery img{
width:250px;
height:250px;
}
#gallery img:hover{
width:300px;
height:300px;
transition: 2s;
align-items: center;
}
table{
color: white;
padding:10px;
margin:80px;
width: 1300px;
border-color: white;
}
tr{
margin:20px;
padding: 3px;
text-align: center;
background-color:black;
}
.apj p{
color: white;
font-size: 60px;
margin: 100px;
margin-top: 350px;
}
span{
color: green;
}
.profile p{
color:yellow;
font-size: 20px;
padding:3px;
margin:50px;
}
a{
color: white;
text-decoration: none;
}
a:hover{
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: yellow;
}
.menu{
display:flex;
margin-left: 30px;
list-style:none;
color:white;
}
li{
margin-left:60px;
margin-top:50px;
}
li:hover{
cursor: pointer;
text-decoration-line:underline;
text-decoration-color: yellow;
}
h2{
font-size: 50px;
color:white;
text-align:center;
}
10. Now open index.html file [rightclick--->open with live server] to OverView of our project.
https://drive.google.com/file/d/18mLT2Wi2P0LgFx5XZcTCkgXMZ0SJVEWH/view?usp=sharing
No comments
If you have any doubts, Please let me know