Building A Basic Portfolio Website Using HTML CSS And JavaScript

    Last updated on 21 May 2023

    Preview Link
    Quick Info
    Youtube : https://youtu.be/Thy5IWXN-fo
    Views : 47462
    Skills : HTML And CSS
    Category : Web Design
    Tag : Portfolio Website

    In This Tutorial We Are Learning how to building a basic portfolio website using html css and javascript. This website is going to be pure HTML and CSS.

    You can use this website as a personal portfolio website using html and css. This is complete free, you can use it for personal use

    Section We Are Going To build in our basic portfolio website using html css and javascript

    In our portfolio website using html css, we are going to design three main section : Header section, Main Body And Footer section

    In this tutorial we are going to design 3 main section in our basic portfolio website using html css and javascript, with the help of their sub sections. Subsections are created as per the website content.

    Header

    • Logo
    • Main menu
    • Banner

    Main Body

    • About us section of portfolio website using html and css
    • Services
    • Experience, Education, Portfolio
    • Testimonial
    • Contact Us

    Footer

    • Social media link
    • Copyright information

    Video Tutorial

    To see full coding video on building a basic portfolio website using html css and javascript to understand easily.

    Let's Start The Coding Portfolio Website

    Before starting Coding Portfolio Website, Firstly, Create the folder on dekstop, my folder name is portfolio website Inside folder portfolio website, create two sub folder : - 1) css and 2) images

    Inside portfolio website folder, I am creating HTML file file name - index.html

    Inside css folder, I am creating CSS file - file name - style.css

    Let's start with writing basic meta code for coding portfolio website in index.html, and link the style.css file to index.html file

    Meta html code. Copy And paste the code in index.html

    index.html
     <!-----META SECTION----->
    <!DOCTYPE html>
    <html>
    <head>
    <title>Student Portfolio Website Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

    Common CSS. Copy and paste the code in style.css

    style.css
    /*****COMMON CSS SECTION*****/
      * {
    	box-sizing: border-box;
    	margin: 0;
    	padding: 0;
    	-outline: 0;
    	font-family Roboto, sans-serif, arial;
    }
    html, body 
    	{
    	font-size: 14px;
    	font-weight: 400;
    	background: #000000;
    	color: #fff;
    }
    .container {
    	width: 1100px;
    	margin: 0px auto;
    	display: table;
    }
    .width-33 {
    	width: 33%;
    	float: left;
    }
    .width-66 {
    	width: 66%;
    	float: left;
    }

    2) Now, we will design Navbar Section.

    In our Navbar section, we are having content. we are using content are written in ul tag.

    Please copy and paste the below code to design Top header section

    Navbar Section Of Portfolio HTML Code. Copy This Portfolio Website HTML Code And Paste In index.html file

    index.html
    <!-----MENU SECTION------>
    <div class="main-panel">
      <div class="container">
        <div class="width-33 logo">Port <span class="span-col">folio</span>
        </div>
        <div class="width-66">
          <nav>
            <a href="#">
              <span class="span-col">Home</span>
            </a>
            <a href="#">About me</a>
            <a href="#">Education</a>
            <a href="#">My Services</a>
            <a href="#">Portfolio</a>
            <a href="#">Testimonial</a>
          </nav>
        </div>
      </div>

    Navbar Section CSS code. Copy The Code And Paste in style.css

    style.css
    /*****MENU SECTION*****/
    .main-panel {
    	width: 100%;
    	float: left;
    	padding-top: 20px;
    	padding-bottom: 50px;
    	height: 100vh;
    }
    
    .logo {
    	font-size: 40px;
    	font-weight: 600;
    }
    
    .span-col {
    	color: #ffbf35;
    }
    
    nav {
    	float: right;
    }
    
    nav a {
    	text-decoration: none;
    	font-size: 16px;
    	font-weight: 500;
    	margin-left: 20px;
    	color: white;
    }

    Output Of Navbar Section of basic portfolio website using html css and javascript

    logo and menu section of basic portfolio website using html css and javascript

    3) Now, we will design Banner section.

    In our portfolio website we are having Banner section with our own image with social media link and button. For Creating we have img tag and for contact me button we are using button tag.

    Please copy and paste the below code to design Banner section

    Banner Section HTML code. Copy This Code And Paste In index.html file

    index.html
    <!------MAIN BANNERR------>
    <div class="container ">
      <div class="width-50">
        <div class="banner-section">
          <span class="span-col">Welcome To Dezven.com</span>
          <h1>Evans <span class="span-col">Dezven</span>
          </h1>
          <h2>- I'm a passionate graphic designer from New York.</h2>
          <a href="#">
            <i class="fa fa-facebook"></i>
          </a>
          <a href="#">
            <i class="fa fa-twitter"></i>
          </a>
          <a href="#">
            <i class="fa fa-linkedin"></i>
          </a>
          <a href="#">
            <i class="fa fa-instagram"></i>
          </a>
          <a href="#">
            <i class="fa fa-github"></i>
          </a>
        </div>
      </div>
      <div class="width-50">
        <img src="images/about-us.png">
      </div>
    </div>
    </div>

    Banner section CSS code. Copy The Code And Paste in style.css

    style.css
    /*****Main BANNER*****/
    .width-50 {
    	float: left;
    	width: 50%;
    }
    .banner-section {
    	width: 100%;
    	float: left;
    	margin-top: 25vh;
    }
    .banner-section h1 {
    	font-size: 48px;
    	margin-top: 10px;
    	font-weight: bolder;
    }
    .banner-section h2 {
    	font-size: 20px;
    	line-height: 25px;
    	margin-top: 10px;
    	font-weight: 400;
    }
    .banner-section a {
    	float: left;
    	text-decoration: none;
    	font-size: 18px;
    	margin-top: 20px;
    	border-radius: 50%;
    	text-align: center;
    	border: 2px solid #ffbf35;
    	color: #ffbf35;
    	margin-left: 10px;
    	height: 50px;
    	width: 50px;
    	line-height: 50px;
    }
    /*****Main BANNER IMAGE*****/
    .main-panel img {
    	margin-top: 10%;
    	width: 100%;
    	margin-left: 10%;
    }

    Output Of Banner Section

    banner section of basic portfolio website using html css and javascript

    4) Now, we will design About Us Section.

    In Our About Us Section, We are going to styling a portfolio using css, we are having content, image and we are using ul and img tag. For Creating image, we have ul and img tag.

    Please copy and paste the below code to design About US Section

    About Us Section HTML code. Copy This Code And Paste In index.html file

    index.html
    <!------ABOUT US SECTION------>
    <div class="main-section bg-lightgrey">
      <div class="container">
        <div class="width-50">
          <img src="images/about-us.png" class="about-img">
        </div>
        <div class="width-50">
          <div class="about-us">
            <h2 class="heading-text">About Us</h2>
            <h3>I am available for UI UX Design Project</h3>
            <p>Hi, I am Evans Dezven, From USA. Get best computer science student portfolio website Genius In You With Genius 2023. Welcome To The Best Private University in 2023.</p>
            <div class="width-50 mt-20">
              <table cellspacing="8" cellpadding="8">
                <tr>
                  <th>Name:</th>
                  <td>Evans Dezven</td>
                </tr>
                <tr>
                  <th>Email:</th>
                  <td> info@example.com</td>
                </tr>
                <tr>
                  <th>Birthday:</th>
                  <td> 12 March, 1991</td>
                </tr>
                <tr>
                  <th>Study:</th>
                  <td> Chicago University</td>
                </tr>
              </table>
            </div>
            <div class="width-50 mt-20">
              <table cellspacing="8" cellpadding="8">
                <tr>
                  <th>Phone:</th>
                  <td>(+12) 3467-890-123</td>
                </tr>
                <tr>
                  <th>City:</th>
                  <td>New York, USA</td>
                </tr>
                <tr>
                  <th>Freelancer:</th>
                  <td> Available</td>
                </tr>
                <tr>
                  <th>Website:</th>
                  <td> www.dezven.com</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    About Us Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*ABOUT US SECTION*/
    .main-section {
    	width: 100%;
    	float: left;
    	padding: 110px 0px 110px 0px;
    }
    .width-100 {
    	width: 100%;
    	float: left;
    }
    .mt-20 {
    	margin-top: 20px;
    }
    .heading-text {
    	width: 100%;
    	float: left;
    	font-size: 35px;
    	text-align: center;
    	margin-bottom: 50px;
    	color: #ffbf35;
    }
    .about-img {
    	width: 100%;
    	padding: 0px 50px;
    	margin-top: 20px;
    }
    .about-us {
    	width: 100%;
    	float: left;
    	padding: 20px;
    }
    .about-us p {
    	font-size: 16px;
    	margin-top: 15px;
    	line-height: 27px;
    }
    table {
    	width: 100%;
    }
    table th,
    table td {
    	font-size: 16px;
    	text-align: left;
    	padding: 5px 0px;
    }

    Output Of About Us Section

    about us section of basic portfolio website using html css and javascript

    5) Now, we will design skill section.

    Now we are going to create skill section of portfolio website using html and css. In this section we are having Graph and progress bar with percentage, this we are going to design only using pure HTML and CSS. For creating content we are using paragraph tag

    Please copy and paste the below code to design Skill section

    Skill Section HTML Code. Copy This Code And Paste in index.html file

    index.html
    <!------SKILL SECTION------>
    <div class="main-section">
      <div class="container">
        <h2 class="heading-text">My Skills</h2>
        <div class="width-50">
          <div class="skill">
            <b>HTML</b>
            <span>95%</span>
            <div>
              <span style="width:95%"></span>
            </div>
          </div>
          <div class="skill">
            <b>CSS</b>
            <span>91%</span>
            <div>
              <span style="width:91%"></span>
            </div>
          </div>
          <div class="skill">
            <b>JavaScript</b>
            <span>85%</span>
            <div>
              <span style="width:85%"></span>
            </div>
          </div>
          <div class="skill">
            <b>React js</b>
            <span>79%</span>
            <div>
              <span style="width:79%"></span>
            </div>
          </div>
        </div>
        <div class="width-50">
          <div class="width-50">
            <div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="--value:65">React-65</div>
          </div>
          <div class="width-50">
            <div role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="--value:85">Jquery-85</div>
          </div>
          <div class="width-50">
            <div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="--value:65">Node-65</div>
          </div>
          <div class="width-50">
            <div role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="--value:85">CMD-85</div>
          </div>
        </div>
      </div>
    </div>

    Skill Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*****SKILL SECTION*****/
    .skill {
    	margin-top: 30px;
    	font-size: 17px;
    }
    
    .skill span {
    	float: right;
    }
    
    .skill div {
    	width: 100%;
    	float: left;
    	margin-top: 5px;
    	background: #e7e7e7;
    	border-radius: 10px;
    }
    
    .skill div span {
    	background: #ffbf35;
    	height: 5px;
    	float: left;
    }
    
    div[role="progressbar"] {
    	color: #ffbf35;
    	margin-left: 100px;
    	margin-bottom: 20px;
    	width: 100px;
    	;
    	height: 100px;
    	;
    	border-radius: 50%;
    
    	place-items: center;
    	display: grid;
    
    	--pgPercentage: var(--value);
    	background: radial-gradient(closest-side, black 80%, transparent 0 99.9%, black 0),
    		conic-gradient(#ffbf35 calc(var(--pgPercentage) * 1%), #ffe6af 0);
    
    }

    Output Of Skill Section

    skill section of basic portfolio website using html css and javascript

    6) Now, we will design Experience section.

    In our Experience section, we are having content. For Creating content that we are using pragraph tag.

    Please copy and paste the below code to design Experience section

    Experience Section HTML Code. Copy This Code And Paste in index.html file

    index.html
    <!------EXPERIENCE SECTION------>
    <div class="main-section bg-lightgrey">
      <div class="container">
        <div class="edu-exp">
          <h2 class="heading-text">Education</h2>
          <div class="experience-list">
            <div class="experience-content">
              <h2>Harvard University </h2>
              <h3>2005-2008</h3>
              <p>Master in Computer Engineering</p>
            </div>
          </div>
          <div class="experience-list">
            <div class="experience-content">
              <h2>Stanford University</h2>
              <h3>2005-2008</h3>
              <p>Doctor in Computer Engineering</p>
            </div>
          </div>
          <div class="experience-list">
            <div class="experience-content">
              <h2>University of Oxford</h2>
              <h3>2005-2008</h3>
              <p>Bachelor in Computer Engineering</p>
            </div>
          </div>
          <div class="experience-list">
            <div class="experience-content">
              <h2>University of Cambridge</h2>
              <h3>2005-2008</h3>
              <p>Polytechnic in Computer Engineering</p>
            </div>
          </div>
        </div>
        <div class="edu-exp">
          <h2 class="heading-text">Experience</h2>
          <div class="experience-list">
            <div class="experience-content">
              <h2>Apple Inc Company</h2>
              <h3>2023-current</h3>
              <p>Font End Developer</p>
            </div>
          </div>
          <div class="experience-list">
            <div class="experience-content">
              <h2>Google Inc Company</h2>
              <h3>2021-2023</h3>
              <p>Graphic design student portfolio websites template.</p>
            </div>
          </div>
          <div class="experience-list">
            <div class="experience-content">
              <h2>Amazon Ecommerce Company</h2>
              <h3>2019-2021</h3>
              <p>Font End Developer</p>
            </div>
          </div>
          <div class="experience-list">
            <div class="experience-content">
              <h2>Microsoft Adobe Company</h2>
              <h3>2017-2019</h3>
              <p>UI / UX Designer</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    Experience Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*****EXPERIENCE SECTION*****/
    .bg-lightgrey {
    	background-color: #1a1a1a;
    }
    .edu-exp {
    	padding: 10px 0px;
    	width: 48%;
    	margin: 1%;
    	float: left;
    	padding-left: 10px;
    }
    .experience-list {
    	width: 100%;
    	float: left;
    	padding: 30px 10px;
    	background: #262626;
    	margin-bottom: 20px;
    }
    .experience-content {
    	width: 100%;
    	float: left;
    	margin-left: 10px;
    }
    .experience-content h2 {
    
    	font-weight: 600;
    	margin-bottom: 5px;
    	font-size: 20px;
    }
    .experience-content h3 {
    	color: #ffbf35;
    	font-weight: 500;
    	margin-bottom: 2px;
    	font-size: 17px;
    }
    .experience-content p {
    	font-size: 15px;
    }

    Output Of Experience And Education Section

    experience section of basic portfolio website using html css and javascript

    7) Now, We'll Design Services Section Of Building A Basic Portfolio Website Using HTML CSS And JavaScript

    Now we are going to create services section. In this section we have contact and icon at a particular size. For creating icons we are using icon tag

    Please copy and paste the below code to design Services section

    Services Section HTML Code. Copy This Code And Paste in index.html file

    index.html
    <!------SERVICE SECTION------>
    <div class="main-section">
      <div class="container">
        <h2 class="heading-text">My Service</h2>
        <div class="width-50">
          <div class="service-list">
            <i class="fa fa-chrome"></i>
            <h3>Web Development</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing portfolio student website</p>
          </div>
        </div>
        <div class="width-50">
          <div class="service-list">
            <i class="fa fa-instagram"></i>
            <h3>Web Design</h3>
            <p>Lorem ipsum dolor sit amet, student graphic design portfolio websites euismod</p>
          </div>
        </div>
        <div class="width-50">
          <div class="service-list">
            <i class="fa fa-reddit"></i>
            <h3>Creative Design</h3>
            <p>Lorem ipsum dolor sit amet, student portfolio website examples nonummy nibh euismod</p>
          </div>
        </div>
        <div class="width-50">
          <div class="service-list">
            <i class="fa fa-video-camera"></i>
            <h3>Video Editing</h3>
            <p>student portfolio website, consectetuer adipiscing elitsed nonummy nibh euismod</p>
          </div>
        </div>
        <div class="width-50">
          <div class="service-list">
            <i class="fa fa-camera"></i>
            <h3>Photography</h3>
            <p>portfolio website examples for students adipiscing elitsed nonummy nibh euismod</p>
          </div>
        </div>
        <div class="width-50">
          <div class="service-list">
            <i class="fa fa-apple"></i>
            <h3>App Developing</h3>
            <p>digital portfolio websites for students adipiscing elitsed nonummy nibh euismod</p>
          </div>
        </div>
      </div>
    </div>

    Services Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*SERVICE SECTION*/
    .service-list {
    	padding: 40px;
    	margin-top: 35px;
    	background: #262626;
    	border-radius: 15px;
    	width: 94%;
    	float: left;
    }
    
    .service-list i {
    	font-size: 50px;
    	color: #ffbf35;
    	width: 70px;
    	float: left;
    }
    
    .service-list h3 {
    	font-size: 28px;
    	margin-top: 8px;
    	margin-bottom: 15px;
    }
    
    .service-list p {
    	font-size: 15px;
    	line-height: 25px;
    }

    Output Of Service Section

    service section of basic portfolio website using html css and javascript

    8) Now, we will design Testimonial section Of Best Portfolio websites.

    In testimonial section of building building a basic portfolio website using html css and javascript, we are having testimonial content and images of user with their designation. For Creating movement we are using marquee tag.

    Please copy and paste the below code to design testimonial section

    Testimonial Section HTML Code. Copy This Code And Paste in index.html file

    index.html
    <!------TESTIMONIAL SECTION------>
    <div class="main-section bg-lightgrey">
      <div class="container">
        <h2 class="heading-text">What Client Say's </h2>
        <div class="testimonial">
          <div class="testimonial-content">
            <div class="testimonial-img">
              <img src="images/testimonial-1.jpg">
            </div>
            <i class="fa fa-quote-left"></i>
            <p> Contrary to popular belief, I will provide free portfolio website templates. It has roots in a piece of classical Latin literature from 45 BC, making it. Richard McClintock, Hampden-Sydney College.</p>
            <div class="testimonial-name">
              <h5>Johndove</h5>
              <p>Data Analysis</p>
            </div>
          </div>
        </div>
        <div class="testimonial">
          <div class="testimonial-content">
            <div class="testimonial-img">
              <img src="images/testimonial-2.jpg">
            </div>
            <i class="fa fa-quote-left"></i>
            <p> Contrary to popular belief, I will provide free portfolio website templates. It has roots in a piece of classical Latin literature from 45 BC, making it. Richard McClintock, Hampden-Sydney College.</p>
            <div class="testimonial-name">
              <h5>Johndove</h5>
              <p>Data Analysis</p>
            </div>
          </div>
        </div>
        <div class="testimonial">
          <div class="testimonial-content">
            <div class="testimonial-img">
              <img src="images/testimonial-3.jpg">
            </div>
            <i class="fa fa-quote-left"></i>
            <p> Contrary to popular belief, I will provide free portfolio website templates. It has roots in a piece of classical Latin literature from 45 BC, making it. Richard McClintock, Hampden-Sydney College.</p>
            <div class="testimonial-name">
              <h5>Johndove</h5>
              <p>Data Analysis</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    Testimonial Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*****TESTIMONIAL SECTION*****/
    .testimonial {
    	width: 32%;
    	float: left;
    	margin-right: 1%;
    	margin-top: 50px;
    }
    
    .testimonial-content {
    	background: #262626;
    	color: #cfcfcf;
    	width: 100%;
    	float: left;
    	padding: 0px 20px 20px 20px;
    	font-size: 16px;
    	line-height: 28px;
    	position: relative;
    	text-align: center
    }
    
    .testimonial i {
    	color: #ffbf35;
    	font-size: 35px;
    	margin-top: 60px;
    }
    
    .testimonial-img {
    	width: 100%;
    	float: left;
    	text-align: center;
    	position: absolute;
    	left: 0px;
    	top: -35px;
    }
    
    .testimonial-img img {
    	width: 80px;
    	height: 80px;
    	border: 3px solid white;
    	border-radius: 50%;
    }
    
    .testimonial-name {
    	width: 100%;
    	float: left;
    }
    
    .testimonial-name h5 {
    	color: #ffbf35;
    	font-size: 20px;
    	margin-top: 10px;
    }
    
    .testimonial-name p {
    	font-size: 16px;
    }

    Output Of Testmonial Section Of Best Portfolio websites

    testimonial section of basic portfolio website using html css and javascript

    9) Now, we will design Portfolio section.

    In our Portfolio section, we are having images of previous work and content. For Creating images we have img tag.

    Please copy and paste the below code to design Product section

    Portfolio Section HTML code. Copy This Code And Paste in index.html file

    index.html
    <!------PORTFOLIO SECTION------>
    <div class="main-section">
      <div class="container">
        <h2 class="heading-text">My Portfolio</h2>
        <div class="gallery">
          <div class="width-33">
            <img src="images/gallery-1.jpg">
          </div>
          <div class="width-33">
            <img src="images/gallery-2.jpg">
          </div>
          <div class="width-33">
            <img src="images/gallery-3.jpg">
          </div>
          <div class="width-33">
            <img src="images/gallery-4.jpg">
          </div>
          <div class="width-33">
            <img src="images/gallery-5.jpg">
          </div>
          <div class="width-33">
            <img src="images/gallery-6.jpg">
          </div>
        </div>
      </div>
    </div>

    Portfolio Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*PORTFOLIO SECTION*/
    .gallery {
    	width: 100%;
    	float: left;
    	margin-top: 30px;
    }
    .gallery img {
    	height: auto;
    	width: 95%;
    	margin-bottom: 20px;
    }

    Output Of Portfolio Section

    portfolio section of basic portfolio website using html css and javascript

    10) Now, we will design Contact us section of our simple portfolio website using html and css.

    In our contact us section, we are having contact form with submit button,text, get in social media icons. For Creating contact us section we have ul, a(anchor) tag and paragraph tag.

    Please copy and paste the below code to design Footer section

    Contact Us Section Of Portfolio HTML Code. Copy This Code And Paste in index.html file

    index.html
    <!-------------CONTACT US SECTION----------------------->
    <div class="main-section contact bg-lightgrey">
      <div class="container">
        <h2 class="heading-text">Get In Touch</h2>
        <div class="width-100">
          <form>
            <input type="text" placeholder="Full Name...">
            <input type="text" placeholder="Full Email Id...">
            <input type="text" placeholder="Full Mobile No...">
            <textarea placeholder="Enter Address...">< /textarea>
            <button type="submit">Submit< /button>
          </form>
        </div>
        <div class="width-33">
          <h3>
            <i class="fa fa-map-marker">< /i>
          </h3>
          <h4>Address</h4>
          <p>186, 3rd floor, near Hotel Galaxy Star, Near Sargam Cinema, Zone-II,M P Nagar</p>
        </div>
        <div class="width-33">
          <h3>
            <i class="fa fa-phone">< /i>
          </h3>
          <h4>Phone</h4>
          <p>+91 99 26 661 418</p>
        </div>
        <div class="width-33">
          <h3>
            <i class="fa fa-envelope-o">< /i>
          </h3>
          <h4>Email</h4>
          <p>support@dezven.com</p>
        </div>
      </div>
    </div>

    Contact Us Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*CONTACT US SECTION*/
    .contact form {
    	width: 66%;
    	margin: 0px auto;
    }
    .contact input,
    textarea {
    	width: 100%;
    	float: left;
    	margin-bottom: 20px;
    	height: 40px;
    	padding: 10px;
    	border: 1px solid #a1a1a1;
    }
    .contact textarea {
    	height: 80px;
    }
    .contact button {
    	width: 100%;
    	float: left;
    	margin-bottom: 20px;
    	height: 40px;
    	padding: 10px;
    	background: #ffbf35;
    	color: #fff;
    	border: none;
    	font-size: 16px;
    }
    .contact h3 {
    	font-size: 26px;
    	text-align: center;
    	margin-top: 60px;
    	color: #ffbf35;
    }
    .contact h4 {
    	font-size: 22px;
    	text-align: center;
    	margin-top: 10px;
    }
    .contact p {
    	text-align: center;
    	font-size: 16px;
    	margin-top: 5px;
    }

    Output Of Contact Us Section Of Building A Basic Portfolio Website Using HTML CSS And JavaScript

    contact us section of basic portfolio website using html css and javascript

    11) Now, we will design Footer section Of Portfolio Website Using HTML And CSS.

    In our footer section, we are having content our get in social media icons. For Creating footer section we have ul, a(anchor) tag and paragraph tag.

    Please copy and paste the below code to design Footer section

    Footer Section HTML Code. Copy This Code And Paste in index.html file

    index.html
    <!------FOOTER SECTION------>
    <div class="footer">
      <div class="container">
        <div class="footer-sect social-icon width-50">
          <a href="#">
            <i class="fa fa-facebook"></i>
          </a>
          <a href="#">
            <i class="fa fa-twitter"></i>
          </a>
          <a href="#">
            <i class="fa fa-linkedin"></i>
          </a>
          <a href="#">
            <i class="fa fa-instagram"></i>
          </a>
        </div>
        <div class="footer-sect mt-20 width-50">CopyRight © 2023 Dezven.com Website Template. All Rights Reserved</div>
      </div>
    </div>

    Footer Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*****FOOTER SECTION*****/
    .footer {
    	background-color: #202020;
    	padding: 30px 0px 40px 0px;
    	width: 100%;
    	float: left;
    }
    .footer-sect {
    	color: #b3b3b3;
    }
    .footer-sect a {
    	color: #b3b3b3;
    	margin-left: 10px;
    	text-decoration: none;
    	font-size: 18px;
    	text-align: center;
    }
    .social-icon a i {
    	width: 50px;
    	height: 50px;
    	border: 1px solid #cdcdcd;
    	line-height: 50px;
    	font-size: 20px;
    	border-radius: 50%;
    }

    Output Of Footer Section Of Portfolio Website Using HTML And CSS

    footer section of basic portfolio website using html css and javascript

    Conclusion

    This is simple portfolio website using html and css we have design. This is one of the best portfolio websites. You can copy complete portfolio website using html css and javascript source code also.

    Post your comment

    For any query, information or suggestion, post your comment below. We love to hear from your.

    • samapeeka bepari

      so easy and so nicely explained! thanks a ton.

    • Aditay kumar

      e-commerce website ka image send me

    • Amit Dubey

      very nicely coding portfolio website. easy to understand

    • Ravi Singh

      extremely impressеd, very nice blog and easy to understand this

    • Eugene

      highly recommended portfolio website

    • Randy Philip

      i don't see any use of javascript in this portfolio website. It is design only using html and css?

    • Dylan

      perfect portfolio website using html and css

    • Nicholas Henry

      very nice video on Building A Basic Portfolio Website Using HTML CSS And JavaScript