How To Design School / College Website Using HTML And CSS

Last updated on 27 Mar 2023

Preview Link
Quick Info
Youtube : https://youtu.be/4lNLkWVr4hs
Views : 36323
Skills : html css
Category : school website template
Tag : school,university,college, education website

In This Tutorial We Are Learning How To Design School / College Website Using HTML And CSS. In this website we are not going to use javascript or jquery. This website is going to be pure HTML and CSS.

Section We Are Going To Design In School / College Website Using HTML And CSS

In our website, we are going to design three 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
  • Logo
  • Main menu

Main Body

  • Slider section
  • marquee, about us
  • Notice Bord, Upcoming Events
  • Gallery

Footer

  • Quick link
  • Contact information
  • Social media link
  • Copyright information

Video Tutorial

You can also watch video of creating How To Design School / College Website Using HTML And CSS to understand easily. You can watch the complete video tutorial below.

Let's Start The Coding

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

Inside School Website folder I am creating HTML file file name - index.html

Inside css 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

<!--------- Meta HTML Starts -------->
<!DOCTYPE html>
<html>
  <head>
    <title>School Website Template</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
<!--------- Meta HTML End --------> 

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

style.css

/********* Common CSS Starts **********/
* {
  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;
}
.main-section {
  width: 100%;
  float: left;
  padding: 70px 0px 70px 0px;
}
.heading {
  font-size: 28px;
  font-weight: 500;
  border-bottom: 1px solid #46b7c1;
  margin-bottom: 20px;
  color: #46b7c1;
}
/********* Common CSS End **********/

2) Now, we will design Top Header section.

In our top header section, we are having content that are moving. For Creating that movement we are using marquee tag.

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

Top Header section HTML code. Copy this code and paste in index.html file

index.html

<!------ Header HTML Starts  ------->
<div class="header">
  <div class="container">
    <b> NEWS : </b>
    <marquee> My college: Intelligence plus curiosity-that is the root of true education. </marquee>
  </div>
</div>
<!------ Header HTML Ends ------->

Top Header section CSS code. Copy this code and paste in style.css file

style.css

/********* Header HTML CSS Starts **********/
.header {
	background: #46b7c1;
	padding: 6px;
}
.header b {
	background: #fff;
	color: red;
	padding:10px;
	font-size: 20px;
}
.header marquee {
	font-size:20px;
	color: #ffffff;
	width: 80%;
}
/********* Header HTML CSS End **********/

Output Of Top Header

3) Now, we will design Logo And Main Menu section.

In our logo and main menu section, we are having logo and nav bar. For Creating logo we have img tag and for nav bar we are using ul tag.

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

Top Logo And Main Menu Section HTML code. Copy this code and paste in index.html file

index.html

<!------ Design Logo And Main Menu Section HTML Startss ------->
<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="#">Blogs</a>
    <a href="#">Contact us</a>
  </nav>
</div>
<!------ Design Logo And Main Menu Section HTML End ------->

Top Logo And Main Menu Section CSS code. Copy this code and paste in style.css file

style.css

/********* Design Logo and Menu section CSS Starts **********/
.logo {
	height:60px;
}
/*Menu Section Menu Section*/
nav {
	float: right;
	padding:25px 0px;
}
nav a {
	color: black;
	text-decoration: none;
	font-size:18px;
	padding:2px 10px;
	font-weight:500;
}
/********* Design Logo and Menu section CSS End **********/

Output of Logo And Menu Section

4) Now, we will design Slider section.

In our slider section, we are having slider image that covers the full width. For Creating slider image we are using img tag.

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 HTML Starts ------->
<div class="slider">
  <img src="images/slider.jpg">
</div>
<!------ Slider HTML End ------->

Slider Section CSS code. Copy this code and paste in style.css file

style.css

/********* Slider CSS Starts **********/
.slider img {
  width: 100%;
}
/********* Slider CSS End **********/

Output of Slider Section

5) Now, we will design Campus, Events and Notice Board section.

In our Campus, Events and Notice Board section, we are having image and content. For Creating Campus, Events and Notice Board section we have img tag , marquee tag , heading tag and ul tag .

Please copy and paste the below code to design Campus, events and notice board section

Campus, Events and Notice Board Section HTML code. Copy this code and paste in index.html file

index.html

