Website Designing for a Start-up

About the topic

For our Systems Management Mini-Project, we have chosen the topic "Website designing for a Start-up". Our start-up is "AppEarth", which is an upcoming Mobile Application Development Company.
It creates apps for Android, IOS and Windows Mobile. We have studied the websites like Omnipresent Robot Tech and Truecaller to get ideas about how a website is created for a startup and how it functions. We have created a dynamic website which uses both Front and Back-End technologies.

Technologies Used

Following are the front-end and back-end technologies that we have used to create the website.


Ruby is a dynamic, reflective, object-oriented, general-purpose programming language. It was designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan.
We have used it to create our back-end. The feedback page of our website is create using Ruby. Also to upload pics on the website, it is used. It is also used to create Carousel.


Ruby on Rails, or simply Rails, is an open source web application framework written in Ruby. Rails is a full-stack framework that emphasizes the use of well-known software engineering patterns and paradigms, including convention over configuration (CoC), don't repeat yourself (DRY), the active record pattern, and model–view–controller (MVC). It the framework on which our website runs. The server is provided by rails as a local host. It also provides inbuilt files to incorporate all the assets i.e. images, css style-sheets and Javascript etc. It works on the principle of MVC (Models, Views and Controllers (explained later)).


HTML or HyperText Markup Language is the standard markup language used to create web pages. All the text and images used in the website were added to it using html codes.


Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. All the positioning and designs i.e. formatting that was done in the webpage were done using CSS . CSS provides you with several parameters that you can apply on your HTML objects ( e.g. padding , margins, background colors etc.).


JavaScript (JS) is a dynamic computer programming language.It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. Javascript was used to upload all the images from the pc library and also to import bootstrap pages. It was also used in the carousel to make it look more appealing and automatically timed.

Adobe Photoshop CS6:

Adobe Photoshop is a raster graphics editor developed and published by Adobe Systems for Windows and OS X.
We have used it to create graphics, banners as well as icons for our Website.

Sublime Text 2:

All the codes are written in sublime editor.

The Website

The Structure:

The website is divided in various pages which are interlinked using hyperlinks. The pages are listed below along with their specifications.

Home Page:


It is the main page of our website which contains the carousel i.e. the image slider in which the featured apps are displayed.
It contains a short discription of the website.
The primary use of the home button is to make the user aware of the site.
It contains hyperlinks to all other pages.

Apps Page:


It contains the names and features of all the apps offered by AppEarth.
It also contains the links trough which the user can download them from Google Play Store, Apple Store and Windows Store.

About Us Page:


It features the names of the Founders of AppEarth along with a brief discription of the Company's mission.

Contact Us:


It has the toll-free 24x7 helpline number as well as the various contact e-mail ID's of the company.

Terms and Conditions:


The various policies of use and other terms of website operation are listed on this page.

Feedback :


The user can open this page and record his feedback of the site or of the apps.

Salient Features

The Carousel:


It is the slider present in the home page in which the images of all the latest releases and featured apps is listed. The images change automatically after a brief period.
The user can also change the images by clicking on the next or previous arrows present on both sides of the carousel. It is created using Ruby + HTML + CSS + Javascript.

The Top Bar:


It contains the logo and tagline of the website. It also contains various hyperlinks useful for navigating around the website. The Hover option is used to change the colour of hyperlinks when the mouse arrow is pointed over them. It also has the Facebook, Twitter and Google+ buttons with which the user can connect with AppEarth on these social networking sites.

The Bottom Pane:


It has the AppEarth Guarantee logo and also the Navigations links to:

  1. Terms and Conditions Page
  2. About Us Page
  3. Contact Us Page
  4. Feedback Page
  5. Copyright Logo

Feedback Counter:

We have created a feedback counter that counts the number of feedbacks given in the Feedback page.

Models, Views and Controllers



They talk to the database, store and validate data, perform the business logic and otherwise do the heavy lifting.


Views are the actual pages that are going to be displayed on the website.
All the HTML and CSS codes go into the views and are linked to each other,


Controllers contain all the important things like variable names and functions that are called in the views.
It gives orders without knowing (or caring) how it gets done.

The Coding:

These are a few screenshots of the coding that we did.
You can easily differentiate between the HTML , CSS and Ruby codes.


The Final Verdict

We really enjoyed creating this website. It was both, fun and a great learning experience.

Our Team

Akash Deep Singh 2014131

Vasu Verma 2014115

Nishant Yadav 2014067

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License