Advanced CSS

WDD 331

Syllabus

Description

This course provides deeper learning into topics in cascading style sheets (CSS). Topics of study will include: complex CSS selectors, advanced CSS layout and positioning techniques, CSS transitions and animations, CSS Preprocessing, an introduction to CSS libraries, and using scalable vector graphics (SVG) with HTML and CSS.

Course Outcomes

Upon completion of this course, students will be able to:

  1. Solve problems through independent study and application—learn how to learn.
  2. Demonstrate a mastery of CSS.
  3. Understand the role of CSS preprocessors and how to effectively integrate their use in development workflows.
  4. Work effectively within a team by teaching and learning collaboratively, communicating clearly, fulfilling assignments and meeting deadlines.

Notice Outcome One...learn how to learn. It's placement at the beginning of the list is intentional. CSS and how it is applied in the creation of websites is still evolving and changing. The most important thing you can take from this class is the improved ability to learn new things so that you can stay current as technologies change. The structure of the course reflects the importance of outcome one.

Prerequisites

Students should have completed WDD 230 (CIT 230 or CS 213) before taking this course.

Software and Resources

We will be using materials from SitePoint.com (http://sitepoint.com). You will need access to their premier resources. The University has set up a special pricing for students of $13/semester. You must purchase an access code through the BYU-Idaho bookstore (ISBN: 2810000042072). Then use the URL that accompanies the access code to create a SitePoint Premium account.

The primary text will be CSS Master, 2nd Edition by Tiffany Brown. Once you have subscribed you can read it online or download it as pdf or epub.

We will also be using an online editing tool for HTML/CSS/Javascript called CodePen (http://codepen.io). You will need to create a free account with them.

You will also want a good text editor installed on your computer. If you don’t have one you like, I would recommend VS Code: Free, Mac/Windows/Linux.

Schedule

  1. Course overview/software setup/build review website
  2. CSS Selectors
  3. CSS Preprocessing with Sass
  4. Zen Garden project introduced
  5. TBD
  6. TBD
  7. TBD
  8. TBD
  9. TBD
  10. TBD
  11. TBD
  12. TBD
  13. Finish CSS Zen Garden final project

You may be looking at weeks 5-12 and wondering why there are no topics set. Remember outcome one above? There are certain topics that are critical that you gain some knowledge of. We will study those in weeks 1-4. After that the course will change and adapt to what the class decides they would like to study next.

The web is a rapidly evolving platform. CSS changes regularly and the ways that it is used in building web sites change as well. Over the first few weeks of the semester you will be asked to pay close attention to every website you visit. Take note of anything that catches your attention. You are looking for things that the builder of the site has done that you think are cool and that you would be interested in learning how to replicate. Essentially anything that causes you to think "I wonder how they did that?" should get recorded.

By the end of week 3 you should contribute 2-3 of your favorite examples. Try to find different types of examples, ie:

In week 4, after all of the examples are submitted, the list will be curated and we will decide which ones we want to try and learn how to duplicate. We will spend anywhere from a few days to up to three weeks on each example that we choose. We will work through weeks 5-12 of the course completing as many as we can.

"What if we miss an important topic?" you may be asking yourself. Well, we probably will :) There is not enough time to learn everything we could on the topic of CSS. This format will allow us to prioritize what is important for you right NOW while helping you become better at picking up the rest of it later as needed. The course is also repeatable so you can come back again for more!

As we begin working on the examples it is important to remember a few things:

Grading

Reflections

You will spend your time throughout the week researching, learning, and doing your best to meet our goals on the current example. Each week you will also be asked to complete a reflection assignment. Please take this seriously.

This reflection will ask about what you learned that impacted you, what questions you still have on the topic, and what resources you found where you might be able to answer those questions. You will also use the reflection to ask for specific feedback from the instructor. These reflections will be worth 30% of your final grade.

Website Examples

Each time we begin a new example we will set a due date. Each example that we attempt will be accompanied by some goals. Sometimes the goal will be to duplicate the example exactly, other times it might be to learn a technique and adapt it. You may or may not be asked to turn in your finished example attempts. (Your instructor will discuss this with you) Regardless you should take all the work you complete this semester and compile it into a portfolio. This portfolio can be used at anytime by you to request feedback from the instructor, and will certainly be used at the end of the semester as part of the final grade determination.

Final Project

There will be a final project that will be completed as a small group (2-3 members) over the course of the semester.

The assignment will be to create a version of the CSS Zen Garden (http://csszengarden.com) Each group will be responsible to decide upon a theme, then design and build their version according to the rules of the Zen Garden.

Students will self-select into groups of 2-3 during the first few weeks of the semester. You will want to try and find others who complement your strengths. Ideally you will be able to finish the project with the same group you started with, but this is not required. You must however participate in each portion and will be responsible to bring yourself up to speed quickly with the new group if you switch.

Self Evaluation

At midterm and again at the end of the semester you will be asked to complete a self evaluation of how you are progressing toward the outcomes of the course. Your portfolio will be used by the instructor to validate your self evaluations and give feedback. This will account for the other 70% of your grade. This can be done in one of two ways:

  1. The student can schedule a meeting with the instructor for a synchronous (face-to-face or online) meeting. This is done as an interview where the student offers a claim of mastery, and the instructor challenges as needed. The student should answer the challenges by showing examples of their work that they feel justify their claim.
  2. The student can prepare a short video of themselves giving their self-evaluation along with examples of the work they have completed over the semester that back up their claims. The links to the work should be submitted with the review as a portfolio.

Your instructor will inform you which method will be used for your section.

The finished Zen Garden project should play an important role in the validation of your self-evaluation on the outcomes that you complete. You should be prepared to talk about which parts of the project you contributed to and what you learned.

The outcomes will be evaluated according to the following scale:

Mastery (4)
represents outstanding understanding, application, and integration of subject material and extensive evidence of original thinking, skillful use of concepts, and ability to analyze and solve complex problems.
Proficient (3)
represents considerable/significant understanding, application, and incorporation of the material which would prepare a student to be successful in next level courses, graduate school or employment.
Developing (2)
represents sufficient understanding of subject matter. The student demonstrates minimal initiative to be prepared for class. Sequenced courses could be attempted, but mastering new materials might prove challenging.
Unsatisfactory (1)
represents poor performance and initiative to learn and understand and apply course materials. Retaking a course or remediation may be necessary to prepare for additional instruction in this subject matter.

At the end of the semester the final evaluation scores for each objective will be averaged and a grade assigned according to the following grade scale.

Grade Scale

Overall Grading

The final percentage will be a combination of the self-evaluation score (70%) plus the weekly reflection score (30%). The following grade scale will determine your grade:

Standards

Be responsible for your own education. Take responsibility to complete your homework as assigned. Be prepared to accept the consequences if you do not.

It is important that you prepare yourself each week to contribute actively in learning with your fellow students. Be respectful of each other’s time and be prompt to any meetings that may be scheduled.