Product Details
Topics Covered
- Responsive design
- The viewport
- CSS box model
- The border-box property
- Grid-based layout systems
- CSS Flexbox
- Media queries
- Breakpoints
- Mobile-first layout structure
- The <picture> element
- Art direction
- Responsive images
Key Features
- Mobile-friendly
- Audio-enabled
- Badge and credit-awarding
- Real-world case studies
- Fully accessible
- Games & Flashcards
- Expert-supported
- Video content
Course Preview
Course Description
Learning Outcomes
- Explain the concepts and principles of responsive web design
- Define the viewport and identify how to configure a site for responsive design
- Differentiate between the CSS box and border-box models
- Calculate the widths of elements on a page using the box model and border-box model
- Understand the fundamental concepts of grid-based layout systems
- Construct simple responsive layouts using CSS Flexbox
- Summarize the purpose of media queries
- Design media query syntax using breakpoints
- Discuss what is meant by mobile-first layouts in the context of responsive design
- Explain art direction and the use of the picture element with responsive images
Notes
This course has an "Ask the Expert" feature, which submits your questions directly to an expert in the field you are studying. Questions are answered as quickly as possible and usually within 24 hours.
As an Accredited Provider, MindEdge offers for its learning events that comply with the Continuing Education and Training Standard.
Learners must achieve an average test score of at least 70% to meet the minimum successful completion requirement and qualify to receive credit. Learners will have three attempts at all graded assessments.