Mokena Skills - Your Digital Learning Partner

Course Overview

To teach you how to build websites that automatically adjust their layout to look perfect on all screen sizes—including smartphones, tablets, and desktop computers.

Course Curriculum

• Meaning of Responsive Web Design • Need & importance of RWD • Fixed vs Fluid layouts • Mobile-first design concept • Devices & screen resolutions

• HTML5 structure & semantic tags • Viewport meta tag • Responsive images (<img>, <picture>, srcset) • Forms & media elements (audio, video)

• CSS box model • CSS units (px, %, em, rem, vw, vh) • Colors, fonts & typography • Positioning (static, relative, absolute, fixed)

• Introduction to media queries • Breakpoints • Min-width & max-width • Orientation (portrait & landscape) • Device-specific styles

• Flexbox (one-dimensional layout) • CSS Grid (two-dimensional layout) • Multi-column layouts • Responsive navigation bars

• Flexible images • Background images & scaling • Video responsiveness • Image optimization for performance

• Bootstrap (Grid system, components) • Tailwind CSS (utility-first approach) • Introduction to Material UI • Pros & cons of using frameworks

• DOM manipulation basics • Handling window resize events • Responsive menus (hamburger menu) • Form validation

Minification of CSS & JS Lazy loading Reducing HTTP requests Mobile performance best practices

• Cross-browser testing • Device testing tools (Chrome DevTools) • Debugging responsive issues • Hosting & deployment basics

Total Course Fee

₹999

Full Lifetime Access

Access on Mobile & TV

Certificate of Completion

Portals

Recognized By

Responsive Web Design

Course Overview

Course Curriculum