1 00:00:03,260 --> 00:00:09,800 Welcome to front end Web UI Frameworks and Tools: Bootstrap 4. 2 00:00:09,800 --> 00:00:13,565 I'm glad you decided to join this course to learn 3 00:00:13,565 --> 00:00:18,265 about the most popular front end Web UI Framework: Bootstrap. 4 00:00:18,265 --> 00:00:20,995 We'll look at various aspects of Bootstrap. 5 00:00:20,995 --> 00:00:29,520 Through several examples, you will learn by doing exercises as part of this course. 6 00:00:29,520 --> 00:00:32,900 Let's look at some details next. 7 00:00:32,970 --> 00:00:35,890 Before you begin this course, 8 00:00:35,890 --> 00:00:38,760 please make sure that you have sufficient background to 9 00:00:38,760 --> 00:00:41,625 be able to succeed in this course. 10 00:00:41,625 --> 00:00:44,455 You should have a good knowledge of HTML, 11 00:00:44,455 --> 00:00:48,920 CSS, and JavaScript before you start the course. 12 00:00:48,920 --> 00:00:54,225 From my perspective, web design and development consists of two aspects: 13 00:00:54,225 --> 00:00:58,320 one is the design of the website and the web page, 14 00:00:58,320 --> 00:01:04,610 the second one is the actual building and deployment of the web page itself. 15 00:01:04,610 --> 00:01:06,845 From the design perspective, 16 00:01:06,845 --> 00:01:13,625 what I mean is the design of the user interface and the user experience, 17 00:01:13,625 --> 00:01:16,815 the visual design, the prototyping, 18 00:01:16,815 --> 00:01:20,164 the elements of colors, 19 00:01:20,164 --> 00:01:23,815 graphics and animation that might be of interest. 20 00:01:23,815 --> 00:01:29,645 In this Specialization, we are not looking at this aspect of web development. 21 00:01:29,645 --> 00:01:32,650 Instead, we are looking at that second aspect, 22 00:01:32,650 --> 00:01:34,680 which is the development, building, 23 00:01:34,680 --> 00:01:40,825 and deployment of websites and web pages, using technologies 24 00:01:40,825 --> 00:01:45,190 like the front end web UI frameworks like Bootstrap, 25 00:01:45,190 --> 00:01:52,030 maybe JavaScript framework like Angular or a Library like React 26 00:01:52,030 --> 00:01:55,700 and hybrid mobile frameworks to design 27 00:01:55,700 --> 00:02:00,950 mobile applications and also server-side development using Node, 28 00:02:00,950 --> 00:02:06,670 Express, MongoDB, the main stack in more detail. 29 00:02:06,670 --> 00:02:09,530 If you are looking at the Specialization, 30 00:02:09,530 --> 00:02:13,035 thinking about the design aspect of website, 31 00:02:13,035 --> 00:02:16,260 then you may wish to rethink again. 32 00:02:16,260 --> 00:02:19,360 This Specialization concentrates on 33 00:02:19,360 --> 00:02:25,115 the development building and deployment of website and web pages, 34 00:02:25,115 --> 00:02:31,065 a purely technical knowledge on using the HTML, 35 00:02:31,065 --> 00:02:37,310 CSS, and JavaScript-based skills for actual website development. 36 00:02:37,310 --> 00:02:43,080 You're also probably wondering about what is meant by full stack web development. 37 00:02:43,080 --> 00:02:48,385 We'll look at more details of full stack web development in the next lesson. 38 00:02:48,385 --> 00:02:52,835 In particular, if you're looking at how this course is 39 00:02:52,835 --> 00:02:57,665 positioned in the general context of full stack web development, 40 00:02:57,665 --> 00:03:02,790 in this course, we are dealing with front end web UI development. 41 00:03:02,790 --> 00:03:07,565 In particular, the UI Framework Bootstrap 4. 42 00:03:07,565 --> 00:03:10,245 We'll be looking at the remaining aspects of 43 00:03:10,245 --> 00:03:15,845 full stack web development in the rest of this specialization. 44 00:03:15,845 --> 00:03:19,640 This course looks at Bootstrap in great detail. 45 00:03:19,640 --> 00:03:23,640 We will also look at responsive web design and how Bootstrap supports 46 00:03:23,640 --> 00:03:27,750 responsive web design through the Bootstrap Grid system. 47 00:03:27,750 --> 00:03:33,050 We'll look at the CSS and JavaScript-based components in Bootstrap and how you 48 00:03:33,050 --> 00:03:38,660 can make use of them in building your website and your web pages. 49 00:03:38,660 --> 00:03:45,200 Along the way, we'll learn about that web development using the command line. 50 00:03:45,200 --> 00:03:48,570 So we'll learn a lot of web tools that are 51 00:03:48,570 --> 00:03:52,635 based on the command line and the Node.js ecosystem. 52 00:03:52,635 --> 00:03:54,630 We'll briefly review Git, 53 00:03:54,630 --> 00:04:03,355 add Node.js and look at Noje.js based tools including task runners like Grunt and Gulp. 54 00:04:03,355 --> 00:04:08,235 This course, itself, is structured into full modules. 55 00:04:08,235 --> 00:04:12,195 Each module roughly corresponding to one week of work. 56 00:04:12,195 --> 00:04:13,830 In the first module, 57 00:04:13,830 --> 00:04:17,795 we'll get the big picture view of full stack web development, 58 00:04:17,795 --> 00:04:22,895 then you'll get a quick introduction to Git and Node.js. 59 00:04:22,895 --> 00:04:29,450 Then we'll introduce you to the Bootstrap and then review the Bootstrap Grid system. 60 00:04:29,450 --> 00:04:34,180 That will lead you up to the first assignment in this course. 61 00:04:34,180 --> 00:04:38,520 The second module deals with Bootstrap CSS components. 62 00:04:38,520 --> 00:04:42,445 We'll look at the design of the Bootstrap navigation bar 63 00:04:42,445 --> 00:04:46,875 and how we can make use of it to support navigation. 64 00:04:46,875 --> 00:04:51,565 We'll look at user input through 65 00:04:51,565 --> 00:04:58,649 buttons and forms then we'll look at how we can display content using tables and cards. 66 00:04:58,649 --> 00:05:06,340 Then we'll look at how we can include images and media into our Web page using images, 67 00:05:06,340 --> 00:05:08,590 thumbnails, and media objects. 68 00:05:08,590 --> 00:05:13,095 And then, finally, we look at how we alert users using tags, 69 00:05:13,095 --> 00:05:14,680 alerts and progress bars. 70 00:05:14,680 --> 00:05:19,615 This should lead you up to your second assignment. 71 00:05:19,615 --> 00:05:25,425 The third module deals with Bootstrap JavaScript components. 72 00:05:25,425 --> 00:05:27,980 We'll look at the big picture view of 73 00:05:27,980 --> 00:05:32,930 how Bootstrap JavaScript components work, we'll review tabs, 74 00:05:32,930 --> 00:05:34,635 pills and tabbed navigation, 75 00:05:34,635 --> 00:05:40,874 then we'll look at how collapse and accordion can be used to show and hide content. 76 00:05:40,874 --> 00:05:43,730 And then we'll look at the use of tooltips, 77 00:05:43,730 --> 00:05:48,610 popovers and modals to reveal content to be displayed in your page. 78 00:05:48,610 --> 00:05:52,230 And then we'll look at the carousel component, 79 00:05:52,230 --> 00:05:58,235 which allows you to display sliding information on your web page. 80 00:05:58,235 --> 00:06:02,670 This should lead you up to the third assignment in this course. 81 00:06:02,670 --> 00:06:11,625 The last module deals with Bootstrap and the JQuery and various dev tools. 82 00:06:11,625 --> 00:06:17,070 We'll, in particular, look at how Bootstrap and JQuery interact and how you can 83 00:06:17,070 --> 00:06:23,535 write JQuery and JavaScript code in order to control your Bootstrap JavaScript component. 84 00:06:23,535 --> 00:06:28,230 We look at the various methods that are supported by the Bootstrap JavaScript components, 85 00:06:28,230 --> 00:06:31,510 which can be leveraged to write 86 00:06:31,510 --> 00:06:35,735 JavaScript code to control the behavior of these components. 87 00:06:35,735 --> 00:06:44,509 Then we'll review CSS pre-processing language is like LESS and Sass. 88 00:06:44,509 --> 00:06:49,675 Then, finally, we'll look at how we can build and deploy our website 89 00:06:49,675 --> 00:06:57,345 using NPM scripts or task runners like Grunt and Gulp. 90 00:06:57,345 --> 00:07:03,485 This should take you all the way to the final assignment in this course. 91 00:07:03,485 --> 00:07:06,990 I hope you will have a lot of fun doing 92 00:07:06,990 --> 00:07:12,920 the various parts of this course and also enjoy the exercises that you'll 93 00:07:12,920 --> 00:07:16,850 encounter at each stage that enable you to better 94 00:07:16,850 --> 00:07:23,430 understand various aspects of the Bootstrap web UI framework.