IDG1293 Avansert CSS

Group 12: Guardians Of CSS:superhero_man::superhero_woman::superhero_man:

View the Project here.

Access the Project Board here.

✏️ Course Content

The goal of this course is to provide the students with an in-depth knowledge of advanced CSS concepts and techniques. This course starts by revisiting and extending the basic concepts introduced in IDG1292 and then proceeds to introduce new advanced CSS topics. The students will be guided through the design, implementation and testing of responsive web sites using CSS.

Topics

* Responsive design, progressive enhancement and graceful degradation  
* Intersection between CSS design and user experience  
* Advanced flexible layouts and grid systems  
* Colors, usability and accessibility  
* Typography  
* Complex CSS animations, transitions and transformations  
* Modern CSS3 features and selectors  
* Performance aspects of CSS code  
* Open source frameworks and preprocessors  
* Upcoming CSS feature and standardization process

✏️ Learning Outcome

Knowledge:

• After completing this course, the students will know: 
  • Advanced CSS techniques for responsive design of usable and accessible Web sites  
  • Open source CSS frameworks, preprocessors and extension languages  
  • Limitations of current CSS techniques

Skills:

• After completing this course, the students will be able to:
  • Establish advanced grid and fluid layouts  
  • Make use of responsive techniques to target specific devices and publication environments  
  • Apply color palettes and typography schemes in CSS  
  • Realize animations using CSS  
  • Use open source frameworks, preprocessor and polyfills

General competence:

• After completing this course, the students will know how to:
  • Use CSS to style complex responsive web sites that work in different devices and operative systems  
  • Evaluate the performance impact of CSS  
  • Deal with the constantly changing support of CSS in browsers

📝 The Text We Have Chosen

• Favorite Colour by Joni Mitchel

📌 Methodologies and Principles

Separation of Concerns

• Seperation of Concerns
  • We will use SoC in order to prevent repeating ourselves (DRY).
  • In computer science, separation of concerns (SoC) is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern.

BEM

• Block Element Modifier
  • BEM will be used in order to simplify the css-code.
  • Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

🔥 Inspiration

• Whirlybirdie
• Designerpart
• Webflow
• Cannesprlions
• Apple

📚 Sources Used

• Google fonts: Bitter
• Google fonts: Dancing Script