<!------ Campus, Events and Notice Board HTML Starts ------->
<div class="main-section" style="background:#f0f3fa">
  <div class="container">
    <!--------------------------------CAMPUS NEWS SECTION ---------------------------->
    <div class="event">
      <h2 class="heading">Campus News</h2>
      <div>
        <marquee direction="up" scrollamount="7" style="height:340px;">
          <ul>
            <li>
              <i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <img src="images/new.gif">
            </li>
            <li>
              <i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <img src="images/new.gif">
            </li>
            <li>
              <i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <img src="images/new.gif">
            </li>
            <li>
              <i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <img src="images/new.gif">
            </li>
            <li>
              <i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <img src="images/new.gif">
            </li>
            <li>
              <i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <img src="images/new.gif">
            </li>
            <li>
              <i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <img src="images/new.gif">
            </li>
          </ul>
        </marquee>
      </div>
    </div>
    <!----------------------------EVENT SECTION ----------------------->
    <div class="event">
      <h2 class="heading">Events</h2>
      <div>
        <ul>
          <li>
            <span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
        </ul>
      </div>
    </div>
    <!--------------------------------NOTICE BOARD SECTION ------------------------->
    <div class="event">
      <h2 class="heading">Notice Boards</h2>
      <div>
        <ul>
          <li>
            <img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
          <li>
            <img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </li>
        </ul>
      </div>
    </div>
  </div>
</div
<!------ Campus, Events and Notice Board HTML End ------->

Campus, Event and Notice Board Section HTML code. Copy this code and paste in index.html file

style.css

/********* Campus, Events and Notice Board section CSS Starts **********/
.event {
  width: 32%;
  margin-right: 1%;
  float: left;
  background-color: #fff;
  padding: 10px;
}
.event .heading {
  border-bottom: 1px solid #46b7c1;
  padding: 5px;
  color: #fff;
  background: #46b7c1;
  text-align: center;
}
.event ul li {
  margin-bottom: 20px;
  width: 100%;
  float: left;
  list-style: none;
}
.event-date {
  background: #46b7c1;
  float: left;
  text-align: center;
  font-size: 14px;
  color: #fff;
  padding: 8px 12px;
  margin-right: 10px;
}

/********* Campus, Events and Notice Board section CSS End **********/

OUTPUT Of Campus, Events and Notice Board Section

6) Now, we will design About Us section.

In our About Us section, we are having image and content. For Creating that we are using img tag and heading 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 HTML Starts --------->
<div class="main-section">
  <div class="container about-us">
    <div>
      <h2 class="heading">About My HTML CODING SCHOOL</h2>
      <h4>A Unique Heritage School .</h4>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    </div>
    <img src="images/about-us.jpg">
  </div>
</div>
<!---------- About Us HTML Ends --------->

About Us Section CSS code. Copy this code and paste in style.css file

style.css

/********** About Us CSS Starts **********/  
.about-us div {
  width: 45%;
  float: left;
  line-height: 30px;
  font-size: 18px;
}
.about-us h4 {
  font-size: 22px;
}
.about-us p {
  line-height: 42px;
}
.about-us img {
  width: 40%;
  float: left;
}
/********** About Us CSS Ends **********/

OUTPUT Of About Us Section

7) Now, we will design School Info, Award and Certificate section.

In our School Info, Award and Certificate section, we are having image and content. For Creating that we are using img tag and heading tag.

Please copy and paste the below code to design School Info, Award and Certificate section

School Info, Award and Certificate Section HTML code. Copy this code and paste in index.html file

index.html

<!---------- School Info, Award and Certificate HTML Starts --------->
<div class="main-section award" style="background:#f0f3fa">
  <div class="container">
    <!---------------- SCHOOL INFO SECTION --------------->
    <div class="event">
      <h2 class="heading">School Info</h2>
      <div>
        <h3>My HTML CODING SCHOOL</h3>
        <p>
          <b>Principal : </b> Dr. John Doe (HTML)
        </p>
        <p>
          <b>Address : </b> Ring Road, Near Google Mall
        </p>
        <p>
          <b>City : </b> New Delhi, India.
        </p>
        <p>
          <b>Contact No. : </b> +1234 456 7890
        </p>
        <p>
          <b>Email Id : </b>Contact@admin LabArtisan
        </p>
      </div>
    </div>
    <!---------------- SCHOOL AWARD SECTION --------------->
    <div class="event">
      <h2 class="heading">Our School Awards</h2>
      <div>
        <img src="images/award.jpg">
      </div>
    </div>
    <!---------------- SCHOOL CERTIFICATE SECTION --------------->
    <div class="event">
      <h2 class="heading">My School Certificate</h2>
      <div>
        <img src="images/certificate.png">
      </div>
    </div>
  </div>
</div>
<!---------- School Info, Award and Certificate HTML Ends --------->

School Info, Award and Certificate Section CSS code. Copy this code and paste in style.css file

style.css

/********** School Info, Award and Certificate CSS Starts **********/  
.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;
}
/********** School Info, Award and Certificate CSS Ends **********/

OUTPUT Of School Info, Award and Certificate Section

8) Now, we will design Testimonial section.

In our testimonial section, we are having content and images . For Creating heading we are using heading 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 HTML Starts -------->
<div class="main-section ">
  <div class="container">
    <h2 class="heading">What Parents Say About Our School</h2>
    <div class="testimonial">
      <div class="testimonial-text"> 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.jpg">
        </div>
        <div class="testimonial-name">
          <h5>Niccky</h5>
          <p>Web Devloper</p>
        </div>
      </div>
    </div>
    <div class="testimonial">
      <div class="testimonial-text"> 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.jpg">
        </div>
        <div class="testimonial-name">
          <h5>Richa</h5>
          <p>Web Devloper</p>
        </div>
      </div>
    </div>
    <div class="testimonial">
      <div class="testimonial-text"> 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.jpg">
        </div>
        <div class="testimonial-name">
          <h5>Jiya</h5>
          <p>Web Devloper</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!--------- Testimonial HTML End --------> 

Testimonial section CSS code. Copy the code and paste in style.css

style.css

/********* Testimonial Section CSS Starts **********/
.testimonial {
  width: 30.5%;
  float: left;
  margin-right: 2.5%;
}
.testimonial-text {
  background: #46b7c1;
  padding: 20px;
  line-height: 35px;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
.testimonial-detail {
  float: left;
  margin-top: 10px;
}
.testimonial-img {
  float: left;
}
.testimonial-img img {
  border-radius: 50%;
}
.testimonial-name {
  margin-left: 10px;
  float: left;
}
.testimonial-name h5 {
  font-size: 18px;
  margin-top: 8px;
}
/********* Testimonial Section CSS End **********/

OUTPUT Of Testimonial Section

9) Now, we will design Gallery section.

In our Gallery section, we are having images at a particular width. For Creating images we have img tag.

Please copy and paste the below code to design Gallery section

Gallery section HTML code. Copy this code and paste in index.html file

index.html

<!--------- Gallery HTML Starts -------->
<div class="main-section gallery" style="background:#f0f3fa">
  <div class="container ">
    <h2 class="heading">Our School 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>
<!--------- Gallery HTML End --------> 

Gallery section CSS code. Copy this code and paste in style.css file

style.css

/********* Gallery section CSS Starts **********/
.gallery img {
  width: 24%;
}
/********* Gallery section CSS End **********/

OUTPUT Of Gallery Section

10) Now, we will design Placement section.

In our Placement company section, we are having Placement company information and logo. For Creating logo we have img tag and marquee tag.

Please copy and paste the below code to design Placement section

Placement Company section HTML code. Copy this code and paste in index.html file

index.html

<!--------- Placement HTML Starts -------->
<div class="main-section">
  <div class="container">
    <h2 class="heading">Placement</h2>
    <marquee class="placement" direction="left" scrollamount="10">
      <img src="images/placement.jpg">
    </marquee>
  </div>
</div>
<!--------- Placement HTML End --------> 

There is no require css

OUTPUT Of Placement Section

11) Now, we will design Footer section.

In our footer section, we are having icons, images, anchor . For Creating footer section we have ul, a(anchor) tag .

Please copy and paste the below code to design footer section

Footer Section Code. Copy this code and paste in index.html file

index.html

<!--------- Footer HTML Starts -------->
<div class="footer">
  <div class="container">
    <div class="footer-sect">
      <img class="footer-logo" src="images/footer-logo.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 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>
</div>
<!--------- Footer HTML End --------> 

Footer Section CSS Code. Copy this code and paste in style.css file

style.css

/********* Footer section CSS Starts **********/
.footer {
  background-color: #46b7c1;
  padding: 20px 0px;
  width: 100%;
  float: left;
}
.footer-logo {
  width: 70%;
}
.footer-sect {
  width: 100%;
  float: left;
  text-align: center;
  margin-top: 20px;
}
.footer-sect a {
  color: white;
  margin-left: 10px;
  text-decoration: none;
}
/********* Footer section CSS End **********/

OUTPUT Of Footer Section

Post your comment

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

  • Yirga beyene atsbha

    I appreciate exactly u r genius programmer be continue, I hope u will reach to top level economically as well as mentally

  • ALIYU YUSUD

    MY NAME IS ALIYU YUSUF ALBASHIR I LIVE IN NIGERIA UNDER KANO STATE