Course Overview
TOPThis responsive web design course teaches you how to improve your web designs to respond to various screen sizes, devices, and form factors, providing the best possible user experience. Learn best practices to efficiently maximize responsive design and understand how to address possible user experience trade-offs that may arise. You will also understand how responsive web design incorporates CSS3, media queries, @ fluidgrid, flexible images, and flexible videos to adapt to viewing devices, user agents, and environments.
Scheduled Classes
TOPWhat You'll Learn
TOP- Apply the foundations of Responsive Design to web development
- Establish the basic structure of a responsive web design
- Add flexibility to a layout to accommodate all viewports
- Use Media Queries to address breakpoints
- Add navigation to a responsive design
- Optimize responsive designs through testing
Outline
TOPResponsive web design overview
- Foundations of responsive design
- Defining responsive web design
- The user experience challenges of a responsive design
Creating the basic structure of a responsive web design
- Using HTML for structure
- Styling with web fonts
- Styling text with ems
- Defining the basic text styles
- Styling a single-column layout for a responsive layout
- Working with the CSS text-shadow property
- Working with CSS selectors
- Adding responsive images
Navigation for a responsive design
- An overview of mobile navigation
- Introduction to media queries
- Adding a toggle menu
Media queries and responsive layout
- Adding styles for a desktop layout
Optimizing responsive designs
- Adding mobile and older browser support
- Testing your responsive design
- Improving page performance
Prerequisites
TOPA foundational knowledge of HTML and CSS is required before enrolling in the responsive web design course, which can be obtained through the introductory HTML & CSS class.