In the first class, you will get some experience with HTML, CSS, and the DOM (Document Object Model).

Goals for the Week

Computing Skills

At the end of the week, interns will understand some principles of web architecture, assigning rules to elements and attributes, and inspecting & debugging HTML & CSS.

Vocabulary

Some important vocabulary to know for this week:
DOM, HTML, CSS, JavaScript, browser, resource, syntax, element, attribute, global selector, class selector, property, hexidecimal notation ("hex value"), rgb, responsive, cloud, network, server, client, IP address, domain name

Resources & Documentation

Resources & Documentation can be found here.

Wed, 7/8: HTML & CSS

Welcome to the Code 510 summer internship! All activities, instructions, and homework will be posted on this page.

Today's Activities

  1. Introductions, expectations, & paperwork
  2. Course Overview & Intro to the Web
  3. Create a ShiftEdit Account
  4. Assignment 1: Photo gallery
  5. Overview of homework

Homework Due Friday, 7/10

This homework should take about 2 hours. Your assignment is to watch the following video tutorials on Lynda.com (an online resource for professional web designers and developers). If this is a review for you, you can go through the videos quickly, but make sure that you are familiar with all of the vocabulary listed above. We will go over it in class on Friday.

1. Introducing HTML

3:19 Importance of HTML
8:42 Basic HTML Syntax
5:28 Finding Resources

2. Basic Page Structure

5:27 Exploring an HTML Document
6:11 HTML Head
3:58 HTML Body

3. Formatting Page Content

6:58 Formatting HTML Content
7:50 Using Headings
5:35 Formatting Paragraphs
3:46 Line Breaks
3:37 Controlling Whitespace
7:08 Displaying Images

7. Controlling Styling

5:34 HTML & CSS
4:13 Creating Inline Styles (not recommended)
6:20 The Style Element (important)
11:58 Controlling Typography
6:56 Adding Color
6:57 Externalizing Styles

Friday, 7/10: HTML & CSS Continued

Today we're going to think a little more about design, and how you can use HTML and CSS to instantiate good design principles. Some guiding questions to think about today are:

  • Design What are good design principles, and how do we use them in our own work?
  • Web Architecture How does a browser help you to combine web resources together?
  • HTML / CSS Separation Where does the CSS go? Where does the HTML go? How can you tell which is which?
  • Debugging & Inspecting How can you use the Web Developer tools to find out more about how things in your browser are working?
  • Technical Docs How can you use existing resources to teach yourself?

Today's Activities

  1. Ice breaker: project ideas & "Speed Dating." Prompts:
    • Your name
    • Some of the apps / websites you like / use
    • Why you're interested in tech & apps
    • App idea(s) that you have / want to work on
    • What you want to learn in this class
    Afterwards, you're going to share out something that someone else said.
  2. Design discussion: presentation led by Jessica
  3. Design activity (Part 1): Redesign!
  4. Debugging and deconstructing & short assignment
  5. Implement redesigns in HTML / CSS

Homework Due Wednesday, 7/15

Spend a little time on your redesign

Using the resources page, try applying some of the example effects to your re-design. You will have more time to finish it in class on Wednesday.

Goals for the Week

Computing Skills

Continuing to build HTML & CSS skills, working on debugging skills, and beginning to work with JavaScript and know what it does.

Vocabulary

JavaScript, JQuery, variable, loop, data, debugging, API (application programming interface).

Resources & Documentation

Resources & Documentation can be found here.

Wednesday, 7/15: Practicing our HTML / CSS, and putting it to use!

Today's Activities

  1. Practice finding errors and fixing them:
    1. Take a look at the snippets library, and click on the debugging tag.
    2. Create an account in Codepen.io
    3. Please fix the 8 broken samples in the snippet library. To do this, (a) log into codepen.io, (b) click on the broken sample, (c) "Fork" the example, (d) fix it, and (e) save it.
    4. When you're done, submit a link to all 8 of your fixed Codepen samples here.
  2. Implement your re-design. Be sure to include the following elements:
    1. A top-level menu
    2. A creative font using Google Fonts
    3. An image effect
    4. Code in your stylesheet that makes your website RESPONSIVE (to handle different screen sizes).
    5. Add some interactivity and flare

Homework Due Friday, 7/17

For the homework assignment for Friday, you need to register and log into Kahn Academy, and complete the modules listed below. We will be checking everyone's homework on Friday, to ensure that everyone is doing their homework.

JavaScript on Kahn Academy

3:52 Intro to JavaScript
3:52 Intro to Variables
5-10 Variable Lab
7:08 More on Variables (watch this one twice)
5-10 Challenge: Funky Frog
5:10 Intro to Animation
5-10 Exploding Sun
2:59 Mouse Interaction

JavaScript & the DOM on Kahn Academy

