DEV Community

A0mineTV
A0mineTV

Posted on

πŸš€ Building a University Website with HTML and CSS: A Complete Guide

Hi, everyone! πŸ‘‹ Today, I'm excited to share a web development project: building a modern and responsive university website using HTML and CSS. In this post, we'll dive into the technologies used, the website's features, and the challenges faced during the development process.


🎯 Project Goal

The goal was to design a professional and user-friendly website for a university. The website should effectively showcase key information, such as available courses, campus details, and facilities, while being visually appealing and mobile-friendly.


πŸ› οΈ Technologies Used

HTML5

HTML5 was used to structure the content of the website. Semantic tags improve readability and accessibility.

CSS3

CSS3 was employed for styling, creating transitions, gradients, and making the website responsive.

JavaScript

JavaScript was added for small interactions, such as a mobile-friendly navigation menu.


πŸ—‚οΈ Website Structure

1. Header

The header includes:

  • A navigation bar with a logo and interactive links.
  • A hero section with a title, description, and a Call-to-Action (CTA) button.

Code Example:

<header class="header">
  <nav>
    <a href="index.html">
      <img src="images/logo.png" alt="University Logo">
    </a>
    <div class="nav-links" id="navLinks">
      <i class="fa fa-times" onclick="hideMenu()"></i>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">COURSE</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
    <i class="fa fa-bars" onclick="showMenu()"></i>
  </nav>

  <div class="text-box">
    <h1>World's Biggest University</h1>
    <p>Discover the best courses and facilities tailored for your future!</p>
    <a href="#" class="hero-btn">Visit Us To Learn More</a>
  </div>
</header>
Enter fullscreen mode Exit fullscreen mode

2. Main Sections

Courses Offered

A section that displays different education levels (Intermediate, Degree, Post-Graduation) with hover effects.

Code Example:

<section class="course">
  <h1>Courses We Offer</h1>
  <div class="row">
    <div class="course-col">
      <h3>Intermediate</h3>
      <p>Learn foundational skills to prepare for advanced studies.</p>
    </div>
    <div class="course-col">
      <h3>Degree</h3>
      <p>Earn your degree with top-notch faculty and resources.</p>
    </div>
    <div class="course-col">
      <h3>Post-Graduation</h3>
      <p>Specialize and elevate your career with our post-graduate programs.</p>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

Campus Locations

A section showcasing campuses with overlay effects on images.

CSS Example for Hover Effect:

.campus-col img {
  width: 100%;
  display: block;
}

.layer {
  position: absolute;
  background: transparent;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition: 0.5s;
}

.layer:hover {
  background: rgba(226, 0, 0, 0.7);
}

.layer h3 {
  position: absolute;
  width: 100%;
  color: #fff;
  font-size: 26px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: 0.5s;
}

.layer:hover h3 {
  bottom: 49%;
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

Facilities

Highlights facilities like the library, playground, and cafeteria.

HTML Example:

<section class="facilities">
  <div class="row">
    <div class="facilities-col">
      <img src="images/library.png" alt="Library">
      <h3>World Class Library</h3>
      <p>Explore thousands of books and resources in our state-of-the-art library.</p>
    </div>
    <div class="facilities-col">
      <img src="images/basketball.png" alt="Playground">
      <h3>Largest Playground</h3>
      <p>Enjoy our expansive and well-maintained sports facilities.</p>
    </div>
    <div class="facilities-col">
      <img src="images/cafeteria.png" alt="Cafeteria">
      <h3>Tasty and Healthy Food</h3>
      <p>Our cafeteria serves delicious and nutritious meals every day.</p>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

Call to Action (CTA)

A visually captivating banner inviting users to enroll.

CSS Example:

.cta {
  margin: 100px auto;
  width: 80%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("images/banner2.jpg");
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  text-align: center;
  padding: 100px 0;
}

.cta h1 {
  color: #fff;
  margin-bottom: 40px;
}

.hero-btn {
  display: inline-block;
  color: #fff;
  background: #f44336;
  padding: 12px 34px;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s;
}

.hero-btn:hover {
  background: #fff;
  color: #f44336;
}
Enter fullscreen mode Exit fullscreen mode

✨ Highlights

Responsive Design

Media queries ensure that the website is mobile-friendly, with elements like the navigation bar and content adjusting seamlessly.

Animations

Hover effects and transitions (e.g., .hero-btn:hover) add interactivity and visual appeal.

Accessibility

Semantic HTML tags, meaningful alt attributes for images, and proper heading structures improve accessibility.


πŸ’‘ Challenges and Future Improvements

Challenges Faced

  1. Responsive Menu: Implementing a mobile-friendly hamburger menu required a combination of CSS and JavaScript.
  2. Image Optimization: Ensuring fast loading times while maintaining high-quality visuals was a key focus.

Future Improvements

  • Use WebP format for images and implement lazy loading.
  • Add focus styles for keyboard navigation.
  • Include a contact form in the footer.

🌟 Conclusion

This project combines modern design principles, interactive features, and responsive layouts to create a functional university website. It's an excellent foundation for building more complex projects.

πŸ”— Source Code

You can find the complete source code for this project on my GitHub Repository. Feel free to explore the code, suggest improvements, or ask questions in the comments below! πŸš€

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

πŸ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityβ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple β€œthank you” goes a long wayβ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay