Skip to content

Instantly share code, notes, and snippets.

@bengolder

bengolder/workshop.md

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bengolder/9164018 to your computer and use it in GitHub Desktop.
Save bengolder/9164018 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
workshop.md

What is a Web Site?

Details

  • When: 6:30-8:30 p.m. on Thursday, February 20th
  • Where: MIT 9-250
  • Teacher: Ben Golder, 2nd Year Master of City Planning Student (email)
  • Description: A two-hour crash course on the basics of websites aimed at urban planning students. We will discuss: whether you should make your own website or "just pick some template thing"; The essentials of HTML, CSS, and Javascript; what servers, webhosts, and domain names are; the difference between a website and a web application; common free and paid options for making websites; a hands-on process of making and editing your own basic website; how to put things onto a website; and resources for further learning.
  • Prerequisites: Confusion and curiosity about websites. Also, check the section "Before the Workshop" below for tips on how to prepare and get the most out of this workshop.

Before the Workshop

In order to follow along with the hands-on portions of the workshop, you should do the following things before you arrive. If you have trouble with these, feel free to email the instructor, Ben Golder.

  • Make a folder on your computer that you can use for the workshop

  • Download the workshop materials here, unzip them, and put them in your special folder.

  • Download and install one of the following text editing softwares if you don't already have one. In the workshop, you will use one of these to edit and write HTML, CSS, and Javascript. Once you install it, you should try to use it to open and browse the course materials in advance.

    • Sublime Text -- (Windows, Mac, or Linux) One of the most popular and well-loved text editors around. Free to download and use, but will occasionally show a pop-up window if you don't purchase it. This is what I'll be using during the workshop
    • Brackets -- (Windows, Mac, or Linux) A newer, free open source code editor.
    • Notepad++ -- A solid and reliable text editor for Windows. Free.
    • TextWrangler -- A free text editor for Mac only.
    • DreamWeaver -- Adobe's software for making basic websites. This is not free generally, but many MIT students already have it installed. This software can sometimes make simple tasks far more complicated than necessary. Not recommended, but if you already have it and you don't want to install anything else, I will grudgingly acknowledge that it will work just fine for the workshop.

Workshop Materials

After the Workshop

References

The Mozilla Developer Network (MDN) has some of the nicest guides and references available, and it includes links to other resources around the web. While googling for help to your questions, you will often find results at w3schools.com, but don't be fooled. MDN is much nicer and much more up to date. Go to MDN before w3schools.

Tutorials

  • A super basic bash guide -- A very short set of basic commands for getting started in command line.
  • A Beginner's Guide to HTML and CSS
  • Learn CSS Layout
  • The Command Line crash course - Learning command line will make web development far easier, because many tools are run using the command line. This covers far more than the basics.
  • Lynda.com -- High quality software tutorials including many topics related to the web. this is free while you are enrolled at MIT.
  • Codecademy -- A popular site for tutorials in HTML, CSS, and Javascript. Good for learning quick, short concepts. Not the best if you want to learn all the steps necessary for creating Javascript-based web applications.
  • Javascript for Cats -- An very easy and fun tutorial in basic Javascript by Max Ogden, former Code For America Fellow.
  • Javscript 101 - jQuery Foundation -- a good intro for people who have never used javascript and who barely know HTML or CSS. A gentle introduction. jQuery is the most popular JavaScript Library.
  • How to Learn Javascript Properly - a thorough online guide that is more like a study program than a tutorial. It expects you to buy and read books while also completing a series of tutorials.

Resources

  • MIT SA+P Code Kitchen -- a weekly event for informal help with learning code. Every Sunday 3-6pm in room 9-450B at MIT
  • The Code Player -- Animated "Walk-throughs" of people writing HTML, CSS, and Javascript.
  • Codepen -- A "front-end playground" for sharing and exploring experiments in HTML, CSS, and Javascript.
  • EnjoyCSS -- Let's you design something visually, and then tells you the CSS you need in order to recreate it.
  • Stylify Me -- enter a website url and see the colors and fonts they are using.
  • Grid - a simple guide to responsive design
  • The box model on CSS Tricks
  • The box model on Mozilla Developer Network
  • The box model specification
  • CSS Positioning in 10 Steps
  • CSS Positioning 101
  • Gist -- a simple, convenient site that lets you easily share pieces of code with others. This is much better than sending a file or coopied code through email.
  • Github -- Github is made to help people collaborate on code. It's a great place to find examples, and can be used if you ever need to work collaboratively on a software project.
  • Stack Overflow -- A Question and Answer site for programming. Best for specific questions that you've already tried to answer yourself. This is one of the best resources on the web for learning programming skills.

Code Libraries for Web Pages

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment