In my last post, I discussed how to create a landing page without touching any code. This post is a beginner’s introduction for those who want to get their hands dirty with programming and code a landing page. In order to create a landing page from scratch, the minimum programming skills you’ll need to have are some degree of versatility in HTML and CSS, and how they factor into creating your landing page. This post doesn’t cover how to register and configure your website name nor does it cover how to actually host a website, rather it is focused on introducing you to the two basic programming languages required in creating a rudimentary landing page.
In our opinion, with the sheer amount of easy-to-use landing page creator tools available on the web, the majority of people interested in landing page should not be programming their own landing pages from scratch. However, if your interest is to become better versed in using programming to create real websites then creating a landing page from scratch is a useful exercise as it will teach you fundamentals across a few different web topics.
HTML
Hypertext Markup Language (HTML) is the coding language you use to instruct your website to do certain things and appear a certain way when visitors access it. It is used to help define the page layout. HTML uses HTML tags to do things like deciding the layout of deadlines, brand logo, images, bullet points, numbered lists.
All landing page elements must be listed with the appropriate HTML tags in order for it to translate onto the webpage. If done correctly, your lines of HTML code and the resulting web page should look similar to the images provided. For a better understanding of HTML, try out this Codecademy course.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of the HTML elements on the webpage. While HTML describes the content on the page, CSS defines the style of the page, for example, the font and color of the landing page copy. Changes can be made to the appearance of the page without going through every single stylesheet. For a better understanding of CSS, try out this Codecademy course.
Combining HTML and CSS to Create a Landing Page
Now that you know some of the basics of the two languages needed to create a landing page, the next step is using them in conjunction to create your desired landing page content and design. Since you will be programming in HTML and CSS, you need to start with plain text files. MS Office and OpenOffice can’t be used when dealing with HTML and CSS programming, because these programs produce files that a web browser will not be able to read. Basic text editor programs like Notepad (Windows) and TextEdit (Mac) will work fine. Make sure to save your files with the ending .css or .html based on what type of programming language was used for that particular text file (ie: test.html, mystylesheet.css).
To start creating your basic landing page, open your text editor and type out your HTML code. The first iteration of your code should look similar to the following image:
The next step is personalization. This is where you alter the appearance of your page with the help of CSS. Add code to the “head” part of your HTML file to change the color of your page. Your code should look similar to the following image:
To personalize the page more, you can change the font on your webpage. The code you add to your HTML file should look similar to the following image:
Once you have added and altered the code to your satisfaction, you will have completed your first basic landing page. It is important to note that this is a very basic form of a landing page and a truly high conversion yielding landing page would be a lot more detailed. Creating your own landing page from scratch will take time and practice. Keep working at it and you will become more comfortable with your programming skills.
If you’re interested in learning how to develop using HTML outside of just landing pages, we suggest checking out One Month.
Conclusion
If you are having a hard time starting from scratch, but would still like to create your landing page using code there might be another option for you. Nathaniel Eliason, a writer and co-creator of Programming for Marketers, has put together a step by step guide on how to use someone else’s code to build your own landing page.
If you have changed your mind and no longer want to create your landing page using code, content marketer Fahad Muhammad has created a step by step guide on how to use Instapage to create a landing page without using any code at all.
If you have any questions about HTML, CSS, landing pages, or even whether this type of digital marketing strategy is appropriate for your needs, send us an email!
