Editors

It is possible to use simple text editors (such as 'notepad') to write HTML, CSS and Javascript(JS), but it is much easier an editor designed for coding. We'll use "Atom":

• Download Atom
• Add three packages (we can add more later)
• Emmett (allows lots of shortcuts)
• Script (enables running code within Atom)
• Beautify (cleans up appearance of source making it much easier to read)
• Besides being great with HTML, CSS and JS, Atom also allows easy editing in other languages such as python. 

HTML

• Start with the basics here.
• Create a file and save-as .html in a folder (remember this folder!)
• Paste starter code and begin adding content
• ENRICHMENT: semantics in HTML

CSS

• Start with CSS syntax.
• There are 3 ways to use CSS code (within elements; within HTML file, or in separate file)
• We'll start with the separate file approach, in which the steps are:
  • create a new file and save-as 'style.css' in the same folder that will be used for HTML code (this can be changed later to allow CSS to come for othersources)
  • Paste starter code that can be modified later

JS

• start  with codeacademy or W3
• Learning JS code is made easier by practicing output in a 'console' window
• In Firefox
1. Ensure file menu (hit 'alt' if needed) is open, then tools->webdeveloper->Webconsole (for multiline -> Scratchpad)
2. As an example type "alert('hello') and hit 'run' and see popup stating 'hello', and 'clear()' to clear console
• In other browsers, instructions can be found in this video on Udemy (registration may be required).
• One can also start directly put producing output in browser using 'innerHTML' property,  as discussed here. 
• JS is a 'permissive language' (e.g. type "2" == 2 in console; and then look at this exercise)
• JS reference  
• Examples of functions and expressions are here. 
• Basic Exercises
• Basic operations
  
• Variables
  
• Assignment
  
• Functions
  
• Objects
  
• Arrays
  
• Events
  
• Strings
  
• String Methods
  
• Document Object Model (DOM)
• Elements
• Exercise 1
• Exercise 2
• Exercise 3
• HTML
• Exercise 1
• Exercise 2
• CSS
• Exercise 1
• Exercise 2
• Review
• 1,  2
• More review exercises
•  1,  2,  3,  4,  5
• DOM:  1, 2
• Animation
• Functions with objects
• Go to Web Toggle (codepen), Forms1, Functional programing, Building up to writing a function to test prime




Let's create a website

Go to 'Neocities' and sign up for a new site with a personal email address

• Displaying code so it looks like code on a site: see this example and try it

Misc links

• HTML and CSS template