November 17th

Today, I worked on the last page of the website which is “Location”. It was tough.

  • Issues
  1. I tried to embed the URL for the Google map straight to the code, but it didn’t work at all.
  2. I decided to use the site that call “Maps Generator” and embed the <iframe> code to the HTML code, but it didn’t help at all. I couldn’t figure out what the API is.


  • What did I do

I did some research about how to embed the location/map to HTML code. I found a lot of tutorials about it, but the best tutorial was this:


  • Code:



Click here to chick location page out


November 15th

I worked on the next link which is “Menu” , “About pages to make them responsive. I decided to design the menu using the HTML <form> action Attribute for menu. The reason behind that decision is to save the size of the actual page.

  • Process:
  1. In my Internal CSS, I defined the <form> tag and give it some attributes  and values such as, overflow:auto; line-height:2.0px; padding:0px; height: 600px;}
  2. In my HTML code, I used the HTML <form> tag, <form action=””> and embed all the content that I want inside followed by the closing tag </form>.
  3. I also believed it would be cool if I include the <select> tag inside the <form> tag and use the <select> tag to represent the prices for each product.
  4. I didn’t include all the menu that the cafe has, but I give users a chance to look at the full menu by clicking on a link down the page.

Please, click here to see the Menu page

  • Code





  • About Page

In About page, I tried to make it simple and give a an easy nice brief description about what Elite Cafe actually is including the front image of the cafe. I also tried to be a creative with the heading of the page by writing “A little Story About Us” instead of repeating the word “About”

  • Code



Click here to see the About page


November 10th

Rebuilding Elite Cafe again from scratch was such a hard task. I decide to rebuild the site from scratch because of two reasons:

  1. The site wasn’t responsive.
  2. The theme is old.


  • This is Elite Cafe site home page


Elite Cafe, Home page

Elite Cafe, Home page


I checked Elite Cafe site yesterday to see if the site is still responsive. I found that, the site is totally shutdown and there will be a furniture site instead with the same URL name “


Elite Cafe site turns into a furniture site

Elite Cafe/Furniture URL

Elite Cafe/Furniture URL

So, I went to them asking if they are going to shutdown the whole business? They told me “NO”, but they think the site isn’t help their business much, so they sold the domain to a furniture store.

  • This is the rebuild version for Elite Cafe that I built.



Elite Cafe rebuilt version

Elite Cafe rebuilt version


  • Prosess
  1. I checked a lot of cafe sites in order to have a sense of how to start.
  2. I used an internal CSS file to manage and design the home page.
  3. I decided to make the home page as a slideshow images for the Cafe menu.
  4. I did a lot of research of how to make a slideshow images in HTML/CSS. Most of the code I found, didn’t give me the result I want. So, I started to collect codes from the web and customized them together.
  5. For the first time I worked with the <script> tag in order to make the slideshow images work.
  6. I used <div> tag for the navigation bar menu as well as replacing images as boxes.


  • Issues
  1. I tried to make a dropdown menu under “Menu”, but I failed. The <li> items are not shown properly under each parent <li>.

Here is my work so far. I only rebuild the home page. Click here to check it out

  • The Code


1 / 5


2 / 5


3 / 5


4 / 5


5 / 5


  • How do I want to represent my work?

I’ve thought about it and I decided to represent it through the class site instead of using reclaim hosting account.

  • When the project is expected to be done?

The project will be ready to be presented on November 17th 2016.

Feel free to ask question or leave a comment 🙂

–Thanks for reading,