Introduction
Welcome to Advanced CSS! This course explores the new native CSS features that have fundamentally changed how we write styles. You will master modern selectors, layout techniques, cascade control, and animation capabilities that were recently impossible without preprocessors or JavaScript. Through hands-on assignments and collaborative team projects, you will build interfaces that demonstrate professional-level CSS skills. By the end of this course, you will have created a portfolio-ready capstone project that showcases your mastery of contemporary CSS.
Course Learning Outcomes (CLOs)
Throughout this course, you will develop advanced CSS skills that prepare you for professional web development. By the end of the semester, you will be able to:
- Solve problems through independent study and application — learn how to learn
- Demonstrate a mastery of CSS through complex selector usage, advanced layouts, and sophisticated styling techniques
- Understand the role of CSS preprocessors and how to effectively integrate their use in development workflows
- Work effectively within a team by teaching and learning collaboratively, communicating clearly, fulfilling assignments, and meeting deadlines
Course Structure
This course is organized into seven units that progressively build your CSS expertise. We begin with a foundational week that sets the stage for the semester, followed by six thematic units that each explore a major area of advanced CSS development.
- Unit 0: Foundation Week — Setting up your development environment and reviewing core CSS concepts
- Unit 1 — Complex selectors and specificity
- Unit 2 — Advanced layout and positioning techniques
- Unit 3 — CSS transitions and animations
- Unit 4 — CSS preprocessing
- Unit 5 — CSS libraries and frameworks
- Unit 6 — Scalable vector graphics (SVG)
AI Usage
In line with the Computer Science Department's AI policy, AI should be used responsibly as a tool to support your learning, like a tutor or mentor, rather than completing assignments or projects for you. If you use AI extensively or are unsure about its use, please disclose and credit it in your work.
Occasionally, you will encounter a callout like this, highlighting opportunities to leverage AI to enhance your learning experience. Most callouts are optional, but some may require you to use AI for a specific task and report your findings. If you are asked to share an AI chat, use a tool such as ChatGPT that allows you to share the chat history, and ensure you retain the chat until your instructor has reviewed it.
No Cloud Storage
It is crucial that you store your work in your GitHub repository and avoid using cloud storage services like Google Drive, Dropbox, or OneDrive for your course work. This ensures that your work is backed up, versioned, and accessible to your instructor and peers. It also helps you avoid issues with file permissions, locking, and syncing that can corrupt your work.
Do not place your local Git repository inside a folder that is synced with a cloud storage service. These services often modify files in ways that are incompatible with Git, such as altering file permissions, locking files, or creating temporary files. These changes can corrupt your repository, cause merge conflicts, or lead to other issues that are difficult to diagnose and resolve. Always keep your Git repository in a standard local folder and use GitHub for backup and collaboration.