THEORY DIGITAL ASSIGNMENT

Internet And Web Programming

Name- Varun Goel Reg. No- 19BCE2296

Slot- E2 Faculty- Prof. Jayakumar S.
QUES-
Create a personal webpage using HTML5, CSS and JS. Commit every
change in this GitHub Repository.
1.Write down the step-by-step process for creating the personal
webpage and deployment in GitHub Pages.
2.Write down the 10 points you learned during the creation of this
webpage.
3.Write down why everyone needs a personal webpage.
4.Deploy your personal webpage in GitHub pages (Github.io), share
your website link, code and Screenshots.

ANS 1.
Process For creating Personal Webpage:-

¨ HTML Page
§ First of all we lay down the structure of our website using HTML.
§ Its like constructing a blue print of a building.

§ We start with creating the “Navigation Bar" in which I created a

menu for all the pages in website ,such that if I click on those I will
be redirected to that particular page.
§ After that I create the “Homepage” which is divided into 2 section:
left one is for the text(MY INTRODUCTION) and right side is my
Profile picture.
§ Next comes the “About” page.This page contains my another
picture on the left side and some of my information on the right
side.
§ Next is the “Hobbies and interests” page.It contains of a general
paragraph tag in which I included my definition of hobbies
 § after that using “DL and DT(description list and defines terms )” I
added 2 of my hobbies and there importance to me that are:-
Sports(badminton) and Music(guitar)

§ Next is the “Need of a webpage”.this was a simple to create page

using section tag in which I included the general need of a webpage
according to me

§ Next is the “Contact Me ” page. In this section I Used the “HREF”

tag to create 4 references of my contact sources i.e.
Linkedin,Email,Facebook and Instagram which I represented using
their logos.

§ Last was the “Footer section”.

§ After that I added the link to my Javascript file.

¨ CSS Page

• This is used to make our site attractive by adding

formatting an colors to the site..Its like adding clothes in a
person’s life.
• Similarly,I moved one by one to different pages in CSS
also.I opened by html page on the browser and selected
the option “Inspect element” which helped me a lot in
doing the css.
• First of all I started with the scroll bar and gave it an
orange color and all other necessary styles.
• Then I moved on the nav bar in which I provided the
necessary padding between the my portfolio text and the
menu options.
also I added the hover option for the menu buttons.
 • Then for the “home” page and the “About” page I used
the flex attribute for the home content class and its
subclass that is the image and the text
• The for the “Hobbies”section I changed its background
color, font,padding using various classes involved in it.
• Then css for need of webpage was very simple in which I
just changed the paragraph tag color and aligned the text.
• Then for the “Contact” me Page I separately changed the
padding between the icons and the color of the icons.

¨ JAVASCRIPT Page
¨ Its like the brain in one’s body. It is used to provide
functioning in the code(Eg- functioning of a button)

Ans2-
10 points I learned during the creation of this webpage.
1. How to use Flex Attribute in CSS.
2. How to use icons using some external library(I used Font-Awesome
library)
3. How to use subclass and class in CSS.
4. Proper functioning and javascript of a scroll bar.
5. How to make the navigation bar stick to all the pages of our website.
6. How to use descriptive list and define terms tag in html.
7. How to make a proper scroll button and its functioning.
8. How to change the css if one uses the flex attribute.
9. I also learned about html block and inline.
10. I also learned about CSS animations.

ANS3.-

A portfolio is a living and evolving assortment of records that mirror

your achievements, abilities, encounters, also, credits. It features and
exhibits tests of a portion of your best work, alongside life
encounters, values also, accomplishments. The individual data that
you fuse into your portfolio can enormously think about your
capacities as a person just as become a helpful instrument in
advertising yourself to businesses, companies, schools and colleges.
A portfolio doesn't replace a resume, yet it can complement your
capacities and what you can propose in the picked field.Most close
to home site administrations permit you to alter everything from
foundation photographs to textual styles and text situation—thus,
not at all like LinkedIn's uniform profile, your character and brand
can radiate through. At the point when somebody tracks down you,
they'll have a moment, visual portrayal of what your identity is.

ANS4.-

GitHub pages (Github.io) Link:-

https://varun-001.github.io/VarunGoel.github.io/

Screenshots:-
HTML Code:-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Varun Goel's Portfolio</title>
<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Move to up button -->
<div class="scroll-button">
<a href="#home"><i class="fas fa-chevron-circle-up"></i></a>
</div>
<!-- navgaition menu -->
<nav>
 <div class="navbar">
