Make a Coffee Shop Locating Website

In this Instructable I will show u how to make a simple website displaying coffee shops near you, Using Google Maps, HTML and CSS

Supplies:

A computer

A text editor (i use Atom)

A wifi connection

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Choose a Text Editor

I use Atom, which can be downloaded Here. Once its downloaded open it make a new project

Step 2: Create Your New Project

  1. Open Atom
  2. Find file
  3. Under file click new
  4. in the bottom left (mac) there will be a button to make a new folder
  5. name your folder ''Map website'
  6. Press open on the bottom right

Step 3: Create Your Index.html

  1. Add a new file in your folder (In atom right-click the folder and press new)
  2. Name this file 'Index.html'
  3. Add this basic HTML structure, This is used in every HTML project:

Step 4: Get Your Map

  1. Visit Google maps here: Google Maps
  2. Search for coffee
  3. you should get all coffee shops in your general area
  4. click the three lines next to coffee
  5. find share or embed map
  6. select embed map
  7. Choose the size of the map (I used Large) and finalize your location
  8. press copy HTML

Step 5: Add to the Website

  1. Head back to the HTML file.
  2. between the two '<body></body>' tags insert this code:

'<center>

<h1>COFFEE SHOPS NEAR YOU</h1>

<br>

'THE EMBEDED CODE FROM GOOGLE MAPS'

</center>'

Step 6: Preview

Thats part one done!

save the file and find it on your computer, Double click it and it will open up in your default browser to be previewed.

Step 7: Make It Look Better

  1. Between the two '<title></title>' tags add 'Coffee shops near me'
  2. Add a new file the same way you created 'Index.html' but name it 'Style.css'
  3. back on your HTML file, write this code above your title, "<link rel="stylesheet" href="style.css""
  4. Go to google images and download a cute clipart of a cup of coffee
  5. Add the image to the folder containing the rest of our files
  6. in the CSS file, Write the following code: 'body{
  7. background-image: url(THE NAME OF THE IMAGE);
  8. background-size: cover;
  9. }'

Step 8: Making It Look Better Pt2

  1. if we save and preview now, we can see that the websites background is now tiled with our coffee cups
  2. Sadly it is difficult to read our heading
  3. So in the CSS, underneath the 'body {}' add the following code: h1{
  4. background-color=rgb(255,255,255);
  5. font-size=40px;
  6. }

Step 9: REVISION

Thats it! You're done. You have learned the basics of HTML, CSS and embeded code, Well done. You can edit the code to make it fit your taste and make it display a map of anything you want. From then you can continue your website building journey and forever improving.

Maps Challenge

This is an entry in the
Maps Challenge

Be the First to Share

    Recommendations

    • CNC Contest

      CNC Contest
    • Make it Move

      Make it Move
    • Teacher Contest

      Teacher Contest

    Discussions