Internal web development course for non-developers at About.com
- Finish outline
- Fill in details of outline
- Add resources to lesson the attendees can use as references
- Make post-screencast quiz
- Make screencast
- Complete extra resources to check out
- Complete in-class exercises
- Write email to developers
- Ask them to join HipChat room
- Help with curriculum design
- Attend sessions
- Provide minutes for the screencast
-
Intro to course and what we plan on doing
-
Welcome! 30 people signed up for this course and we're super excited to have you here!
-
We assume no programming background and we'll be starting from scratch. Since this is our first attempt at doing this, we desperately need your feedback! We'll regularly have some optional surveys with a few brief questions you can complete if you'd like to help shape the course.
-
Resources (HipChat, Where to find curriculum and class notes, who to email with questions or issues, forum or listserv, text editor)
-
Overview of HTML, CSS, and JS and simple explanation of how websites work
-
What happens when you go to About.com? - Give the short answer - For the long answer: https://github.com/alex/what-happens-when
-
Deeper dive into HTML
-
Before we go any further, we'd strongly recommend you use Google Chrome as your browser.
-
If you'd like, you're welcome to copy what I do on your own computer to get some practice.
-
What is HTML?
-
HTML Syntax and Elements - html - body - head - title - p - h1 - h6 - img
- Fix Google - a - ul - ol - li
-
HTML Errors - What happens when you have an error in your HTML? - How can you detect and correct errors?
- Chrome Developer Tools
- Editors like Sublime Text
- Sites that you can develop on that can give you useful tips as you go (e.g. JSBin, JSFiddle, CodePen)
- HTML validation site
-
What to Expect Next and any TODOs before in-class
-
The first class, what we'll be doing in it, and what to have ready beforehand - Bring your laptop - Maybe install Sublime Text - Perhaps try a basic exercise like loading a locally saved HTML file in your browser.
-
What if you have questions before then?
-
Quiz to complete
-
We won't be giving out grades or sharing scores. This is solely a way for you to test your own understanding of the material. X Attributes go in the
- Metadata typically goes in the
- Visible content typically goes in the
- Our HTML documents will always start with
- Which of these elements when clicked will take you to Google
- HTML is responsible for
- CSS is responsible for
- JavaScript is responsible for
- Which of these will cause the kitty.jpg image to be displayed?
- Comments
- One way to open the Chrome Developer Tools is to right-click and select
- If the start tag to an element is , what would the end tag look like?
- All elements have a start tag and an end tag
-
If you'd like to continue learning prior to the next class, consider these resources
-
Fill out survey
-
What do you think of the screencast format?
-
HipChat Room - Does this work for you? x. General feedback and suggestions. Be honest! We want to make this as good as possible!
- Welcome and brief overview
- exercise 1 (setting up directory for course)
- exercise 2 (find/change something using the developer tools). Go over text editors to use. Could also have them change something on the about.com site the way you change things for google.
- main exercise - building own bio page, building about.com homepage, creating newsletter email
- bonus - more html elements you may not need
- reminder to save work
- fill out survey before leaving
- how difficult
- how much fun
- how was pacing?
- HTML elements with multiple attributes
- div and span elements
- CSS syntax
- CSS pseudo selectors
- bonus exercise - style what you made in the first class
- exit quiz and survey
- exercise 1 - see how you can adjust about.com
- exercise 2 - the developers and designers are sick and we need something fixed
- main exercise - style what you worked on previous class. If you missed the previous class, here's a starter file you can save and then work with.
- Overview of JavaScript and programming in general
- Demo of the amazing stuff you can do with JavaScript
- Pablo the Flamingo
- Touch Pianist
- Lights
- Add other examples
- Consider showing sites with JavaScript disabled
- Start by doing math in the console
- Show +, -, *, /, and %
- Move code into file and run and see that nothing appears to happen
- Introduce semicolons
- Show how to call a function (console.log)
- alert
- So far we've just been printing out numbers. How about some text? Introduce strings. Consider introducing typeof
- prompt (show it returns string)
- Go into the difference between numbers and strings using the + operator
- Assigning to variables and accessing variables
- Read "=" as "gets" instead of "equals"
- Assigning number to variable
- Figure out rhs and then store in lhs
- Assigning math operation to variable
- x = x + 1
- Assigning function return value to variable
- What happens when you access a variable before it has been declared?
- What happens when you access a variable before it has been initialized?
- Show casing matters
- JavaScript Comments
- Math.random()
- String methods and properties?
- Getting & setting values from the DOM using JavaScript?
- Append?
- Starting and stopping audio with JavaScript (consider moving to Function & Events class)
- What happens when there is an error in your JavaScript?
- Debugging
- console.log
- debugger
- Plunker or JSBin
- Show ability to share your site with others
- How to include JavaScript in your site
- Quiz
- Comments
- String type question
- How to include JS in your webpage
- Additional Resources
- CodeAcademy
- CodeSchool?
- Eloquent JavaScript
- Consider having attendees create a JSBin or Plunkr account
- Write some code in the console
- Alert "Hello world!"
- Ask the user for her name and then alert "Hello ______!"
- Instead of alerting the user's name, update the HTML to contain the user's name
- Pay raise calculator - Maybe use Math.random to do a estimate of how much money you'll be making in the next year
- document.getElementById to set values
- Madlibs. Give yomama joke generator as example
- Start with prompts and alert
- Then prompts and HTML
- Fix these bugs
- Casing issue
- Calling a function improperly
- Using a variable that hasn't been declared
- Exercise - Choose your own adventure
- setTimeout, setInterval
- Callback functions
- Responding to user actions
- While
- Infinite loops
- For
- Arrays
- Survey
- Ask how they'd like to spend the last class (hackathon, jeopardy, party, etc.)
- Quiz
- What probably went wrong if you see an error like "ReferenceError: $ is not defined"?
- Have color of background be based on mouse position. Perhaps clicking causes an animation or some other effect
- Overall review to prepare for jeopardy
- Course exit survey
- Assessment tool quiz?
- Jeopardy? Perhaps have the teams compete against eachother for the final class. Have a plastic trophy for winning team.
- Hackathon?
- Email developers
- Request t-shirts
- Make certificates
- Plan hackathon?
- Create listserv?
- HTML
- CSS
- variables
- math operators
- conditionals
- functions
- loops
- arrays
- jQuery
- strings
- events
- setInterval and setTimeout
- Debugging / developer tools
- Bootstrap
- Projects
-
Taking a profile page about an Expert and updating it for yourself
-
Text adventure game
- about.com themed where your manager finds you sleeping on the job and such
- possibly incorporate people from about
-
"Can I have a promotion?" project (jQuery)
-
Market share button pressed race. Or just half about.com and half everybody split screen. Whoever taps first or fastest takes over the other screen.
-
make an animation using the about.com ball/logo
-
create or reimagine a logo. Could be a logo mash where you make the about.com logo with the theme from a different company's logo.
-
Create HipChat Bot - https://hubot.github.com/docs/scripting/
- Create HipChat room for class
- Create nodeschool modules
- Add general quick tips (sublime plugins or shortcuts (reindent))
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent