CWK Explorers

DESCRIPTION

Explore the world of web development and build resume-worthy projects!

Saturdays, September 23rd, 2017 – October 28th, 2018
10:00am-1:00pm @ Milpitas Adult Ed Center

  • Start with simple projects and build webapps
  • End with a portfolio of projects
  • Learn enough to jump into multiple web frameworks
  • Learn about frontend and backend development
  • The course is geared towards students in grades 7 – 12 at all experience levels. Students are expected to have taken algebra and have some computer literacy (ie proficient at typing, navigating the web, installing software).

The Explorers program aims to do two things:

  1. Establish a solid foundation for learning computer science principles (data structures,
    algorithms, etc) by exploring a simple but versatile language: JavaScript.
  2. To help students explore by building projects with relevance rather than staying on the
    command line til the last week. By the end of the course, students will be ready to dive into
    computer science fundamentals, and will have a small portfolio of projects which they can
    showcase to parents/teachers/schools/employers/etc.

In learning about JavaScript, students will traverse open source code and become active participants in the programming community. A big emphasis is placed on self-starting and experimentation with new ideas and software. Many JavaScript frameworks are young projects, and if students wanted they could even contribute to their development.

Why JavaScript?

TLDR: Easy to get started, and exercises your coding skills.

JavaScript is simple, universal (in the browser and outside it, on any modern OS), and yet still very powerful. It is in-demand in the current job market, as more and more companies shift their focus to developing applications for the web. Beginning to write JavaScript requires nothing but a web browser and a text editor, which are plentiful on all modern operating systems. There’s nothing to install when you get started, and the development environments (i.e. programming tools) aren’t big and bulky. You can focus on your code!

Furthermore, as you learn more and more JavaScript, you learn to think in flexible ways, and make the language your own. Unlike many languages, JavaScript leaves you very free to do whatever you want. This makes it easy to code, but also easy to code inefficiently. This means that students will get to exercise their coding skills to learn good form and practice, which will serve them well no matter what language they move onto.

Requirements

TLDR: Not much. Some Algebra. We’ll be typing a lot.

No prior programming experience is required. This course requires only that you understand basic algebra (expressions with parentheses) and have access to a computer (Both MacOS and Windows are fine). Typing proficiency is a plus, but otherwise students will practice typing as well.

6 Week Plan

  1. HTML/CSS, a little JS
  2. JS intro, using jQuery and building small web apps
  3. Using AngularJS
  4. NodeJS and GitHub, backend
  5. Projects and build systems
  6. Career paths and next steps

Week 1: You’re a Programmer Now

In Week 1 we take a flyover tour of computers and programming, learning how abstraction works to let programmers focus on their work rather than managing everything that goes on inside the computer. We learn how software (including students’ code) traverses the computer to talk to hardware and make things happen. We then take a tour of web development, and how it differs from native development on a platform. Finally, we learn enough basic HTML and CSS for students to jump start into building simple web pages, and (separately) a tiny bit of JavaScript. In doing so we’ll review different text editors.

During Week: Play with HTML!

Practice making web pages! Try to recreate pages you’ve seen on the net! Try out different HTML tags and CSS properties. You don’t need to know everything, but you need to be comfortable looking things up and experimenting. Copy/paste code into yours and see if you can make elements fit into your page. Start sketching out what your portfolio site will look like.

During Office Hours: Recap and share!

During once-per- week office hours, students can present what they’ve made so far to the class. We’ll also look at some more CSS properties and learn a few neat tricks for building cool pages.

Week 2: Tweaking the Page

Now that we can build some basic pages and know a tiny bit of JavaScript, we start tweaking the page! We start out by modifying DOM nodes through JavaScript. Then using our js library: jQuery! This gets us up and running very quickly, writing functions that will handle events for us. This leads us into the functions-first mode of thinking that JavaScript runs on, and gets us working on slightly more complicated code. At this point we have enough programming prowess to build simple applications that take input from the user! And, with a little bit of research from the net, we can build interactive elements like carousels without too much hassle, and all while learning about data structures and UI!

During Week: Build Things and Learn More!

During the week, finish up the carousel project and start working on another interactive element that you might want to put on your portfolio page. Then, work on writing a small JavaScript-powered application. This could be as simple as a gpa calculator or as complex as a small game, but pay attention to how you manage your code logic and how you present information to the user.

