Offered By

The Hong Kong University of Science and Technology

About this Course

441,300 recent views

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp.
At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites.
This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4.
Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

Learner Career Outcomes

30%

started a new career after completing these courses

29%

got a tangible career benefit from this course

Shareable Certificate

Earn a Certificate upon completion

100% online

Start instantly and learn at your own schedule.

Flexible deadlines

Reset deadlines in accordance to your schedule.

Intermediate Level

Approx. 31 hours to complete

English

Subtitles: Arabic, French, Portuguese (European), Chinese (Simplified), Italian, Vietnamese, Korean, German, Russian, Turkish, English, Spanish

Skills you will gain

Bootstrap (Front-End Framework)Node.JsJquerySASS (Stylesheet Language)

Learner Career Outcomes

30%

started a new career after completing these courses

29%

got a tangible career benefit from this course

Shareable Certificate

Earn a Certificate upon completion

100% online

Start instantly and learn at your own schedule.

Flexible deadlines

Reset deadlines in accordance to your schedule.

Intermediate Level

Approx. 31 hours to complete

English

Subtitles: Arabic, French, Portuguese (European), Chinese (Simplified), Italian, Vietnamese, Korean, German, Russian, Turkish, English, Spanish

Instructor

Instructor rating

4.81/5 (1,415 Ratings)

Jogesh K. Muppala

Associate Professor

Department of Computer Science and Engineering

449,337 Learners

12 Courses

Offered by

The Hong Kong University of Science and Technology

HKUST - A dynamic, international research university, in relentless pursuit of excellence, leading the advance of science and technology, and educating the new generation of front-runners for Asia and the world.

Syllabus - What you will learn from this course

Content Rating98%(41,597 ratings)

Week

Week 1

9 hours to complete

Front-end Web UI Frameworks Overview: Bootstrap

This module gives you a quick introduction to full-stack web development and the outline of the course. Then you will learn the basics of Bootstrap, setting up a web project using Bootstrap. You will learn about responsive design and the Bootstrap grid system. At the end of this module, you need to complete your first assignment.

9 hours to complete

17 videos (Total 194 min), 22 readings, 2 quizzes

17 videos

Front-End Web UI Frameworks and Tools: Bootstrap 4: Course Overview7m

How to Use the Learning Resources10m

What is Full-Stack Web Development?5m

Exercise (Video): Setting up Git6m

Exercise (Video): Basic Git Commands18m

Exercise (Video): Online Git Repositories12m

Node.js and NPM3m

Exercise (Video): Setting up Node.js and NPM2m

Exercise (Video): Basics of Node.js and NPM23m

Front-end Web UI Frameworks7m

Introduction to Bootstrap2m

Exercise (Video): Getting Started with Bootstrap14m

Responsive Design9m

Bootstrap Grid System27m

Exercise (Video): Responsive Design and Bootstrap Grid System Part 120m

Exercise (Video): Responsive Design and Bootstrap Grid System Part 214m

Assignment 1 Requirements (Video)7m

22 readings

Welcome to Front-End Web UI Frameworks and Tools: Bootstrap 4: Additional Resources10m

Full Stack Web Development: The Big Picture: Objectives and Outcomes10m

Full Stack Web Development: Additional Resources10m

Setting up Your Development Environment: Git and Node: Objectives and Outcomes10m

Setting up your Development Environment10m

Exercise (Instructions): Setting up Git10m

Exercise (Instructions): Basic Git Commands10m

Exercise (Instructions): Online Git Repositories10m

Exercise (Instructions): Setting up Node.js and NPM10m

Exercise (Instructions): Basics of Node.js and NPM10m

Setting up your Development Environment: Git and Node: Additional Resources10m

Introduction to Bootstrap: Objectives and Outcomes10m

Exercise (Instructions): Getting Started with Bootstrap10m

Introduction to Bootstrap: Additional Resources10m

Responsive Design and Bootstrap Grid System: Objectives and Outcomes10m

Exercise (Instructions): Responsive Design and Bootstrap Grid System Part 110m

Exercise (Instructions): Responsive Design and Bootstrap Grid System Part 210m

Responsive Design and Bootstrap Grid System: Additional Resources10m

Assignment 1 Resources10m

Ideation: Objectives and Outcomes10m

Ideation Report Template10m

Ideation: Additional Resources10m

