startup-week - Learning to Code

  • use codepen, rapid prototype enviornment, can save if they want to make a free eniovrnment

  • can paste in JS, HTML and CSS to get cool things

  • go over forking

why code is important

  • more and more things are being done by computers

  • you might not have to code for your job but you may interact with someone who does - need to be able to communicate!

HTML, CSS, JS

  • view source on a website
  • developer tools
  • you can see how every site on the internet is made!

codepen

  • rapid prototyping enivornment for HTML, CSS and JS
  • also cool things
  • can create a free account or just create an anonomys pen
  • talk about forking (github forking, sharing code)

play with codepen!

  • make some text, h1, add an image?
  • simple CSS
  • JS
  • make a variable
  • if statement
  • create a function
  • create a button and have a click event?

how is this all even working

  • web browser is interpreting the code written
  • HTML is the structure
  • CSS is the styling
  • JS lets you manipulate the page (and more!)

fork a pen

  • have example base with HTML structure and CSS -> add functionality
  • they fork it
  • have them change things -> break it
  • have them change things -> see the changes

errors

  • you will break code
  • dont be afraid of errors, the code is just doing exactly what you told it to do, go see what you actually told it to do!

projects

  • start from example template, add a google map with marker
  • start from example template, make an image change when a button is clicked on -> build basic image slider
  • start from example template, add video as background image
  • start from example template, add basic line chart -> customize