Building/Coding The Real Estate Luxury Collection Landing Page

The Challenge

Working with one of the largest real estate brokerages in Georgia, I helped their marketing team design a landing page that incorporates new elements of their refreshed brand guidelines as well as deliver a satisfying user experience that converts traffic from Google Ads into potential leads.

With the design approved after a thorough meeting, it was time to begin developing, or building, the landing page.

The Goal

When it comes to developing, or coding, a website or web page, it’s imperative that a page is built with speed and user experience in mind. With that said, it was critical that the landing page was built in a timely manner to launch a few short days later.

The Approach

Firstly, let’s talk about the languages used in building the landing page. I primarily used HTML and CSS for the structure and the facelift portion of the landing page. I then used vanilla JavaScript (no frameworks) to add the modal/popup functionality to the toggleable buttons that revealed more content for the services section.

The first thing I like to do when building a page from scratch is set up the HTML that will be used on a section-by-section basis. In this case, I began with the hero banner with the logo, h1 tag, p tag and button. I like to use a 2-div approach for my sections - one “main” div and one “content container” div. This allows me to be restrict divs, or boxes, from overextending across larger screens when necessary and they provide a visually appealing structure. See the diagram below as well as the code snippet for more details:

Generally, every section has a consistent CSS format: outer/main div is set to 100%, the content container is set to 80% and has a max width of 1200px with the content being centered and ample amounts of padding on top and bottom. See below for code snippet:

Once the styling has been applied to the HTML document and I optimize the page for mobile and tablet devices, I then turn my focus on applying the functionality of the page using JavaScript. With this landing page, the amount of JavaScript was kept to a minimum, but I did decide to take the longer route of completing the project by targeting specific Services button elements in comparison to using a JS for loop.

After completing the JavaScript portion of this landing page, it was then time to pass to the marketing team for final approval and final changes (if any).

What's The End Result?

Not only was I responsible for the design of this landing page, but I was also responsible for the development of the landing page. One of the benefits of being a designer with front-end development capabilities is the fact that I begin preparing my approach to build a site or page during the design phase. In this case, once the design was approved for development, I got straight to work and was able to complete the development in under 3 business days (including other projects/tasks that were coming my way). The client was very satisfied with the end product and they now are using this same page in part of a larger ad campaign.