Now, many of you may be wondering why a Web Designer/Developer would create a blog explaining how to create your very own Website from scratch. Well, the answer to that question is very simple. The reason I would like to explain the process of Website Design, not Development, is to enlighten those of you that believe creating a Website is simply a Point-and-Click way to post your Text and or Images on the World Wide Web.
As you'll soon discover — it is not as simple as that. You could, of course, install yourself a CMS (Content Management System) such as WordPress, Joomla, Drupal, CodeIgnitor and so on, but this will leave you with the risk of having to learn more than basic HTML. But why would you need to learn something you may not know or completely understand? Well, I will tell you why you should.
For 1; Security flaws. And CMS are infamous for Security flaws. Just take a look at your biggest Blogger picks on the WWW today and chances are these Blogs are using WordPress. Now, I have nothing against WP or the folk whom Develop this CMS, but the fact of the matter is more WP sites are hacked by Script Kiddies or plain old Malicious Black Hats that are just looking to take your Blog down for no apparent reason. Why? Because they can and you literally gave them the keys unwittingly to your Website.
This is 1 huge problem the modern WWW is facing today. The problem with using a standard CMS to piece together your Website, for whatever purpose your site may have, is beyond foolish. Unless you're a pyro and you prefer to play with fire. Then, by All means, install a stock CMS whilst not knowing any Web Security basics and see how long that'll last.
To give you an example, a recent Client whom had WordPress installed and was running a successful Blog had ended up losing a majority of the Website. This, of course, cost much time since the Website had many visits to posts that were no longer present after the site was hacked. This is bad. This is very, very bad. And, could cost your Website reputation points on Search Engines like Google, Bing, Yahoo and so on since your already indexed Web pages are now showing 404 Errors; Page Not Found.
Don't allow yourself to fall into the same situation. So, to prepare you for any mishaps or sudden attacks you should 1st brush up on your WWW Security skills. It wouldn't hurt to run constant backups via a CRON job or manually if you're not entirely sure how to setup CRON. Chances are if you're reading this then you don't know what a CRON is, nor a 404 or some of the other jargon I have likely spit off rambling on.
So, if you'd like to get down to the nitty gritty and learn how to get started with Web Design then I suggest you sit back, grab sum java and continue reading on... I would like to get into all the flaws and other jargon, but unfortunately I can only explain 1 thing @ a time as it will further complicate things. But, I will go back and fill in the blanks in future write ups to explain the IT jargon.
Now, to get yourself started in Web Design you will 1st need to sketch up a mockup of your GUI. Your UI is going to be the most important factor to a Great site and if you're lacking a Great Design then there is literally no point continuing any further. If you're not sure how to Design a User Interface you can scour the WWW for examples and take what you like and place them into your drafted mockup.
Once you have your mockup drawn out you can now begin to Design these elements in
<code> — this code can be written in an array of languages depending on what your Web Host allows, but since this is pretty much a crash course into Web Design we should start with Good old HTML, Hypertext Markup Language. HTML is like the basic building blocks for a Webpage and is still translated the fastest versus other Markups.
So without further adieu — lets dive into some basic HTML. To start you will need to create a new UTF-8 document. You may use a basic text editor such as GEdit, Notepad, etc. If you'd rather dive into a more complex and code oriented Editor you can look into Apps such as Atom, Sublime, Notepad++, VisualCode, etc &mash; in either scenario you must save these in UTF-8 format.
Now that you have decided on your editor of choice; create a new document and name this index.html and Save. Saving is as important as backing up your Website data. You will thank me for this in the future if you're decided to use a CMS and are blind sighted by an attack and lose site functionality or even worse; a total loss of the Website.
Our 1st line in this newly created index.html will denote our Document type which we've already established is going to be HTML. So, we would type across the top of this document
<!DOCTYPE HTML> This will now instruct the Web Host that the content to be delivered is an HTML page. But, this is not all.. we must now create our basic building blocks within the Webpage which includes the HTML, Head and Body.
So our 2nd line of code will be
<html>. This is where our Head and Body tags will go to format our data for the Webpage. Next comes the
<head> which begins the portion for our Head data, which includes things such as meta variables, CSS+/JS links, etc and is followed by
</head> to close the Head tags.
The next logical line is our
<body> tag which is where we would type our plain jane ASCII that we wish to display on our Webpage, for Example; "Hello World!" and follow this by a
</body> to close our Body tags.
And finally to close the Webpage HTML tag we end with a
</html> that marks the end of our very basic HTML page. Now, if we wish to view our Webpage to ensure that everything has worked out as we hoped we can open the index.html in any Web browser and we should see the words, "Hello World!".
And our next step would be — styling with inline CSS or linking an external CSS to help add a bit of flare to our newly created Webpage.