{"id":268163,"date":"2018-03-20T06:43:33","date_gmt":"2018-03-20T13:43:33","guid":{"rendered":"http:\/\/css-tricks.com\/?p=268163"},"modified":"2018-03-22T18:21:42","modified_gmt":"2018-03-23T01:21:42","slug":"going-from-dumb-little-idea-to-real-website-in-like-10-minutes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/going-from-dumb-little-idea-to-real-website-in-like-10-minutes\/","title":{"rendered":"Going From Dumb Little Idea to Real Website in Like 10 Minutes"},"content":{"rendered":"

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<\/a>. It’s not my finest idea, but hey, I’m full of those. Fortunately, we don’t have to spend all day on this.<\/p>\n

<\/p>\n

1) Figure out what’s going to go on this dumb little website<\/h3>\n

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

Perhaps this can be useful then! Let’s blow up this map and embed it properly!<\/p>\n

2) Make the dumb site<\/h3>\n

Fortunately, Google Maps are embeddable. Let’s just slap their embed code in an HTML document:<\/p>\n

<body>\r\n  <iframe src=\"https:\/\/www.google.com\/maps\/d\/embed?mid=1bg2tr60F_w395jAY-WW8JGbwSCM\" width=\"640\" height=\"480\"><\/iframe>\r\n<\/body><\/code><\/pre>\n
And have it cover the entire page:<\/p>\n
html, body {\r\n  margin: 0;\r\n  height: 100%; \r\n  overflow: hidden;\r\n}\r\n\r\niframe {\r\n  postion: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 0;\r\n}<\/code><\/pre>\n
Let’s use CodePen Projects for this<\/a>, as that’ll get us another step closer to having this live.<\/p>\n
\"\"
The extra files there are just a Bend logo I fired through RealFaviconGenerator<\/a>.<\/figcaption><\/figure>\n
3) Buy the dumb domain name<\/h3>\n
This is the point where you really start to question the idea. But, go ahead and pull the trigger anyway. The internet needs you.<\/p>\n
\"\"<\/figure>\n
4) It’s dumb, but it it might as well be HTTPS<\/h3>\n
One big reason to use CloudFlare<\/a> is you get HTTPS even on their free plan. Might as well take advantage of that. This means pointing the nameservers from your domain registrar over to CloudFlare.<\/p>\n
\"\"<\/figure>\n
5) Deploy the CodePen Project<\/h3>\n
You can deploy the site right out of CodePen Projects.<\/p>\n
\"\"<\/figure>\n
Note that you get some IP addresses there. Add those as A Records right in CloudFlare and you’re done!<\/p>\n
\"\"<\/figure>\n
6) Bask in your dumb idea<\/h3>\n
\"\"<\/figure>\n
\n
Swear to god, 10 minutes from start to finish.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":3,"featured_media":268254,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[798,636,819],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/idea-to-website.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":336671,"url":"https:\/\/css-tricks.com\/maps-scroll-wheel-fix\/","url_meta":{"origin":268163,"position":0},"title":"Maps Scroll Wheel Fix","date":"March 23, 2021","format":false,"excerpt":"This blog post by Steve Fenton came across my feeds the other day. I'd never heard of HERE maps before, but apparently they are embeddable somehow, like Google Maps. The problem is that you zoom and and out of HERE maps with the scrollwheel. So imagine you're scrolling down a\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/here-map-bend.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363102,"url":"https:\/\/css-tricks.com\/color-spaces-for-more-interesting-css-gradients\/","url_meta":{"origin":268163,"position":1},"title":"Using Different Color Spaces for Non-Boring Gradients","date":"February 7, 2022","format":false,"excerpt":"A little gradient generator tool from Tom Quinonero. You'd think fading one color to another would be an obvious, simple, solved problem \u2014 it's actually anything but! Tom's generator does two things that help make a gradient better: You can pick an \"interpolation space.\" Gradients that use the sRGB color\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-07-at-8.35.18-AM.png?fit=1200%2C1013&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332699,"url":"https:\/\/css-tricks.com\/usestateincustomproperties\/","url_meta":{"origin":268163,"position":2},"title":"useStateInCustomProperties","date":"January 21, 2021","format":false,"excerpt":"In my recent \"Custom Properties as\u00a0State\" post, one of the things I mentioned was that theoretically, UI libraries, like React and Vue, could automatically map the state they manage over to CSS Custom Properties so we could use that state right there if we wanted. Someone should make a\u00a0useStateWithCustomProperties\u00a0hook or\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/custom-properties-state.gif?fit=792%2C390&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":158391,"url":"https:\/\/css-tricks.com\/line-menu-icon-menu\/","url_meta":{"origin":268163,"position":3},"title":"Line Menu Icon… That Is A Menu","date":"December 16, 2013","format":false,"excerpt":"I had a dumb little idea the other night so I just coded it up (as you do). You know those little icons that have come represent navigation? We've called them Three Line Menu icons around here, but otherwise known as Navicon (clever) or Hamburger (dumb). The point of that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":168266,"url":"https:\/\/css-tricks.com\/handling-z-index\/","url_meta":{"origin":268163,"position":4},"title":"Handling z-index","date":"April 21, 2014","format":false,"excerpt":"Managing z-index across large sites can be a pain in the butt. CSS is hard to test, so it's notoriously easy to make a change that ends up, for instance, hiding some important UI under who-knows-where. If you use a CSS preprocessor, maybe we can handle it in a special\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321571,"url":"https:\/\/css-tricks.com\/nova\/","url_meta":{"origin":268163,"position":5},"title":"Nova","date":"September 21, 2020","format":false,"excerpt":"Nova is a new (vehemently macOS-only) code editor from Panic, the folks behind Coda. It's like \"Coda 3\" except this was such a major re-write that they gave it a whole new name. I played with some of the betas as they were building it. I got a little discount\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/panic-nova.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/idea-to-website.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268163"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=268163"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268163\/revisions"}],"predecessor-version":[{"id":268759,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268163\/revisions\/268759"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/268254"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=268163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=268163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=268163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}