| Youtube : | https://youtu.be/4lNLkWVr4hs |
| Views : | 47524 |
| 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.
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
Main Body
Footer
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.
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
index.html
<!--------- Meta HTML Starts -------->
<>
<>
<>
<>School Website Template<>
<>
<>
<>
<!--------- Meta HTML End -------->
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 **********/
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
index.html
<!------ Header HTML Starts ------->
<>
<>
<> NEWS : <>
<> My college: Intelligence plus curiosity-that is the root of true education. <>
<>
<>
<!------ Header HTML Ends ------->
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 **********/
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
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 ------->
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 **********/
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
index.html
<!------ Slider HTML Starts ------->
<>
<>
<>
<!------ Slider HTML End ------->
style.css
/********* Slider CSS Starts **********/
.slider img {
width: 100%;
}
/********* Slider CSS End **********/
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
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.
<>
<>
<>
<>
<>
<
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 **********/
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
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 --------->
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 **********/
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
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 --------->
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 **********/
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
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 -------->
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 **********/
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
index.html
<!--------- Gallery HTML Starts -------->
<>
<>
<>Our School Gallery<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!--------- Gallery HTML End -------->
style.css
/********* Gallery section CSS Starts **********/
.gallery img {
width: 24%;
}
/********* Gallery section CSS End **********/
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
index.html
<!--------- Placement HTML Starts -------->
<>
<>
<>Placement<>
<>
<>
<>
<>
<>
<!--------- Placement HTML End -------->
There is no require css
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
index.html
<!--------- Footer HTML Starts -------->
<>
<>
<>
<>
<>
<>
<> Home<>
<> About us<>
<> Tutorial<>
<> Event<>
<> Gallery<>
<> Press Release<>
<> Courses<>
<> Contact Us<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!--------- Footer HTML End -------->
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 **********/
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