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

Preview Link
Quick Info
Youtube : https://youtu.be/DFM6r3dCr10
Views : 54555
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.
  • That's amazing

  • Super and thank you

  • Very nice code

  • College website project source code in HTML

  • can you please share College website project source code

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

  • Perfect design for college website using html and css

  • Nice template for college website project using html and css

Subscribe Us On Youtube