‭FULL STACK DEVELOPMENT LAB‬

‭Week-1‬
‭ Name:K.Dhanush Class: CSM-C ‬
‭
RollNo: 22R21A66F8 Date: 22-01-25 ‬

‭Aim: Creating a simple web page using HTML.‬

‭Source Code:‬

‭!‬
< DOCTYPE‬‭
‭ html‬ >‬
‭
<‬
‭html‬‭
‭ lang‬=‬
‭"en"‬
‭ >‬
‭
<‬
‭head‬
‭ >‬
‭
‭ ‬‭ <‬
meta‬‭
‭ charset‬ =‬
‭"UTF-8"‬
‭ >‬
‭
‭ ‬‭ <‬
meta‬‭
‭ name‬ =‬
‭"viewport"‬‭
‭ content‬ =‬
‭"width=device-width,‬‭
‭ initial-scale=1.0"‬
>‬
‭
‭ ‬‭ <‬
title‬
‭ >‬
‭My Simple Website‬
‭ </‬
‭ title‬
‭ >‬
‭
‭ ‬‭ <‬
style‬
‭ >‬
‭
‭ ‬‭
body‬‭ {‬
‭ ‬‭font-family‬ :‬‭
‭ Arial‬ ,‬‭
‭ sans-serif‬
;‬
‭
‭ ‬‭margin‬ :‬‭
‭ 0‬;‬
‭
‭ ‬‭padding‬ :‬‭
‭ 0‬
;‬
‭
‭ ‬‭background-color‬ :‬‭
‭ #f9f9f9‬ ;‬
‭
‭ }‬
‭ ‬‭
header‬‭ {‬
‭ ‬‭background-color‬ :‬‭
‭ #4CAF50‬ ;‬
‭
‭ ‬‭color‬ :‬‭
‭ white‬ ;‬
‭
‭ ‬‭padding‬ :‬‭
‭ 10px‬‭ 20px‬ ;‬
‭
‭ ‬‭text-align‬ :‬‭
‭ center‬ ;‬
‭
‭ }‬
‭ ‬‭
nav‬‭ {‬
‭ ‬‭background-color‬ :‬‭
‭ #333‬;‬
‭
‭ ‬‭overflow‬ :‬‭
‭ hidden‬ ;‬
‭
‭ }‬
‭ ‬‭
nav‬‭ a‬‭{‬
‭ ‬‭float‬ :‬‭
‭ left‬ ;‬
‭
‭ ‬‭display‬ :‬‭
‭ block‬ ;‬
‭
‭ ‬‭color‬ :‬‭
‭ white‬ ;‬
‭
‭ ‬‭text-align‬ :‬‭
‭ center‬ ;‬
‭
‭ ‬‭padding‬ :‬‭
‭ 14px‬‭ 20px‬ ;‬
‭
‭ ‬‭text-decoration‬ :‬‭
‭ none‬;‬
‭
‭ }‬
‭ ‬‭
nav‬‭ a:hover‬‭ {‬
‭ ‬‭background-color‬ :‬‭
‭ #ddd‬;‬
‭
‭ ‬‭color‬ :‬‭
‭ black‬ ;‬
‭
‭ }‬
‭ ‬‭
.content‬‭ {‬
‭ ‬‭margin‬ :‬‭
‭ 20px‬ ;‬
‭
‭ ‬‭padding‬ :‬‭
‭ 10px‬ ;‬
‭
‭ ‬‭background‬ :‬‭
‭ white‬ ;‬
‭
‭ ‬‭border‬ :‬‭
‭ 1px‬‭ solid‬‭ #ccc‬;‬
‭
‭ ‬‭
border-radius‬ :‬‭
‭ 5px‬;‬
‭
‭ }‬
‭ ‬‭
footer‬‭ {‬
‭ ‬‭
background-color‬ :‬‭
‭ #333‬
;‬
‭
‭ ‬‭
color‬
:‬‭
‭ white‬ ;‬
‭
‭ ‬‭
text-align‬:‬‭
‭ center‬ ;‬
‭
‭ ‬‭
padding‬
:‬‭
‭ 10px‬‭ 0‭
;
‬‬
‭ ‬‭
position‬
:‬‭
‭ fixed‬ ;‬
‭
‭ ‬‭
width‬
:‬‭
‭ 100%‬;‬
‭
‭ ‬‭
bottom‬
:‬‭
‭ 0‬;‬
‭
‭ }‬
‭ ‬‭ </‬
style‬
‭ >‬
‭
</‬
‭ head‬
‭ >‬
‭
<‭
‭b‬ody‬
>‬
‭
‭ ‬‭ <‭
h
‬eader‬ >‬
‭
‭ ‬‭
<‭
h‬1‬
>‬
‭ Welcome to the Website‬
‭ </‬
‭ h1‬
‭ >‬
‭
‭ ‬‭
<‭
p‬‭
>
‬‭
A‬ simple webpage with navigation, content,‬‭
and footer‬
</‬
‭ p‬
‭>‬
‭
‭ ‬‭ </‬
header‬
‭ >‬
‭