Week

Week 2

8 hours to complete

Bootstrap CSS Components

This module concentrates on Bootstrap's components that are designed using pure CSS classes. You will learn about Navigation and Navigation bar. Then, you will learn about buttons, forms, tables, cards, images and media, tags, alerts and progress bars. At the end of this module you need to complete your second assignment.

8 hours to complete

14 videos (Total 146 min), 21 readings, 2 quizzes

14 videos

Navigation and Navigation Bar9m

Exercise (Video): Navbar and Breadcrumbs30m

Icon Fonts4m

Exercise (Video): Icon Fonts12m

User Input4m

Exercise (Video): Buttons9m

Exercise (Video): Forms22m

Bootstrap Tables and Cards4m

Exercise (Video): Displaying Content: Tables and Cards18m

Images and Media5m

Exercise (Video): Images and Media11m

Alerting Users6m

Exercise (Video): Alerting Users2m

Assignment 2: Bootstrap CSS Components4m

21 readings

Navigation and Navigation Bar: Objectives and Outcomes10m

Exercise (Instructions): Navbar and Breadcrumbs10m

Exercise (Instructions): Icon Fonts10m

Navigation and Navigation Bar: Additional Resources10m

User Input: Buttons and Forms: Objectives and Outcomes10m

Exercise (Instructions): Buttons10m

Exercise (Instructions): Forms10m

User Input: Additional Resources10m

Displaying Content: Tables and Cards: Objectives and Outcomes10m

Exercise (Instructions): Displaying Content: Tables and Cards10m

Displaying Content: Additional Resources10m

Images and Media: Objectives and Outcomes10m

Exercise (Instructions): Images and Media10m

Images and Media: Additional Resources10m

Alerting Users: Objectives and Outcomes10m

Exercise (Instructions): Alerting Users10m

Alerting Users: Additional Resources10m

Assignment 2: Resources10m

UI Design and Prototyping: Objectives and Outcomes10m

UI Design and Prototyping Report Template10m

UI Design and Prototyping: Additional Resources10m

Week

Week 3

5 hours to complete

Bootstrap Javascript Components

This module concentrates on Bootstrap's JavaScript based components. You will learn about tabs, pills and tabbed navigation, collapse, accordion, scrollspy, affix, tooltips, popovers, modals and the carousel. At the end of this module you need to complete the third assignment.

5 hours to complete

10 videos (Total 77 min), 15 readings, 1 quiz

10 videos

Bootstrap JavaScript Components8m

Tabs, Pills and Tabbed Navigation3m

Exercise (Video): Tabs11m

Collapse and Accordion5m

Exercise (Video): Accordion8m

Tooltips, Popovers and Modals5m

Exercise (Video): Tooltips and Modals15m

Carousel1m

Exercise (Video): Carousel14m

Assignment 3: Bootstrap JavaScript Components3m

15 readings

Bootstrap JavaScript Components: Objectives and Outcomes10m

Bootstrap JavaScript Components: Additional Resources10m

Tabs and Tabbed Navigation: Objectives and Outcomes10m

Exercise (Instructions): Tabs10m

Tabs and Tabbed Navigation: Additional Resources10m

Hide and Seek: Objectives and Outcomes10m

Exercise (Instructions): Accordion10m

Hide and Seek: Additional Resources10m

Revealing Content: Objectives and Outcomes10m

Exercise (Instructions): Tooltips and Modals10m

Revealing Content: Additional Resources10m

Carousel: Objectives and Outcomes10m

Exercise (Instructions): Carousel10m

Carousel: Additional Resources10m

Assignment 3: Resources10m

Week

Week 4

9 hours to complete

Web Tools

This module rounds out our discussions on Bootstrap JavaScript components. Then we discuss CSS preprocessors, Less and Sass. Finally, we discuss building and deployment of our Web projects through task automation using NPM scripts, and task runners like Grunt and Gulp. The final assignment of this course needs to be completed at the end of this module.

9 hours to complete

17 videos (Total 220 min), 22 readings, 2 quizzes

17 videos

Bootstrap and JQuery16m

Exercise (Video): Bootstrap and JQuery10m

Exercise (Video): More Bootstrap and JQuery11m

CSS Preprocessors: Less and Sass10m

Exercise (Video): Less8m

Exercise (Video): Scss8m

