how to create college website using HTML and CSS
| Youtube : | https://youtu.be/9oiUmnzMb3g |
| Views : | 5458 |
| Skills : | html, css |
| Category : | Web Design |
| Tag : | school,university,college |
In This Tutorial we are going to learn how to create responsive college website with the use of HTML and CSS. This website is going to be pure HTML and CSS.
We will not use any javascript and jquery in this responsive college website design using html and css.
Section We Are Going To Design In Our Responsive College Website Using HTML AND CSS
In our responsive college website, we are going to design 3 main section : Header section, Main Body And Footer section
In this tutorial we are going to design these three sections with the help of their subsections. Subsections are created as per the website content.
Header
- Top header With NEWS section
- Logo
- Main menu
Main Body
- Slider
- Latest News, Upcoming Events, Our Member
- About Our College
- College Gallery
- Top Company Placement
Footer
- About Us
- College Timing
- Contact Info
Video Tutorial
To easily understand this tutorial you can also see the full coding video below.
Let's Start The Coding
Firstly, create the folder on desktop, my folder name is : college website Inside college website folder, create two sub folder : - 1) css and 2) images
Inside the CSS folder, we will save the css file, which we will use on this website.
Inside the images folder, we will save all images which we will use on this website.
Inside college website folder, I am creating one HTML file file name - index.html
Inside css folder, I am creating one CSS file - file name - style.css
Lest's start design with writing basic HTML 5 code in index.html, and link style.css file to index.html file
Meta html code. Copy And paste the code in index.html
<!---------- META HTML STARTS ----->
<>
<>
<>
<>College Website<>
<>
<>
<>
<>
<!---------- META HTML ENDS ----->
Common css. Copy and paste the code in style.css
/********** COMMON CSS STARTS **********/
* {
font-family sans-serif, arial;
margin:0px;
padding:0px;
box-sizing:border-box;
font-size:16px;
}
a {
text-decoration:none;
}
:target {
display:block!important;
}
/********** COMMON CSS END **********/
2) Now, We Will Design The Top Header NEWS Section.
In our Marquee section, we are news content moving right to left. We are using marquee tag to rotate NEWS.
Please copy and paste the below code to design Top header NEWS section
Top Header NEWS section HTML code. Copy this code and paste in index.html file
<!---------- NEWS HTML STARTS ----->
<>
<>
<> NEWS : <>
<>
My college: Intelligence plus curiosity-that is the root of true education.
<>
<>
<>
<!---------- NEWS HTML ENDS ----->
Top Header NEWS Section CSS Code. Copy this code and paste in style.css file
/********** NEWS CSS STARTS **********/
.w-100 {
width:100%;
}
.top-header {
background:royalblue;
padding:12px 0px 10px 0px;
}
.container {
width:100%;
max-width: 1200px;
margin: 0 auto;
padding:0px 10px;
}
.top-header b{
position: relative;
z-index: 9;
background: white;
color: red;
padding:16px 0px 11px 4px;
}
.top-header marquee{
color:white;
width: calc(100% - 90px);
}
/********** NEWS CSS END **********/
Output Of Top Header NEWS Section
3) Now, We Will Design Logo And Responsive Menu section Of College Website Project
In our Logo And Menu section of college website project, we are having a logo on the left side and navigation on the right side. To display the logo, we are using img tag and for designing Menu, we will use ul > li tag.
Please copy and paste the below code to design Logo And Menu section
Logo And Responsive Menu section HTML code. Copy this code and paste in index.html
<!---------- HEADER HTML STARTS ----->
<>
<>
<>
<><><>
<><>☰ <>
<>
<>
<>✕<>
<>
<>Home<>
<>About Us<>
<>Admission<>
<>Gallery<>
<>Notice Board<>
<>Events<>
<>Tutorial<>
<>Contact us<>
<>
<>
<>
<>
<>
<>
<>
<!---------- HEADER HTML ENDS ----->
Logo And Responsive Menu Section CSS Code. Copy this code and paste in style.css file
/********** HEADER SECTION CSS STARTS **********/
header {
box-shadow: 0px 0px 10px 0px #0000001f;
display: flex;
flex-direction: column;
position: relative;
}
.heads {
margin:10px 0px 0px 0px;
display:flex;
}
.logo {
max-width:30%;
min-width:200px;
}
.menu {
max-width:70%;
min-width:100px;
margin-left: auto;
text-align:center;
}
.menu ul {
display: flex;
list-style: none;
gap: 16px;
margin:0px;
margin-top:15px;
}
.menu ul li {
font-weight: 500;
font-size: 18px;
}
.openicon {
display:none;
position: relative;
float: right;
font-size: 34px;
right: 8px;
font-weight: bold;
}
.closeicon {
display:none;
float:right;
font-size: 28px;
}
/****Mobile And iPad screens***/
@media screen and (max-width: 768px) {
.openicon, .closeicon {
display:block;
}
#menu {
position: fixed;
left: 0px;
background: #00000094;
width: 100%;
height: 100%;
top: 0px;
text-align: left;
z-index: 9999;
display: none;
}
.menu-inner{
background: white;
height: 100%;
top: 0px;
left: 0px;
width: 70%;
position: absolute;
padding: 20px;
}
#menu ul {
display: block;
margin-top: 45px;
}
#menu ul li {
margin-bottom:25px;
}
}
/********** HEADER SECTION CSS END **********/
Output Of Logo And Responsive Menu Section Of College Website Project
4) Now, We Will Design Slider Section Of College Website Project
In our Slider Section, we will show an image and we are using an img tag. In our slider, college website project in html with source code we are going to show banner of college campus
Please copy and paste the below code to design Slider Section
Slider section HTML code. Copy this code and paste in index.html
<!---------- SLIDER HTML STARTS ----->
<>
<>
<>
<!---------- SLIDER HTML ENDS ----->
Slider Section CSS Code. Copy this code and paste in style.css file
/********** SLIDER SECTION CSS STARTS **********/
.slider {
object-fit: cover;
width: 100%;
height:580px;
}
/***iPad screens***/
@media screen and (max-width: 768px) {
.slider {
height:350px;
}
}
/***mobile screens***/
@media screen and (max-width: 480px) {
.slider {
height:210px;
}
}
/********** SLIDER SECTION CSS ENDS **********/
Output Of Slider Section College Website Project
5) Now, We Will Design Latest News, Upcoming Events, Our Member
In our latest NEWS, upcoming events, our member Section, we are having content rotating bottom to top in simple college website using html and css with source code
In Latest NEWS, we are showing NEWS title and NEWS date, which is moving from bottom to top
In upcoming events, we are showing event title and event date, which is moving from bottom to top
In our member section, we are showing image of staff, staff name and staff designation
Please copy and paste the below code to design Latest News, Upcoming Events, Our Member Section
Latest News, Upcoming Events, Our Member section HTML code. Copy this code and paste in index.html
<!---------- LATEST NEWS, UPCOMING EVENTS AND OUR MEMBER HTML STARTS ----->
<>
<>
<>
<>
<>Latest News<>
<>
<>
<><>Testing is going on here Testing is going on here Testing is going on here<>
<>30 November 2025<>
<>
<><>Testing is going on here Testing is going on here Testing is going on here<>
<>30 November 2025<>
<>
<><>Testing is going on here Testing is going on here Testing is going on here<>
<>30 November 2025<>
<>
<><>Testing is going on here Testing is going on here Testing is going on here<>
<>30 November 2025<>
<>
<>
<>
<>
<>
<>Upcoming Events<>
<>
<>
<>
<>30<>April<>
<>Testing is going on here Testing is going on here Testing is going on here<>
<>
<>
<>30<>April<>
<>Testing is going on here Testing is going on here Testing is going on here<>
<>
<>
<>30<>April<>
<>Testing is going on here Testing is going on here Testing is going on here<>
<>
<>
<>30<>April<>
<>Testing is going on here Testing is going on here Testing is going on here<>
<>
<>
<>30<>April<>
<>Testing is going on here Testing is going on here Testing is going on here<>
<>
<>
<>30<>April<>
<>Testing is going on here Testing is going on here Testing is going on here<>
<>
<>
<>
<>
<>
<>Our Member<>
<>
<>Dr Neeta Singh Jha<>
<>Chairman, Our College<>
<>
<>
<>
<>
<!---------- LATEST NEWS, UPCOMING EVENTS AND OUR MEMBER HTML ENDS ----->
Latest News, Upcoming Events, Our Member Section CSS Code. Copy this code and paste in style.css file
/********** LATEST NEWS, UPCOMING EVENTS AND OUR MEMBER SECTION CSS STARTS **********/
.full-panel{
background:#f0f3fa;
padding:60px 0px;
}
.panels {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.inpanels {
width: 32%;
background: white;
border-radius: 10px;
padding: 20px 10px;
margin: 0px auto;
margin-bottom: 20px;
}
.inpanels h2 {
color:royalblue;
padding: 0px 20px 5px 5px;
margin-bottom: 40PX;
text-align: left;
border-bottom: 1px solid royalblue;
}
.inpanels marquee{
height:380px;
}
.inpanels li {
list-style:none;
font-size: 16px;
padding: 10px 0px;
line-height: 26px;
border-bottom: 1px solid lightgrey;
}
.inpanels li i {
font-size: 14px;
font-weight: 500;
color: red;
}
@media screen and (max-width: 768px) {
.inpanels {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.inpanels {
width: 100%;
}
}
/******************Upcoming Events******************/
.events li {
display: flex;
}
.inpanels li b {
text-align: center;
background: royalblue;
font-size: 14px;
color: white;
margin-right: 5px;
padding: 9px 14px;
line-height: 20px;
font-weight: 400;
border-radius: 4px;
}
/******************OUR MEMBER******************/
.inpanels img{
padding:0px 20px 20px 20px;
}
.inpanels h3{
font-size:22px;
text-align:center;
}
.inpanels p{
text-align:center;
}
/********** LATEST NEWS, UPCOMING EVENTS AND OUR MEMBER SECTION CSS ENDS **********/
Output Of Latest News, Upcoming Events, Our Member Section
6) Now, We Will Design The About Us Section.
In our About Us Section, we are having content on the right side and college image on the left side, we are using the p and b tag. For Creating images, we have an img tag.
About Our College section HTML code. Copy this code and paste in index.html
<!---------- ABOUT US HTML STARTS ----->
<>
<>
<>
<>
<>About <>Our College<><>
<>If you are going to use of Lorem Ipsum need to be sure there to use of Lorem Ipsum need to be sure there isn't hidden of text If you are going to use of Lorem Ipsum need text. Sure there isn't hidden of text. If you are going to use of Lorem Ipsum need to be sure<>
<>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.<>
<>Seminar is conducted on BCA courses, Conducted its 2nd convocation ceremony If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text. If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text.<>
<>
<>
<>
<!---------- ABOUT US HTML ENDS ----->
About Our College Section CSS Code. Copy this code and paste in style.css file
/********** ABOUT-US SECTION CSS STARTS **********/
.heading {
font-size: 32px;
margin: 100px 0px 60px 0px;
text-align:center
}
.heading span{
font-size: 32px;
color: royalblue;
}
.aboutus {
margin:60px 0px;
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.aboutus img {
width:95%;
max-width:500px;
margin:0px auto;
margin-top:30px;
}
.aboutus h2 {
margin:20px 0px 30px 0px;
}
.aboutus p, .aboutus b {
line-height: 31px;
margin:18px 0px;
}
/********** ABOUT-US SECTION CSS ENDS **********/
Output Of About Us Section
7) Now, We Will Design Our College Gallery Section.
In our Our College Gallery Section, we are showing images of college events and college facility.
Please copy and paste the below code to design Our College Gallery Section
Our College Gallery section HTML code. Copy this code and paste in index.html
<!---------- GALLERY HTML STARTS ----->
<>
<>Our College <>Gallery<><>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!---------- GALLERY HTML ENDS ----->
Gallery Section CSS Code. Copy this code and paste in style.css file
/********** GALLERY SECTION CSS STARTS **********/
.gallery {
margin:60px 0px;
display: grid;
gap: 20px 15px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.gallery img{
border-radius: 10px;
border: 1px dashed black;
padding:5px;
}
/********** GALLERY SECTION CSS ENDS **********/
Output Of Our College Gallery Section
8) Now, We Will Design The Top Company Placement Section.
In our Top Company Placement Section, we are having images of company logos moving right to left. We are using marquee tag to rotate the company logo.
Please copy and paste the below code to design Top Company Placement Section
Top Company Placement section HTML code. Copy this code and paste in index.html
<!---------- PLACEMENT HTML STARTS ----->
<>
<>Top Company <>Placement<><>
<>
<>
<>
<>
<!---------- PLACEMENT HTML ENDS ----->
Output Of Top Company Placement Section
9) Now, We Will Design the Footer section
In our footer section, we are having About Us, College Timing and Contact Info section.
Please copy and paste the below code to design Footer section
Footer section HTML code. Copy this code and paste in index.html
<!---------- FOOTER HTML STARTS ----->
<>
<>
<>
<>
<>About Our College<>
<>If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text. If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text. <>
<>
<>
<>College Timing<>
<>
<>
<>Mon-Fri...................<>
<>08:00 AM - 04:00 PM<>
<>
<>
<>Saturday.................<>
<>HalfDay<>
<>
<>
<>Sunday....................<>
<>Closed<>
<>
<>
<>
<>
<>Contact Info<>
<>
<>3A-25 Ring road North-east, <>
Delhi, India, 462001<>
<>info@dummycollege.com<>
<>+0 123 456 7890<>
<>
<>
<>
<>
<>
<!---------- FOOTER HTML ENDS ----->
Footer Section CSS Code. Copy this code and paste in style.css file
/********** FOOTER SECTION CSS STARTS **********/
footer{
margin-top:50px;
background:royalblue;
color:white;
padding:40px 0px;
}
.foots {
padding:20px 0px 20px 20px;
display: grid;
gap: 50px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin:0px auto;
}
.foots p{
padding-right:60px;
line-height:28px;
}
.foots table td{
padding:10px 0px;
}
.col-foot h2 {
font-size:18px;
margin-bottom:25px;
}
.col-foot li {
margin-bottom:18px;
list-style-type: disclosure-closed;
}
/********** FOOTER SECTION CSS ENDS **********/
Output Of Footer Section
After saving the file, You can run the index.html file in any browser like chrome,mozilla, safari. You can see the responsive college website you have designed using html and css code. You can also use this for college website project in html with source code
A college website is an essential digital platform that serves students, faculty, and prospective applicants. Using HTML and CSS, developers can create a visually appealing, functional, and user-friendly website that effectively communicates information. HTML provides the structure, while CSS enhances the design and responsiveness in discussing with how to create college website using html and css. By incorporating essential features like an admissions page, faculty directory, academic information, and news updates, a college website can significantly improve communication and engagement. With modern web development tools and best practices, institutions can ensure an optimal digital presence, making information easily accessible to all stakeholders.
How To Create School 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
very very helpfull
Thank you so much for this
very nice college website project in html with source code
very nice college website code in html and csss
Thank you so much for providing simple college website using html and css with source code free download