How to code your own landing page

Editor’s Note: This is an event recap by Michaela Deneva from an event we hosted in collaboration with Le Wagon earlier this school year. 

She’ll walk you through the basics you need to understand about coding your own landing page, including sample code and screenshots. 


 

Qu’est-ce que Le Wagon? Le Wagon is a coding school..for entrepreneurs! Their mission? Bringing technical skills to creative people.


⦁ Interested in starting your own startup?
⦁ Thinking of changing your career?


If you answered YES to either of those questions, then the 9-week coding program offered by Le Wagon might be THE challenge to embrace! What’s in it for you? A unique opportunity to create a product, code it from just an idea and pitch two weeks later.

During a 2-hour workshop, Victor from Le Wagon introduced us to the basics of HTML and CSS, and showed us just how fun it can be to code your own landing page. The online presence of a startup is an essential marketing and advertising tool. When it comes to creating your landing page – the face of your business and the first page customers are exposed to on your website – it is important to employ the 4 C’s: Clear value proposition. Clean design. Call-to-Action. CRM first milestone.

Not all of those are necessarily achieved through coding. There’s a variety of tools that business owners can use instead, such as LaunchRock, Strikingly, Squarespace, Unbounce, etc. In fact, it is difficult to code a landing page for many different platforms and ensure the same quality for each. For example, a tablet vs a laptop version. In terms of setup, Google Chrome and Sublime are the recommended basics to build your page from scratch.


 
The three coding languages which are commonly used for web design are HTML, CSS and JavaScript. Each helps manipulate the page content in a specific way. HTML is used to structure the content. As Victor said, without structure, there is no design. If we were to refer to the example of a house, coding in HTML is “creating the four walls of the base”.

Next, CSS is used to design the content, specifically fonts and color. A popular library is Bootstrap. Note that writing the CSS part of the coding within the HTML code is bad styling. In addition, deleting the head part of the HTML code would cause a lack of organization on the page and there would be no design. A useful tip on how to avoid these mistakes is calling the Chrome Inspector which allows you to view the code of the page you are currently on. On a Mac it can be called through the CTRL+OPT+I shortcut. Last but not least, JavaScript is used to add animations.
 
The skeleton of a landing page using all three languages looks the following:

<!DOCTYPE html>
<html>
          <head>
        <!– html code –>
          </head>
          <body>
                   <!– Stuff to display–>
          </body>
</html>
<!– end of file –>


Precise indentation of the HTML code is recommended to facilitate the correct distribution of displayed content. Syntax-wise the core has four elements:

In the content attribute, a paragraph can be added with <p> or </p>. Emphasis is shown with <strong> or <em>. A list is added with <li>, and an image needs to reference the specific name:

As already mentioned, employing CSS helps us choose the right font and color for our content. Typical CSS vocabulary is:

When it comes to colors, each one has a specific color reference. Black is 0, and white is 255. The desired color shade can be achieved by playing around with the numbers. Fonts can have many characteristics, some of them are:

We have all experienced it ourselves or at least heard of the way AirBnB operates, and more specifically its website. There is a series of pictures with info underneath and customers can select the desired picture which hyperlinks to an accommodation listing. This “hyperlink” option is also called a div. The div & box model is just what it sounds like: an image with a margin in a bordered box. The box itself can be designed differently. The border can be solid, dashed or dotted. The shadow can be in different pixels or blue. And where do we get the perfect pictures from? We don’t want .png or .jpg files. We need a font of icons which we can easily find at Fontawesome.
 
Next is the grid system. In other words, how is your landing page distributed and viewed on different platforms. It is necessary to build a solid framework to ensure the same quality on each screen. To do so, you need to create a “box” called a container which contains several rows. Then the rows are filled by cols (an abbreviation for columns), or also called the elementary blocks. There are four media definitions:

Each screen can only accommodate a certain number of rows and cols. For example, a 4-col layout can be represented as follows on a phone and a tablet:

Enjoyed reading about the basics of designing your own landing page? For detailed steps on how to start coding your own, please visit Le Wagon’s GitHub. If you wish to go even further, check out Le Wagon Montreal! Happy coding, everyone, and remember..no structure equals no design!

 

 

Dobson Chronicles

Dobson Chronicles

The Dobson Chronicles is the official blog of the McGill Dobson Centre for Entrepreneurship.