Responsive Web Applications with Bootstrap & CSS (8 ECTS)

Objective

Nowadays, developing mobile-first web applications is a necessary approach. Not only the websites need to be fully functional, but also the User Experience and User Interface need to be fully compatible to the web standards. In this course, the student gets familiar with Bootstrap as one of the most powerful and popular CSS frameworks, and will be able to get the best out of various features and functionalities of such framework to develop elegant and responsive web applications.
This course is 100% virtual thanks to the comprehensive tutorial videos and content made for this course.
The student will pass this course after submitting required assignments, quiz and projects.

Content

Introduction to CSS Part:
Understanding CSS - HTML and CSS are BestFriendsForever - How CSS works? - How to insert CSS? - CSS Selectors - CSS Rules Overlapping - CSS Rules Inheritance - Mastering Colors - Styling Text - Working with Fonts and Typefaces - Styling Links - Hover, active, focus - Boxes; Border, Margin, and Padding - Styling Lists, Tables and Forms - Layouts - Working with Images - HTML5 Layout Elements
Introduction to Bootstrap Part:
CSS Frameworks - How Bootstrap got started? - Getting Bootstrap - Content Delivery Network - Compatibility - Getting Started - Grid System - Mobile first vs. Mobile last - Images - Community
Bootstrap content & components Part:
Typography - Lists - Styling text - Code - Images - Tables - Figures - Alerts - Badge - Breadcrumb - Buttons - Button group - Card - Carousel - Collapse - Dropdowns - Forms - Input group - Jumbotron - List group - Modal - Navs - Navbar - Pagination - Popovers - Progress - Scrollspy - Tooltips
Advanced Part:
Color Coding - Embeds - Positioning - Sizing, Styling, and Spacing - Icon Libraries - Using JavaScript - Accessibility & Screen readers - Examples - Themes - Introduction to other frameworks

Location and time

Up to Student - course is online (Self-Study) course.

Materials

Online

Teaching methods

- Tutorial Videos
- Assignments
- Quiz
- Projects
- Self-stud

Employer connections

N/A

Exam schedules

Up to Student her-/himself.

International connections

N/A

Completion alternatives

N/A

Student workload

Lectures = 40h
Labs = 40h
Assignments = 35h
Self-study = 40h
Quiz = 3h
Project = 18h
Total = 176 hour

Content scheduling

Up to Student her-/himself.

Evaluation scale

Hyväksytty/Hylätty

Assessment criteria, satisfactory (1)

- The student is familiar with CSS.
- The students understand the purpose of using CSS frameworks, and is familiar with Bootstrap as one of the most famous CSS frameworks.
- The student knows how to install and get started with Bootstrap.
- The student is familiar with most of Bootstrap components.
- The student is familiar with Bootstrap Grid System and knows how to apply it.
- The student can benefit from Bootstrap various components in a limited way.

- The student has a limited knowledge about creating responsive web pages and components.

Assessment criteria, good (3)

- The student knows which kind of Bootstrap component is proper to use for different scenarios.
- The student has a good knowledge about creating responsive web pages and components.
- The student has a good understanding about Bootstrap Grid System and knows how to apply it for different screen sizes.

Assessment criteria, excellent (5)

- The student knows how to get the best out of Bootstrap components and how to customize them according to different scenarios.
- The student has a suitable knowledge about creating responsive web pages and components.
- The student fully understands Bootstrap Grid System and knows how to apply it for different screen sizes

Assessment methods and criteria

Assignments 40%
Quiz 20%
Project 40%

Qualifications

N/A

Further information

N/A

Further information

N/A

Execution methods

- Tutorial Videos
- Assignments
- Quiz
- Projects
- Self-study

Accomplishment methods

Online (Self-Study)

- Tutorial Videos
- Assignments
- Quiz
- Projects
- Self-study