Static websites are made using the languages of HTML and CSS. If you want to make your website do stuff instead of just sitting there and looking pretty (e.g. show some new text when the user clicks a button, like ‘Submitted. Congratulations!’), you need a bit of another language called Javascript, which I will come to at the end of this session.

Download Sublime Text (it never requires you to pay for a license but you should buy one eventually if you keep using it!) and Google Chrome beforehand.

Things we’re going to cover here:

  • You Can Totes Do This: A Story of Being Bad For a Long Time and Then Not Being Bad
  • Content is HTML, Style is CSS
    • Starter page here
    • HTML: Head does the thinking, Body does the work
  • Step 1 of making a website: Make an Ugly Website
    • HTML works in tags
    • Headlines, subheadlines, all the way down
    • Paragraphs
    • Lists: bullet points or ordered
    • Links: the roads of the internet
    • Images
    • Tables
    • There are loads more that we don’t have time to cover
    • End example here
  • Step 2 of making a website: Make an Ugly Website Pretty
    • Adding colors, sizes, fonts to certain elements
    • Adding margin and padding to elements
    • Do stuff with images: rounding, bordering, change size, placement
    • How to use classes and IDs for styling
    • End example here
  • “Ugh, this is so much work”: Let me introduce you to Bootstrap
    • Go straight to this page for our Bootstrap work
    • The Grid System
    • Navigation menus
    • End example here
  • Javascript: bring your Frankenstein to life!
    • Click a button and make things happen

Where to learn more:

  • Codecademy has free courses available to take online
  • Practice! Make ugly websites for your friends for a while