AirBNB is a classic example of a booking site, and learning how to build a site like this allow us to perform the following functions:

  • Display items with images and descriptions
  • Accept booking details (e.g. name, email, date of arrival, number of pax, etc.)
  • Store booking details

This is what we are going to cover in this tutorial.  The technical part that we are going to cover includes:

  • Using HTML to define the structure of our website
  • Populate the content, descriptions and images using tags
  • Handle the interactions using JavaScript and jQuery (e.g. when item is clicked)
  • Send booking details to our email
  • Design responsive layout using Bootstrap, so that our sites can be viewed nicely on different devices (desktop, mobile phones, tablets, and even TVs)

Basic Layout

We first need to create a HTML file to describe the basic layout of our web page. In most cases, this file is named index.html.

Configure Bootstrap

Bootstrap is a responsive CSS framework. What it does is to help users to get a consistent look across different devices of different resolutions. Since it is a framework, we will have to follow a specific set of syntax to set it up. We will need the following component to start using bootstrap:

  • container – the most basic layout element required in Bootstrap to use the grid system.
  • row – wrapper for columns.
  • col – the actual column where we place content.

You may also visit here for full documentation of Bootstrap. Let’s configure our Bootstrap page, and also use put in some text.

The HTML tags used here are:

  • div – division tag. To create content block.
  • p – paragraph tag. To create text passage.
  • h1, h3 – header tags. Usually used for title and subheadings. It ranges from h1 to h6. Where h1 being most important and h6 being the least.

Tour Details

First of all we want to put down the content of all the tours. In bootstrap, we store our content in columns, and each column belongs to a particular row.

The HTML tag used here is:

  • img – image tag. To display pictures specified in the src attribute.

We specific the id property to assign a name to our div. This is useful for us to identify it later when we are writing CSS styles and JavaScripts. We specify the class attribute in our element to correspond with the CSS stylesheet, which we will cover in a bit. The  row  and col class are built-in CSS class in Bootstrap. They represent row and column respectively. We also assign the item class which we will use it for custom CSS.

The completed code should look like below:

Accommodation Details

Next we are going to include accommodation details to our page. Let’s use the similar structure as tour details.

Now head to your browser and open the index.html. You should see your page like the screenshot below. Well done! Let’s write some CSS styles to beautify our booking site.

 

Styling with CSS

CSS stands for Cascading Style Sheet. Think of CSS like a cosmetic or make up for your website. HTML defines the structure and the content, and we will use CSS to change the font size, color and the layout. As CSS determines the look and feel, it should always be loaded as early as possible. It is always defined in the head section of our HTML page, so that it is loaded before the content.

Let’s write some CSS styles to achieve the following:

  • Configure the images to occupy 100% of the column (so that it will not overflow when we resize the screen)
  • Remove the extra spacing around title, location and price.
  • Change the text of location to UPPERCASE
  • Set the font size of location to 12px, title to 16pxprice to 14px
  • Set the font weight of location and title to boldprice to 400
  • Set the text color of location to brown

It looks like a lot of tasks isn’t it? But it can be easily translated to CSS styles, and give our site a good face lift.

You If you look closely at AirBNB site, or most of the modern looking websites, they actually don’t use black as the primary text color. Instead they use dark grey as their primary color. That’s what the body style is for, we set it to a RGB color of (72,72,72). Now, enter the entire style tag in your head tag.  The tour item at your website should look like the screenshot below now. Note that the location has changed to all UPPERCASE automatically. The font size and font weight are also applied correctly.

Booking Function

Our site looks good now and we have populated the necessary details for tour and accommodation. Next we are going to include a booking form to capture our guest details and allow them to select the tour and accommodation that they want. First of all, let’s build a booking form like the one below.

The booking form contains four input elements that collect name, emaildate and number of days. There is a submit button that will send us an email with the booking details.

 

To create the form, we will use the form element. A form can then consists of input elements such as textbox, checkbox, radio buttons, buttons for us to capture user inputs.

Also, when we use a form, we will set the method property  POST in most cases, and the action URL determines where should the form data be sent to for processing. In this example, we will send the form data tohttps://formspree.io/drlau@thelead.io. This is a handy external service that will forward your form data to the email address stated (in this case, it will be sent to drlau@thelead.io)

The placeholder property displays a hint when there is no content for the input. The different type of the input field will determine how it will be rendered (e.g. a date picker for the date field, a spinner for a number field).

The hidden field is a special field. It can’t be seen by users, but it can be used to store data that will be sent together with the field. Since it is hidden and not be seen by users, it is mainly used to submit information that is not entered by the visitor. In our case, we use it to store the tour item that is selected.

Handling Item Selection with JavaScript

The last bit that we need to handle here is what should happen when an item is clicked. Let’s see what should happen where a button is clicked:

  • Deselect the item that was previously selected (if any)
  • Select the current item
  • Extract the value of the selected item and store it in the hidden input, so that it will be submitted together with other input elements.

Final Check

Ok, all of the things are wired properly. If you have been followed everything step-by-step correctly. You should see the page like this when you refresh your browser (with index.html opened).

Final look of our booking site

Final look of our booking site

 

We hope that you learn a lot and manage to pick up the knowledge required to book a functioning booking site. You may visit http://theleadio.github.io/airbnb_demo_2018 for the full demo and https://github.com/theleadio/airbnb_demo_2018 to download the source code. Do let us know in the comments if you have any questions and queries!

For those who wants to become a full stack developer and advance your career, We are conducting a Full Stack Web Development 360 hybrid program. You will learn more advanced HTML, CSS and JavaScript techniques, Bootstrap, VueJS, JQuery framework and many other tools to launch a full stack website. For more details, check out https://www.thelead.io/full-stack-web-development-360!

X