Download Getting Started Building Websites

Getting Started Building Websites
It can be really daunting to think about building a website for the first time. There are many questions
to ask, and it's often difficult to determine what they are. Additionally, much of the time their answers
are not immediately accessible or apparent. This workshop aims to teach you the right questions to ask,
give you resources for finding these answers, and to guide you in getting started building your very
own websites.
Concepts and Vocabulary
Webpage – A collection or resources (images, CSS, HTML, Javascript) which come together to make
something you can view. For example, www.google.com is a webpage.
Website – A collection of webpages which are linked together.
HTML – HyperText Markup Language. This is a simple language to learn, and is responsible for
putting elements on a webpage. For example, you can write HTML to put a paragraph of text on a
webpage.
CSS – Cascading Stylesheets. A language responsible for making elements look a certain way. For
example, you can write CSS to make a paragraph of text red, or underline it (and much, much more!).
Javascript – A programming language responsible for for interactivity on a webpage. For example, you
can write javascript to make a paragraph of text bounce around a webpage.
Syntax – Just as with spoken language, when we use computer languages (like HTML, CSS, and
Javascript), we must observe a concrete syntax for them to work. With computer languages, however,
the syntax is much more strict. It has to be, so that the computer can understand it. Just as mathematical
expressions must be written precisely in order to be meaningful, so too must computer languages.
Client – The part of a website that a user has access to. For example, when you go into your browser
(Chrome, Firefox, Safari, etc) and go to google.com, you don't have access to all the code that google
uses to search the web; you only have access to “client-facing” resources, like their logo. HTML, CSS,
and Javascript are all referred to as client-side languages/resources.
Server – The part of a website that a user does not have access to, which “serves” up data. When you
go to google.com, google's servers send you their homepage, and all of the client-facing resources
which go with it. The servers do NOT send all of google's code to you. Can you imagine if everyone
had access to Google's code? That would be a disaster for the company.
Static – Something that is unchanging. In the web context, this is something with little to no
interactivity, like a restaurant's informational website.
Dynamic – Something that changes. In the web context, this is something like Google – depending on
your search, the content of the page changes.
Web Design – The use of HTML, CSS and sometimes Javascript to design static webpages. For
example, a restaurant's website with a menu and contact information is a designed web site. The key
here is “static”.
Web Development – The use of HTML, CSS, Javascript, and server side languages to develop dynamic
applications. For example, Google is a complex, developed application. Its content is dynamic, and
there is a large amount of server side code running it.
Web Hosting – When you've created your website, you need a way to put it onto the internet. There are
companies online which provide this service; they “host” your website so people can see it.
Stack – The list of technologies used to develop a website.
Local – Your computer, inaccessible to anyone in the outside world (hopefully).
Remote – A computer that is not yours, like an external server.
Deploy – To take code from your local machine and push it to a remote machine, so that others can see
and use it.
Resources
These resources will all contribute to your understanding of the web. Often, however, you will
find yourself staring at a problem that is too unique to have an answer in one of these places. In these
situations, it's important to understand how to use Google correctly. Additionally, the website
www.stackoverflow.com is an amazing resource. Try to find an answer there before asking your
question. Avoid w3schools.com like the plague, as their information is outdated and their
“certifications” are better used as toilet paper.
HTML/CSS/Javascript
www.codecademy.com – A fantastic site full of tutorials and a step by step introduction to many,
many web languages. FREE
www.teamtreehouse.com – A service like codecademy, but entirely dedicated to web design and
development. Free for two weeks, paid after that.
HTML
www.htmldog.com – A great reference for HTML syntax.
CSS
www.css-tricks.com – Fantastic resource for the newest language features and techniques.
Loaded with useful snippets of CSS.
http://www.cssbasics.com/ - Covers lots of CSS syntax and concepts.
Tools
There are a lot of tools that you can use to make working on the web a lot easier. From running
your own server to writing code, chances are there's a piece of software that you can use to improve
your workflow. Google these to download them.
Sublime Text 2 – A text editor and IDE (Interactive Development Environment). Free.
XAMPP – A package that you can download which sets up a server on your computer very
easily. Free.
Adobe Photoshop – A powerful piece of software which provides tools for manipulating images
and creating beautiful graphics. Expensive.
FileZilla – When you create a website, you'll need to actually put it on the web. This is a
program that lets you drag and drop filed from local to remote. Free.