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.

Avis

DG

Excellent course for anyone who is familiar with html, css, but cannot organise the subject in their mind. This course excellently teaches you the what is what, and how to do things in the correct way

LH

Aug 02, 2017

Filled StarFilled StarFilled StarFilled StarFilled Star

The lecturer is very clear on every step of the learning process, is super responsive on the discussion forums, and everything he does, he explains well before doing it. Highly recommend this course.

À partir de la leçon

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.

Enseigné par

Jogesh K. Muppala

Transcription

No self-respect webpage designers, would today design webpages without including some form of images or media on their websites. Computer science professors are an exception. At this stage, you are probably expecting me to say this, but that's not what I'm going to say. I'm going to say that, "A picture is worth $12 on iStockPhoto.com. Bootstrap provides extensive support for including images and various kinds of media in your websites and your web pages. The image HTML tag is obviously going to be used for including images in your webpages. Bootstrap also provides a bunch of classes that you can apply to the image tag in order to further enhance the way images are included in your webpage. So you could use a image class called img-fluid which will make your images responsive, meaning that the size of the image will automatically adjust to different screen sizes. You can also use an img-thumbnail which will put a white border around your image. You can also deal with the shapes and sizes of images like you see in this picture here so you can have images for which you create rounded corners, either all the four corners, or any chosen pair of corners. So you can apply the class around it to create a image with rounded corners or you can see a rounded hyphen top bottom left or right to put the rounded corners in any one of these four edges of your image. You can also apply rounded circle to create circular images. So, when you visit websites, you would see images being used in many of these ways already. You'll remember we saw the Card class in the previous lesson and the exercise. Here, I illustrate the use of the Card class with an image included. So in this case, we include an image with the class card image top and if you include large enough size the image that image will be included at the top and then enclosed inside a card like this. If the image is too small, then it may be positioned to one corner in your card. So use a large enough image to be able to define a clean card like this. So here you'll see the image being described with, the classes applied to that including card image top and img-fluid to make the image responsive automatically. So, this is how you can use the images with the Card class to define cards that you use on your webpages. Another way of including images and related content in your webpages is a media object. A media object allows you to specify an image that you can position either to the left or to the right of the description. Also, you can include a media body which contains the description that goes together with the image. So as you see in this example here, the media body itself encloses any HTML formatted content here. So here I am using an h2 and h4 together with a p class inside the media body to define the actual content. We will use the media object in the exercise that follows. You can also do a responsive embed of content. So for example, if you have a video that you want to enclose in your webpage, then you can use an iframe class to frame the video, and then enclose it inside the div with the classes embedded responsive giving sizes so you can 16by9, 4by3 or video, content to be displayed. So responsive embed, you can use the embed or iframe or video or object HTML tags and then enclose it inside a div. Applying the embed-responsive and also together with the embed-responsive, specifying the dimensions which you want to use for 4by3 or 16by9 dimensions. So this is how you can also enclose video content in your webpages. Now, that we have seen the support for images and media, it is time to go onto an exercise where we will look at how we can include images in the webpage or the website that we have been working on. We'll make some changes to the index.html page by including some images and content using the media object.