How To Design School / College Website Using HTML And CSS
| Youtube : | https://youtu.be/4lNLkWVr4hs |
| Views : | 78108 |
| 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 -------->
<>
<>
<>
<>School Website Template<>
<>
<>
<>
<!--------- 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 ------->
<>
<>
<> NEWS : <>
<> My college: Intelligence plus curiosity-that is the root of true education. <>
<>
<>
<!------ 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 ------->
<>
<!-------------------------LOGO SECTION--------------------------->
<>
<!-------------------------MENU SECTION-------------------------->
<>
<>Home<>
<>About us<>
<>Events<>
<>Gallery<>
<>Notice Board<>
<>Blogs<>
<>Contact us<>
<>
<>
<!------ 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 ------->
<>
<>
<>
<!------ 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 ------->
<>
<>
<!--------------------------------CAMPUS NEWS SECTION ---------------------------->
<>
<>Campus News<>
<>
<>
<>
<>
<>01-April-2023 :<> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
<>01-April-2023 :<> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
<>01-April-2023 :<> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
<>01-April-2023 :<> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
<>01-April-2023 :<> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
<>01-April-2023 :<> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
<>01-April-2023 :<> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
<>
<>
<>
<!----------------------------EVENT SECTION ----------------------->
<>
<>Events<>
<>
<>
<>
<>29 <> April <> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<>
<>
<>29 <> April <> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<>
<>
<>29 <> April <> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<>
<>
<>29 <> April <> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<>
<>
<>29 <> April <> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<>
<>
<>
<>
<!--------------------------------NOTICE BOARD SECTION ------------------------->
<>
<>Notice Boards<>
<>
<>
<>
<> 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.
<>
<>
<> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<>
<>
<>
<>
<>
<
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 --------->
<>
<>
<>
<>About My HTML CODING SCHOOL<>
<>A Unique Heritage School .<>
<> 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. <>
<>
<>
<>
<>
<!---------- 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 --------->
<>
<>
<!---------------- SCHOOL INFO SECTION --------------->
<>
<>School Info<>
<>
<>My HTML CODING SCHOOL<>
<>
<>Principal : <> Dr. John Doe (HTML)
<>
<>
<>Address : <> Ring Road, Near Google Mall
<>
<>
<>City : <> New Delhi, India.
<>
<>
<>Contact No. : <> +1234 456 7890
<>
<>
<>Email Id : <>Contact@admin LabArtisan
<>
<>
<>
<!---------------- SCHOOL AWARD SECTION --------------->
<>
<>Our School Awards<>
<>
<>
<>
<>
<!---------------- SCHOOL CERTIFICATE SECTION --------------->
<>
<>My School Certificate<>
<>
<>
<>
<>
<>
<>
<!---------- 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 -------->
<>
<>
<>What Parents Say About Our School<>
<>
<> 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. <>
<>
<>
<>
<>
<>
<>Niccky<>
<>Web Devloper<>
<>
<>
<>
<>
<> 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. <>
<>
<>
<>
<>
<>
<>Richa<>
<>Web Devloper<>
<>
<>
<>
<>
<> 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. <>
<>
<>
<>
<>
<>
<>Jiya<>
<>Web Devloper<>
<>
<>
<>
<>
<>
<!--------- 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 -------->
<>
<>
<>Our School Gallery<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!--------- 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 -------->
<>
<>
<>Placement<>
<>
<>
<>
<>
<>
<!--------- 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 -------->
<>
<>
<>
<>
<>
<>
<> Home<>
<> About us<>
<> Tutorial<>
<> Event<>
<> Gallery<>
<> Press Release<>
<> Courses<>
<> Contact Us<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!--------- 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
THANKS I ENJOY THE LESSSON AND YOUR THE GOOD PROGRAMER KEEP IT UP! BUT I WANT MORE PROGRAMMING LESSON FROM YOU
nice and easy
thanks
Thanks
Thanks
I appreciate exactly your are gentle man keep it up!
I appreciate exactly u r genius programmer be continue, I hope u will reach to top level economically as well as mentally
MY NAME IS ALIYU YUSUF ALBASHIR I LIVE IN NIGERIA UNDER KANO STATE