This is a short intro. class on design-driven software development. It's (very) roughly 60 hours of content, including class time and assignment time. It's designed for a learner that's comfortable with user stories and related techniques on software design that I cover in this class: Software Design. That class is not a prerequisite, but if you haven't taken it you may need to budget a little extra time to loop back and cover a few key topics.
After completing this course, students will be able to:
- Build functioning web applications using HTML, CSS, and Javascript
- Focus coding tasks on valuable outcomes with user stories and prototypes
- Evaluate alternative approaches to software implementations
- Participate in a version control process using Git and Github
- Work through technical issues with analytical debugging techniques
The material that follows is organized around 'sessions'. When I teach the class, there are 2 each week.
You | It ------------- | ------------- I want a current, comprehensive overview of the class so I know what's happening in class and what assignments are coming. | You're in the right place- this page is the place. I want to turn in an assignment so it's recorded as on time and complete and can be reviewed and graded. | Canvas is the place (Darden). I want to complete the various coding tutorials so I can advance my skills and record the tasks as complete. | CodeAcademy is the place- there are links to the specific lessons below. I want to set up and manage my WordPress instance so I can [start building things, create a restore point, restore to a restore point]. | WP Engine is the place. If you're a team lead, create an account. If you're on a team, your team lead will send you a login. I want to add, modify, code on my site so I can implement my user stories and wireframes. | For this go to the admin page on your WordPress instance, which will be [your site]/wp-admin. I want to notes on setting up WP Engine and Wordpress so I don't have to figure out everything from scratch. | Please see our handy WP Engine/WP Guide: WP Engine & WordPress Notes for Software Development Class I want to post a question on Piazza so I can get help from my peers and the teaching team. | Please see our handy WP Engine/WP Guide: Piazza Site for GBUS 8633 I want to review the Model View Controller (MVC) framework, so I have a generalized framework for thinking through software composition and structure. | Please see our handy tutorial: Model View Controller Tutorial Introduce the class objectives and infrastructure. Start on HTML & CSS.- Do/Individual: Pick a Project & (Optional) Team and Prepare Your Design
WHAT? Pick a project and make sure you have at least:
- User Stories (epics and detail with child stories)
- Prototype to articulate your user stories (Tutorial)
Being prepared with these items is important because one of the class' core objectives is learning to focus your work with stories. It's also important to have a pretty specific execution because when you're confronted with all the hooks and dials available to you, it helps to have a pre-existing idea of what you want to have happen.
WHERE? Using the Venture Design template.
We'll spend part of class time working with help available (lab).
- Do/Individual: CodeAcademy Tutorial on HTML+CSS
WHAT? Complete the CodeAcademy tutorial on HTML+CSS up to and including the module 'HTML STRUCTURE: TABLES, DIVS, AND SPANS'
WHERE? Submit the completion screen.
We'll spend part of class time working with help available (lab).
- Do/Individual: CodeAcademy Tutorial on HTML+CSS
WHAT? Complete the CodeAcademy tutorial on HTML+CSS up to and including the module 'Introduction to CSS' (just one module).
WHERE? Submit the completion screen. - Do/Individual: Design a Page (30-90 minutes)
WHAT? Define your objectives for the upcoming assignment 'Create a Static Page with HTML+CSS'. This should include user stories and prototypes in Balsamiq.
WHERE? Place this in Section 3 of your Group Venture Design doc using an H3. Name it '[your initials] Static Page Concept'. Add a bookmark in the Google Doc and submit that link.
We'll spend part of class time working with help available (lab).
- Do/Individual: Finish CodeAcademy Tutorial on HTML+CSS
WHAT? Complete the CodeAcademy tutorial on HTML+CSS.
WHERE? Submit the completion screen. - Do/Group: Set up Account & Users on WP Engine
WHAT? Sign up for a team account on WP Engine and make sure everyone in the group and the teaching team has a user account. See the following tutorial on notes for set up: (COMING SOON). It is highly advisable to select a theme and primary navigation scheme at this point- it will make it much easier to manage your individual work.
WHERE? There is no need to submit this assignment. - Do/Individual: Begin Your Static Page
WHAT? Begin to create your static page. While this is an individual assignment, you will likely need to coordinate as a group. Be sure to add the following set of comments demonstrating your understanding of the individual HTML+CSS concepts:
COMING SOON.
WHERE? This isn't due until the next session, but if you're done, submit the URL of the page.
We'll spend part of class time working with help available (lab).
- Do/Individual: Finish Your Static Page
WHAT? Finish your static page. While this is an individual assignment, you will likely need to coordinate as a group. Be sure to add the following set of comments demonstrating your understanding of the individual HTML+CSS concepts:
COMING SOON.
Be prepared to explain how it delivers (will deliver) on your user stories and prototypes.
WHERE? Submit the URL of the page.
We'll spend part of class time working with help available (lab).
- Do/Individual: Finish CodeAcademy Tutorial on JQuery Up to Unit 5
WHAT? Finish the intro. tutorial on JQuery from CodeAcademy. Stop at Unit 5.
WHERE? Submit the URL of the page.
We'll spend part of class time working with help available (lab).
- Do/Individual: Finish CodeAcademy Tutorial on Interactive Sites- to Unit 3
WHAT? Finish the CodeAcademy tutorial on 'Interactive Websites' up to Unit 3.
WHERE? Submit the URL of the page. - Do/Individual: Design for Assignment 'Interactive Pages'
WHAT? Design your approach to the assignment 'Interactive Pages'. This should include user stories and prototypes in Balsamiq.
WHERE? Place this in Section 3 of your Group Venture Design doc using an H3. Name it '[your initials] Interactive Page Concept'. If this is an update to your existing section, you can just rename it. Add a bookmark in the Google Doc and submit that link.
We'll spend part of class time working with help available (lab).
- Do/Individual: Finish Assignment 'Interactive Pages'
WHAT? Create your interactive page. While this is an individual assignment, you will likely need to coordinate as a group. Be sure to add the following set of comments demonstrating your understanding of JQuery and JS concepts:
COMING SOON.
Be prepared to explain how it delivers (will deliver) on your user stories and prototypes.
WHERE? Submit the URL of the page.
We'll spend part of class time working with help available (lab).
- Do/Individual: Design for Assignment 'Interactive Pages II'
WHAT? Design your approach to the assignment 'Interactive Pages II'. This should include user stories and prototypes in Balsamiq and be an enhancement to your existing work.
WHERE? Place this in Section 3 of your Group Venture Design doc using an H3. Name it '[your initials] Interactive Page Concept II'. If this is an update to your existing section, you can just rename it. Add a bookmark in the Google Doc and submit that link.
<li><strong>Do/Individual: Complete Github Assignment</strong>
WHAT? Read the GitHub Tutorial and then use Git - Installation & Setup guide to get Git running on your laptop. The GitHub Tutorial contains an assignment for you to complete as you go through the tutorial. Instructions for the assignment are detailed in the Tutorial.
WHERE? Submit a link of your completed assignment using this GitHub_YOURINITIALS as an example to Canvas.
We'll spend part of class time working with help available (lab).
- Do/Individual: Work Assignment 'Interactive Pages II'
WHAT? Create your next interactive page. While this is an individual assignment, you will likely need to coordinate as a group. Be sure to add the following a comment explaining what you did: '[your initials] Interactive Page Concept II'
Be prepared to explain how it delivers (will deliver) on your user stories and prototypes.
WHERE? Submit the URL of the page. - Do/Individual: Work CodeAcademy Tutorial on Javacript
WHAT? By the next session you'll need to be up to the module ''FOR' LOOPS IN JAVASCRIPT' in the CodeAcademy tutorial on Javascript.
WHERE? Submit a screenshot of the completion page.
We'll spend part of class time working with help available (lab).
- Do/Individual: Complete Assignment 'Interactive Pages II'
WHAT? Create your next interactive page. While this is an individual assignment, you will likely need to coordinate as a group. Be sure to add the following a comment explaining what you did: '[your initials] Interactive Page Concept II'
Be prepared to explain how it delivers (will deliver) on your user stories and prototypes.
WHERE? Submit the URL of the page. - Do/Individual: Work CodeAcademy Tutorial on Javacript
WHAT? By this session you'll need to be up to the module ''FOR' LOOPS IN JAVASCRIPT' in the CodeAcademy tutorial on Javascript.
WHERE? Submit a screenshot of the completion page. - Do/Individual: Design for Assignment 'Interactive Pages III'
WHAT? Design your approach to the assignment 'Interactive Pages III'. This should include user stories and prototypes in Balsamiq and be an enhancement to your existing work.
WHERE? Place this in Section 3 of your Group Venture Design doc using an H3. Name it '[your initials] Interactive Page Concept III'. If this is an update to your existing section, you can just rename it. Add a bookmark in the Google Doc and submit that link.
We'll spend part of class time working with help available (lab).
- Do/Individual: Work Assignment 'Interactive Pages III'
WHAT? Create your next interactive page. While this is an individual assignment, you will likely need to coordinate as a group. Be sure to add the following a comment explaining what you did: '[your initials] Interactive Page Concept II'
Be prepared to explain how it delivers (will deliver) on your user stories and prototypes.
WHERE? Submit the URL of the page. - Do/Individual: Work CodeAcademy Tutorial on Javacript
WHAT? By the next session you'll need to be up to the module ''Data Structures' in the CodeAcademy tutorial on Javascript.
WHERE? Submit a screenshot of the completion page.
We'll spend part of class time working with help available (lab).
- Do/Individual: Complete Assignment 'Interactive Pages III'
WHAT? Create your next interactive page. While this is an individual assignment, you will likely need to coordinate as a group. Be sure to add the following a comment explaining what you did: '[your initials] Interactive Page Concept II'
Be prepared to explain how it delivers (will deliver) on your user stories and prototypes.
WHERE? Submit the URL of the page. - Do/Individual: Work CodeAcademy Tutorial on Javacript
WHAT? By this session you'll need to be up to the module ''FOR' LOOPS IN JAVASCRIPT' in the CodeAcademy tutorial on Javascript.
WHERE? Submit a screenshot of the completion page. - Do/Individual: Design for Assignment 'Interactive Pages IV'
WHAT? Design your approach to the assignment 'Interactive Pages IV'. This should include user stories and prototypes in Balsamiq and be an enhancement to your existing work.
WHERE? Place this in Section 3 of your Group Venture Design doc using an H3. Name it '[your initials] Interactive Page Concept III'. If this is an update to your existing section, you can just rename it. Add a bookmark in the Google Doc and submit that link.
We'll spend part of class time working with help available (lab).
- Do/Individual: Work Assignment 'Interactive Pages IV'
WHAT? Create your next interactive page. While this is an individual assignment, you will likely need to coordinate as a group. Be sure to add the following a comment explaining what you did: '[your initials] Interactive Page Concept II'
Be prepared to explain how it delivers (will deliver) on your user stories and prototypes.
WHERE? Submit the URL of the page. - Do/Individual: Work CodeAcademy Tutorial on Javacript
WHAT? By the next session you'll need to complete the CodeAcademy tutorial on Javascript.
WHERE? Submit a screenshot of the completion page.
We'll spend part of class time working with help available (lab).
- Do/Individual: Complete Assignment 'Interactive Pages IV'
WHAT? Finalize your next interactive page. While this is an individual assignment, you will likely need to coordinate as a group. Please submit using the final assignment template: https://docs.google.com/document/d/1QHlTQLEZgIKnZnIlNIgHVTy8-K6gXLdxbtN6pCtogPg/edit# Please be sure to share that to acowan@alexandercowan.com and to submit the URL on this assignment.<li><strong>Do/Individual: Complete CodeAcademy Tutorial on Javacript</strong>
WHAT? By this session you'll need to completethe CodeAcademy tutorial on Javascript.
WHERE? Submit a screenshot of the completion page.