Explore
For Enterprise
Join for Free
Log In

Arts et humanités
Business
Informatique
Science des données
Technologies de l'information
santé
Mathématiques et logique
Développement personnel
Sciences physiques et ingénierie
Sciences sociales
Apprentissage des langues
Diplômes et Certificats

Explorez l'intégralité de Coursera

Parcourir
Rechercher
For Enterprise
Connexion
Inscrivez-vous gratuitement

Assignment 4: Bootstrap, JQuery and Sass

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

Université des sciences et technologies de Hong Kong

4.8 (1,694 notes) | 40K étudiants inscrits

Cours 1 de 4 dans Full-Stack Web Development with React Spécialisation

Visualiser le programme de cours

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.

Compétences que vous apprendrez

Bootstrap (Front-End Framework), Node.Js, Jquery, SASS (Stylesheet Language)

Avis

4.8 (1,694 notes)

5 stars
1,409 ratings
4 stars
241 ratings
3 stars
31 ratings
2 stars
6 ratings
1 star
7 ratings

AA

Jul 12, 2018

One of the best courses I have ever taken. Everything is explained in the best way possible. The Instructor is also good. Must give this course a try. It enhanced my knowledge of the subject matter.

BB

Nov 07, 2018

The instructor knows his subject well. He uses real world examples that allow you to achieve something tangible. On a personal note I loved listening to his instruction. He is an enjoyable teacher.

À 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

Enseigné par

Jogesh K. Muppala
Associate Professor

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

Coursera
À propos
Direction
Carrières
Catalogue
Certificats
Certificats MasterTrack™
Diplômes
For Enterprise
For Government

Communauté
Learners
Partners
Developers
Beta Testers
Translators

Se connecter
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Blog Tech

Plus
Conditions
Confidentialité
Aide
Accessibilité
Presse
Contact
Répertoire
Filiales