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 : 56986
    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.

    • Robinson

      Thanks

    • Kiiza ivan

      Thanks

    • Hunde

      I appreciate exactly your are gentle man keep it up!

    • 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