I live in Bend, Oregon. I woke up with the dumbest idea ever that there should be a little food truck map website and it should be called Vend, Oregon. It’s not my finest idea, but hey, I’m full of those. Fortunately, we don’t have to spend all day on this.

1) Figure out what’s going to go on this dumb little website

Fortunately, all the hard work was already done. One of our local rags already created a list of them. They allude to a map multiple times, but it’s hard to dig it up. In searching around a bit, I found this which does have an embedded Google Map.

Perhaps this can be useful then! Let’s blow up this map and embed it properly!

2) Make the dumb site

Fortunately, Google Maps are embeddable. Let’s just slap their embed code in an HTML document:

<body>
  [googlemaps https://www.google.com/maps/d/embed?mid=1bg2tr60F_w395jAY-WW8JGbwSCM&w=640&h=480]
</body>

And have it cover the entire page:

html, body {
  margin: 0;
  height: 100%; 
  overflow: hidden;
}

iframe {
  postion: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Let’s use CodePen Projects for this, as that’ll get us another step closer to having this live.

vend-oregon Going From Dumb Little Idea to Real Website in Like 10 Minutes design tips
The extra files there are just a Bend logo I fired through RealFaviconGenerator.

3) Buy the dumb domain name

This is the point where you really start to question the idea. But, go ahead and pull the trigger anyway. The internet needs you.

domain-name-bought Going From Dumb Little Idea to Real Website in Like 10 Minutes design tips

4) It’s dumb, but it it might as well be HTTPS

One big reason to use CloudFlare is you get HTTPS even on their free plan. Might as well take advantage of that. This means pointing the nameservers from your domain registrant over to CloudFlare.

dns Going From Dumb Little Idea to Real Website in Like 10 Minutes design tips

5) Deploy the CodePen Project

You can deploy the site right out of CodePen Projects.

deploy Going From Dumb Little Idea to Real Website in Like 10 Minutes design tips

Note that you get some IP addresses there. Add those as A Records right in CloudFlare and you’re done!

a-records Going From Dumb Little Idea to Real Website in Like 10 Minutes design tips

6) Bask in your dumb idea

final Going From Dumb Little Idea to Real Website in Like 10 Minutes design tips

Swear to god, 10 minutes from start to finish.

The post Going From Dumb Little Idea to Real Website in Like 10 Minutes appeared first on CSS-Tricks.