Mobile friendly, interactive website, whole source code

Introduction

I developed this website using several libraries and CSS mini frameworks on the front end and PHP and MySQL on the back end.

JavaScript libraries

  1. JQuery – for many features.
  2. noty.js – for notification and messages.
  3. TinyMCE the most advanced WYSWIYG HTML editor designed to format text.
  4. jquery.custom-file-input.js – for styling a file uploading form.
  5. DataTables Table plug-in for jQuery.

CSS third party resources

  1. pills.css – mini-framework for webpage grid layout.
  2. ionicons.min.css – for font icons.
  3. Animate.css – for animation

The website features

Users can register on website. At the end of registration, the user receives email with an activation link. After activation, the user can log in and use website.

The user can post stories, using the WYSWIYG HTML editor to format text. The user can upload photographs and create a photo gallery. The user can edit their profile data, posts and photo gallery and also change their password.

One page of the website displays video in the background. Another displays a responsive JQuery table with a fixed header, a search box, sorting in columns and pagination.

You can use http://www.responsinator.com to see how this website looks on the different devices.

For the demo, I created 3 users whose last names start with S. If you click the 'S' in the author's menu, a webpage with the list of the users is displayed.

Click any author from the list and the author's profile webpage is displayed. On the profile top menu, you can select the author's gallery and the gallery webpage is displayed.

On the gallery webpage you will see a slide show of the author's pictures.

On the left bottom area of the profile webpage you can find a list of author's posts.

Click a post title and a webpage with the post is displayed.

You can watch Video about main web site features.

Select Author