Essential Tools
First, we will need a text-editor to write our code in.
I suggest Atom because it’s free, accessible, and the editor that I use.
But, ultimately, choosing a text-editor comes down to personal preference. Feel free to explore your other options:
Next is the browser. If you don’t already have Chrome or Firefox installed, go ahead and download whichever one you like best. Both have good developer tools, which we'll be using and exploring in class.
Terms
Website
A single file or collection of files contained within a folder and hosted on a server.
HTML
Stands for “HyperText Markup Language”. HTML serves as the basic structure and holds the raw content of the webpage. If the webpage were a house, the HTML would be the structural elements, like the foundation and frame.
CSS
Stands for “Cascading Style Sheets”. CSS is a set of rules that define the visual appearance of the webpage. The CSS would be the designed elements of the house, like the siding, window shape, curtains, etc...
Javascript
Javascript is a scripting language that is used to add interactive and functional elements to the webpage like buttons and animations. It would be the doorbell, the garage door opener, or the little strings that open the blinds.
Files
Folder Organization
It’s important to keep all files related to a website in the same folder. Decide on an organizational structure early on that won’t change much and is scalable. This will help with locating files as the website grows and will prevent references to files (like webpages and images) from breaking when you re-organize things.
File Naming
File naming is crucial! When it comes to file names and websites, only use lowercase letters, numbers, dashes ( - ), or underscores ( _ ). Don't use uppercase letters, spaces, or symbols as they may be misinterpreted when you host your website on a server. Make sure to keep file extensions lowercase as well—use “.html” instead of “.HTML” and “.jpg” instead of “.JPEG”.
Handy Keyboard Shortcuts
Text Editor
Toggle comment: ctrl/ (pc) or cmd/ (mac)
Color Picker: ctrlaltc (pc) or cmdshiftc (mac)
(this requires the color picker plugin for Atom)
Browser
Refresh: ctrlr (pc) or cmdr (mac)
Hard Refresh: ctrlshiftr (pc) or cmdshiftr (mac)
(clears browser cache for that page)
Dev Tools: ctrlshifti (pc) or cmdoptioni (mac) or f12
Useful Atom Plugins
There are a lot of plugins available for the Atom text editor. Here are some recommended and handy plugins.
CMS
CMS stands for “content management system.” Generally a CMS is software that assists in the management of your website (managing multiple posts, pages, content…) and some kind of visual interface that aids in that management.
Popular examples:
My favorites:
There are some differences between using a CMS and the way that we’ve been making websites. We have been making raw, handmade html web pages that don’t rely on any kind of templating—which is generally how a CMS works. This was done for a few reasons: to keep cost low and to demonstrate how quick and easy it can be to make a website by hand and put it online without having to worry about servers, ports, and databases from the get-go. A CMS (generally) requires server hosting that provides server side software like PHP.
- PHP is a scripting language that is installed on servers
- A website that relies on PHP is written very similarly to our normal html pages, but is broken into segments and chunks that are then assembled into a webpage by PHP
- PHP is one of many server-side languages that can be used to assemble web pages. Others include python, node.js, ruby on rails, etc.
A CMS usually includes some kind of admin panel where content can be added with a simplified user interface——this way you are not always directly interacting with the code. This is nice for clients/users who don’t have any experience with html and css. Think of tumblr where you have very clear containers for adding content.
A CMS is definitely not necessary for every kind of website, but most modern sites rely on one. If your site requires regular updating, multiple posts, or an expanding number of pages a CMS is generally recommended.