WPS Training | Responsive Designing

Course / Course Details

Responsive Designing

Responsive Designing

By - Rohini Ingle
0 students
9 Hours 7 Min
(0)

Course Description

Responsive Design is a web design approach that ensures websites and applications automatically adjust their layout, content, and functionality to fit any screen size or device. It uses fluid grids, flexible images, and CSS media queries to provide an optimal viewing experience on mobile phones, tablets, laptops, and desktop screens.

This design technique improves user experience, accessibility, and SEO performance by delivering a seamless interface that adapts to changing resolutions and orientations without requiring separate versions of the site.

Course Curriculum

10 chapters
42 lectures
0 quizzes
9 Hours 7 Min total length

Toggle all chapters

1 Responsive Designing Syllabus

N/A

1 Bootstrap Basics Notes

N/A

2 Download Bootstrap

4 Min

3 File structure & Precompiled Bootstrap

18 Min

4 Introduction to Bootstrap

9 Min

1 Bootstrap Grid System

N/A

2 Bootstrap Grid System

12 Min

3 Media Queries

12 Min

4 Grid options

3 Min

5 Responsive column resets

5 Min

1 Bootstrap CSS Overview

N/A

2 Tables: Basic & Optional, Striped, Bordered, Hover, Condensed, Contextual & Responsive

5 Min

3 HTML5 Doctype

3 Min

4 Mobile First approach

7 Min

5 Responsive images

15 Min

6 Typography & links

10 Min

1 Typography & Table

N/A

2 Form Layouts: Vertical, Inline, Horizontal

25 Min

3 Checkboxes, Radios, Selects

11 Min

4 Form Control States & Sizing

12 Min

5 Help Text - Buttons: Sizes, States, Disabled State, Button Tags

16 Min

1 Forms & Buttons

N/A

2 .img-rounded, .img-circle, .img

3 Min

3 Show/Hide content, Screen reader content

10 Min

1 Responsive Utilities & Glyphicons

N/A

2 Responsive Utilities & Glyphicons

5 Min

3 Difference between visibility hidden and display none

7 Min

Difference between visibility hidden and display none visible-xs, .visible-sm, .visible-md, .visible-lg - Print classes: .visible-print, .hidden-print - Overview and usage of Glyphicons

1 Basic & Vertical Button Groups, Toolbar, Nesting, Split Buttons

9 Min

2 Input Groups: Basic, Sizing, Checkbox/Radio addons, Buttons with dropdowns

9 Min

3 Options, Alignment, Headers

7 Min

4 Dropdowns, Button Groups & Input Groups

N/A

5 Dropdowns, Button Groups & Input Groups

10 Min

1 Navigation, Breadcrumb & Pagination

11 Min

2 Bootstrap 3 dropdown,collapse,navbar,tabs,pills

39 Min

Tabs, Pills, Vertical Pills, Justified Nav, Disabled Links, Dropdowns - Navbar: Default, Responsive, Fixed, Static, Inverted, Forms, Buttons, Alignment

3 -Breadcrumb & Pagination: types, States, Sizing, Pager, Aligned Links

11 Min

4 Navigation, Breadcrumb & Pagination

N/A