Assignment 4: Bootstrap, JQuery and Sass4m

Building and Deployment10m

NPM Scripts4m

Exercise (Video): NPM Scripts Part 112m

Exercise (Video): NPM Scripts Part 228m

Task Runners4m

Exercise (Video): Grunt Part 119m

Exercise (Video): Grunt Part 230m

Exercise (Video): Gulp Part 116m

Exercise (Video): Gulp Part 220m

Front-End Web UI Frameworks: Bootstrap 4: Conclusions2m

22 readings

Bootstrap and JQuery: Objectives and Outcomes10m

Exercise (Instructions): Bootstrap and JQuery10m

Exercise (Instructions): More Bootstrap and JQuery10m

Bootstrap and JQuery: Additional Resources10m

CSS Preprocessors: Objectives and Outcomes10m

Exercise (Instructions): Less10m

Exercise (Instructions): Scss10m

CSS Preprocessors: Additional Resources10m

Assignment 4: Additional Resources10m

Building and Deployment: Objectives and Outcomes10m

Exercise (Instructions): NPM Scripts Part 110m

Exercise (Instructions): NPM Scripts Part 210m

Building and Deployment: NPM Scripts: Additional Resources10m

Building and Deployment: Task Runners10m

Exercise (Instructions): Grunt Part 110m

Exercise (Instructions): Grunt Part 210m

Exercise (Instructions): Gulp Part 110m

Exercise (Instructions): Gulp Part 210m

Building and Deployment: Task Runners: Additional Resources10m

Front-End Web UI Frameworks and Tools: Bootstrap 4: Conclusions10m

Project Implementation: Objectives and Outcomes10m

Final Report Template10m

Frequently Asked Questions

When will I have access to the lectures and assignments?
Access to lectures and assignments depends on your type of enrollment. If you take a course in audit mode, you will be able to see most course materials for free. To access graded assignments and to earn a Certificate, you will need to purchase the Certificate experience, during or after your audit. If you don't see the audit option:
The course may not offer an audit option. You can try a Free Trial instead, or apply for Financial Aid.
The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Specialization?
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. If you only want to read and view the course content, you can audit the course for free.
Is financial aid available?
Yes, Coursera provides financial aid to learners who cannot afford the fee. Apply for it by clicking on the Financial Aid link beneath the "Enroll" button on the left. You'll be prompted to complete an application and will be notified if you are approved. You'll need to complete this step for each course in the Specialization, including the Capstone Project. Learn more.
Will I earn university credit for completing the Course?
This Course doesn't carry university credit, but some universities may choose to accept Course Certificates for credit. Check with your institution to learn more. Online Degrees and Mastertrack™ Certificates on Coursera provide the opportunity to earn university credit.

More questions? Visit the Learner Help Center.

Front-End Web UI Frameworks and Tools: Bootstrap 4

About this Course

Learner Career Outcomes

30%

29%

Skills you will gain

Learner Career Outcomes

30%

29%

Instructor

Jogesh K. Muppala

Offered by

The Hong Kong University of Science and Technology

Syllabus - What you will learn from this course

Week 1

Front-end Web UI Frameworks Overview: Bootstrap

Week 2

Bootstrap CSS Components

Week 3

Bootstrap Javascript Components

Week 4

Web Tools

Reviews

TOP REVIEWS FROM FRONT-END WEB UI FRAMEWORKS AND TOOLS: BOOTSTRAP 4

Frequently Asked Questions

Top Online Courses

Top Online Specializations

Online Certificates

Online Degree Programs

Coursera

Community

More

Front-End Web UI Frameworks and Tools: Bootstrap 4

About this Course

Learner Career Outcomes

30%

29%

Skills you will gain

Learner Career Outcomes

30%

29%

Instructor

Jogesh K. Muppala

Offered by

The Hong Kong University of Science and Technology

Syllabus - What you will learn from this course

Week 1

Front-end Web UI Frameworks Overview: Bootstrap

Week 2

Bootstrap CSS Components

Week 3

Bootstrap Javascript Components

Week 4

Web Tools

Reviews

TOP REVIEWS FROM FRONT-END WEB UI FRAMEWORKS AND TOOLS: BOOTSTRAP 4

Frequently Asked Questions

Coursera Footer

Top Online Courses

Top Online Specializations

Online Certificates

Online Degree Programs

Coursera

Community

More