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. In particular you should be confident with the following things:

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, 3rd 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, a few I can recommend are below:

Schedule

  1. Course overview/software setup/build review website
  2. CSS Selectors
  3. CSS Preprocessing with Sass
  4. Style Stage project introduced
  5. TBD
  6. TBD
  7. TBD
  8. TBD
  9. TBD
  10. TBD
  11. TBD
  12. TBD
  13. Finish Style Stage 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. At the end of each week the class will come together and decide what will be studied the following week from a list of provided modules.

"What if we miss an important module?" you may be asking yourself. Well, you 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.

Grading

Reflections

Each week you will be expected to complete one module if you are taking the course for the first time. If you are taking it for the second time you will either complete a module, or another activity for the week. As you complete them you will 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.

Module assignments

Each Module will have one or more activities in it. Note that in most cases you will not turn in the completed activity until the end of the semester. In order to get feedback from the instructor for your work you must ask for it! This can happen in two ways, reach out directly while you are working on it with questions, or by indicating in the weekly reflection. Please ask for feedback when you need it!

Make sure that the work you do to complete the modules is new. Please do not re-use work from previous courses (including this one if you are taking it for the second time). The purpose of the work is to help you better master CSS. You will not accomplish that if you recycle work.

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 Style Stage (https://stylestage.dev) Each group will be responsible to decide upon a theme, then design and build their version according to the rules of the Style Stage.

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.

Portfolio

All of the work which you complete for the course should be gathered in a portfolio. If you have your own host you can place it there, if not I would recommend using something like Github pages to host your portfolio. If you are not sure how to set Github pages up, refer to this activity for instructions and an example.

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.

The outcomes will be evaluated according to the following scale:

Distinguished (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.

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.

University Policies