Bootstrap

Using Bootstrap Libraries for Web Design

Web Development4.9(77)2h 45m13 lectures4 sections

What you'll learn

  • Understand the basics of the Bootstrap library
  • Design tables with Bootstrap
  • Work with images and improve how they look
  • Use command buttons in pages
  • Design forms in web pages
  • Navigate between pages
  • Build responsive websites
  • Connect with JavaScript, Servlet and JSP

About this course

This course teaches the Bootstrap library for designing responsive websites that look the same on a computer and on a phone. It is an open-source toolkit built on HTML, CSS and JavaScript, and it helps you build pages quickly instead of writing everything from scratch. You start with highlights from the course, then learn the basics of Bootstrap over several lectures, and move on to designing tables, working with images and improving how they look, using command buttons, and designing forms and navigation between pages. In the last part you learn how to connect with JavaScript, Java Servlet and Java JSP. This course suits designers, developers and beginners who want to design attractive, easy-to-use web pages. It is better to know the basics of HTML and CSS before you start. All you need is a computer, a code editor and a browser to try the pages yourself. By the end you will be able to design a responsive web page using the Bootstrap libraries and their ready-made code, and arrange tables, images and forms in a tidy and nice way.

Expected outcomes

  • Acquire skills in designing responsive web pages using Bootstrap.
  • Ability to enhance user experience through attractive and user-friendly design.
  • Create dynamic forms that improve user interaction.
  • Understand how to use built-in tools in Bootstrap to speed up the design process.
  • Design websites compatible with various devices and browsers.

Learner reviews

These reviews are from learners who bought the content and completed at least 50% of it — there are no reviews from anyone who hasn't gone through the material.
4.9
★★★★★
77 reviews
5★
73
4★
3
3★
1
2★
0
1★
0
  • ★★★★★Baraa E.·منذ 3 شهرشاهد 54٪
  • ★★★★★أحمد م.·منذ 4 شهرشاهد 100٪

    كوووووووووورس رائع

  • ★★★★★Hany D.·منذ 5 شهرشاهد 100٪
  • ★★★★★Omar A.·منذ 5 شهرشاهد 100٪

تم عرض كل التقييمات (4)

Course content

1

Bootstrap Basics

5 lectures
  1. Course HighlightsIntroduces Bootstrap as a ready-made library for styling HTML pages instead of writing CSS for every element, covering responsiveness across devices, downloading its files, and applying classes to images such as round images and left or right floats.9:07
  2. Bootstrap Basics (1)An introduction to Bootstrap: why a ready-made library that styles all page components such as buttons, text, tables and images is better than styling every element and page by hand, with an overview of web development tools.13:48
  3. Bootstrap Basics (2)A hands-on introduction to the Bootstrap library: its advantages such as responsiveness to screen sizes, ease of use and ready templates, and how to download it and unzip its CSS and JavaScript files.11:40
  4. Bootstrap Basics (3)Shows how to link the Bootstrap files to an HTML page and apply them to its components, such as buttons, by copying the class name from the library and placing it on the element.14:08
  5. Bootstrap Basics (4)Explains dividing a page into columns with Bootstrap's grid system using ready classes that respond to screen size, along with heading classes and display properties.10:29
2

Advanced Tasks

4 lectures
  1. TablesExplains styling tables with the Bootstrap library: linking the library file and setting the table's class formats it automatically instead of hand-writing CSS, including changing row colors.19:39
  2. Working with ImagesExplains handling images with Bootstrap classes to change their look, such as round images, and controlling the style of alert messages simply by changing the class.14:48
  3. Command ButtonsExplains using Bootstrap with buttons and other components such as progress bars and lists, and how each button's look changes by choosing the appropriate class from the library.30:24
  4. Forms and Navigation Between PagesExplains forms and navigation between pages in Bootstrap: menus, tabs and form elements such as checkbox and textarea, noting that the look is determined by the class used.9:12
3

Supplementary Lectures

3 lectures
  1. Java ScriptA simple introduction to JavaScript in web pages: how code is written between script tags, with examples of a loop that prints values and an input-validation example.13:48
  2. Java ServletThe idea of a Java Servlet: connecting an HTML login page to a Java class on the server, reading the values sent from the page through the request object and printing the user name.8:29
  3. Java JSPThe idea of Java JSP (Java Server Pages): writing Java code inside an HTML page between special tags, with a loop example and a login page example that reads the field values.10:01
4

Add-ons

1 attachments
  1. Download Attachments Here

Instructor

Eng. Azab Mohamed Azab

Eng. Azab Mohamed Azab

Lecturer at the Arab Academy for Science, Technology and Maritime Transport, and the Egyptian Ministry of Interior, specializing in technology and information.
68.8K views28 courses

This course is part of the diploma

Related courses