Web Development Foundations logo

Web Development Foundations

Syllabus

Course Description

This is the syllabus for the first two classes in the Web Foundations Series.

The Web Development Series is Portland Code School’s introduction to web development. These courses introduce students with the opportunity to build modern websites and receive feedback to help those students reach their goals in the web development industry. The Primer Basic aims at introducing programming languages necessary to build websites with the support and feedback available to students from experienced coders. This is what differentiates Portland Code School from other programs, whether that be a University setting, a community college, another coding bootcamp, or an online website with a curriculum and a forum. The Primer Pro equips students with hands-on experience working with the web’s core technologies: HTML, CSS, and JavaScript as well as tools indispensable to modern web development: the Unix command line, Git, and GitHub.

As you check out our website, think a little on the following questions:

  • Do you already know how to code and want to skip ahead? Please contact us and we can discuss alternative solutions.
  • Perhaps you’re ready to take the extra step and develop some of the soft skills that will set you appart from competing job prospects. Along with becoming successful at speaking the programming langauges, students in Primer Basic will also have the oppertunity to develop soft skills such as leadership, collaboration, and problem solving.
  • What are your goals?
  • Are you curious about coding?
  • Are you interested in supplementing your income?

or

  • Are you passionate about pursuing a career in web development?

The Primer Basic is for students that may not be sure how to answer those questions. The average amount of time devoted to develop the skills taught in class is about an hour a day. Everyone learns differently. If you want to be good at something, you’ll enjoy spendng time learning how to be good at it.

Upon successful completion of the Primer Basic class, every student will be ready to:

  • Learn more about web development
  • Create simple websites with HTML & CSS

Primer Pro builds on what students learned in Primer Basic so that those students can:

  • Internship at a web development or creative design studio
  • Design and create simple websites for small businesses or individuals
  • Develop interactive web applications with HTML, CSS and JavaScript
  • Take part in further Portland Code School classes

Location

PCS Classroom,
735 SW 20th Place, #230
Portland, OR 97209

Instructor:

Al Zimmerman

Email: azimmerman@portlandcodeschool.com
Phone (text and voicemail): 503-970-3645

Contacting your instructor

Schedule 1-on-1 time @ https://azimmerman1.youcanbook.me/

He’ll respond on the Slack channel within a couple hours. Please expect an email response at least within 24-48 hours. His cellphone is 503-970-3645, but it only works for text or voicemail. If you text him, please prefix your text with the word “PCS”. Texts or voicemail will get a reply within 4 hours.

His PCS email is azimmerman@portlandcodeschool.com. Email to this address will get a reply within 24-48 hours.

Since there is only one of him, and many of you, you can find more help from other students.

Prerequisites

This class has no prerequisites. You will receive an email before class (if you have signed up that early) with work that must be completed during the first week.

Learning Objectives & Core Outcomes

At successful completion of the Primer Basics, students will be able to:

  • Identify the purpose of HTML, CSS, and JavaScript on a website
  • Define the basic structure of an HTML element and a CSS rule
  • Create a basic website using HTML and CSS with a text editor
  • Define situational awareness on the command line
  • Navigate the command line by using commands such as change directory, print working direcory, and list
  • Define and describe the purpose of git and github
  • Create a new repository on gitHub
  • Clone a git repository
  • Check the status of a repository
  • Edit a repository
  • Stage changes to a repository (git add)
  • Commit changes to a repository
  • Create a live static site through gh-pages
  • Manipulate elements on an html page through css styling and positioning within the cascade
  • Identify elements of a web page as they appear in Google Chrome Developer Tools
  • Clone a single github repo and use the remotes for collaboration
  • Git push their branch in their repo to the github remote
  • Git pull their branch from the gitHub remote to their computer repo
  • Git merge branches in repos, resolving merge conflicts as necessary.
  • View a website deployed by github
  • Identify their role and responsibility in their group as they relate to the final assignment
  • Communicate with their group through BaseCamp
  • Present a product demonstration and code walkthrough

At successful completion of the Primer Pro, students will also be able to:

  • Identify the basic elements of JavaScript
  • Write JavaScript statements, variables, strings, numbers, and arrays
  • Print JavaScript commands to an html page and the console
  • Write simple JavaScript functions that respond to clicks and change page content
  • Apply the Chrome Developer tools to identify JavaScript elements
  • Apply the principles of mobile-first development and design
  • Create JavaScript functions
  • Describe and recognize the components of fluid layout
  • Describe and recognize different methods of relative measurement
  • Describe different image file types and what each is best used for
  • Create a website by using Bootstrap framework
  • Use Git branching, merging, and pull requests to integrate code from several team members

