Make a Coffee Shop Locating Website

by Sebastien8lorentz in Circuits > Websites

1233 Views, 0 Favorites, 0 Comments

Make a Coffee Shop Locating Website

website finished.png

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

Choose a Text Editor

atom.png

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

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

Create Your Index.html

structure.png
  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:

Get Your Map

Screen Shot 2019-09-03 at 11.22.52 AM.png
Screen Shot 2019-09-03 at 11.23.09 AM.png
  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

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>'

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.

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. }'

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. }

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.