‭ ‬‭
<‭
n‬av‬
>‬
‭
‭ ‬‭
<‭
a‬‬‭
href‬
=‭
‭"‬#home"‬
>‬
‭ Home‬
‭ </‬
‭ a‭
‭>‬‬
‭ ‬‭
<‭
a‬‬‭
href‬
=‭
‭"‬#about"‬>‭
‭A‬bout‬</‬
‭ a‬
‭ >‬
‭
‭ ‬‭
<‭
a‬‬‭
href‬
=‭
‭"‬#services"‬ >‬
‭ Services‬
‭ </‬
‭ a‬
‭ >‬
‭
‭ ‬‭
<‭
a‬‬‭
href‬
=‭
‭"‬#contact"‬ >‭
‭C‬ontact‬ </‬
‭ a‬
‭>‬
‭
</‬
‭ nav‬
‭ >‬
‭

‭ ‬‭<‭
d
‬iv‬‭id‬=‬
‭ "home"‬‭
‭ class‬
=‭
‭"‬content"‬
>‬
‭
‭ ‬‭
<‭
h‬2‬
>‬
‭ Home‬
‭ </‬
‭ h2‬
‭ >‬
‭
‭ ‬‭
<‭
p‬‭
>
‬‭
W‬elcome to the homepage of my simple website.‬‭Here you'll find‬
various sections about me and the services I offer.‬
‭ </‬
‭ p‭
‭>‬‬
</‬
‭ div‬
‭ >‬
‭

‭ ‬‭<‭
d
‬iv‬‭id‬=‬
‭ "about"‬‭
‭ class‬
=‬
‭ "content"‬
‭ >‬
‭
‭ ‬‭
<‭
h‬2‬
>‬
‭ About‬
‭ </‬
‭ h2‬
‭ >‬
‭
‭ ‬‭
<‭
p‬‭
>
‬‭
T‬his website is a basic demonstration of‬‭
HTML and CSS. It includes‬
a navigation bar, styled content sections, and a footer.‬
‭ </‬
‭ p‭
‭>‬‬
</‬
‭ div‬
‭ >‬
‭

‭ ‬‭<‭
d
‬iv‬‭id‬=‬
‭ "services"‬‭
‭ class‬ =‭
‭"‬content"‬
>‬
‭
‭ ‬‭
<‭
h‬2‬
>‬
‭ Services‬
‭ </‬
‭ h2‬
‭ >‬
‭
‭ ‬‭
<‭
p‬‭
>
‬‭
I‬ offer web development services, including‬‭
creating responsive and‬
user-friendly websites.‬
‭ </‬
‭ p‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭

‭ ‬‭<‭
d‬iv‬‭
id‬=‬
‭ "contact"‬‭
‭ class‬
=‬
‭ "content"‬
‭ >‬
‭
‭ ‬‭
<‭
h‬2‬
>‬
‭ Contact‬
‭ </‬
‭ h2‬
‭ >‬
‭
‭ ‬‭
<‭
p‬‭
>
‬‭
F‬eel free to reach out to me at‬‭<‬
a‬
‭
href‬
‭ =‭
‭"‬mailto:[email protected]"‬ >‭
‭e
‬[email protected]‬
</‬
‭ a‬
‭ >‭
‭.
‬‭
<
‬/‬
p‭
‭>
‬‬
</‬
‭ div‬
‭ >‬
‭

‭ ‬‭<‭
f
‬ooter‬ >‬
‭
‭ ‬‭
<‭
p‬‭
>
‬‭
&‬copy;‬‭
2025 My Simple Website. All rights‬‭
reserved.‬
</‬
‭ p‭
‭>‬‬
‭ ‬‭</‬
footer‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭
‭OUTPUT:‬