Schedule and Curriculum

For the most up to date schedule of activities, see the course curriculum.

Educational Expectations

This class is an introduction to web development.

There are no grades and there is no way you can fail. You get to choose how much effort you put in to the class. If you only have time to come to the course sessions, that’s fine. You’ll still get a lot out of the course. If you have time to invest in your learning outside of class, that’s great! Nothing we ask you to do is a waste of your time.

If you want a career in web development, do everything, ask questions, and talk to us. We’ll help you find your way.

Student Time Commitment

Attend every class, even if you miss one. You already paid for it, so don’t worry if you get behind. You can’t get help unless you ask for it.

If you cannot attend one or more sessions, please contact your instructor in advance. We will work with you to customize your learning experience.

This course requires 6 hours each week for classroom time. Please look carefully at the course meeting hours and make sure you can be available for those times. At Portland Code School, the instructors value your time and they expect you to value the time of your felow students. Please arrive on time to limit distractions and enable other students to become successful in this course.

Homework

You can get a lot out of the class just by attending class. We’ve had students benefit from the class that were very busy with work and family.

Students get the most out of this class if they can put in about 1 hour of their own time each week for each classroom hour for a total of 12 hours per week.

Students who have more time and want additional challenge will have plenty of oppotunities.

Assessment Methods

There are two primary assignments in the Primer Basic. These are project-based assignments and mirror projects you would find in a job.

First, you’ll create a basic web page with elements such as header, footer, div, paragraphs, and images. Check out the project guide for more details.

Second, you will update a website for a client with html and css.

Next, you’ll collaborate within a team to create a new website for a client.

Assessment is a fancy education word that is often associated with grades. Since we don’t give grades at Portland Code School, assessment means something else:

For us, assessment means communication, and communication is a two way street. When you need help, we’re here to provide it. But we can’t read you mind, so it’s really important that you tell us what you’ve done and how you’ve felt about it.

You can communicate in this class by:

  • Connecting with other students: track what you and other students are doing and where you are at with the course material
  • Schedule appointments with the instructor or with a teaching assistant
  • Complete any forms we ask you to do
  • Quizzes: these tell us what you know based off of what we hope you learned.

We will provide you feedback as you go. If you go on to take more PCS classes, your Primer work will become part of your PCS records.

Home and Class Work

You will have plenty of opportunities to learn both in the classroom and on your own. Homework will include:

  • Completing class assignments to build web sites of increasing complexity
  • Watching screencasts with experienced lecturers, interactive exercises, and quizzes
  • Performing online interactive coding exercises to explore HTML, CSS, JavaScript and jQuery
  • Participating in a team project to build a pre-specified web site
  • Participating in a team project to discover client requirements, specify, and build a web site

Screencasts

You will all have Treehouse accounts assigned to you the week prior to class and you will be assigned screencasts each week. You are required to complete the quizzes and earn the badges. We will review your progress every two weeks to make sure you are on track.

For some of you, screencasts will be a slow experience. Feel free to skip ahead to the quiz for each module to see if you already know what they are teaching. If you have trouble with the quiz, watch the screencasts. Also, speed up the tempo if you can follow along at the faster speed.

Making screencasts a good use of your time

Everybody has different learning styles: some people learn well through screencasts. However, realistically, the density of information is very low. Screencasts can make some subjects more accessible by having a friendly person introduce you, but there is no substitution for reading about topics on your own, studying them in depth, and then applying your knowledge by programming.

As you watch screencasts, some topics will be difficult. Some people have a natural inclination to seek out other textbooks or other screencasts when the one they are watching or reading is difficult to understand. However, this is just a delaying tactic, a form of avoidance. If you are having difficulty learning using one method of learning, the best technique is to use an entirely different method of learning.

In our case, the best alternative when you think you don’t understand how to code is to start coding. Stop the playback and try it yourself. Turn a normally passive activity, watching TV, into an active learning experience by programming while you watch.

There is no better way to learn coding then to do it, to fail, and to puzzle out what is going on. It will be a waste of time for you to switch textbooks or switch screencasts if you find that the offered resources are not giving you immediate understanding.

Interactive Programming Exercises.

