If you’ve built static sites with HTML/CSS you’d know how tedious it can get while creating many pages. But this can easily be overcome by using PHP to just import the standard sections of each page like the header, footer, sidebars, nav-bars and other such parts of the site. This allows us to just concentrate on the unique content of each page.
PHP needs a server to run. In the next post we’ll look at installing MAMP which is needed to run PHP locally. You can also just upload your php file into hosting sites that support PHP and run it like that. We’ll get into all this later.
Now let’s start with the setup required.
The first thing you’d need is a program that can help you write code easily. I highly recommend Sublime Text 2. It’s free and works both on Mac and PC. I’ll be using a Mac for these posts, but I also have a Windows PC. So if you run into some issues/errors on either Mac or Windows do contact me and I can help you solve them.
Create a folder on your desktop (or wherever you like) and call it learningPHP (Or any other name you like :p).
Next we’re going to go directly to Bootstrap’s official site and download a sample site. This will help us to avoid having to write a page from scratch. Go to http://getbootstrap.com/examples/navbar/ and then right-click on the site and click view page source. This will show you the html of the page. The html will look something like this —> view-source:http://getbootstrap.com/examples/navbar/
Copy all the content from this page and paste it in Sublime Text and save it as index.html (this is the most commonly used name for a home page) in the folder you had created previously. Now if you open the page in a browser it will look like this.
Now to add some styling, go to http://getbootstrap.com/getting-started/ and download bootstrap.
<link href=”css/bootstrap.min.css” rel=“stylesheet”>into
<link href=”css/bootstrap.css” rel=“stylesheet”>
At the bottom of the page change
<script src=“../../dist/js/bootstrap.min.js”></script> into
The way folders are setup and how the files inside a folder are accessed can get a little complex once we start using PHP. I’m going to try and make a cheat sheet to help understand this as I get confused with this all the time.
- Download Sublime Text 2
- Go to http://getbootstrap.com/examples/navbar/ – view page source and save the content into a file as index.html.
- Go to http://getbootstrap.com/getting-started/ and download the bootstrap files.
Refresh the page.
You can try checking out other bootstrap templates and get them working. If you run into errors or if your code isn’t working, do let me know and I can help you fix them.
Check out these two courses that I used to learn web development and wordpress
WordPress Theme Development with Bootstrap
Web-development The Complete Web Developer