Encyclopedia
Essential Tools
First, we’ll need a text-editor to write our code in.
At the moment, I use VS Code and would recommend it. But ultimately, choosing a text-editor comes down to personal preference and I would suggest exploring your options:
If you’re not sure what to use, I would suggest starting with VS Code as it’s the editor I'll be using in class. You can always explore and change text editors in the future!
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. I will be using Firefox during demonstrations in class.
Basic 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.
File Management
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”.
Semantic HTML Elements
Some HTML elements are semantic and some are generic. A semantic element clearly communicates its meaning/content to the browser and to the humans who are editing the code. Some examples of semantic elements are:
- h1 - h6
- p
- ul, ol
- header
- footer
- section
- etc...
Elements like div and span are considered "generic" because they don't tell us what their content is or what they are being used for. We can start to define that purpose with classes or ids, which will help communicate meaning to human editors, but they will still be generic for the browser.
There's nothing wrong with using generic elements, but, in general it's good practice to use semantic elements when possible. Some reasons for this:
- it makes our documents more readable for editors and the browser
- it helps with the accessibility of our webpages, especially for those using assistive technologies to browse the web
- it helps with SEO (if SEO is a concern of yours)
Handy Keyboard Shortcuts
Text Editor:
| Action | PC | Mac | notes |
|---|---|---|---|
| Toggle comment | ctrl/ | cmd/ | turns the line your cursor is on into a comment, or uncomments the line |
If you're using VS Code, it has a plugin called Emmet installed by default. Emmet allows you to produce commonly used snippets of html and css code with abbreviations. For example typing div.special and pressing tab or enter will generate this line in its place:
There is a long list of pre-configured abbreviations available: Emmet cheat sheet
If you're using a different text editor, you can download the plugin for the specific editor, if supported.
Browser:
| Action | PC | Mac | notes |
|---|---|---|---|
| Refresh | ctrlr | cmdr | |
| Hard Refresh | ctrlshiftr | cmdshiftr | clears browser cache for that page |
| Dev Tools | ctrlshifti | cmdoptioni | or f12 on either operating system |
Text Editor Plugins
Most text editors allow you to edit their appearance (interface and syntax highlighting) as well as install 3rd party plugins. Here are some recommended plugins for a few of the text editors I have listed above.
Atom
Sublime Text
Brackets
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…). Usually it also provides some kind of visual interface (GUI or graphical user interface) that helps with managing.
Popular examples:
Some I like:
There are some differences between using a CMS and the way that we’ve been making websites. We have been writing entirely 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 approach web design in its most elemental form. A CMS (generally) requires server hosting that provides server side software like PHP in order to work.
- PHP is a scripting language that is executed on the server
- A website that relies on PHP is written very similarly to our normal html pages, but is broken into segments 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’re not always directly interacting with the code. This is nice for clients/web editors who might not have any experience with html and css.
A CMS is not necessary for every kind of website, but most sites today rely on one. If your site requires a large number of pages or frequent updates you might want to consider using a CMS.