How To Create A College Website Using HTML AND CSS With Source Code

    Last updated on 02 May 2023

    Preview Link
    Quick Info
    Youtube : https://youtu.be/DFM6r3dCr10
    Views : 37283
    Skills : html, css
    Category : Web Design
    Tag : school,university,college

    In This Tutorial We Are Learning How To Create College Website With The Use Of HTML and CSS. This website is going to be pure HTML and CSS.

    We are not going to use any javascript and jquery in this college website. It is created only using pure HTML and CSS

    Section We Are Going To Create In Our College Website Using HTML AND CSS

    In our college website, we are going to design 3 main section : Header section, Main Body And Footer section

    In this tutorial we are going to design these three section with the help of their subsections. Subsections are created as per the website content.

    Header

    • Top header With NEWS section
    • Logo
    • Main menu

    Main Body

    • Slider
    • Recent Event, Campus News, College Event Calender
    • About Collge
    • Our Chairman
    • Our College Awards
    • My College Certificate
    • Testimonial
    • My Gallery
    • Top Placement

    Footer

    • Address
    • Contact Detail
    • Social media link

    Video Tutorial

    To see full coding video to understand easily. You can watch the video tutorial below.

    Let's Start The Coding

    Firstly, Create the folder on dekstop, my folder name is : college website Inside folder college website folder, create two sub folder : - 1) css and 2) images

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

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

    Lest's start with writing basic HTML 5 code 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
    <!DOCTYPE html>
    <html>
      <head>
        <title>College Website Template</title>
        <link rel="stylesheet" href="css/style.css">
      </head>
      <body>

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

    style.css
    * {
    	margin: 0px;
    	padding: 0px;
    	box-sizing: border-box;
    }
    
    html,
    body {
    	font-family Roboto, sans-serif, arial;
    	font-size: 16px;
    	color: #242424;
    }
    
    .container {
    	width: 1300px;
    	margin: 0px auto;
    }

    2) Now, we will design Top Header NEWS Marquee Section.

    In our Marquee section, we are having content. we are using content are written in marquee tag.

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

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

    index.html
    <!---TOP-HEADER STARTS TOP-HEADER STARTS--->
    <div class="header">
      <div class="container">
        <b> NEWS : </b>
        <marquee> My college: How To Lorem Ipsum is simply dummy text of the printing and typesetting industry. </marquee>
      </div>
    </div>

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

    style.css
    /****************HEADER SECTION****************/
    .header {
    	background: #0055a4;
    	padding: 6px;
    }
    
    .header b {
    	background: #fff;
    	color: red;
    	padding: 10px;
    	font-size: 20px;
    }
    
    .header marquee {
    	font-size: 20px;
    	color: #ffffff;
    	width: 80%;
    }

    Output Of Top Header NEWS Marquee Section

    marquee-section-of-  college-website-using-html-and-css

    3) Now, we will design Logo And Menu section

    In our Logo And Menu section, we are having content and logo. For Creating we have logo, we are using img tag.

    Please copy and paste the below code to design Logo And Menu section

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

    index.html
    <div class="container">
      <!---LOGO SECTION ----->
      <img src="images/logo.png" class="logo">
      <!----MENU SECTION----->
      <nav>
        <a href="#">Home</a>
        <a href="#">About us</a>
        <a href="#">Events</a>
        <a href="#">Gallery</a>
        <a href="#">Notice Board</a>
        <a href="#">Contact us</a>
      </nav>
    </div>

    Logo And Menu Section Css Code. Copy The Code And Paste in style.css

    style.css
    /**********LOGO SECTION**********/
    .logo {
    	height: 65px;
    }
    
    /**********MENU SECTION**********/
    nav {
    	float: right;
    	padding: 25px 0px;
    }
    
    nav a {
    	color: black;
    	text-decoration: none;
    	font-size: 18px;
    	padding: 2px 10px;
    	font-weight: 500;
    }

    Output Of Logo And Menu Section

    navbar-section-of- college-website-using-html-and-css

    4) Now, we will design Slider Section

    In our Slider Section, we are having content, image and we are using img tag. In our slider, we are going to show banner of college campus

    Please copy and paste the below code to design Slider Section

    Slider Section Html Code. Copy This Code And Paste in index.html file

    index.html
    <!-----SLIDER SECTION----->
    <div class="slider">
      <img src="images/slider.jpg">
    </div>
    <!----END SLIDER SECTION----->

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

    style.css
    /*****SLIDER SECTION*****/
    .slider img {
    	width: 100%;
    }

    Output Of Slider Section

    slider-section-of-  college-website-using-html-and-css

    5) Now, we will design Campus News, College Event Calender Section.

    In our Campus News, College Event Calender Section, we are having content, image, marquee and we are using ul, img and marquee tag. For Creating image, we have ul, img and marquee tag.

    Please copy and paste the below code to design Campus News, College Event Calender Section

    Campus News, College Event Calender Section HTML Code. Copy This Code And Paste in index.html file

    index.html
    <div class="main-section" style="background:#f0f3fa">
      <div class="container">
        <!----CAMPUS NEWS SECTION----->
        <div class="event">
          <h2 class="heading">Recent Event</h2>
          <div>
            <marquee direction="up" scrollamount="7" style="height:340px;">
              <ul>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
                <li>
                  <i>01-April-2023 :</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <img src="images/new.gif">
                </li>
              </ul>
            </marquee>
          </div>
        </div>
        <!-----CAMPUS NEWS SECTION----->
        <div class="event campus-news">
          <h2 class="heading">Campus News</h2>
          <div>
            <ul>
              <li>
                <span class="campus-img">
                  <img src="images/campus-1.png">
                </span>
                <h2>There are many variations.</h2>
                <h6>Sep.04.2012</h6>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
              </li>
              <li>
                <span class="event-img">
                  <img src="images/campus-2.png">
                </span>
                <h2>There are many variations.</h2>
                <h6>Sep.04.2012</h6>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
              </li>
              <li>
                <span class="event-img">
                  <img src="images/campus-3.png">
                </span>
                <h2>There are many variations.</h2>
                <h6>Sep.04.2012</h6>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
              </li>
              <li>
                <span class="event-img">
                  <img src="images/campus-4.png">
                </span>
                <h2>There are many variations.</h2>
                <h6>Sep.04.2012</h6>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
              </li>
            </ul>
          </div>
        </div>
        <!------EVENT SECTION------>
        <div class="event">
          <h2 class="heading">College Event Calender</h2>
          <div>
            <ul>
              <li>
                <span class="event-date">11 <br> April </span> Lorem Ipsum is simply dummy text of the printing text printing industry...
              </li>
              <li>
                <span class="event-date">19 <br> May </span> Lorem Ipsum is simply dummy text of the printing industry dummy text...
              </li>
              <li>
                <span class="event-date">21 <br> June </span> Lorem Ipsum is simply dummy text of the printing industry orem Ipsum...
              </li>
              <li>
                <span class="event-date">17 <br> July </span> Lorem Ipsum is simply dummy text of the printing industry simply dummy...
              </li>
              <li>
                <span class="event-date">31 <br> Marc </span> Lorem Ipsum is simply dummy text of the printing industry...
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    Campus News, College Event Calender Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /****************EVENT SECTION*************/
    .main-section {
    	width: 100%;
    	float: left;
    	padding: 100px 0px 100px 0px;
    }
    
    .event {
    	width: 32%;
    	margin-right: 1%;
    	float: left;
    	background-color: #fff;
    }
    
    .event i {
    	color: red;
    	font-size: 14px;
    }
    
    .event div {
    	padding: 10px;
    }
    
    .event .heading {
    	padding: 10px;
    	color: #fff;
    	background: #0055a4;
    	text-align: center;
    	font-size: 22px;
    	font-weight: 400;
    	margin-bottom: 10px;
    }
    
    .event ul li {
    	margin-bottom: 20px;
    	width: 100%;
    	float: left;
    	list-style: none;
    }
    
    .event-date {
    	background: red;
    	float: left;
    	text-align: center;
    	font-size: 14px;
    	color: #fff;
    	padding: 8px 12px;
    	margin-right: 10px;
    }
    
    /*******CAMPUS NEWS SECTION***********/
    .campus-news span {
    	width: 80px;
    	float: left;
    }
    
    .campus-news h2 {
    	font-weight: 600;
    	font-size: 16px;
    }
    
    .campus-news h6 {
    	font-weight: 500;
    	font-size: 13px;
    	color: red;
    }
    
    .campus-news p {
    	font-size: 14px;
    }

    Output Of Campus News, College Event Calender Section

    campus-news, college-event, calender-section-of-college-website-using-html-and-css

    6) Now, we will design About Us Section.

    In our About Us Section, we are have creating content and image, we are using anchor tag and img tag. For Creating image, we have img tag.

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

    index.html
    <!-----ABOUT US SECTION------>
    <div class="main-section">
      <div class="container about-us">
        <div>
          <h4 class="subhead">Our Institue</h4>
          <h2 class="heading">About My College</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.If you are going to use a passage.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.If you are going to use a passage of anything embarrassing hidden in the middle of text Lorem ipsum. </p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.If you are going to use a passage of a Lorem ipsum</p>
          <a href="#">Read More</a>
        </div>
        <img src="images/about-us.jpg">
      </div>
    </div>
    <div class="main-section award" style="background:#f0f3fa">
      <div class="container">
        <!-----College INFO SECTION----->
        <div class="event">
          <h2 class="heading">Our Chairman</h2>
          <div class="chairman">
            <ul>
              <li>
                <span class="campus-img">
                  <img src="images/owner-1.png">
                </span>
                <h2>Dr. Jay sharma</h2>
                <h4>Chairman, My College</h4>
                <h5>2010-2023</h5>
              </li>
              <li>
                <span class="campus-img">
                  <img src="images/owner-2.png">
                </span>
                <h2>Dr. Jay sharma</h2>
                <h4>Principal, My College</h4>
                <h5>2020-2023</h5>
              </li>
            </ul>
          </div>
        </div>
        <!-----College AWARD SECTION----->
        <div class="event">
          <h2 class="heading">Our College Awards</h2>
          <div>
            <img src="images/award.jpg">
          </div>
        </div>
        <!-----College CERTIFICATE SECTION----->
        <div class="event">
          <h2 class="heading">My College Certificate</h2>
          <div>
            <img src="images/certificate.png">
          </div>
        </div>
      </div>
    </div>

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

    style.css
    /****************ABOUT US SECTION****************/
    .heading {
    	font-size: 28px;
    	font-weight: 500;
    	margin-bottom: 30px;
    	color: #0055a4;
    }
    
    .subhead {
    	font-size: 18px;
    	color: red;
    	font-weight: 500;
    }
    
    .about-us div {
    	width: 45%;
    	float: left;
    	line-height: 30px;
    	font-size: 18px;
    }
    
    .about-us h4 {
    	font-size: 18px;
    	color: red;
    	font-weight: 500;
    }
    
    .about-us p {
    	font-size: 16px;
    	margin-bottom: 20px;
    	padding-right: 30px;
    	line-height: 23px;
    }
    
    .about-us img {
    	width: 40%;
    	float: left;
    }
    
    /****************AWARD SECTION****************/
    .award p {
    	width: 100%;
    	float: left;
    	font-size: 16px;
    }
    
    .award img {
    	width: 100%;
    }
    
    .award b {
    	min-width: 115px;
    	float: left;
    	margin-bottom: 20px;
    }
    
    .award h3 {
    	font-size: 23px;
    	margin-bottom: 20px;
    	text-align: center;
    }
    
    /****************CHAIRMAN SECTION****************/
    .chairman img {
    	width: 150px;
    	float: left;
    	margin-right: 10px;
    }
    
    .chairman h2 {
    	font-size: 22px;
    	margin-top: 30px;
    }
    
    .chairman h4 {
    	font-size: 16px;
    	color: red;
    	font-weight: 400;
    }

    Output Of About Us Section

    about-us-section-of-college-website-using-html-and-css

    7) Now, we will design Testimonial Section.

    In our Testimonial Section, we are having content, image and icon we are using icon from font awesome and img tag. For Creating image, we have icon and img tag.

    Please copy and paste the below code to design font awesome Section

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

    index.html
    <!-----TESTIMONIAL SECTION------>
    <div class="main-section ">
      <div class="container">
        <h4 class="subhead">Testimonial</h4>
        <h2 class="heading">What Parents Say About Our College</h2>
        <div class="testimonial">
          <div class="testimonial-text">
            <p>
              <img src="images/quote.png">
            </p> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-Sydney College.
          </div>
          <div class="testimonial-detail">
            <div class="testimonial-img">
              <img src="images/testimonial-1.png">
            </div>
            <div class="testimonial-name">
              <h5>Kiya</h5>
              <p>
                <img src="images/rating.png">
              </p>
            </div>
          </div>
        </div>
        <div class="testimonial">
          <div class="testimonial-text">
            <p>
              <img src="images/quote.png">
            </p> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-Sydney College.
          </div>
          <div class="testimonial-detail">
            <div class="testimonial-img">
              <img src="images/testimonial-2.png">
            </div>
            <div class="testimonial-name">
              <h5>Divya</h5>
              <p>
                <img src="images/rating.png">
              </p>
            </div>
          </div>
        </div>
        <div class="testimonial">
          <div class="testimonial-text">
            <p>
              <img src="images/quote.png">
            </p> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-Sydney College.
          </div>
          <div class="testimonial-detail">
            <div class="testimonial-img">
              <img src="images/testimonial-3.png">
            </div>
            <div class="testimonial-name">
              <h5>Richa</h5>
              <p>
                <img src="images/rating.png">
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

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

    style.css
    /****************TESTIMONIAL SECTION****************/
    .testimonial {
    	width: 30.5%;
    	float: left;
    	margin-right: 2.5%;
    }
    
    .testimonial-text {
    	background: #0055a40f;
    	padding: 20px;
    	line-height: 35px;
    	border-radius: 10px;
    	font-size: 18px;
    	text-align: center;
    	border: 1px solid #0055a4;
    }
    
    .testimonial-detail {
    	float: left;
    	margin-top: 10px;
    }
    
    .testimonial-img {
    	float: left;
    }
    
    .testimonial-name {
    	margin-left: 10px;
    	float: left;
    }
    
    .testimonial-name h5 {
    	font-size: 18px;
    	margin-top: 8px;
    }

    Output Of Testimonial Section

    testimonial- section-of-college-website-using-html-and-css

    8) Now, we will design My Gallery And Placement Section.

    In our My Gallery Section, we are having image. we are using ul and img tag. For Creating image, we have ul,Marquee and img tag.

    Please copy and paste the below code to design My Gallery And Placement Section

    My Gallery And Placement Section HTML Code. Copy This Code And Paste in index.html file

    index.html
    <!------GALLERY SECTION ------>
    <div class="main-section gallery" style="background:#f0f3fa">
      <div class="container ">
        <h4 class="subhead">My Gallery</h4>
        <h2 class="heading">Our College Gallery</h2>
        <img src="images/gallery-1.jpg">
        <img src="images/gallery-2.jpg">
        <img src="images/gallery-3.jpg">
        <img src="images/gallery-4.jpg">
        <img src="images/gallery-5.jpg">
        <img src="images/gallery-6.jpg">
        <img src="images/gallery-7.jpg">
        <img src="images/gallery-8.jpg">
      </div>
    </div>
    <!-------PLACEMENT SECTION ------->
    <div class="main-section">
      <div class="container">
        <h4 class="subhead">Top Placement</h4>
        <h2 class="heading">Our Partner Company</h2>
        <marquee class="placement" direction="left" scrollamount="10">
          <img src="images/placement.jpg">
        </marquee>
      </div>
    </div>

    My Gallery And Placement Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /****************GALLERY SECTION****************/
    .gallery img {
    	width: 23.2%;
    	margin-right: 1.5%;
    	margin-bottom: 20px;
    }

    Output Of My Gallery And Placement Section

    gallery-and-placement-section-of-college-website-using-html-and-css

    9) Now, we will design Footer section.

    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">
          <img class="footer-logo" src="images/logo.png">
        </div>
        <div class="footer-sect">
          <address> 186, 3rd floor, Business Building Ring Road, Near Google Mall, <br> Zone-II, Highway street, Bhopal, MP, 462011 </address>
        </div>
        <div class="footer-sect">
          <img src="images/icon-tel.png"> +91 - 9926 661 418
        </div>
        <div class="footer-sect">
          <img src="images/icon-mail.png"> info@dezven.com
        </div>
        <div class="footer-sect">
          <img src="images/icon-fb.png">
          <img src="images/icon-tw.png">
          <img src="images/icon-in.png">
          <img src="images/icon-li.png">
        </div>
        <div class="footer-sect">
          <a href="#"> Home</a>
          <a href="#"> About us</a>
          <a href="#"> Tutorial</a>
          <a href="#"> Event</a>
          <a href="#"> Gallery</a>
          <a href="#"> Press Release</a>
          <a href="#"> Courses</a>
          <a href="#"> Contact Us</a>
        </div>
      </div>
    </div>

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

    style.css
    /****************FOOTER SECTION****************/
    .footer {
    	background-color: #f0f3fa;
    	padding: 40px 0px;
    	width: 100%;
    	float: left;
    }
    
    .footer-logo {
    	height: 70px;
    	width: auto;
    }
    
    .footer-sect {
    	width: 100%;
    	float: left;
    	text-align: center;
    	margin-top: 20px;
    	font-size: 16px;
    }
    
    .footer-sect a {
    	color: #202020;
    	margin-left: 10px;
    	text-decoration: none;
    }
    
    

    Output Of Footer Section

    footer-section-of-  college-website-using-html-and-css

    After saving the file, You can run the index.html file in any browser like chrome,mozilla, safari. You can see the college website you have design using html and css code. You can also use this for college website project in html with source code

    Post your comment

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

    • Vasu

      That's amazing

    • Rakshitha

      Super and thank you

    • Amar kumar

      Very nice code

    • Sadiq

      College website project source code in HTML

    • Dhruv singh

      can you please share College website project source code

    • Gautam Dev

      Can I use this template as a school project ......

    • Daniel

      Perfect design for college website using html and css

    • Nichol

      Nice template for college website project using html and css