D4DME – Using Bootstrap for CSS/JS and Research into Existing Websites

Now we had now got the login and signup databases working me and amy decided to work on the css of the site and choose which buttons, shapes and layout we wanted to grab from bootstrap. We knew that we wanted the page to look clean and modern as the existing websites we found for advertising babysitters were very cluttered and looked unprofessional. Below are the 5 styles we liked from the Bootstrap file so we linked them up in our css file in brackets.

Navbar: bsnav

Buttons:bsbutton

Images:bsimg

Form:bsform

Carousel: bscaras

Me and Amy spoke with Josh and he liked everything we had done and gave us some suggestions on how we could make the website more navigational. We then decided to give him the task of selecting a colour scheme, creating a logo/banner and deciding on a font to use throughout the site.

All we had to do now regarding php was create a final database which allows users to post to the site and for their ad to appear on the homepage. I wasn’t too worried about the code for this section as we had created a very similar thing in a previous workshop which I remember clearly so should hopefully be able to understand the code from that workshop and incorporate it into our website.

I decided to research into existing websites – not just babysitting ones but various cooking, cleaning and other advertising websites to see how they had their users post what they wanted. I discovered that they all followed the same structure of having their users post go to the home page so that anyone that visits the site is immediately shown the information they want to know. There is usually information about the service being provided above the results but all the vital information appears on the home page. I decided that we should follow this same structure for our website and have each post go to the home page underneath the carousel which would display information about our babysitting services.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s