There are two main roles in the online world: content creators and coders. The content creators write copy, craft illustrations, and dream up tools that consumers will either pay (or endure ads) to enjoy.
The coders make sure that the content reaches the masses. These individuals create complex systems that serve up content—as efficiently as possible—and they make it look pretty in the process.
If you're a content creator like me, who sits in awe while proficient coders clack away at their keyboards, designing landing pages and web apps, then this short guide is for you.
Why a Hack-it-Together Mindset?
You don't need a translator to understand code. The basics are actually, well, pretty basic. With a little exploration, you can pick up the skills you need to construct your own HTML page or make changes to your site's text size, font and layout. It'll take an investment of time—at least a couple evenings—and an enthusiasm to quickly get your hands dirty, but it's doable. That's how I came to this point, in which I don't quite call myself a developer, but I like to say I can hack together whatever's needed.
Once you adopt a hack-it-together mindset, the ways in which you can apply it open up immediately: build a landing page for your next marketing campaign, boost the virality of your upcoming launch, or automate parts of your Twitter engagement. If an obstacle (or opportunity) presents itself and you're willing to dig in, anything's possible.
When you do so, you'll find the basic workflow is often the same. First, you clearly define what you want to do. Then, you search for existing code and tutorials that help you piece together a functional solution. Think of it like the Lean Startup methodology applied to learning—instead of putting money into a programming education, learn only the mimimum skills you need to improve or build your target product. Do that today, learn more next month, and more the next month, and soon you'll surprise yourself with how much you can do with curly brackets.
This post helps get you started down that path by putting up a challenge—create a marketing page for a new product—giving you tips along the way, and pointing you to resources where you can learn more.
Before You Begin
In the next sections, I'm going to walk you through building your own landing page for a fake product. You can skip straight there, or you could start by working through some HTML and CSS practice first.
If you haven't, take a few days and work through Codecademy's class on HTML and CSS. It's one of the quickest ways online to get a basic understanding of the two languages. For bonus points, continue on through their courses on JavaScript and JQuery, so you get a grasp on those, as well.
The limitation of Codecademy, however, is that they don't make it very easy to transfer your knowledge out of their environment into a project of your own. That's where the "hacking it together" comes in.
If you want to get more practice with HTML and CSS, you can go to JSFiddle to try building basic pages. Use it to explore how the different elements affect the page layout, and play around with making some basic layouts. If you want a very simple example, try a sample starting layout. You can also add your own JavaScript.
Challenge: Build a Landing Page for Bro
Landing pages are one of the simplest ways to test a new idea, gather interest in an upcoming product, or start building an email list for a business. Normally, you'd need to ask a colleague to build one for you, pay for one to get built, or use a template landing page builder like Unbounce. But at the end of this tutorial you'll be able to build one yourself.
The best place to start building a landing page isn't from blank page. Instead, it's from someone else's work—as in, you can actually use someone else's code to build your own landing page. If this feels like a shortcut or cheat, it's because it is one—remember, the goal here is to simply complete the project, not do so in a way that would win you awards. And to do this, you're able to rely on the kindness of other developers who have shared their code.
1. Scope the Project
Let's figure out what we're building. If you want, use this tutorial to design a landing page for your own product or business, but in case you don't have one to work with, let's pick an imaginary product and go with that.
In Silicon Valley, Season 2, one of the characters is working on an app called "Bro" which is essentially a "Yo" clone that lets you send the message "Bro" to your friends. Just for fun, let's build an initial landing page for the app.
2. Find the Code
Now that we know what we're building, we need to find the pre-written code. SOMA, a water filter startup, ran a successful Kickstarter camaign in which they employed a simple landing page to encourage people to share their campaign in order to help make sure that it received funding.
Afterwards, they put the code for that landing page online, free for anyone to download and use—all of the HTML, CSS, and JavaScript you need to run the webpage in one folder. Click "Download ZIP" and after it's downloaded, unzip it, open the "share" folder, and then open its four files with a web programming focused text editor.
If you don't have a programming text editor, download Brackets for Mac or Coffee Cup Free HTML Editor for Windows. The benefit with both of these is that they let you see a "live preview" of the site as you're building it.
Once you've opened the code with the editor, enable the live preview. You'll see the basic SOMA referral page that they used, but when we're done with it we'll have tailored it for the "Bro" app or for your own product.
3. Edit the HTML
If you open up the "index.html" file in your text editor, you'll see the HTML that SOMA uses on their landing page.
You'll see a number of the most common HTML elements:
Start Tag | End Tag | Element Content |
|---|---|---|
<h1> | <h1> | Header tags, which range from h1 (largest) to h6 (smallest), tell the page that something is a header element. |
<p> | </p> | Paragraph tags tell the browser that the text is a paragraph or general body text |
<a> | </a> | Hyperlink tags create a new link within the text using the format <a href="http://www.yoururlhere.com/"> your hyperlinked text</a>` |
<b> | </b> | Bold tags bold text between the them |
<i> | </i> | Italic tags italicize text between the them |
<br /> |
| Line break tag, which doesn't need a start and end tag, inserts a line break |
To start Bro-ifying the page, change the <h1> text to Support Bro with Three Clicks! and the page <title>, which determines what shows up on the tab at the top of your browser, to Bro - Share.
Farther down, you'll see the main body text for the page within a <p> tag that says <p id="welcome">. Don't worry about what the id part yet as we'll explain that soon. Within that <p> tag though is all of the body text for the web page. You can set it to anything you want, but for Bro, insert the following:
<b>Hola, rockstar!</b>
<br />
<br />
We hope you're having an awesome day. You're here because we know you have influence. When you share something, people pay attention. So, please take a few seconds to tell a bro about Bro.
<br />
<br />
<b>Thanks so much,</b>
<br />
Nat
Below that text, you'll see HTML tags <ul> and <li> which create the three separate sharing sections as an "unordered list." If you want to change the text on any of the sharing buttons, just edit the <p> text within the <li> sections.
For example, we can change "Share Soma with your friends" to "Share Bro with your friends." And "Thank you in advance for backing Soma" to "Thank you in advance for backing Bro."
Feel free to change anything in the structure that you want, and keep updating your "live preview" to see how your changes are affecting the site. You don't have to use the exact structure they used, you could even add in new blocks, or a video, or anything else.
4. Edit the CSS
If HTML is the skeleton of the page, the CSS is its skin and clothing; it sits on top of the HTML and makes the site look nice. CSS stands for "Cascading Style Sheets," and it's a text file just like HTML but written specifically to modify an HTML document.
Once you've played around with your HTML of the SOMA page, switch over to the "share.css" file to start editing the CSS.
CSS documents aren't structured in an order like an HTML or JavaScript document. Think of a CSS document as a collection of rules. The first line (usually saying something like p, .welcome, or #header) tells the web browser which part of the HTML to style, and is called the "selector" for that line.
If a selector starts with a ., it's a "class" as defined in the HTML, and if it starts with a #, it's an "id" as defined in the HTML. Remember from above when you saw <p id="welcome">? Well, that means that if you add a line for #welcome {``} in the CSS document, it will only affect that paragraph element.
Then everything within the curly brackets { } provides the rules for that element, such as the text color, amount of space between the lines, and more.
Remember, if you're not sure what an element does, you can either look it up on W3Schools (a popular reference site on web programming) or just try changing it and see what happens. That's half of the fun with hacking things together—making small changes and learning through experimentation.
For this SOMA referral page, there are a number of page elements you could try changing. For example, you could:
Change the color of the bar behind the heading in the "h1" section to
blueChange the color of the heading text also in the "h1" section to "
FFFFCCwhich will make it cream coloredChange the color of any other text in the "body," "h2," "welcome," and "button" sections to anything you want, try
DarkGrayMake the progress bar a different color in the "#progress" sections, such as
DeepSkyBlue
You could even add your own elements in the HTML and then try giving them custom styling in the CSS!
5. Play with the JavaScript
The third part of the SOMA code you downloaded is the "share.js" file, which houses the JavaScript that the page needs for the buttons to work. JavaScript (JS, for short) is a web programming language that lets you add additional functionality to any part of a web page based on user input, whether that's moving elements around, changing the CSS of different elements, or in this case making the progress bar increase.
The three portions of the code that start with $('.(something)').on('click', function() { define the rules for each of the buttons: the Facebook button, the Twitter button, and the Play button. They tell the page where to send you when you click on them, and it tells the page to increase the progress bar whenever one is clicked.
Within each of those blocks of code, you can find the URL that the button is sending people to. All you have to do to make this JS code work for you is replace those URLs with your own share URLs, and you'll be good to go!
You'll also want to change the "Title" in the Twitter button section, since that determines what text gets tweeted with the URL.
Once you've changed the JS, HTML and CSS, you'll have put together your own referral page without any major HTML or CSS knowledge. There's no need for taking weeks to learn the intricacies of the language, instead projects like this can put you on the fast track.
3 Tricks to Get Unstuck
Don't worry if you run into an unfamiliar HTML or CSS element, it's bound to happen. Just plug that element into Google and you'll usually end up on the corresponding W3Schools page that explains what the element does and the different attributes you can pass into it.
At the same time, you can also usually Google a question like "How do I center a picture using CSS?" and there will be a corresponding Stack Overflow (the most popular Q&A site for programming) answer for you explaining how to do it.
Using those two resources, you can figure out just about any HTML or CSS you need to know.
Another option is to go to someone else's site and figure out how they did something using "page inspector." If you're using Chrome, Firefox, Safari, or Internet Explorer, then you have the ability to view the HTML and CSS powering any webpage that you're on. In Chrome and Firefox you can right click and select "Inspect Element." In Safari, you'll need to enable it in your preferences. For Internet Explorer, you'll need to add the developer toolbar.
Whichever browser you use, it will open up all of the HTML and other code that dictates the page's look and interactive elements (called the "frontend") of the webpage so you can scroll through and see how it's structured.
The other fun thing about this is that you can alter the appearance of a web page (though, only for your personal browser). For example you could go to CNN, right-click on a headline, click "inspect element," then change the HTML for that text to be something ridiculous. Or you could make it a different color.
Hacking Other Things
You now have a basic idea of how you can use existing resources and tools to figure out some basic programming knowledge in the context of building a simple landing page. If you're building a site using WordPress or another web framework, for example, use this new knowledge to customize the CSS to your exact specifications.
You should now also be able to take this method of learning—finding other people's code, playing around with it, and Googling the parts you don't know—to learn almost any basic programming skill and to start hacking together some of your own solutions. If you want ideas, check out the popular lists of programming projects, assembled by Karan Goel on GitHub, to give you a jumping-off point. And if you find any other good introductory code snippets to play around with, please drop links in the comments!
