Create Your Own Webpage in Under Ten Minutes
The biggest obstacle for most people when they start getting into web development is that it seems obscure how to go about creating a reasonably nice-looking webpage, nevermind a website.
These insights will help you create and flesh out your online projects infinitely faster than it took for me to start initially building mine from scratch.
1-Get yourself a better text processor than Notepad (should take about 2 minutes)
Sublime Text is a great resource for this, and while you think you’re getting it for the evaluation period only, the fact that it’s not compulsory to register basically makes this freeware. Do try to help the makers if you can with a tip, as this is a great code processor that works so much more efficiently than Notepad for code: it can match your opening, and closing tags, and autofill in certain code functions. It should take you about 2 minutes to set it up.
Open it up, and you’ll see it’s a flashier version of Notepad, that can be used accordingly. If you’re on a Chromebook, try Caret instead, or look around for any text processor. You can even stick with Notepad if black text and white space are your thing.
Sublime with code(love)
2-Start a new file in Sublime Text or your word processor, save it as index.html (should take about 2 minutes)
Now it’s time to do some coding work. You can begin by starting to type with a <HTML> tag, then a <head> tag, then wrapping in the title of your webpage by writing as follows: <title>Your title</title>. Then end it with a closing head tag. Finally wrap it up with a closing </HTML> tag—but always make sure that is your last line! Your head should look like this:
<html> <head> <title>Your title.</title> </head> </html>
Save your new file as index.html, in a folder that comprises your project name.
3-Copy and paste some front-end template elements in, link to the template at hand, and play around with the text (should take about 4 minutes)
You’ll want to download a front-end CSS framework if you want to build things rapidly. CSS frameworks style things for you, so that you can just refer to already existing style classes and IDs located in the files you downloaded. Popular frameworks include Bootstrap, Foundation, and Semantic.
For our purposes, it will be good to use Bootstrap, but the others will work according to the same theory. Bootstrap is one of the most popular front-end frameworks, developed by Twitter programmers to simplify their work with Twitter’s interface.
Bootstrap with code(love)
Download Bootstrap here. Unzip all of the files into the same folder as you saved index.html. Now, modify index.html, by including a link to the CSS bootstrap style sheet in the head.
This entails copy and pasting <link href=”bootstrap.css” rel=”stylesheet”> somewhere after the </title> closing tag, but somewhere before the </head> closing tag.
Your head should look something like this:
<html>
<head>
<title>Your title.</title>
<link href=”bootstrap.css” rel=”stylesheet”>
</head>
</html>
Now let’s open the body tag. <body></body>. Always remember that the closing </HTML> tag has to end the whole thing, so move that to the bottom.
Stick a Bootstrap template in between: in this instance you can go Jumbotron mode, right click and then click on view page source, and copy/paste everything between the <body> opening tag (at line 29) to the </body> closing tag (at line 98). If you don’t like that look, check out the rest of the templates. Customize it by playing with the placeholder text within the body tags, and by adding components.
Your last two tags should be </body> and then </html>.
4-Save on Google Drive, and manipulate your new webpage! (should take about 2 minutes)
The entire walkthrough can be accessed here.
Create a public Google Drive folder. You can do this by right clicking on the folder, and then clicking the Share button on the dropdown menu that pops up, then switching the settings so you are sharing with everybody on the web by changing the default private setting.
Upload your HTML document along with all other files in your project folder (which should include your CSS files) on a Google Drive folder. These files should take on the public properties of their parent folder after Google prompts you to ask if you want to upload and share—click on the blue button as this is the case. If you do not, you will not be able to preview your documents.
Preview your document by clicking on the file in your Google Drive, then clicking the blue “Open” button at the bottom right, then clicking the preview button on the top left corner of the HTML Google Document. The corresponding hyperlink on top can then be copy & pasted and shared with others, so that they can view your work as well!
Google will be doing all of the legwork of hosting for you. It may take a while for Google Drive to process everything, so be patient if it doesn’t work at the beginning. Check back in half an hour or so.
Waiting with code(love)
If you want to see what I did with this walkthrough, click here.
You can right click and view source to see the code behind the webpage.
This is a very basic primer, and there is so much more you can do beyond this, from scripts (which you can see in the last few lines of what we copy & pasted from Bootstrap), to learning how to host on your own domain. This is only the first step, but I hope it inspires you to code, and build out those great intangible ideas you’ve had into tangible web products.
——————————————————————————
Are you excited, and want more resources to practice coding? Click here.