-
Earn the first 2 badges in the Treehouse Web Design Track. These are part of the "Build a Simple Website" course. If you've already dones so, great! If you've covered this material before, just take the quizzes. Otherwise, watch the screencasts and take the quizzes.
- Website Basics Badge
- Text Editors and HTML Badge
-
Do the first lesson in the Code Academy Web Track.
-
Earn the following Git Basics badges on Treehouse.
- Why Version Control Matters
- Getting Started with Git
- Working with Remote Repositories
-
Do the online introduction at Try Git
-
Earn the following Console Foundations badge on Treehouse
- Getting Started with the Console
-
Set up your machine with the recommended development tools.
We recommend that you do this in pairs during class or during office hours. 0. Install MAMP 0. Install git. (Optional: install a git GUI client. We'll discuss which one in class.) 0. Install Sublime Text. Get version 3 if you are feeling adventurous. This is a paid software product that has an indefinite free trial. You should plan on paying for it as soon as you have a developer job.
-
Connect up to the community
- Install an IRC client and visit the #portlandcodeschool channel on irc.freenode.net. Say hi to "Auraelius" (Al).
- Join the Google+ "Portland Code School" Community. If you didn't get an invitation, contact Al or Cris Kelly.
- Add your contact information to the Google doc student list. If you didn't get an invitation, contact Cris Kelly.
- Join Cel.ly and join the "Portland Code School" and "Front End Freelancer" groups. This will help you hear about school closures and makes aranging meetups and employer visits easy and fun.
-
Prepare a Lightning talk for the second class. This is a 5 minute talk about anything that means something to you. Your goal is to teach the class something new. Any topic is OK, you just need to care about what you are teaching us.
-
Report your hours and progress on the assignments to Nìm and Al by Sunday night.
-
Explore the resources given below. Even if you don't understand why these are needed, at least you'll get an idea of the diversity of tools.
-
Earn the next two badges in the Treehouse Web Design Track. These are part of the "Build a Simple Website" course. If you've already dones so, great! If you've covered this material before, just take the quizzes. Otherwise, watch the screencasts and take the quizzes. Note: We will not use "Launching the Website" at this time.
- Creating a Website Structure
- Styling Content
-
Earn the Chrome DevTools Basics badge.
-
Do the next lesson in the Code Academy Web Track: "HTML Structure: Using Lists", including
- HTML Basics II
- Social Networking Profile
Note: These lessons are embedding all CSS language in the element tags in a style attribute. This technique helps you mentally associate the style with the tag. Later, we'll explore separating the style from the content as we've discussed in class.
-
Report your hours and progress on the assignments to Nìm and Al by Sunday night.
-
Work with your team to accomplish Code Challenge 01 by your self-imposed deadline.
-
Earn the the following three badges in the Treehouse Web Design Track. These are part of the "CSS Foundations" Deep Dive course.
-
Earn the the following badges in the Treehouse Git Basics. These are part of the "Git Basics" Deep Dive course.
- Branches
- Merging
-
Do the following lessons in the Code Academy Web Track: "Introduction to CSS", including
- CSS: An Overview
- Design a Button for Your Web Site
- Watch all MODX quickstart videos EXCEPT the first video about MODX Cloud
- Try to create a new template in you local install of MODX
- Practice branching and merging in Git
- MODX tutorials -- note, please SKIP the first video about MODX Cloud
- MODX documentation
- Wordpress Documentation
- Watch the Introduction to programming Treehouse videos
- Prepare to demonstrate how far your team has progressed on the Code Challenge on Friday during class.
- By next week, be ready to do a lightning talk on the technologies and methods that you think you should focus on in your career
- Independently research all materials related to Wordpress that we have covered that you have questions about. See if you can install wordpress on your machine! Edit a theme!
- Visit a Portland web developer meetup and prepare a lightening talk for next Wednesday
- The name, time, and focus of the meetup
- How you foundf out about it
- The name, company, and typical projects of a particular person you met at the meetup
- The pros and cons of this meetup from your point of view
- Complete the free screencast series Try jQuery -- free registration required
- Complete the Treehouse Javascript screencasts at JavaScript Foundations -- You started these a few weeks ago and may have already finished them; make sure you complete the "Functions" and "Objects" badges by Friday. If you already know JS, just do the quizzes. We'll be checking who has the badges.
- Complete the Treehouse How to Make a Website with WordPress
- Watch these SASS tutorials
-
Review resources to learn more advanced development, including 3rd party snippets
-
Converting SASS with your editor
Note: Don't sink too much time into this. Easy to get stuck with errors
-
Figure out your version
-
Install Package Control
-
Use Package Control to download the plugin
- Read this list of invented programming jargon, and try to infer lessons or rules about working on the internet from it.
- Read the article Fixed vs. Growth: The Two Basic Mindsets That Shape Our Lives.
- Read the essay "The Planning of Science" in this Lewis Thomas book.
- Prepare a technical "shopping list" of technologies you want to use in your capstone. Organize it into material you have expereince with and material you will need to learn. Examples might include, "WordPress", "MODX", "Mobile Experience", or "Cloud Hosting".
- Install Twitter Bootstrap on your local environment BY WEDNESDAY MORNING
- Install the LESS app on your machine BY WEDNESDAY MORNING
- Experiment with Bootstrap's examples, using what you know about Sass to navigate the LESS files.
- Watch Getting Started with Wordpress
- Watch The WordPress Codex
- Watch How to Make a Website with WordPress
- Watch How to Build a WordPress Theme but this might bleed over into next week.
- Watch jQuery Basics
- Watch [Framework Basics] (http://teamtreehouse.com/library/framework-basics), but only the first two badges are required.
- The Wordpress Loop
- The Wordpress Template Hierarchy
- The Wordpress Template Hierarchy, prettier
- Standard widget reference
- Using shortcodes
- Advanced widget function reference
- Framework basics except for the Foundation badges. Feel free to do these if you have time.
- Building Websites with Bootstrap 3 is a pretty short (1 hour) overview of using Bootstrap
Note: DO NOT do the assignment if you haven't finished going through the screencasts. Don't try to apply knowledge without learning it first or you will just waste your time.
Sometimes it's just faster to create a simple sketch - a quick prototype actually built out of HTML/CSS/JS- than to spend a lot of time creating intricate Photoshop mockups.
This assignment is to create a simple sketch by leveraging Bootstrap. You should be able to extend the Bootstrap examples and use a quick plugin to accomplish what you need. Just use the default styles - don't spend any more time than necessary to get something running. The emphasis here is to get something running.
The site should:
- Be a single page portfolio with four sections
- Your first static site
- Your MODX site
- Your Wordpress site
- A contact form with links to your LinkedIn profile
- Each section should have the following:
- A screenshot of the web site (but see "Extra Credit, below")
- A short description of the key techniques and technologies you used to create the site
- The names of the other members of the team that created the site.
- Have a fixed navigation bar menu at the top with the elements "Static", "MODX", "WordPress" and "Contact Me"
- Employ smooth scrolling to each of four sections
- Highlight in the nav bar should change based on which section is visible. (this is available in a plugin)
- Use SASS (.scss files)
- Be hosted using github pages.
See the site at The Portland Incubator for an example web site that has these behaviors. You don't need to do anything like the image slider at the top, just notice the nav bar and the scrolling behavior.
If you have time, create live sites that the visitor can see after the click on the screenshot.
- Host the static site in the same repo so it can be served using github pages
- Create a MODX Cloud account and migrate your MODX site to it so you can link to a live version
- North
- Silk Icon Set
- An enthusiastic and swear-filled analysis of instructional design in video games
- Skeuomorphism in Apple's Design
- Graphic Arrays: Evolution of Screen Resolution & Aspect Ratios
- 15 Years of Computer Screen Resolution
- Resolution Stats for the Market of Mobile Devices
- Screen Resolution Stats
- Bootstrap Expo - sample sites
- expo resources link
- Bootstrap Docs - documentation
- Big Badass List of Bootstrap Resources
- Bootsnipp - more resources