Baking a Sleek Website from Scratch: Part 1

1
1467

The purpose of this How-To is to show a beginner programmer how to make a modern, clean website with no excuses. We will set everything up, so you only have to worry about learning to program! At first, web development can be frustrating (although I won’t say that feeling ever goes away, just subsides), but with the right support it can be done.

We will use a PHP back-end with an HTML, CSS and Javascript (JS) front-end. What this means in a different viewpoint is that what the user (aka, the person visiting the website you are making) will see is controlled by the front-end (the graphics, animations, pretty stuff) and the “sensitive” information or operations (such as sending an email) are controlled by the brain-of-a-back-end.

There are other combinations for languages, but we will use PHP because it works very well with HTML and will provide anyone a great base for making more complex websites on WordPress, built in PHP. Once you get comfortable with this combination, you will be more easily able to go to other languages, as they are similar.

Let’s start with your to-do list (click the headline to open the instructions):

1. Get a server that runs PHP (HTML/CSS/JS are always available).

There are many ways to run a server: (1) you can download MAMP, an application that makes your computer run like a server so you can develop a website; (2) you can pay for server hosting using a service like GoDaddy; (3) find a free hosting provider.

Honestly, I recommend option #1. There is no need to spend time setting up the server– the most important piece is the website– later we can worry about the hosting. If we know the website works locally, it will work on the server, given the correct environment (there’s always an “if” when it comes to programming!).

To use MAMP, download and install the application. Open it: 1) Mac – go to your Applications folder, open the “MAMP” folder (not MAMP PRO), open the MAMP application; 2) Windows – go to your C drive, open the “MAMP” folder (not MAMP PRO), open the MAMP application. After it opens, a small window will appear, with an option to start the server (see the image below). Click start and a page should open automatically in your default web browser. Your new server is running! The URL for your website is http://localhost:8888/.

Screen Shot 2017-01-28 at 11.54.34 AM

2. Add new files to your website

The next step is to add a new file to your website. To do this, go back to the same MAMP folder where you opened the application: you will notice there is a folder called “htdocs”– this is the website, or the root (the fancy name for the highest starting point in the website tree)– open it.

In this folder, we can place all of our individual HTML, CSS, PHP and JS files. To create a new file, programmers usually use a simple text editor– using Microsoft Word or Text Edit or other formatted editors will add extra code to change the look of the file (formatted file)– when we program we do not want to format the text, just simple plain text so that the computer can read it. I recommend Sublime Text or Notepad++, this way we do not have any formatting and you get to use an awesome programming tool. These text editors are built for programming, so they highlight text with different colors and other features to make it easier for you to build your code.

Once you have your text editor, open it, create a new file with the following text:

<h1>Hello dude!</h1>

Save this file as index.php inside the “htdocs” folder of your MAMP install. Now navigate to http://localhost:8888/index.php and you will see a webpage with the text above as a heading, great job!

Notice how the text above is using HTML code, yet we are using a PHP file (you can tell by the extension on the file name: .php versus .html); this is because you can run HTML inside of PHP files– this is one of the reasons we are using PHP– to keep it simpler.

3. create other file types

Once you have created the index.php page, let’s create some other files with your text editor: style.css and scripts.js, and save them in the same “htdocs” folder as before. Be sure to add the extension, remember it is just a plain text editor, the computer does not care about extensions– those are to make it easier for humans to differentiate the files. Then add some code to each one:

style.css

h1 {color: red;}
scripts.js

alert("Hello dude!");

And change your index.php to this:

index.php

<!DOCTYPE html>
<html>
 <head>
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>

<h1>My First Random Number:</h1>

 <?php echo(rand(10,100));  ?>
 
 <script src="scripts.js"></script>
 </body>
</html>

You will notice in the index.php file that we include the style.css file using the <link> tag and the scripts.js is included via the <script> tag. The CSS file will make our heading red, the JS code will pop open an alert box when the page loads, and notice the PHP code between “<?php ?>” that echoes (or displays) a random number between 10 and 100. Save all of this code and go to/refresh  your website: you will notice the JS and CSS being applied, as well as a new, random number being generated every time you refresh the page. Cool right?

Now that you have the basic setup for a website, in part 2 of this tutorial we will show you how to put all of this together to create a modern, clean, responsive website with no excuses. Keep on keepin’ on!

 

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here