Overseas Zameen is a website that connects overseas Pakistanis with properties in Pakistan. Whether you want to buy or sell a property, Overseas Zameen can help you find the best deals and services. This website is a product of The Teksol, we create amazing and user-friendly websites using the latest web technologies. In this blog post / article, we will tell you how we built Overseas Zameen an overseas property investment website using some of the most popular and powerful web technologies today.
The Web Technologies We Used
We used a combination of different web technologies to create Overseas Zameen, such as:
1. JavaScript frameworks
These are tools that make it easier and faster to develop JavaScript applications. JavaScript is a programming language that runs in the browser and makes the web pages interactive and dynamic.
2. Font scripts
These are tools that let us use custom fonts on our website. Custom fonts can improve the look and readability of website, and make it more unique and appealing.
3. JavaScript libraries
These are collections of code that perform common or specific tasks. JavaScript libraries can save us time and effort, and enhance the functionality and usability of website.
4. UI frameworks
These are tools that provide ready-made components and templates for designing and developing the user interface of websites. UI frameworks can help us create a consistent and attractive look and feel for our website, and make it responsive and compatible with different devices and screen sizes.
Let’s take a closer look at each of these web technologies and how we used them to create an overseas property investment website “Overseas Zameen”.
#1- JavaScript Frameworks
We used two JavaScript frameworks for Overseas Zameen: toastr and core-js.
i- toastr
toastr is a JavaScript framework that lets us display notifications or messages to the user in a simple and elegant way. We used toastr to show alerts, confirmations, errors, and success messages to the user when they perform various actions on the website, such as:
- Registering
- Logging in
- Searching
- Adding
- Deleting properties
toastr is easy to use and customize, and it supports different types of notifications, such as:
- Toast
- Growl
- Snackbar
ii- core-js
core-js is a JavaScript framework that provides polyfills for modern JavaScript features that are not supported by older browsers. Polyfills are code snippets that emulate the behavior of newer features in older environments.
We used core-js to ensure that our client’s website works smoothly and consistently across different browsers, especially Internet Explorer, which does not support many of the latest JavaScript features. core-js is modular and comprehensive, and it covers a wide range of JavaScript features, such as:
- Promises
- Symbols
- Iterators
- Generators
- Maps
- Sets
- And more
#2- Font Scripts
We used two font scripts for Overseas Zameen: Google Font API and CDN.
i- Google Font API
Google Font API is a font script that lets us use fonts from the Google Fonts library, which is a collection of over 1000 free and open source fonts. We used Google Font API to select and apply fonts to our website, such as:
- Roboto
- Montserrat
- Lato
Google Font API is easy to use and integrate, and it offers a variety of font styles, weights, and languages. You can browse and choose fonts from the Google Fonts library on its website.
ii- CDN
CDN stands for Content Delivery Network, which is a network of servers that deliver web content to the user based on their location, device, and browser. We used CDN to host and serve our custom fonts, such as:
- Font Awesome
Font Awesome is a font script that provides icons for various purposes, such as:
- Social media
- Navigation
- Communication
We used Font Awesome icons to add visual appeal and functionality to our client’s overseas property investment website, such as:
- The search icon
- The menu icon
- The WhatsApp icon
CDN reduces the loading time and bandwidth of websites. We used three CDN providers for Overseas Zameen:
- Cloudflare
- jsDelivr
- cdnjs
You can find more information about these CDN providers on their websites.
#3- JavaScript Libraries
We used four JavaScript libraries for Overseas Zameen: Slick, Select2, metisMenu, and jQuery.
i- Slick
Slick lets us create responsive and customizable carousels or sliders on our website. We used Slick to display featured properties, testimonials, and partners on our website, and to allow the user to navigate through them with ease. Slick is flexible and powerful, and it supports various features, such as:
- Autoplay
- Fade
- Dots
- Arrows
- And more
You can see some examples of Slick carousels on the website.
ii- Select2
Select2 is a JavaScript library that lets us enhance the functionality and appearance of select boxes or dropdown menus on websites. We used Select2 for our client’s overseas property investment website to create searchable and filterable select boxes for the user to choose the city, area, property type, and price range of their desired property. Select2 is user-friendly and customizable, and it supports various features, such as:
- Multiple selection
- Tagging
- Templating
- And more
iii- metisMenu
metisMenu create collapsible and expandable menus on websites. We used metisMenu to create a sidebar menu for the user to access different pages and sections of website, such as:
- Home
- About
- Services
- Contact
- And more
metisMenu is simple and lightweight, and it supports various features, such as:
- Animation
- Icons
- Active states
iv. jQuery
jQuery is a JavaScript library that simplifies the manipulation of the HTML document, the handling of events, the creation of animations, and the communication with the server. We used jQuery to write the main logic and functionality of website, such as:
- Validating forms
- Sending requests
- Receiving responses
- Updating the user interface
- And more
jQuery makes the code more readable and maintainable. You can learn more about jQuery and its features on thier website.
#4- UI Frameworks
We used one UI framework for Overseas Zameen: Bootstrap.
i- Bootstrap
Bootstrap is a UI framework that provides a collection of HTML, CSS, and JavaScript components and templates for creating various elements of website, such as:
- Navigation bars
- Buttons
- Forms
- Cards
- Modals
- And more
We used Bootstrap to create the layout and structure and to apply styles and colors to our elements. Bootstrap is easy to use and customize, and it supports various features, such as:
- Grid system
- Responsiveness
- Accessibility
- And more
Conclusion
We hope you enjoyed reading this blog post / article about how we built Overseas Zameen an overseas property investment website using modern web technologies. We are proud of our work and we hope you like our website. If you are an overseas Pakistani looking for a property in Pakistan, or if you want to sell your property to overseas Pakistanis, please visit our website and contact us. We will be happy to assist you and provide you with the best service possible. Thank you for your time and attention.
