Week 1 | Feb. 2, 2015

Introduction, Tools, What is a Website?

Syllabus Review

Download here »

How This Class Works

  • Weekly lessons will be on the class site, along with links to other resources - some of which we will cover in class, others are there for your own reading and exploration.
  • Each class will include a short lecture on a new concept, interspersed with short practice exercises. Most classes will also include a git lab with Jue, which will help save and version your work.
  • Assignments are due by the start of class. Short, timed quizzes will be given on your reading assignments. The rest will be turned in by posting them in Slack.

Class Objectives

  • Write introductory-to-intermediate HTML from scratch to build web pages and sites.
  • Write introductory-to-intermediate CSS to precisely control and manipulate HTML for web page layout and design.
  • Ability to follow a design workflow
  • Knowledge of the basic structure and infrastructure of a website.
  • Knowledge of common project workflows used in modern newsrooms.
  • Understand the empowering role of design and programming in journalism.

Presentation Technology

  • Class lectures are created using a very basic implementation of the javascript framework reveal.js
  • Use your arrow keys to go between slides. The compass on the bottom right-hand corner of the screen will tell you where you can navigate to (horizontally or vertically).
  • Press ESC to see a full view of the slides.

Class Motto:
Always Be Learning

Why learn to code?

  • Become a better problem solver
  • To gain an understanding for how your work is delivered and consumed
  • To be able to communicate with technology professionals in the workplace who support your work or who will be direct colleagues
  • Brainstorm new ideas for how to tell a story
  • Become a more attractive job candidate

Introductions

Instructors

Students

  • What is your name? And what do you want us to call you in class?
  • Where are you from?
  • Why are you at CUNY?
  • Why did you take this class and what do you hope to gain from it?

Getting Started

Necessary Programs

Accounts

If you haven't already, make sure you start accounts for Slack and GitHub. Once you are on Slack, go to the spring2016 room and paste in your GitHub username.

Start Your Website

Create a folder on your laptop somewhere easily accessible. You will create all your files in this folder, so it's important to know where you save it and to keep it organzied.

Naming

When naming your directories and files please remember:

  • Pick names that make sense for the content they are hosting
  • Keep all names all lowercase
  • Absolutely NO SPACES
  • If you want to separate words use a dash or underscore
  • NO: My Site, MYWebsite
  • YES: mysite, my-website, my_website

What is a Website?

Website Structure

  • Websites are simply an organized set of files.
  • The files are stored on servers in directories (folders).

Directory Structure

  • The root folder is the most top-level folder with your content in directories or files within the root.
  • The default page of a directory (site) is always index.html, which is returned when no other file type is specified in the URL
  • For example: http://mysite.com will go to the same page as http://mysite.com/index.html

Example

Disect Directory Structure

  • Each image and file on the page has a URL under that site's domain
  • The URL path points to the particular file or directory you want retrieve
  • Find the following in the example site:
    • http://mysite.com/writing links to the Writing page
    • http://mysite.com/about.html links to the About page
    • http://mysite.com/images/artoo.jpg is the path to the artoo.jpg image

Create Your Homepage

Open Sublime and start a new file. Save this file to your site's root directory and name it index.html. This will be your site's homepage.

File Extensions

The file extension simply tells your text editor and the browser what type of file (what language) it's opening and displaying. Your file extension should match the language you're writing in. In this class, we will primarily be working with three file extensions: .html, .css, .js

Local v. Remote

Your Local Website

This is the directory for your site that is stored on your machine. You can access it by viewing your index file in a web browser, but no one else can see it.

Your Live Website

When you upload your site files to a server they are then considered "live" and (in most cases) can be accessed by anyone who has the URL.

Tip

It is best to work on your site locally and then upload changes, as opposed to working live.

View Your Local Website

Type <h1>Hello, World!</h1> in your index.html file, save it, and open in a browser.

Git Lab

Assignments

Readings

Worksheet

Download the document from Slack called weekone_worksheet.docx and save a copy to your computer. Fill in the answers either print out and bring to the next class or send to Meghan via DM in Slack.

Recommended Viewing: