Advanced Styling with Responsive Design

所在平台: Coursera

课程主页: https://www.coursera.org/learn/responsivedesign

课程评论:没有评论

第一个写评论        关注课程

课程简介

课程名称:高级响应式设计风格 课程概述:随着智能手机普及,网页设计的格局发生了巨大变化,网站需要在各种平台(智能手机、平板电脑、笔记本或台式电脑)上良好运行,这种功能被称为响应式设计。本课程在基础CSS3知识的基础上,扩展了包括线框图、流式设计、媒体查询以及现有样式框架(如Bootstrap)的使用等主题。课程结束后,学习者将能够: ** 解释移动优先理念及线框图在设计阶段的重要性 ** 创建适用于各种平台的网站 ** 利用现有的设计框架如Bootstrap 本课程是“人人都能学的网页设计”专业中的第四门课程,报名时需具备基本的HTML和CSS知识。后续课程将专注于使用JavaScript编程语言添加交互性和完成毕业设计项目。 课程大纲: - 第一周:响应式设计风格 介绍什么是网站的响应式设计,如何判断现有网站是否响应式,讨论“移动优先”理念,并开始使用流式度量单位。 - 第二周:基本概念 实践媒体查询,了解如何根据浏览器大小自动改变网站外观和功能,定义在不同屏幕尺寸(视口)上希望实现的外观。 - 第三周:布局和可访问性的媒体查询 学习如何通过网格和弹性显示属性组织页面布局,同时讨论提高页面可访问性的媒体查询。 - 第四周:框架 探讨如何利用现有工具(如Bootstrap)来创造独特的网站,而不是从零开始,所有先前的知识将帮助你利用这些框架。

课程大纲

Name:Week One: Style with Responsive Design

Description:What does it mean to have responsive design for your site? How can you tell if your existing site is responsive? This week we will begin with the theories behind the "mobile-first paradigm" - the idea that your mobile site should provide everything needed, not a pared-down version of a good page. We end the week by taking the first concrete step of using fluid measurements in your CSS.

Name:Week Two: Basic Concepts

Description:This week you will get a chance to put the theories into practice using media queries in your CSS. These queries can automatically change the look and functionality of your site based on the size of the browser being used to view the page. This allows you to decide what type of look you want to achieve at various screen sizes, also called "viewports".

Name:Week Three: Media Queries for Layout and Accessibility

Description:Knowing what your want your site to look like is the first step, but actually writing the code is another. This week we look at the grid and flex display properties to suggest ways to organize the layout of your page. We also talk about media queries that you should be including to increase the accessibility of your page. These queries can react to user preferences about color schemes, animation, and more.

Name:Week Four: Frameworks

Description:After every good programmer has put in time creating sites from scratch, it is common to utilize existing tools out there. After all, why recreate the wheel? The work you have done up to this point will give you the knowledge needed to craft your own unique sites from these frameworks. This week we will work with Bootstrap, a framework that uses HTML5, CSS, and JavaScript (but don't worry if you have never used JavaScript yourself).

课程评论(0条)

课程详情

It used to be the case that everyone viewed webpages on about the same size screen. But with the explosion of the use of smartphones to access the Internet, the landscape of design has completely changed. People viewing your site will now expect that it will perform regardless of the platform (smartphone, tablet, laptop, or desktop computer). This ability to respond to any platform is called responsive design. This course will expand upon the basic knowledge of CSS3 to include topics such as wireframes, fluid design, media queries, and the use of existing styling paradigms such as Bootstrap. After the course, learners will be able to: ** Explain the mobile-first paradigm and the importance of wireframes in the design phase ** Create sites that behave across a range of platforms ** Utilize existing design frameworks such as Bootstrap This is the fourth course in the Web Design For Everybody specialization. A basic understanding of HTML and CSS is expected when you enroll in this class. Additional courses focus on adding interactivity with the JavaScript Programming Language and completing a capstone project.

课程标签

0人关注该课程

主题相关的课程