Assignment 4: Bootstrap, JQuery and Sass

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1524 notes

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1524 notes

Cours 1 sur 4 dans Specialization Full-Stack Web Development with React

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.

À partir de la leçon

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.

Assignment 4: Bootstrap, JQuery and Sass4:04

Rencontrer les enseignants

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

We come to the final assignment of this course.

In this fourth assignment,

you're going to work with bootstraps,

JQuery support and also a little bit of Sass.

This assignment consists of four tasks.

Your first task would be to remove all that

data-attributes from both the login link here and the reserve of tables here.

Now, in this assignment,

we are going to trigger the models using JavaScript code.

So, to do that,

we'll first remove the data-attributes,

both from the reserve model and the login model as our first task in this assignment.

Your second task is to add

appropriate JavaScript code by using the models methods,

JavaScript methods that are available,

such that when the reserve table pattern is clicked,

then the corresponding reserve model will be displayed as seen here.

So, we see that this showing and hiding of the model

is triggered completely using the JavaScript methods of that model.

Your third task would be to, again,

insert appropriate code into the script such that when you click on the login link here,

the login model will be displayed.

Now, in order for this to work,

you need to give appropriate IDs both to the reserve table button and

the login link such that they can then be referenced in your JavaScript code.

So, that's a hint for you,

how you can go ahead and proceed with the implementation of this.

The use of the JavaScript methods should be quite straightforward.

The link to the bootstrap documentation describing

the JavaScript methods is available in

the additional resources section of this assignment.

As you might have already realized that these models now look a lot more colorful.

So here is the reserve table model,

and here is the login model.

So, as part of the fourth task of this assignment,

you're going to add in some SCSS code into the styles start SCSS file,

such that the colors are appropriately set.

So here, you see that that model header has

the background dark color set and the text here is displayed in white color.

And also, this particular class by

using a nested class here in your SCSS code,

you can define this also to use a flat or white color here.

Then the model body itself uses the pale background color.

So, insert appropriate SCSS code into your style start

SCSS file to enable this to work for the reserve model of header and the body,

so you can see that the same background dark color is applied to the header and

the background pale color is applied to the body of your model.

And upon completing this assignment,

you may wish to do a good comment to save your changes with the message assignment four.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play