How To Create School Website Using HTML And CSS
Preview Link
Quick Info
| Youtube : | https://youtu.be/iIQiUFqTUf0 |
| Views : | 1921 |
| Skills : | HTML, CSS |
| Category : | Web Design |
| Tag : | school,university,college,education |
In This Tutorial, We Are Going To Learning How To Create School Website Using HTML And CSS on Notepad. In this website we will not use javascript or jquery. This website is going to be design only using HTML and CSS.
Table of contents
Section We Are Going To Design In Our school Website Using HTML And CSS
In our school website project, 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 And Main menu
Main Body
- Slider section
- School NEWS section
- Notice Board Section
- About us Section
- My School Topper Section
- My School Facility Section
- Testimonial Section
- Gallery Section
Footer
- Quick link
- Contact information
- Social media link
- Copyright Section
Video Tutorial
To understand easily, you can see full coding video of school website design using html and css. You can watch the video tutorial below.
Let's Start The Coding
Firstly, Create the folder on dekstop, my folder name is school website. Inside school website folder , create two more folder : - 1) css and 2) images
Inside school website folder I am creating HTML file, file name is - index.html
Inside css folder I am creating CSS file - file name is - style.css
Let's start with writing basic HTML 5 and head section meta code in index.html, and link the style.css file to index.html file for school website project
Meta html code. Copy And paste the code in index.html
index.html
<!---------- Meta HTML Starts -------->
<>
<>
<>
<>School Website Template<>
<>
<>
<>
<!---------- Meta HTML Ends -------->
Meta CSS code. 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: #fff;
}
.container {
width: 1050px;
margin:0px auto;
display:table;
}
/********** Common CSS Ends **********/
2) Now, we will design Top Header section of School Website Using HTML And CSS.
In our top header section, we are having mobile number and email id in left side and school hours in right side.
Please copy and paste the below code to design Top Header section of School Website Using HTML And CSS
Top Header section HTML code. Copy this code and paste in index.html file
index.html
<>
<>
<>+91 0123 456 789<>
|
<>noreply@dezven.com<>
<>School Hours : 9:00 AM - 3:30 PM <>
<>
<>
Top Header section CSS code . Copy the code and paste in style.css
style.css
/********** Top Header CSS Starts **********/
.top-header {
background: #FF5722;
padding: 10px;
}
.top-header a {
margin-left: 20px;
margin-right: 20px;
text-decoration: none;
color: #fff;
}
.top-header b{
float:right;
}
/********** Top Header CSS Ends **********/
Output Of Top Header section
2) Now, we will design Logo And Menu section.
In our logo section, we are having image, that image is going to be in left side. For Creating image we are using img tag in school html file.
We will put menu in right side. We will use nav tag for designing a school website menu bar.
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
<!-------- LOGO AND MENU SECTION Starts ------->
<>
<>
<>
<>Home<>
<>About us<>
<>Events<>
<>Gallery<>
<>Notice Board<>
<>Contact us<>
<>
<>
<!-------- LOGO AND MENU SECTION Ends ------->
Logo And Menu section CSS code. Copy this code and paste in style.css file
style.css
/********** Logo CSS Starts **********/
.logo {
height:65px;
}
/********** Logo CSS Ends **********/
/********** Menu/Nav CSS Starts **********/
nav {
float: right;
padding:25px 0px;
}
nav a {
color: black;
text-decoration: none;
font-size:18px;
padding:2px 10px;
font-weight:500;
}
/********** Menu/Nav CSS Ends **********/
Output Of logo And Menu
3) Now, we will slider section in School website using HTML on Notepad.
In our slider section, we are having 1 image. For Creating slider image we are using img tag.
Slider section HTML code. Copy this code and paste in index.html file
index.html
<>
<>
<>
Slider section CSS code. Copy this code and paste in style.css file
style.css
.slider {
line-height:0px;
}
.slider img {
width:100%;
}
Output Of Slider Section in School website using HTML on Notepad
4) Now, we will School NEWS section.
In our School NEWS section, we have news moving right to left. For moving news we are going to use marquee tag.
School NEWS section HTML code. Copy this code and paste in index.html file
index.html
<!-------- School NEWS SECTION Starts ------->
<>
<>
<>School NEWS : <>
<>
My School: How To Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<>
<>
<>
<!-------- School NEWS SECTION Ends ------->
School NEWS section CSS code. Copy this code and paste in style.css file
style.css
/********** School NEWS CSS Starts **********/
.news {
background:#FF5722;
padding: 6px;
}
.news b {
background: #fff;
color: red;
padding:10px;
font-size:20px;
}
.news marquee {
font-size:18px;
width: 80%;
}
/********** School NEWS CSS Ends **********/
Output Of School NEWS Section
5) Now, We Will Design Notice Board Section.
In our Notice Board section, we are notice content moving from bottom to top. For Creating notice content moving we are using marquee tag.
Notice Board section HTML code. Copy this code and paste in index.html file
index.html
<!-------- Notice Board SECTION Starts ------->
<>
<>
<>Notice Board<>
<>
<>
<>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>19 May<> Lorem Ipsum is simply dummy text of the printing industry dummy text... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<><>11 April<> Lorem Ipsum is simply dummy text of the printing text printing industry... <>
<>
<>
<>
<>
<>
<!-------- Notice Board SECTION Ends ------->
Notice Board section CSS code. Copy this code and paste in style.css file
style.css
/********** Notice Board CSS Starts **********/
.main-section {
width: 100%;
float: left;
padding:130px 0px 130px 0px;
background:#FFF9C4;
}
.main-section:nth-child(odd){
background:#AED581;
}
.heading {
font-size: 35px;
font-weight: 500;
margin-bottom: 70px;
color: black;
text-align: center;
position: relative;
font-family serif;
}
.heading:after {
content: '';
background: #FF5722;
height:3px;
width:80px;
position: absolute;
bottom: -11px;
right:45%;
}
.notice-board {
width: 88%;
margin-left: 6%;
background: #2a7f2e;
border: 10px solid #ffac88;
color: #fff;
padding: 10px;
border-radius: 10px;
}
.notice-board li {
width: 100%;
float: left;
padding: 20px;
}
.notice-board li span{
background:#FF9800;
float: left;
text-align: center;
font-size: 14px;
color: #fff;
padding: 8px 12px;
margin-right: 10px;
position: relative;
top: -8px;
}
/********** Notice Board CSS Ends **********/
Output Of Notice Board Section
6) Now, We Will Design About My School section.
In our About My School, we are information of school in left side and school image in right side. For adding school image we are using img tag.
About My School section HTML code. Copy this code and paste in index.html file
index.html
<!-------- About My School SECTION Starts ------->
<>
<>
<>
<>About My School<>
<>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.<>
<>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. <>
<>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.If you are going to use a passage of a Lorem ipsum<>
<>
<>
<>
<>
<!-------- About My School SECTION Ends ------->
About My School section CSS code. Copy this code and paste in style.css file
style.css
/********** About My School CSS Starts **********/
.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;
color:black;
}
.about-us img {
width:40%;
float:left;
}
/********** About My School CSS Ends **********/
Output Of About My School Section
6) Now, we will design My School Topper section In school website for students.
In our My School Topper section, we are having topper student image and student name with student percentage. For Creating School Topper image we are using img tag and p tag for adding student name and student percentage. How to create school website for students
My School Topper section HTML code. Copy this code and paste in index.html file
index.html
<!-------- My School Topper SECTION Starts ------->
<>
<>
<>My School Topper<>
<>
<> <>
<>
<>Chatura Yatan<>
88.3%<>
<>
<> <>
<>
<>Darsh Yug<>
85.3%<>
<>
<> <>
<>
<>Gautam Vedant<>
97.8%<>
<>
<> <>
<>
<>Ekalinga Lucky<>
92.3%<>
<>
<> <>
<>
<>Falan Maanas<>
89.3%<>
<>
<> <>
<>
<>Hitesh Kiaan<>
88.3%<>
<>
<> <>
<>
<>Ekavir Jai<>
89.3%<>
<>
<> <>
<>
<>Gagan Guneet<>
97.3%<>
<>
<>
<>
<>
<!-------- My School Topper SECTION Ends ------->
My School Topper section CSS code. Copy this code and paste in style.css file
style.css
/********** My School Topper CSS Starts **********/
ul.topper li {
list-style: none;
float: left;
width: 24%;
margin-right: 1%;
margin-bottom: 20px;
padding:4px 2px 0px 2px ;
}
ul.topper li img{
width:100%;
}
ul.topper li div {
background: #FF5722;
text-align: center;
color: #fff;
padding:8px;
}
ul.topper li div p{
margin-bottom:5px;
}
/********** My School Topper CSS Ends **********/
Output Of My School Topper Section In school website for students
7) Now, we will My School Facility section.
In our School Facility section, we are having images of facility with title. For Creating slider image we are using img tag.
My School Facility section HTML code. Copy this code and paste in index.html file
index.html
<!-------- My School Facility SECTION Starts ------->
<>
<>
<>My School Facility<>
<>
<>ONLINE CLASS<>
<> <> <>
<>
<>
<>E-LIBRARY<>
<> <> <>
<>
<>
<>PLAYGROUND<>
<> <> <>
<>
<>
<>SCHOOL BUS<>
<> <> <>
<>
<>
<>
<>
<>
<>
<>
<>
<!-------- My School Facility SECTION Ends ------->
My School Facility section CSS code. Copy this code and paste in style.css file
style.css
/********** My School Facility CSS Starts **********/
.facility {
width:24%;
margin-right:1%;
float: left;
background-color: #fff;
border:1px solid #FF5722;
}
.facility div{
padding: 10px;
}
.facility .heading {
padding:10px;
color: #fff;
background:#FF5722;
text-align: center;
font-size:18px;
font-weight:400;
margin-bottom: 10px;
}
.facility img {
width:100%;
}
.facility-list{
background:#fff;
margin-top:30px;
}
.facility-list img{
height:150px;
}
/********** My School Facility CSS Ends **********/
Output Of My School Facility Section
8) Now, we will testimonial (What Parents Say About Our School) section.
In our Testimonial section, we are having testimony of parents with their image. For Creating testimony we are using p tag and adding image of partent we are using image tag.
Testimonial section HTML code. Copy this code and paste in index.html file
index.html
<!-------- Testimonial SECTION 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 School.
<>Rowan Kiya<>
<>
<>
<>
<>
<><><>
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 School.
<>Eliana Ezra<>
<>
<>
<>
<>
<><><>
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 School.
<>Amara Luca<>
<>
<>
<>
<>
<!-------- Testimonial SECTION Ends ------->
Testimonial section CSS code. Copy this code and paste in style.css file
style.css
/********** Testimonial CSS Starts **********/
.testimonial {
width: 30.5%;
float: left;
margin-right:2.5%;
}
.testimonial-text {
background: #ffffff;
padding: 20px;
line-height: 35px;
border-radius: 10px;
text-align: center;
color: black;
border: 2px solid #FF5722;
}
.testimonial-text h5{
font-size:18px;
}
/********** Testimonial CSS Ends **********/
Output Of Testimonial Section
9) Now, we will School Gallery section.
In our School Gallery section, we are having school images. For showing gallery image we are using img tag.
School Gallery section HTML code. Copy this code and paste in index.html file
index.html
<!-------- School Gallery SECTION Starts ------->
<>
<>
<>Our School Gallery<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!-------- School Gallery SECTION Ends ------->
School Gallery section CSS code. Copy this code and paste in style.css file
style.css
/********** School Gallery CSS Starts **********/
.gallery img {
width: 24%;
margin-right: 1%;
margin-bottom: 20px;
border: 7px double #66BB6A;
border-radius: 10px;
}
/********** School Gallery CSS Ends **********/
Output Of School Gallery Section
10) Now, we will Footer section.
In our Footer section, we are having 1 image. For Creating slider image we are using img tag.
Footer section HTML code. Copy this code and paste in index.html file
index.html
<!-------- Footer SECTION Starts ------->
<>
<>
<>
<>
<>We Create Champion's<>
On Right Time & Place<>
<>91-0123-456-789<>
<><> <>
<>
<><>
<>
<><><>
<>
<>
<>
<>
<>Quick Links<>
<>
<>
<>Home<>
<>Course<>
<>About us<>
<>Training<>
<>Notice<>
<>Event<>
<>Blogging<>
<>Contact Us<>
<>
<>
<>
<>
<>School Timing<>
<>
<>
<>
<>Mon-Fri...................<>
<>8:00 am-02:00 pm<>
<>
<>
<>Saturday.................<>
<>8:00 am-02:00 pm<>
<>
<>
<>Sunday....................<>
<>Closed<>
<>
<>
<>
<>
<>
<>Contact Us<>
<>
<><> 89, 3rd Floor Ring Road, Bhopal, India<>
<><> noreply@dezven.com<>
<><> +91 0123 456 789<>
<>
<>
<>
<!-------- Footer SECTION Ends ------->
Footer section CSS code. Copy this code and paste in style.css file
style.css
/********** Footer CSS Starts **********/
.footer {
background-color:#FF5722;
padding:40px 0px 0px 0px;
width:100%;
float:left;
}
.footer-inner{
width:33%;
float:left;
padding-bottom: 20px;
}
.footer h4 {
font-size: 22px;
padding-bottom: 20px;
}
.footer p {
font-size: 16px;
padding-bottom:6px;
}
.footer-menu ul {
padding: 0px;
}
.footer-menu li {
width:50%;
float: left;
list-style: none;
}
.footer-menu li a {
text-decoration: none;
border-right: 1px solid lightgrey;
padding: 2px 20px;
color: #111;
}
/********** Footer CSS Ends **********/
Output Of Footer Section
11) Now, we will Copyright section in school website design using html and css
In our Copyright section, we are having copyright content and social media icons image. For Creating social media icons image we will use img tag.
Copyright section HTML code. Copy this code and paste in index.html file
index.html
<!-------- Copyright SECTION Starts ------->
<>
<>
<>@ All Copy Right By Dezven Company<>
<>
<>Privacy Policy |<>
<>Terms & Condition<>
<>
<>
<><><>
<><><>
<><><>
<><><>
<>
<>
<>
<!-------- Copyright SECTION Ends ------->
Copyright section CSS code. Copy this code and paste in style.css file
style.css
/********** Copyright CSS Starts **********/
.copyright {
border-top: 1px solid lightgrey;
padding-top: 30px;
width: 100%;
float: left;
}
.copyright a {
padding: 0px 4px;
text-decoration: none;
color: #fff;
}
/********** Copyright CSS Ends **********/
Output Of Copyright Section in school website design using html and css
Conclusion On How To Make School Website
how to create a school website design using html and css Designing a school website using HTML and CSS offers endless possibilities for customization and growth.
By focusing on structure, design, and functionality, you can create a school website project that meets the needs of students, parents, and educators alike.
Related Post
how to create college website using HTML and CSS
How To Create A College Website Using HTML AND CSS With Source Code
How to design simple college website using html and css
How To Design School / College Website Using HTML And CSS
Design College Website using HTML CSS
How to Create an School/College Website using HTML CSS
thank you very much for providing School website source code free download
one of the best simple school website design
very beautiful and simple school website design
nice tutorial to learn how to create a school website using html on notepad
best tutorial on school website design using html and css