<div class="logo"><a href="#">My Portfolio</a></div>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Hobbies</a></li>
<li><a href="#need">Need of Webpage</a></li>

<!-- <li><a href="#services">Services</a></li> -->

<li><a href="#contact">Contact</a></li>
<div class="cancel-btn">
<i class="fas fa-times"></i>
</div>
</ul>

</div>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</nav>

<!-- Home Section Start -->

<section class="home" id="home">
<div class="home-content">
<div class="text" style= "width: 50%;">
<div class="text-one">Hi,</div>
<div class="text-two">I'm Varun Goel</div>
<div class="text-three">Computer Science Engineer</div>
</div>
<div class="home-img" style= "width: 50%;">
<img src="/Users/varun/Desktop/Sem 5/IWP LAB DA/img1.jpeg" alt="">
</div>
</section>

<!-- About Section Start -->

<section class="about" id="about">
<div class="content">
<div class="title"><span>About Me</span></div>
<div class="about-details">
<div class="left">
<img src="/Users/varun/Desktop/Sem 5/IWP LAB DA/img2.jpeg" alt="">
</div>
<div class="right">

<p>My Name is Varun Goel , I am currently a Third Year student at Vellore

Institute of Technology pursuing my Bachelor’s degree in Computer Science , from
which I will be graduating in June 2023. I was born and brought up in New Delhi . I
completed my schooling from Sachdeva Public School,delhi and received a perfect 10
CGPA in 10th Standard and 85% aggregate in 12th Standard. I have a deep interest in
Coding , and kind of developing a new interest in web development.
</p>

</div>
</div>
 </div>
</section>

<!-- Hobbies And Interests -->

<section class="skills" id="skills" style= "padding: 30px;">
<div class="content">
<div class="title"><span>Hobbies & Interests</span></div>
<div class="skills-details">
<div class="text">
\ <p>I beleive its education is not just aboout academic part but about the
overall holistic development of a person, All these years I have tried keeping a
balance among the two and on the way have developed certain hobbies and interests.
They help me keeping myself equipped as well as act as a stress coping
mechanism</p>

<br>

<i class="Some">Some of my hobbies are: </i>

<br><br>
<dl>
<dt><strong>Music&nbsp;</strong><i class="fas fa-guitar"></i></dt>
<dd>It is something which connects your soul to your surroundings. I
basically love playing Drums and Guitar.I started to play music in my 3rd standard
and till today its rejuvenates me everytime I play it.</a></dd>

<br>

<dt><strong>Sports&nbsp;</strong><i class="far fa-futbol"></i></dt>

<dd>In sports I mostly like Badminton, In the evolving digital world which
restricts you to your desk and hardly give you time for exercise, Badminton acts as
a side way for me to keep my body fit.
</dd>
</dl>

</div>
</div>
</section>

<!-- Need Of a Webpage -->

<section class="need" id="need">
<div class="content">
<div class="title"><span>Need Of Webpage</span></div>
<div class="text">
<p>A portfolio is a living and evolving assortment of records that mirror
your achievements, abilities, encounters, also, credits. It features and exhibits
tests of a portion of your best work, alongside life encounters, values also,
accomplishments. The individual data that you fuse into your portfolio can
enormously think about your capacities as a person just as become a helpful
instrument in advertising yourself to businesses, companies, schools and colleges.
A portfolio doesn't replace a resume, yet it can complement your capacities and
what you can propose in the picked field.Most close to home site administrations
permit you to alter everything from foundation photographs to textual styles and
text situation—thus, not at all like LinkedIn's uniform profile, your character and
 brand can radiate through. At the point when somebody tracks down you, they'll have
a moment, visual portrayal of what your identity is.</p>
</div>
</div>
</section>

<!-- Contact Me section Start -->

<section class="contact" id="contact">
<div class="content">
<div class="title"><span>Contact Me</span></div>
<div class="text">
<div class="media-icons">
<a href="https://www.linkedin.com/in/varun-goel-1759261a7/"><i class="fab
fa-linkedin"></i></a>
<a href="mailto:[email protected]"><i class="far fa-
envelope"></i></a>
<a href="https://www.facebook.com/varun.goel.566"><i class="fab fa-
facebook-f"></i></a>
<a href="https://www.instagram.com/varungoel01/"><i class="fab fa-
instagram"></i></a>
</div>

</div>
</div>
</div>
</section>

<!-- Footer Section Start -->

<footer>
<div class="text">
<span><a href="#home"></a>Scroll Back to Top</span>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>

