Sorry for the wait everyone!
I have been sitting here for a while trying to think of the best way to go about this specific article. The reasoning being that I want to get it out of the way as fast as possible, but I also think there are some very important bugs that every developer runs into. Because I cannot go over these basics in detail, to save time and headaches I decided to make a list of all of great tutorials to solve some of the major pitfalls in CSS so hopefully this helps. If you want more information on a specific topic please feel free to ask.
This video has a lot of conceptual information about how CSS should be structured. It might fly over your head but I would watch it as there could be something beneficial to you.
CSS stands for Cascading Style Sheets and they control the design of your website. It seems weird to use the word cascading in this context, but it makes perfect sense when you understand the logistics of how to code in CSS. A CSS file can be created just like an html file, but it has the .css extension instead of .html. Just like how we created a folder for all of our images, lets make one for just the CSS. Make a folder called “stylesheets” inside the game-genome folder, then create a file called “global.css” in that stylesheets folder.
Tip: You can create a folder in the Sublime Text 2 file directory by right clicking a folder.
When referencing other files in your project there is a special syntax used. To demonstrate this, we are going to create a game details page about the video game “Gears of War 3”. To the right is the image we will use for the box art on the page, click it to get the full size. When you see the full size image, right click it and save it to the game-genome folder.
Also in that directory, create a new file called “gow3.html”. You can copy over the data from the first page to give you a quick template. Here is a basic game detail page I came up with:
Now that we have our environment set up we can begin creating the template for our site. Lets create a new project folder named “game-genome” under the sites folder we created last lesson to store all the files for the website. Open up Sublime Text 2 and from the top menu click “File -> Open Folder”. Navigate to the game-genome folder we just created, select it, then click OK. This may open up a new window, if so close the old one. The new window now has a pane on the left side which contains the file directory for the project. We are now ready to begin codin
Before we move on to much more I think it is important now to go over the different programs you will use to code with.
The Projects Folder
It is best to create a folder on your computer where you will store all your projects in for easy access. If you are working with a Mac or Linux, the most common directory to create is under “Username/Sites”, next to your picture, video, document etc. folders. If you are on windows, either also create a folder under “Username/Sites”, or create one under “Username/Documents/Sites”. If you are still unsure of where to place the Sites folder, the desktop is a perfectly fine temporary location.
HTML stands for HyperText Markup Language. Most of you have probably heard of it before and it is the foundation to all websites. A HTML document is really just a text document however when a web browser reads the file with the .html extension it will recognize “tags” written inside and construct them as HTML “elements”. HTML is pretty basic and should be easy to understand once you spend 30 minutes with it, but lets start out with how the language defines itself before we begin writing a document.
A tag is created by first an opening caret (<), followed by the tag name, and ending with a closing caret (>). An example of a tag is <p>, the paragraph tag. Its purpose is to define the content within it to be a block of text within a larger body of text. To use it in context, check out this example:
<p>This is what a paragraphlooks like.</p>
I like to talk in analogies, so bear with me on this but I think it is the best way to describe a website.
A website is like a restaurant.
First things first, a restaurant needs a property / location to build on. This is what the server / host are. A server is a fancy name for a computer designed to handle website traffic and actually renders your site to the user and a host is the company that gives you a spot on one or more of the servers that they own. Choosing a host and server depends on your needs, the main of which is what programming languages you will need to use. There will be always be restrictions on the programming languages that you can use depending on what operating system is installed on the server so making sure you have the correct configuration is important. You can still run a server on your local computer fine, but when it is available to the public it needs to be on a specifically designed computer (server). Think of your local computers server as a fully functional toy model of the restaurant.
When simplified, the internet is really just computers sharing data between each other. You probably already knew that, but if we look at it deeper you can get an understanding of the challenges that arise with working in web development, the biggest of which is how each computer interprets that data. In order for that data to be transmitted across long distances it must travel through various mediums like electricity and light, but no matter how it travels the end result is either an “on” or “off” state. If you have seen binary before this can seem familiar (e.g. the letter “A” in binary is 01000001. 0 = off, 1 = on).