Bootstrap jQuery Minimal Responsive Day 1

Embed Size (px)

Citation preview

Minimal, Responsive, Asynchronous Site Day 1Lets make a simple site with modern (for now) technologies: HTML5, CSS3, jQuery1.11, Bootstrap 3.1 and PHP5 * Adobe Dreamweaver CS6 is our text editor. You need to be familiar for all HTML, CSS, javascript and PHP basics1- Download these files:a. Bootstrap: http://getbootstrap.com/customize/ (front-end CSS framework)b. jQuery: http://jquery.com/download/ (Lightweight JavaScript library)c. PHP&MySQL: https://www.apachefriends.org/download.html (local server)

2- Install or start your apache and mysql servers: 3- Make a database with phpmyadmin:

4- Put your files in a folder in your c:\xampp\htdocs root:

5- We dont have to use every file we download, we can delete or put another folder some files. I want to use uncompressed files for javascript and css files to observe their contents to learn better. Others can be deleted.6- In Dreamweaver, I opened a new PHP (HTML5) index.php file:

7- Add the javascript and css files:

a Site - minimal

8- If you dont have any idea, check Bootstraps http://getbootstrap.com/getting-started/ and http://getbootstrap.com/examples. 9- Add this line to the head for mobile users:

10- We generally add to the head but for faster loading, they advice us to put them to the previous line of .11- Now we need a container div in the body. I prefer class container-fluid to fit the screen: ... 12- Here I added a row and a single column:

a Site - minimal

a Site - Minimal, Responsive, Asynchronous Site

13- Title looks ok for now, lets add 2 columns for menu and content: Menu Content

14- Add some fixes: a Site - Minimal, Responsive, Asynchronous Site Menu Content

For desktop size we have 2 columns and a large h1.

After we resize, we see 1 column and smaller h1.15- Lets add nesting columns inside the content class: Item 0 Item's details Item 1 Item's details Item 2 Item's details

Full size we see 3 items, after resizing we see everthing 1 column and readable for mobil users.

16- Now we can add real data for item panels, for connecting to the MySQL server, add this lines inside the body tag:

17- Filling data is syncronous for now: Item View details

Looks better and works! So, we came the last part.18- Now, we will convert this full page refresh to asyncronous by using jQuery. We can also use this library to animate, to add/remove tags dynamically. Before this, let me give you the last full HTML code:

a Site - minimal

a Site - Minimal, Responsive, Asynchronous Site Home Projects About Item View details Copyleft 2014

Looks lovely for me! If you dont like the white-blue default theme, look for Bootstrap templates19- See you at the second day