FEW-2.2-Web-Design-and-Advanced-CSS

  • Y9_535209
    了解作者
  • 1007.2KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-21 18:56
    上传日期
FEW-2.2:高级CSS和视觉设计 课程说明 本课程是CSS的深入探索。 学生们仔细研究了如何使用CSS渲染网页,使用CSS进行运动和交互,优化CSS以与CSS变量一起使用以及如何使用现代CSS框架。 解释为什么学生应该注意学习本堂课介绍的材料。 为什么要学习高级CSS? CSS是负责您的Web应用程序外观的语言。 为了使外观精美的Web应用程序能够吸引大量用户,您需要了解它。 先决条件: 课程内容 课程交付:在线| 7周14节 课程学分:3学分| 37.5座位时间| 75小时总时数 学习成果 在课程结束时,学生将能够: 使用网格系统进行布局 使用CSS预处理器 实现CSS变量以制作更多的模块化样式表 应用排版原理和色彩理论 应用高级CSS概念,包括变换,过渡和关键帧 实施行业最佳实践 除此之外,您还应该能够像老板一样应用CSS,并将您的想法带到大屏幕和小屏幕上! 学生还将探索
FEW-2_2-Web-Design-and-Advanced-CSS-master.zip
内容介绍
# FEW-2.2: Advanced CSS and Visual Design ## Course Description This course is a deep exploration of CSS. Students take a close look at rendering web pages with CSS, using CSS for motion and interaction, optimizing CSS for use with CSS variables and working with modern CSS frameworks. Explain why students should care to learn the material presented in this class. ### Why Learn advanced CSS? CSS is a language that is responsible for the appearance of you web apps. To make great looking web apps that gather great user base you'll need to know it. ## Prerequisites: - [FEW 1.1](https://github.com/Make-School-Courses/FEW-1.1-Web-Foundations) ## Course Specifics **Course Delivery**: online | 7 weeks | 14 sessions **Course Credits**: 3 units | 37.5 Seat Hours | 75 Total Hours ## Learning Outcomes Students by the end of the course will be able to: 1. Use grid systems for layout 1. Use CSS preprocessors 1. Implement CSS variables to make more modular stylesheets 1. Apply principles of typography and color theory 1. Apply advanced CSS concepts including transform, transition, and keyframes 1. Implement industry best practices Beyond these you should be able to apply CSS like a boss and bring your ideas to the large and small screen! Students will also explore new bleeding edge concepts that are the future of the web. ## Schedule **Course Dates:** Monday, June 1 – Friday, July 17, 2020 (7 weeks) **Class Times:** Monday, Wednesday, and Friday at 9:30–11:20am (20 class sessions) | Class | Date | Topics | Assignment | |:------:|:------|:-------|:-----------| | 1 | Wed, August 19 | [Drawing with CSS](lessons/lesson-01.md) | [CSS Drawing](./Assignments/assignment-01.md) | | 2 | Mon, August 24 | [Animation with CSS](lessons/lesson-02.md) | [CSS Drawing part 2](./Assignments/assignment-02-css-drawing.md) | | 3 | Wed, August 26 | [CSS Animation with Keyframes](lessons/lesson-02.md) | [Animation Challenges](./Assignments/assignment-03-Animation.md) | | 4 | Mon, August 31 | [SASS](lessons/lesson-03.md) | [SASS Part 1](./Assignments/assignment-06-SASS-part-1.md) [SASS Part 2](./Assignments/assignment-06-SASS-part-2.md) | | 5 | Wed, September 2 | [Typography](lessons/lesson-04.md) | [SASS Part 3](./Assignments/assignment-06-SASS-part-3.md) | | 6 | Mon, September 7 | Labor Day - No class | - | | 7 | Wed, September 9 | [CSS Custom Properties](lessons/lesson-05.md) | [Starting your Framework](./Assignments/assignment-07-framework.md) | | 8 | Mon, September 14 | [Nav Bars](lessons/lesson-07.md) | [Continue your framework](./Assignments/project-css-framework.md) | | 9 | Wed, September 16 | [Pseudo Elements](lessons/lesson-08.md) | [Add form styles](./Assignments/assignment-09-controls.md) | | 10 | Mon, September 21 | [Web Component Intro](lessons/lesson-08.md) | Continue working on CSS Framework | | 11 | Wed, September 23 | [Web Components Part 1](lessons/lesson-09.md) | Continue working on CSS Framework | | 12 | Mon, September 28 | [Web Components Lab](lessons/lesson-10.md) | Continue working on CSS Framework | | 13 | Wed, September 30 | [Web Components Part 2](lessons/lesson-11.md) | Continue working on CSS Framework | | 14 | Mon, October 5 | [Final Assessment](lessons/lesson-12.md) | - | | 15 | Wed, October 7 | [Final Presentations](lessons/lesson-13.md) | - | ## Class Assignments We will begin the term reviewing CSS concepts. Then move into new concepts that you will apply to your projects. The final project is to build a CSS framework. 1. [ ] [CSS Drawing Examples](Assignments/assignment-01.md) - Recreated the images in the example file 1. [ ] [CSS Custom Drawing](Assignments/assignment-02.ms) - Created your own custom drawing or logo 1. [ ] [CSS Animation Examples](Assignments/assignment-03.md) - Recreated the animations in the example file 1. [ ] [CSS Custom animation](Assignments/assignment-04.md) - Animated your custom drawing or logo 1. [ ] [Explore SASS](Assignments/assignment-06-SASS.md) - Added SASS to a past project - [ ] Used at least three variables - [ ] Used one mixin - [ ] Used one other SASS feature loop, function etc. 1. Improve Your Typography 1. CSS Framework - Use the checklist [here](Assignments/project-css-framework.md) to complete your CSS framework. 1. Web Components - [ ] Completed Web Component tutorial - [ ] Add web compomnent to your framework ### Custom CSS Framework You will be building a CSS framework to use for the frontend of any web project. It's like making your own [Bootstrap!](https://getbootstrap.com/). It's about time that someone challenged Bootstrap and produced a viable replacement that is leaner, more flexible, and easier to use by implementing new CSS tools. You'll build this framework throughout the course, with a midterm check-in to show progress and get feedback, as well as a final presentation in front of the class, where you show an example of your framework in use on a web app (previous project, sample static page used for the demo, etc.) ## Evaluation To pass this course you must meet the following requirements: - Pass 70% projects according to the associated project rubric - Pass the final summative assessment according to the rubric as specified in this class - This will be further explained in the [study guide](study-guide.md) - Actively participate in class and abide by the attendance policy - Make up all classwork from all absences ## Information Resources Any additional resources you may need (online books, etc.) can be found here. You can also find additional resources through the library linked below: - [make.sc/library](http://make.sc/library) ## Make School Course Policies - [Program Learning Outcomes](https://make.sc/program-learning-outcomes) - What you will achieve after finishing Make School, all courses are designed around these outcomes. - [Grading System](https://make.sc/grading-system) - How grading is done at Make School - [Diversity and Inclusion Statement](https://make.sc/diversity-and-inclusion-statement) - Learn about Diversity and Inclusion at Make School - [Academic Honesty](https://make.sc/academic-honesty-policy) - Our policies around plagerism, cheating, and other forms of academic misconduct - [Attendance Policy](https://make.sc/attendance-policy) - What we expect from you in terms of attendance for all classes at Make School - [Course Credit Policy](https://make.sc/course-credit-policy) - Our policy for how you obtain credit for your courses - [Disability Services (Academic Accommodations)](https://make.sc/disability-services) - Services and accommodations we provide for students - [Student Handbook](https://make.sc/student-handbook) - Guidelines, policies, and resources for all Make School students
评论
    相关推荐