You will be required to work through several interactive coding exercises on Codecademy (http://www.codecademy.com). These are free of charge.

Team Project

After you have had a chance to build a couple of web sites yourself, you’ll have the opportunity to work on a team to several build web sites for clients.

The first projects (Basic Primer) requires your team to take the specifications for a pre-defined web site and build the site from scratch.

The second set of projects (Primer Pro) requires your team to interview “the client” (PCS staff), develop site specifications, get client approval, and build the site from scratch or use Wordpress to build it, depending on client requirements.

Additional requirements

Computer

You need to provide your own computer for this class.

Portland Code School highly recommends MacBook Pros running OSX 10.10 (or at least 10.9). Most of the best web development tools are developed on that operating system first. The important aspect of OSX is the underlying UNIX-like operating system. We place an emphasis at being able to work on a Unix/Linux command line level, down in the guts of the operating system.

Portland Code School will rent you a MacBook Pro for $30 a month during this course. It’s a great deal.

A good alternative is Linux/GNU. Most of your web applications will be deployed on Linux/GNU virtual hosts in the cloud. Any Debian-based distribution will do.

Windows is at best a third alternative. While we will do our best to use cross-platform tools and techniques, you may have to discover Window alternatives on your own.

If you have a Windows laptop and you cannot manage to obtain or rent a MacBook Pro to work with in this class, we can help you a virtual Linux instance that you can use for class activities. You don’t need an extremely powerful laptop, but we can talk about the minimum specs if you are in this situation.

We’re not saying that professionals should demand a particular tool set. Your instructor is comfortable on any of these platforms and easily moves from one to another as the client requires it. It’s just makes for a more cohesive classroom experience and simpler class materials to simplify and focus on one.

Other Tools

You are required to learn and use a code editor. There are two to choose from. First, Atom is free and very capable. (https://atom.io). It has been developed in the last year as a clone of Sublime Text 3. Speaking of which, Sublime Text. (http://www.sublimetext.com/3) is not free but has a very large community and many extensions. You can try it for free and that will get you through this class, but you should consider buying a copy when you get a job.

Git is a distributed version control system. It is complicated, arcane, and difficult to learn. Yet, it is one of the most commonly used and essential to any freelancer. We will start using git in the first week and emphasize its use throughout. You will be required to be able to use git from the command line, but we will also explore graphical user interfaces to make your use of git more transparent and powerful.

The Chrome Developer Tools are a wonderful suite of browser-based tools that allow you to see what you are coding. There are tools like these for every major browser, but we focus on Chrome. These are built in to the browser.

There will be more tools introduced as the class goes on, but these are good places to start.

One type of tool we will not use is WYSIWYG (“What you see is what you get”) development environments like Dreamweaver. By the end of this class, you will be easily and quickly coding interesting and compelling web sites “by hand.”

Your first assignment will be to install these tools prior to the first session.

Mutual Respect

This class depends upon an atmosphere of mutual respect among students and staff. Together, we create a safe place to listen, learn, speak candidly, and fail safely. This is not a typical college class, it’s a team effort producing a final product: jobs for everyone. You have the opportunity to make deep connections here that you will enjoy the rest of your career.

Students are expected to act at their highest capacity and with mutual respect for each other regardless of age, race, gender identity and expression, sexual orientation, or prior experience. Instructors are expected to lead in this regard by example.

In a related vein, this class requires work in close proximity to others as we code and debug in pairs and small groups. Good hygiene is mandatory and an additional sign of respect for your colleagues.

Grievances Procedure

Students who observe or experience any behavior on the part of instructors, staff, or students at Portland Code School that does not meet the school’s Code of Conduct should take action. If you experience or perceive a problem, attempt to work it out on your own, if possible, but do not hesitate to bring it privately to the attention of your instructor. If this is unsatisfactory, bring it to the attention of the school Director (Cris Kelly) or Assistant Director (Shawna Scott)

Instructional ADA statement

Students who have a documented disability and require a classroom adjustment or accommodation should contact the instructor and/or the PCS Director prior to the first class session.

Course content and calendar subject to change

The instructor reserves the right to modify course content and/or substitute assignments and learning activities in response to institutional, weather or class situations.

We adjust the class each session to the needs of the current students. We may slow the pace or add additional work, as needed. We also carefully incorporate new technologies as they become significant to your employability. As a result, we often are creating class materials as we go. You will always get advance notice of classwork.

You also get to evaluate us. We use a technique called “project retrospectives” to identify what’s working for you and what we need to improve. We try to improve the course as we go.


Syllabus version 1.3