During Office Hours: Recap and share!

During office hours we’ll show off our portfolio pages so far, as well as any neat custom element we’ve come up with. We’ll talk about managing program logic and discuss any troubles we have come across. We’ll also look at some jQuery plugins, and discuss why jQuery is useful.

Week 3: Stacks on Stacks on Stacks

We know a bit of HTML and CSS, and we know a bit of JS. Time to dive into the good stuff: frontend and backend development. We’ll recap some of the week 1 tour of web development, and take a look at some popular stacks. We’ve got to be sure we’re on the same page, as these concepts can often be troubled waters. We observe how data travels between front and backend, perhaps with a physical activity. If we’re solid on this, we move on to focusing on frontend this week. We start into AngularJS, a popular frontend framework. We start with some basic projects that should be no sweat if we paid attention to JavaScript so far. We examining two-way data binding and get a grip on the model-view- controller paradigm that permeates web development. We then learn to use very basic REST services (like the twitter API) to get more data into our application after the page has loaded. Sky’s the limit from here. We might also take a look at other frontend web frameworks and take a tour of the community and how to become a part of it. Lastly, we summon enough courage to learn to use GitHub, maybe even starting a group project!

During the Week: Craft Some Commits, Kiddos

Adapt your jQuery-ridden portfolio page into an Angular app! Scour bower or npmjs.org for some nice directives to plug into your page. Commit regularly to your GitHub page, and start to develop a taste for Angular code. Debugging can be tricky with Angular, so dive deep into Stack overflow and figure things out!

Office Hours: Angular Troubles, Present, and Recap

Angular demands conformity to the framework, so when you want to go outside the box, you’ll often end up reading up about Angular’s internals. That’s awesome, but if you can’t figure things out still, we can all take a shot at it together. In addition to a group debugging therapy session, we share our projects and learn how to put static sites up on GitHub-Pages.

Week 4: Serves You Right

Now that we have a neat-o frontend application, we jump onto the backend and learn about Node.js. Hipster-central. We learn how to set up a simple web server in Node, which requires comfort with nested functions… Everywhere. We’ll be examining reading from the file system and sending out streams of data. As we realize this stuff is pretty complicated, we’ll add in the Express library. Not so hard anymore! We then set up a few routes on our site, as well as some API endpoints, then serve our Angular app from our Node server. If we’re daring, our app will start reaching out to our server to receive more data. A simple to do-list example helps us get to grips with this. If there’s time, we’ll set up Firebase to use as a database.

During the Week: Play with NPM modules

Explore NPM! The community has put together so many tools for you to use in your application! Do some npm install — save ‘s and integrate the module into yours to super-charge your Node app. Also, look into build tools for JavaScript (gulp, grunt, web pack, etc) to make some programming stuff easier on yourself.

Office Hours: Share/Recap + Some Cool Modules

In office hours this week I show you some neat node modules; some historically famous ones and some new ones that seem promising. We take a look at the process behind putting a module on NPM, and showcase our projects.

Week 5: Project Projections and Other Fun

This week I answer your questions about your projects and do some live coding to guide you through how to think about setting up your code. We look at different tools that will speed up your coding, and set up a good build system using web pack. We also try out Sass for styling (it’s magic, really) and integrate it into our build system. On the backend, we look at some templating systems. Handlebars is my favorite but we examining Jade/Pug too. In the remaining time we’ll look at other JavaScript skills, like managing asynchronous operations and new ES6 features.

During the Week: Work on your Projects!

Work on those projects! Make something you can be proud of, that you’ll want to look back at with a smile and a sense of progress.

Office Hours: Sharing Progress and Presentation tools

This week we look at a few short tech talks together and look at how programmers show off their projects. We figure out how we want to present our code, and the differences between presenting to a technical and a non-technical crowd.

Week 6: Presentations and What’s Next

You’ve been working on your projects for 2-3 weeks now, and it’s finally time to present! Get up there and show off what you’ve made. You’ll receive a certificate of completion if you’ve gotten through everything with satisfactory results. Then we examine what comes next! We look at next steps and where you can go from here. Do you want to become a computer science researcher? Work on data science? Develop applications? Oh, the places you’ll go!

For more info:
(510) 792-1614
register@codewritingkids.com

Register Now