/intro-to-coding

A short course on web development, by G's, for G's

Web development for G's

Checkpoints

Section 1: You cheeky git

  • Intro to using Git software and the GitHub platform. It's like Dropbox but for code. It lets you collaborate with others and saves your history in case you screw up

Section 2: Throw away your mouse!

Section 3: Chrome developer tools

  • Developers use these all the time
  • How to open them up / how to use them
  • Using them to mess with the Facebook/Google homepage

Section 4: The skeleton model

  • HTML is the skeleton
  • CSS is the flesh
  • Javascript is what makes it all move and respond to things
  • Intro to jsfiddle.net for playing around and making shit

Section 5: Intro to HTML

  • Every website is basically just a bunch of boxes
  • Some of the most important tags: <div>, <p>, <h1>, <span>, <link>, <input>, <button> and what they are used for

Section 6: Intro to CSS

  • Defining rules to make your shit look good
  • Some of the most important styling properties: position, display, border, background, and what they are used for

Section 7: Personal Website

  • You now know everything you need to build your own website and customise it better than SquareSpace and Wix, and put it online
  • After this point is 'proper' programming - it can get tricky but this is the good shit. Stop here if you can't be arsed going further

Section 7: Intro to Javascript Part I - Data

  • Javascript has different 'types' of data, what are they?
  • string, number and collections of strings and numbers i.e. array and object, also HTML elements
  • Intro to 'variables' i.e. storing references to data
  • The special Window and Document objects; how to obtain references to HTML elements. It's thanks to these references that Javascript can do cool stuff

Section 8: Intro to Javascript Part II - Processes

  • Q. What kinds of things can you 'do' to data?
  • A. Transform it, or display it
  • Intro to loops, and how to write a loop. Computers are great at doing the same thing lots of times quickly
  • Intro to if and else
  • Changing things on a page using Window.setInterval

Section 9: Intro to Javascript Part III - Data + Processes = Methods

  • Different data types come with different possibilities; introduction to 'methods'
  • Intro to some important methods; Array.map, Array.forEach, Object.keys

Section 10: Intro to Javascript Part IV - Getting dynamic

  • Introduction to events and how to respond to them i.e. responding to actions that the user performs on your page. This means; onclick, onblur, onchange

Section 11: Intro to Javascript Part V - Going modular

  • How to package processes up into re-usable 'functions'
  • How to define your own functions
  • Programming is all about deciding what abstractions (functions) you need
  • Modular thinking and its use even outside of programming