Hello Developers! Are you ready to dive into the exciting world of web development? In this tutorial, we will guide you step-by-step on how to build a stunning movie booking website from scratch using HTML & CSS. Whether you’re a beginner or an experienced developer, this comprehensive guide will help you create a user-friendly and customizable website tailored to your personal projects.
Why Build a Movie Booking Website?
A movie booking website is a dynamic platform that allows users to easily search for and purchase movie tickets at their favorite local theaters. By following our instructions, you’ll be able to create a user-friendly interface where visitors can effortlessly explore movies based on title, genre, or release date. Additionally, they can browse showtimes and theaters in their area, ensuring a seamless movie ticket booking experience.
Step 1: Set up the HTML Structure
To begin with, let’s move on to Step 1. This step involves creating a new HTML file and establishing the basic structure by adding the HTML doctype, <html> tags, and a <head> section. This structure provides the foundation for your movie booking website.
Step 2: Link the CSS File
Within the <head> section, link your CSS file to the HTML document using the <link> tag. This connection ensures that your website’s design is visually appealing and consistent.
Step 3: Define the HTML Body
Once you’ve set up the HTML structure and linked the CSS file, it’s time to move on to Step 3. Within the <body> tags, you’ll build the structure of your movie booking website. This section serves as the canvas for your content and design elements.
Step 4: Create the Top Bar
Now that you have defined the HTML body, let’s focus on Step 4. The top bar of your website typically includes the logo, navigation menu, and user-related elements. Use appropriate HTML tags and classes to structure this content
Step 5: Style the Top Bar
In your CSS file, define styles for the top bar. Utilize CSS selectors and properties to customize the appearance of the logo, navigation menu, and user-related elements. This step adds visual appeal and enhances the user experience.
Step 6: Design the Main Container
Create the main container that holds the content of your website. This container includes a sidebar and a movies container. Use appropriate HTML tags to structure this content, making it easily readable and accessible.
Step 7: Style the Sidebar
Once the main container is designed, let’s proceed to Step 7. Define styles for the sidebar in your CSS file. By using CSS selectors and properties, customize the appearance of sidebar elements such as sidebar groups and input fields. This step enhances the overall visual coherence of your website.
Step 8: Design the Movies Container
Inside the main container, create a movies container that displays the movies available for booking. Use HTML tags to structure this content and ensure it is visually appealing.
Step 9: Style the Movies Container
In your CSS file, define styles for the movies container. Use CSS selectors and properties to customize the appearance of the movies container and its elements. This step enhances the overall visual experience for users.
Step 10: Add Movie Elements
Within the movies container, add individual elements for each movie. Include the movie image, title, and booking options. Use appropriate HTML tags and classes to structure and style this content, making it visually appealing and easy to navigate.
Step 10: Add Movie Elements
In your CSS file, define styles for the movie elements. Utilize CSS selectors and properties to customize the appearance of movie images, titles, and booking options. This step ensures consistency and enhances the overall design of your website.
Step 12: Add Interactivity
Enhance the user experience by adding interactivity to your movie booking website. Incorporate features like hover effects, booking buttons, and dropdown menus for filtering options. Utilize HTML buttons and appropriate event handlers, such as JavaScript click events, to handle user actions.
Step 13: Fine-tune Styles and Responsiveness
Now that you have built the basic structure and added interactivity, it’s time to fine-tune the styles and ensure your website is responsive. Continuously refine and adjust the styles to create a visually appealing movie booking website.
Test your website on different devices and screen sizes to ensure that it responds well and maintains its visual appeal across various platforms. Utilize CSS media queries to apply different styles based on the device’s screen size. This step is crucial to provide a seamless experience for users accessing your website from different devices.
Step 14: Test and Debug | HTML & CSS
Thoroughly test your movie booking website to identify any issues or bugs. Use debugging tools or console logs to troubleshoot and fix any errors or unexpected behavior. Test the website’s functionality, interactivity, and responsiveness on different browsers and devices to ensure a smooth user experience.
Pay close attention to the booking process, including seat selection and ticket purchase. Test different scenarios and edge cases to ensure everything works as expected. Also, test the filtering options, movie reviews, and trailer playback functionality to guarantee a seamless experience for your users.
Step 15: Publish Your Website
Once you are satisfied with the functionality and design of your movie booking website, it’s time to publish it. Choose a hosting provider and deploy your website to make it accessible to the public. Ensure that you upload both the HTML and CSS files to the hosting server to maintain the integrity of your website.
Conclusion:
Congratulations! You have successfully created a captivating movie booking website using HTML and CSS. By following this step-by-step tutorial, you have built a user-friendly interface where users can easily search for and purchase movie tickets. Additionally, you have incorporated features such as seat selection, movie reviews, and filtering options to enhance the overall user experience.
Remember, this tutorial is just the beginning. Feel free to customize and expand your website further based on your unique requirements. Add additional functionality, integrate online payment systems, or even incorporate user accounts for a personalized experience.
Continue to learn and explore new web development techniques to enhance your skills and create even more impressive websites. Happy coding!
Video Tutorial: For visual learners, we have also prepared a video tutorial to accompany this blog post. Check it out to gain a better understanding of each step and see the website come to life.
Video Tutorial
Source codes
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
<title>Movie booking</title>
</head>
<body>
<section class="top-bar">
<div class="left-content">
<h2 class="title">M4You</h2>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a class="active" href="#">Movies</a></li>
<li><a href="#">Theaters</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
<div class="right-content">
<img src="./assets/images/filter.png" alt="" class="filter">
<img src="./assets/images/cart.png" alt="" class="cart">
<img src="./assets/images/help.png" alt="" class="help">
<div class="profile-img-box">
<img src="./assets/images/profile.jpg" alt="">
</div>
<img src="./assets/images/menu.png" alt="" class="menu">
</div>
</section>
<section class="main-container">
<div class="sidebar">
<form action="#">
<div class="sidebar-groups">
<h3 class="sg-title">Categories</h3>
<input type="checkbox" id="adventure" name="adventure" value="adventure">
<label for="adventure">Adventure</label><br>
<input type="checkbox" id="action" name="action" value="action">
<label for="action">Action</label><br>
<input type="checkbox" id="animation" name="animation" value="animation">
<label for="animation">Animation</label><br>
<input type="checkbox" id="comedy" name="comedy" value="comedy">
<label for="comedy">Comedy</label><br>
<input type="checkbox" id="science" name="science" value="science">
<label for="science">Science Fiction</label><br>
<input type="checkbox" id="thriller" name="thriller" value="thriller">
<label for="thriller">Thriller</label><br>
<input type="checkbox" id="history" name="history" value="history">
<label for="history">History</label><br>
<input type="checkbox" id="documentary" name="documentary" value="documentary">
<label for="documentary">Documentary</label><br>
<input type="checkbox" id="fantasy" name="fantasy" value="fantasy">
<label for="fantasy">Fantasy</label><br>
</div>
<div class="sidebar-groups">
<h3 class="sg-title">Language</h3>
<input type="checkbox" id="english" name="english" value="english">
<label for="english">English</label><br>
<input type="checkbox" id="spanish" name="spanish" value="spanish">
<label for="spanish">Spanish</label><br>
<input type="checkbox" id="hindi" name="hindi" value="hindi">
<label for="hindi">Hindi</label><br>
</div>
<div class="sidebar-groups">
<h3 class="sg-title">Time</h3>
<input type="radio" id="morning" name="time" value="morning">
<label for="morning">Morning</label><br>
<input type="radio" id="night" name="time" value="night">
<label for="night">Night</label><br>
</div>
<div class="sidebar-groups">
<a href="#" class="btn-l btn">Apply Filters</a>
</div>
</form>
</div>
<div class="movies-container">
<div class="upcoming-img-box">
<img src="assets/images/upcoming.webp" alt="">
<p class="upcoming-title">Upcoming Movie</p>
<div class="buttons">
<a href="#" class="btn">Book Now</a>
<a href="#" class="btn-alt btn">Play Trailer</a>
</div>
</div>
<div class="current-movies">
<div class="current-movie">
<div class="cm-img-box">
<img src="assets/images/movie1.jpg" alt="">
</div>
<h3 class="movie-title">Jurassic World</h3>
<p class="screen-name">Screen : Platinum</p>
<div class="booking">
<h2 class="price">15$</h2>
<a href="#" class="btn">Buy Tickets</a>
</div>
</div>
<div class="current-movie">
<div class="cm-img-box">
<img src="assets/images/movie2.jpg" alt="">
</div>
<h3 class="movie-title">Vikram</h3>
<p class="screen-name">Screen : Gold</p>
<div class="booking">
<h2 class="price">10$</h2>
<a href="#" class="btn">Buy Tickets</a>
</div>
</div>
<div class="current-movie">
<div class="cm-img-box">
<img src="assets/images/movie3.jpg" alt="">
</div>
<h3 class="movie-title">Firestarter</h3>
<p class="screen-name">Screen : Silver</p>
<div class="booking">
<h2 class="price">5$</h2>
<a href="#" class="btn">Buy Tickets</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
styles.css
@import url('https://fonts.googleapis.com/css2?family=Joan&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Joan', serif;
}
a {
text-decoration: none;
color: #adadad;
}
.btn {
display: inline-block;
padding: .5rem 1rem;
background-color: #cd8c38;
border-radius: 2rem;
color: #1e1f26;
transition: .3s;
}
.btn:hover {
background-color: #92601f;
}
.btn-l {
width: 100%;
text-align: center;
}
body {
background-color: #1e1f26;
display: grid;
grid-template-columns: 1000px;
justify-content: space-evenly;
}
/* top bar */
.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1rem;
}
.left-content,
.right-content {
display: flex;
align-items: center;
}
.title {
margin-right: 3rem;
color: #cd8c38;
}
.navigation {
display: flex;
list-style: none;
}
.navigation li {
margin-right: 1rem;
}
.navigation li a:hover {
color: #cd8c38;
}
.active {
color: #cd8c38;
}
.filter,
.cart,
.help,
.menu {
position: relative;
width: 20px;
height: 20px;
}
.filter,
.cart,
.help {
margin-right: 1rem;
}
.menu {
margin-left: .8rem;
}
.filter,
.menu {
display: none;
}
.profile-img-box {
position: relative;
height: 30px;
width: 30px;
border-radius: 50%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* main container */
.main-container {
color: #adadad;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
}
/* sidebar */
.sidebar {
background: linear-gradient(45deg, rgba(255, 255, 255, .05), rgba(205, 140, 56, .15));
backdrop-filter: blur(5px);
height: fit-content;
border-radius: 1rem;
padding: 2rem 2.5rem;
}
.sidebar-groups {
margin-bottom: 1rem;
}
.sg-title {
margin-bottom: .5rem;
color: #fff;
}
input {
margin-bottom: .6rem;
}
input[type=checkbox]:checked {
accent-color: #cd8c38;
}
input[type=radio]:checked {
accent-color: #cd8c38;
}
label {
margin-left: .5rem;
}
/* movies container */
.upcoming-img-box {
position: relative;
height: 300px;
width: 100%;
border-radius: 1rem;
overflow: hidden;
margin-bottom: 1.5rem;
}
.upcoming-title {
position: absolute;
top: 2rem;
left: 2rem;
color: #cd8c38;
background-color: #1e1f26;
padding: .5rem 1rem;
border-radius: 2rem;
border: 1px solid #cd8c38;
font-weight: 500;
}
.buttons {
position: absolute;
bottom: 2rem;
left: 2rem;
}
.btn-alt {
background-color: #1e1f26;
color: #cd8c38;
border: 1px solid #cd8c38;
margin-left: 1rem;
}
.btn-alt:hover {
color: #1e1f26;
background-color: #cd8c38;
}
/* current movies */
.movies-container {
padding-bottom: 2rem;
}
.current-movies {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.current-movie {
background: linear-gradient(45deg, rgba(255, 255, 255, .05), rgba(205, 140, 56, .15));
padding: 1rem;
border-radius: .5rem;
}
.cm-img-box {
position: relative;
height: 150px;
width: auto;
margin-bottom: 1rem;
border-radius: .5rem;
overflow: hidden;
}
.movie-title {
color: #fff;
margin-bottom: .2rem;
}
.booking {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.price {
color: #cd8c38;
}
Don’t forget to Subscribe to our YouTube Channel for more
I’ve been exploring for a little for any high-quality articles or weblog posts in this kind of area .
Exploring in Yahoo I eventually stumbled upon this web site.
Studying this info So i’m satisfied to convey that I have an incredibly just right uncanny feeling
I found out exactly what I needed. I such a lot undoubtedly will make sure to don?t
disregard this web site and give it a glance
regularly.
Fantastic goods from you, man. I’ve understand your stuff previous to and you’re just too wonderful. I really like what you’ve acquired here, certainly like what you’re saying and the way in which you say it. You make it enjoyable and you still care for to keep it wise. I can’t wait to read far more from you. This is actually a terrific site.
I viѕited sｅveral websites except the audio quality for auⅾio songs exiѕting at this wеb page is genuinely
excellent.
I’m not sure where you’re getting your information, but good topic.