Select Your Style

Choose your layout

Color scheme

Learn HTML5, CSS3 & Bootstrap to build responsive website

Learn HTML5, CSS3 & Bootstrap to build responsive website

INR₹4,237.00 + GST

Please login to purchase the course.

Clear
SKU: cid_100462 Category: Tags: ,
About the course

This is a basic course which will help you to understand, how you can create a responsive website with the help of HTML, CSS, BootStrap, and JavaScript. In this course, you will be introduced to bootstrap, and then you will learn to create a bootstrap image, add heading, text boxes, buttons and position them and adjust the borders as well. Next, you will learn to create a navigation bar, paragraphs bootstrap cards, and footers. After that, you will learn to create a create a blog followed by understanding about the pseudo elements and classes.

Then, you will learn about CSS flexbox, how to create a header using flexbox, use alignments with flexbox. After that, you will be introduced to JavaScript, its factory and design patterns, closures, events, event propagation, local storage, JavaScript timing functions, web workers, Call, Apply, Bind functions etc. Finally, you will be introduced to AJAX. Here, you will learn about asynchronous programming, logging data from AJAX requests, JavaScript callback functions. After that, you will learn about promises, generators, IIFE, block scope, and hoisting, prototype. The course will conclude with the overall summary of the topics and concepts covered in the entire course.

Credit Score  = 14+1+20+(28+1+40) = 104 (Formula to calculate credit score is available here)
Learning Outcomes

After completing this course, you will be able to:

  • Develop a platform friendly web application in minimum time.
  • Clear your designing concepts by learning the basics of designing.
  • Create designs and experiment with it.
  • Create a user-friendly and responsive website by using Bootstrap, CSS, HTML, and Javascript together.
  • Boost your hireability through innovative, independent learning.
  • Get a certificate on successful completion of the course.
Target Audience

The course can be taken by:

Students: All students who are pursuing any technical/professional courses, and looking forward to a career in web designing and development.

Teachers/Faculties: All teachers/faculties who wish to acquire new skills or improve their efficiency in web designing and development.

Professionals: All working professionals, who wish to go upgrade their skills by learning Bootstrap, CSS, HTML.

Why learn HTML, CSS3 & Bootstrap?

Bootstrap is a front end, that is an interface between the client and the server-side code which lives on the “back end” or server. What’s more, it is a web application system, that is a product structure which is intended to backing the advancement of element sites and web applications. Bootstrap gives an arrangement of templates that give essential style definitions to all key HTML parts. These give a uniform, current appearance for arranging content, tables and structural elements. JavaScript is a widely popular programming language, and it is so widely spread because of its simplicity and beginner-friendly nature. It is used by 92.2% web associates in the world, taking from a small scale static website to a large scale nation affecting the economy. Any task related to web development is incomplete without JavaScript.

When it comes to web development, HTML plays a very important role since the beginning, and today without HTML, CSS3, and javascript, website development would have been a little difficult. The web page you see in your browser is a combination of structure, style, and interactivity. These jobs are undertaken by 3 different technologies, HTML, Javascript, and CSS which your browser knows how to interpret. There is an increasing demand for the web developers and designers across the world, who have an expertise in Bootstrap, CSS, and Javascript. So, the career prospects are also very bright.

Course Features
  • 24X7 Access: You can view lectures as per your own convenience.
  • Online lectures: 14 hours of online lectures with high-quality videos.
  • Updated Quality content: Content is latest and gets updated regularly to meet the current industry demands.
Test Evaluation

There will be a final test containing a set of multiple choice questions. Your evaluation will include the scores achieved in the final test.

Note:
  1. The access to the course can be extended 3 months at a time (for upto 4 times) just by sending a mail requesting for an extension to the email id in the footer.
  2. The hard copy of the certificate shall be shipped to your registered address or your college
  3. There is no soft copy of the certificate.
  4. To get access to the certificate - you need to take the online exam at the end of the course

No prerequisites

Topics to be covered
  1. Getting Started with building BootStrap projects
    • Introduction to HTML, CSS, JavaScript & BootStrap
    • Welcome to Bootstrap
    • Getting started with the first Bootstrap app
    • Creating Bootstrap image
    • CSS Box model
    • Adding heading
    • Adding Textboxes
    • Adding Buttons
    • Positioning as per the requirement
    • Adjusting the borders
  2. Building a Pricing app
    • Introduction to the Project
    • Creating the Navigation bar - 1
    • Creating the navigation bar - 2
    • Understanding Breakpoints and BootStrap Grid system
    • Creating the Paragraph
    • Creating Bootstrap cards
    • Creating Footer
  3. Creating a blog
    • Creating a blog
    • Completing the header
    • Pseudo Elements
    • Pseudo Classes
    • Creating navigation bar and jumbotron
    • Creating cards - 1
    • Creating cards - 2
    • Creating Main content
    • Completing the project
  4. Understanding CSS Flexbox
    • Introduction to CSS Flexbox
    • Creating the Header using Flexbox
    • Using Alignments with Flexbox - 1
    • Using Alignments with Flexbox - 2
    • Flex Property in CSS
  5. JavaScript
    • Introduction to JavaScript
    • Factory Pattern in JavaScript
    • Design Patterns in JS
    • Closures - 1
    • Closures - 2
    • Events in JavaScript
    • Creating a sample application with events - 1
    • Creating a sample application with events - 2
    • Creating a simple Photo App with JS Events
    • Creating a simple to-do list app - 1
    • Creating a simple to-do list app - 2
    • Creating a simple to-do list app - 3
    • Event Propagation
    • Event Propagation - 2
    • Event Propagation - 3
    • Local Storage
    • JavaScript Timing functions
    • Web Workers in JavaScript
    • Web Workers in JavaScript - 2
    • Call, Apply, Bind Functions in JavaScript
    • this keyword
    • JavaScript Chaining
  6. Asynchronous Programming & Other Advanced Concepts
    • Introduction to Asynchronous Programming
    • AJAX in JavaScript
    • Logging data from AJAX requests
    • JavaScript Callback functions
    • Promises in JavaScript
    • Promises in JavaScript - 2
    • Generators in JavaScript
    • Generators Advanced
    • IIFE
    • Block Scope, Hoisting
    • Prototype in JavaScript
    • Summary & Conclusion
  7. Learn HTML5, CSS & Bootstrap to Build responsive Website Final Quiz

Quiz Game (JS) (~3.0 hours)

Create a JavaScript/jQuery quiz game that takes multiple answers and shows a result to the user.

GIF picker (~3.0 hours)

Create a web app which uses a search input and Giphy’s API to display GIFs on a page.

Clone of the Bootstrap Jumbotron Template Page (~4.0 hours)

Create a clone of the Bootstrap Jumbotron Template Page -- but also using semantic HTML5 tags and SASS.

  • Build the structure for the Jumbotron page using good HTML5 semantic tags.
  • Add styling using Bootstrap's classes. You shouldn't need more than a couple of additional styles -- almost the entire page was built in Bootstrap (they added literally 2 extra styles to push the <body> down). Warning: The navbar is the most difficult part, so don't get discouraged when it's a pain.
  • Double check that resizing the screen triggers similar breakpoints as in the example.
  • Note: Their example uses all default Bootstrap classes for styling except for these 2 lines which affect spacing:

body {

 padding-top: 50px;

 padding-bottom: 20px;

}