Ever since the first time my mom read me Little House on the Prairie, I've wanted to build my own home. A log cabin with a fire place and a vegetable garden... I wanted a simple life where I could plant carrots, milk my goat and churn some mother fuckin' butter.
But the older I get, the more I wonder if I'll ever get a chance to build my tounge-in-groove, secret-passage-between-the-walls-that-leads-down-to-the-sex-dungeon, chicken-coop-havin' dream home. Fuck-it though, Imma keep saving up for a plot of land and some live stock, but in the mean time , just on the off chance that the physical house doesn't happen, I'm going to build a website...a simple webiste... about building a house... and I'm going to make it from bare HTML up...
These are the materials I will be working with:
HTML -the frame that supports casa de website. Throughout the page there are elements enclosed in tags in which you can enclose text, images, video etc. CSS adds personal flare to your site. You can need to link your HTML file to a CSS file to control the way elements are styled. CSS can change everything from text color and size to alignment of objects and opacity. CSS is important to make a website presentable, but it is not required. You can still run a website without CSS. If you want to make your website dynamic and/or interactive, you need to link it to a javascript file. Javascript is like the running water, heater, and electricity. With Javascript you can animate, re-style and personalize your site for every user.
Step 0: Download a text editor and emmet.io It is not necessary, strictly speaking, to have a special text editor to build a web site. Any plain text editor (note pad, text edit etc) can assign a file a .html, .css or .js file extension which is all that is necessary for a browser to identify that the file contains code. However, a text editor is like the power tools of web developing... you can get by with a hammer and nails, but you probably aren't going to get around to building a sex dungeon without at least a power drill. Text editors greatly help with formatting and alerting you of syntactical errors (such as open parenthesis, missed commas etc). I use sublime which is free (though occasionally you do get pop ups -- which you can ignore, imploring you to purchase the official version of Sublime... its the same in every way except you wont get pop ups any more). Emmet is that guy down the street that works construction and has his own bob cat that he'll bring over to help you trench out your foundation... ie takes the ease and error prevention of text editors one step further by allowing you to abbreviate tags, assignment of classes etc. I highly recommend you download and learn the basics of emmet.
Step 1: layout HTML:
I want to have a site where I can drag slices of a picture of a cabin onto a mat that will grab them when I drag them over it. I sliced my picture into 4 pieces, but I will want to keep them all together when you first open the site, so I put all the slices of the image in to a div. I have another div that will be the drop target for the pictures and then I wrapped the entire page in a div so I can keep everything aligned the way I like.
set up some CSS
Step 3:
JavaScript
Drag and drop are features of the jQuery ui library. The only coding necessary to drag and drop elements is the jQuery to identify what is draggable and what is droppable and specify the behavior you would like upon dropping the element.
step 4: going live
1. create a git repository for your files.
2. make sure that all your files are saved.
3. create a new git branch called gh-pages (git checkout -b gh-pages)
4. push to your gh-page (git push origin gh-pages)
5. go to your git hub page -to the settings for your repository and find the url for your new website
Finished product
Code School jQuery, Code Academy jQUery, W3Schools HTML/CSS, Code Academy HTML/CSS, Code School HTML / CSS, Official MDN Javascript docs, W3Schools Javascript, Code School Javascript
No comments:
Post a Comment