Bootstrap Tutorial [Live Preview]

This repository contains starter files and final code for the Bootstrap Tutorial @ MWB Training Session.

Introduction

To create a perfect bootstrap responsive landing page for your app, business, portfolio or blog.

“Bootstrap is a free, open-source front-end library for designing websites and web applications. It contains HTML- and CSS-based design templates for everything from typography, forms, buttons, navigation and other interface components as well as JavaScript extensions. Unlike many other web frameworks, Bootstrap concerns itself with front-end development only.” — Wikipedia

Before starting, there are some skills you’ll have to know in order to learn and use the Bootstrap framework:

• HTML fundamentals
• Basic knowledge of CSS

Table of contents

• Prerequisite

  • HTML Basic : First webpage
  • CSS Basic : Linking a CSS document & Simple text formatting
  • Practice - Layout & Basic Navigation bar using HTML and CSS

• Bootstrap

  S.No	Project	Source	Live
  1.	Business Website	Code	Preview
  2.	Portfolio Website	Code	Preview

Guides And Other Resourses

HTML - Hyper Text Markup Language

• Documentation

  • HTML docs by Mozilla
  • HTML Tutorial by w3schools.com

• Video Tutorials

  • HTML Full Course
  • HTML Crash Course For Absolute Beginners

CSS - Cascading Style Sheets

• Documentation

  • CSS docs by Mozilla
  • CSS Tutorial by w3schools.com

• Video Tutorials

  • CSS Tutorial - Zero to Hero
  • CSS Crash Course For Absolute Beginners

BOOTSTRAP - Front-end framework

• Documentation

  • Get started with Bootstrap : official website
  • Bootstrap Tutorial by w3schools.com

• Video Tutorials

  • Bootstrap in One Video

Additional Useful Links

Free Learning Resources

• Platforms

  • freecodecamp
  • sololearn

• Youtube Channels

  • net-ninja
  • Traversy Media

Git AND GitHub

• Guide for getting started with Git
• Git & GitHub Crash Course For Beginners

IDE - Integrated development environment

• Visual Studio Code
• PyCharm
• Sublime Text 3
• Notepad++

Online Editors

• https://codepen.io/
• https://codesandbox.io/
• https://stackblitz.com/
• https://repl.it/

Code Beautifiers

• https://www.cleancss.com/html-beautify/
• https://beautifier.io/

Images

• https://www.pexels.com/
• http://source.unsplash.com/1300x500
• http://source.unsplash.com/1300x500?tech
• https://dummyimage.com/200x100/e3770c/fff.png&text=LOGO
• https://www.iconfinder.com/search/?q=error&license=2&price=free

=> Feel free to add your own resources and create a PR :)

Mentor

• Yogesh Yadav

License

The content of this project itself is licensed under the Creative Commons Attribution 3.0 license, and the underlying source code used to format and display that content is licensed under the GLP-3.0 license.