Submitted by Heisenberg on Sept. 17, 2018, 8:27 p.m.

Tutorial-------Build your own website part 2


The Basics
HTML is short for HyperText Markup Language basically HTML is the core behind a website, every website has it. HTML is the code that makes the website, the end user will see the visual or audible side being the final display after the server has called the files forward. HTML is one of the basis that any website is created from, you can make Tables, Links, Headings, Paragraphs and much more with the use of HTML. HTML is a text code, which is easy for anyone to understand with little to no knowledge about it. It was released in 1993 when the World Wide Web was just created making it one of the oldest languages to learn. As time has gone on HTML has changed and evolved with the internet, currently we are on HTML5.

CSS is short for Cascading Style Sheets, like HTML this is one of the core parts of a website. CSS allows for the user to add internal CSS meaning it's limited to that page or external, where it is linked to all pages. Cascading Style Sheets go a long way in a website as they make the visual view more appealing. coloring links, adding a background color to the website and even decided what color headers and paragraphs are. It keeps them all on record and when the web page is called forward from the server the CSS is also called and it links into the website putting the rules into the display. Cascading Style Sheets were first introduced to websites in 1996 as a Style Sheet Language. CSS usually have the extension of .css.

Client Side Scripting
JavaScript is a programming language between HTML and the internet. It was first released in 1995, over 20 years ago. JavaScript crosses over a program and the web, like if you had to image creating a standard program, how the button looks is what it would look like on the web. Like in say Visual Basic (programming) you can have Arrays, Loop While, Booleans and Loop For. JavaScript introduces them to your website allowing you to make your website more user friendly and also allows the end client to interact with your website. JavaScript however does go beyond the web and just programming it's used in your computer. Such as your widgets on your desktop and PDF files.

ActionScript is one of the siblings of JavaScript both of them were developed based around HyperTalk. The difference is that ActionScript is an object-orientated programming language apposed to JavaScript which is a dynamic programming language. ActionScript is the controller of 2D vector animations which are generally made using Adobe Flash, it's been used with Flash since Flash Player 2 and all the way to Flash Player 11.8.
ActionScript was founded in 1998 only three years after it's sibling; JavaScript.

Server Side Scripting
PHP in it's early days stood for Personal Home Page but later was changed to PHP: Hypertext Preprocessor. This is one of the most common Server-side script languages as it is used on over 200,000,000 (200 million) websites to date and over 2,000,000 (2 million) website servers. Like many of the other big languages PHP was developed and released in 1995, mover 20 years ago. PHP mixes in with HTML, you can have a web page with HTML and PHP on it. An example of this would be Hack Forums, it has the HTML for the text and PHP for displaying usertitles.

Java is an old one too, developed and released in 1995. This has become one of the most popular choices for both it's server and client-side workings. Java is a general computer programming language that is mainly object-orientated. A little like ActionScript. In terms of website development Java is coming up in the ranks as recent polls have shown that there is more than 9,000,000 (9 million) Java developers who use it on their website.

Python is such widely used in websites today but not many people realise it's use on their own websites. Pyramid, Flask, and Django are the three that you will probably have on your website but don't actually know anything about. Python is a high-level programming language. Lets talk about Pyramid for a second, Pyramid is a server-side scripting that is linked to Databases, most commonly the MySQL database but it can be used on others such as Zope Object Database and CouchDB.

Ruby was developed in 1995 by Yukihiro Matsumoto. He originally created Ruby to be for the programmers productivity and fun but most importantly to show good user interface design for the websites. Ruby is a general level programming language and is object-orientated

Early Development

Business View
You always ask questions during the brief otherwise it's your own fault!
Lets took at this from a business point of view, before you can start work on the website you need to know what you're doing right? We refer to this as a Brief. A brief is when you get the job offer and the client will tell you what they want in their website, how many pages, images, videos and they can even tell you what style they want. Clients will usually provide the text for the website and any images they want on it if it's for personal use but sometimes you will have to go and research other websites related to their needs and come up with a design similar, but not the same, and type up information for their website.

Spoiler (Click to View)
Example - image source

Personal View
You have the idea for your website now before you go ahead and try to develop it you may wish to get a brief between you and your partners of what you want the website to look like, it's contents and much more. It's not as simple as thinking the idea and diving into development, great things take time to complete. You should always brief your team or partners in on the idea and then from there work out how it's going to be completed.
Know what you want before planning it out!

You have the information you needed to begin the planning stages if you got a brief of the project at hand. This is the stage where you will begin the planning of the website with the use of basic designs of what the website can potentially look like. Remember that you need to stick to your brief when making the website, if your client was a specific color flow then you have you get that for them. You can't just make it how you please and show them. It has to be done the way they want if you want them to tell their friends about your services. Here is a quick one I made in Microsoft Word.

Spoiler (Click to View)

The purpose of this is so that you can always look back and see how your progress to your original layout was looking but keep in mind you might have an idea but when it comes to the coding you realise it doesn't work that easy and have to make some compromises on your original thoughts and designs you made. You'll want to spend some time coming up with a few different ideas for the layout and have them ready in case the client asks how the website will be set out. This also allows them the chance to see what their website will look like.

You have your brief and you have your plans, it's now time to come up with the design examples. These probably won't be used for the website but this is just a mock-up of what the website will potentially look like. You always want to have a few mock-ups before beginning work on the actual design and they should all be different to some extent. This here is one I made really quickly based off the planning example I showed above. This took no more than 5 minutes to put together but it's just an example like I said.

Spoiler (Click to View)

You have all your mocks ready in the event the client asks again to see the progress you can show them these basic, boring website templates and then show them the real preview. In reality the preview will make them surprised because the mock will make them think the website is going to be ugly and then they get amazed with the progress of the real design.


  • supertrapper Sept. 17, 2018

    yo when are you going to start selling some ebooks? i read your pen test guide. that shit was gucci. id like to buy HQ ones you have