4:25 JavaScript & the DOM
3-5 JavaScript Challenge
3:21 The DOM
3:32 Finding Elements by ID
3-5 ID Challenge

jQuery from the Internets

8:00 Intro to jQuery
7:32 jQuery: Lesson 2
6:49 jQuery: Lesson 3

Friday, 7/17: Intro to JavaScript

Today's Activities

  1. Review of Kahn Academy homework
  2. Live demo to introduce the first activity
  3. Do the Activity
  4. Live demo: how to use the Code Snippet Library. Some key ideas:
    • What gets pasted where?
    • What are external resources?
  5. Live demo: JavaScript versus JQuery: a quick example
  6. Activity #2: Experiment with the JQuery file (which was also uploaded with activity #1)
  7. Activity #3: Finish your re-design

Homework

Complete your redesigns (Breakfast or Starship). You will be sharing out on Wednesday. For those of you who were absent, please also be sure that you've completed your 7/15 homework also.

Goals for the Week

Computing Skills

By the end of the third week, interns will have used Data APIs and third-party CSS and JavaScript libraries in their own web pages.

Vocabulary

JSON (JavaScript Object Notation), AJAX, loops, server, client, cloud, authentication

Resources & Documentation

Resources & Documentation can be found here. We will be using the JQuery and Handlebars APIs this week, so take a look at the documentation for more information.

Wednesday, 7/22: Using Data APIs in Your Apps

Today's Activities

  1. Housekeeping: Homework Check (Kahn Academy) + Snagit Logistics
  2. Activity #1
    Debugging broken paths, @media, and learning more about selectors
  3. Show & Tell: Redesigns!
    • Describe your process
    • What was difficult?
    • What did you learn?
    • Was it fun or tedious (or both)?
  4. Activity #2
    More practice with selectors; new concepts involving JQuery, AJAX, templating, and data. This is a pretty involved activity, so take your time. Whatever you don't complete in class is homework.

Homework

Finish activities #1 & #2

Congrats! You're halfway done with the course!

Friday, 7/24: Looking at Public Data sources

Today's Activities

  1. Homework review
    • Selectors
    • Using the JavaScript console to inspect JSON
    • Other questions or points of confusion?
  2. Draw a picture of the Internet
    1. From a technical perspective, how does an email that you write get to it's destination?
    2. How does a photo that you take on Instagram get into one of your friends' feeds on their phone?
  3. Activity #1: Intro to the Instagram API tester

Homework

No homework. Have a nice weekend!

Goals for the Week

Computing Skills

Interns will continue developing their skills in using Data APIs and third-party CSS and JavaScript libraries in their
own web pages. Interns will also come up with their own app idea that leverages some of these third party data services.

Vocabulary

JSON (JavaScript Object Notation), AJAX (Asynchronous JavaScript & XML), loops, server, client, cloud, authentication

Resources & Documentation

Resources & Documentation can be found here. We will continue using the JQuery and Handlebars APIs this week, so take a look at the documentation for more information.

Wednesday, 7/29: Project Work

Today's Activities

  1. How do social media platforms make money?
  2. Tour of APIs
  3. Individual work: Complete Part I & II of Activity #1. We will do Part I together as a class. You will do part 2 on your own
  4. Quiz
  5. Complete Part 3 & 4 of Activity #1

Homework Due Friday, 7/31

For your homework, please watch the 5 videos I made below, and then complete this homework. These are not the highest quality videos, but I hope that they will be helpful. Don't worry about completing the Activity #1 sheet from Wednesday yet. We will work on that more on Friday.

Reviewing Data & Templates

9:57 Data & Templates 1
10:57 Implementing the "Hover" Template
5:37 Order of Loading Resources
12:03 An overview of scripts/main.js
11:00 Data & Templates 2
code Sample code from videos (if it helps)

Activity

Complete this homework

Friday, 7/31: Project Work

Today's Activities

  1. Homework check & review
  2. Complete Part 3 & 4 of Activity #1
  3. Go over the Final Project assignment

Homework

  1. Complete Part #1 of the Final Project Assignment (questions 1 - 7). Please take your time to create your app drawing, and make it as detailed as possible.
  2. Sign up for an interview time slot.

Goals for the Week

Computing Skills

Integrating everything that you've learned into a final product.

Vocabulary

Web Architecture

Resources & Documentation

Resources & Documentation can be found here.

Wednesday, 8/5: Project Work

Today's Activities

  1. Share out your final project sketches and give / get feedback (hand out feedback slips)
  2. Continue working on your Final Project Assignment

Homework

Spend some time working on your final project.

Make a presentation using this template.

Friday, 8/7: Project Work

Today's Activities

  1. Please fill out the Course Survey
  2. Continue working on your Final Project
  3. Project presentations

Wrap Up

  1. Make sure that we have your Contractor payment forms!
  2. Have a great 2015-16 School Year!