CSS Code:-
/* Google Font CDN Link */
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=U
buntu:wght@400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
scroll-behavior: smooth;
}

/* Custom Scroll Bar CSS */

::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {

background:#f9a525;
border-radius: 12px;
transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
background: #4070f4;
}
/* navbar styling */
nav{
position: fixed;
width: 100%;
padding: 20px 0;
z-index: 998;
transition: all 0.3s ease;
font-family: 'Ubuntu', sans-serif;
background-color: #3a58eb;
}
nav.sticky{
background: #8529f9;
;
padding: 13px 0;
}
nav .navbar{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
}
nav .navbar .logo a{
font-weight: 500;
font-size: 35px;
color: #fcfdff;
}
nav.sticky .navbar .logo a{
color: #00ff73;
}
nav .navbar .menu {
display: flex;
position: absolute;
margin-left: 550px;
font-size:20px ;
}

nav .navbar .menu li{

list-style: none;
margin: 0 8px;
}
.navbar .menu a{
font-size: 25px;
font-weight: 500;
color: #00ff44;
padding: 6px 0;
transition: all 0.4s ease;
}
.navbar .menu a:hover{
color: #4070f4;
}
nav.sticky .menu a{
color: #FFF;
}
nav.sticky .menu a:hover{
color: #0E2431;
}
.navbar .media-icons a{
color: #4070f4;
font-size: 18px;
margin: 0 6px;
}
nav.sticky .media-icons a{
color: #FFF;
}

/* Side Navigation Menu Button CSS */

nav .menu-btn,
.navbar .menu .cancel-btn{
position: absolute;
color: #fff;
right: 30px;
top: 20px;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: none;
}
nav .menu-btn{
color: #4070f4;
}
nav.sticky .menu-btn{
 color: #FFF;
}
.navbar .menu .menu-btn{
color: #fff;
}

/* home section styling */

.home{
height: 100vh;
width: 100%;
/* background: url("images/background.png") no-repeat; */
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
background-color: #080808f5;
}
.home .home-content{
width: 100%;
height: 100%;
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
padding: 5%;
}
.home .text-one{
font-size: 25px;
color: #fcfdff;
}
.home .text-two{
color: #f9a525;
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .text-three{
font-size: 40px;
margin: 5px 0;
color: #fcfdff;
}

.home img {
height: 80vh;
width: 70%;
object-fit: cover;
margin-bottom: 0px;
border-radius: 100%;
margin: 0 auto;
margin-top: 50%;
float: right;
}
/* About Section Styling */

section{
padding-top: 40px;
}
section .content{
width: 80%;
margin: 40px auto;
font-family: 'Poppins', sans-serif;
}
.about .about-details{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
section .title{
display: flex;
justify-content: center;
margin-bottom: 40px;
}
section .title span{
color:#F9A627;
font-size: 30px;
font-weight: 600;
position: relative;
padding-bottom: 8px;
}
section .title span::before,
section .title span::after{
content: '';
position: absolute;
height: 3px;
width: 100%;
background: #4070f4;
left: 0;
bottom: 0;
}
section .title span::after{
bottom: -7px;
width: 70%;
left: 50%;
transform: translateX(-50%);
}
.about .about-details .left{
width: 45%;
}
.about .left img{
height: 479px;
width: 354px;
object-fit: cover;
border-radius: 12px;
}
.about-details .right{
 width: 55%;

top: 81px;
margin-left: 43%;
position: absolute;

}
section .topic{
color: #0E2431;
font-size: 25px;
font-weight: 500;
margin-bottom: 10px;
}
.about-details .right p{
text-align: justify;
color: #6e93f7;
}

/* Hobbies*/
.skills{
background: #080808f5;
}

.skills .content{
padding: 40px 0;
}
.skills .skills-details{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.skills-details .text{
width: 70%;
color: #6e93f7;
margin: 0 auto;
text-align: justify;
}
.skills-details p{
text-align: justify;
}
.skills-details .Some{
color: orange;
text-align: justify;
}
.skills-details dt strong,
.skills-details dt i{
font-size: x-large;
}
.skills-details dt i{
color: orange;
}
.skills .skills-details .experience{
 display: flex;
align-items: center;
margin: 0 10px;
}
.skills-details .experience .num{
color: #0E2431;
font-size: 80px;
}
.skills-details .experience .exp{
color: #0E2431;
margin-left: 20px;
font-size: 18px;
font-weight: 500;
margin: 0 6px;
}
.skills-details .boxes{
width: 45%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.skills-details .box{
width: calc(100% / 2 - 20px);
margin: 20px 0;
}
.skills-details .boxes .topic{
font-size: 20px;
color: #4070f4;
}
.skills-details .boxes .per{
font-size: 60px;
color: #4070f4;
}
/* Need Of Webpage CSS */
.need .text p{
color: #6e93f7;
text-align: justify;
}

/* Contact Me CSS */
.contact{
background: #141414;
}
.contact .content{
margin: 0 auto;
padding: 30px 0;
}
.contact .text{
width: 80%;
text-align: center;
margin: auto;
}
.contact .media-icons a{
color: #5800ff;
 font-size: 50px;
margin: 0 6px;
padding: 30px;
}
contact.sticky .media-icons a{
color: #FFF;
}

/* Footer CSS */
footer{
background: #4c505a;
text-align: center;
font-family: 'Poppins', sans-serif;
}
footer .text span{
font-size: 17px;
font-weight: 400;
color: #4c505a;
}

/* Scroll TO Top Button CSS */

.scroll-button a{
position: fixed;
bottom: 20px;
right: 20px;
color: #fff;
background: #4070f4;
padding: 7px 12px;;
font-size: 18px;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.15);
display: none;
}

/* Responsive Media Query */

@media (max-width: 1190px) {
section .content{
width: 85%;
}
}
@media (max-width: 1000px) {
.about .about-details{
justify-content: center;
flex-direction: column;
}
.about .about-details .left{
display: flex;
justify-content: center;
width: 100%;
}
.about-details .right{
width: 90%;
margin: -200px 0;
 }
.services .boxes .box{
margin: 20px 0;
width: calc(100% / 2 - 20px);
}
}
@media (max-width: 900px) {
.about .left img{
height: 350px;
width: 350px;
}
}

@media (max-width: 750px) {

nav .navbar{
width: 90%;
}
nav .navbar .menu{
position: fixed;
left: -100%;
top: 0;
background: #0E2431;
height: 100vh;
max-width: 400px;
width: 100%;
padding-top: 60px;
flex-direction: column;
align-items: center;
transition: all 0.5s ease;
}
.navbar.active .menu{
left: 0;
}
nav .navbar .menu a{
font-size: 23px;
display: block;
color: #fff;
margin: 10px 0;
}
nav.sticky .menu a:hover{
color: #4070f4;
}
nav .navbar .media-icons{
display: none;
}
nav .menu-btn,
.navbar .menu .cancel-btn{
display: block;
}
.home .text-two{
font-size: 65px;
}
.home .text-three{
font-size: 35px;
 }
.skills .skills-details{
align-items: center;
justify-content: center;
flex-direction: column;
}
.skills-details .text{
width: 100%;
margin-bottom: 50px;
}
.skills-details .boxes{
justify-content: center;
align-items: center;
width: 100%;
}
.services .boxes .box{
margin: 20px 0;
width: 100%;
}
.contact .text{
width: 100%;
}
}

@media (max-width: 500px){

.home .text-two{
font-size: 55px;
}
.home .text-three{
font-size: 33px;
}
.skills-details .boxes .per{
font-size: 50px;
color: #4070f4;
}
}

JavaScript Code:-
// Sticky Navigation Menu JS Code
let nav = document.querySelector("nav");
let scrollBtn = document.querySelector(".scroll-button a");
console.log(scrollBtn);
let val;
window.onscroll = function() {
if(document.documentElement.scrollTop > 20){
nav.classList.add("sticky");
scrollBtn.style.display = "block";
}else{
nav.classList.remove("sticky");
scrollBtn.style.display = "none";
}
}

// Side NavIgation Menu JS Code

let body = document.querySelector("body");
let navBar = document.querySelector(".navbar");
let menuBtn = document.querySelector(".menu-btn");
let cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = function(){
navBar.classList.add("active");
menuBtn.style.opacity = "0";
menuBtn.style.pointerEvents = "none";
body.style.overflow = "hidden";
scrollBtn.style.pointerEvents = "none";
}
cancelBtn.onclick = function(){
navBar.classList.remove("active");
menuBtn.style.opacity = "1";
menuBtn.style.pointerEvents = "auto";
body.style.overflow = "auto";
scrollBtn.style.pointerEvents = "auto";
}

// Side Navigation Bar Close While We Click On Navigation Links

let navLinks = document.querySelectorAll(".menu li a");
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener("click" , function() {
navBar.classList.remove("active");
menuBtn.style.opacity = "1";
menuBtn.style.pointerEvents = "auto";
});
}