Blog

You are currently viewing Web for Beginners: Session #4 – Introduction to Git, GitHub, and Bootstrap CSS

Web for Beginners: Session #4 – Introduction to Git, GitHub, and Bootstrap CSS

1. Introduction to Git

  • What is Git?
    • Git is a distributed version control system used to track changes in source code during software development.
    • It allows multiple developers to work on a project simultaneously without overwriting each other’s changes.
  • Basic Git Commands
    • Initializing a Repository
git init

Cloning a Repository

git clone <repository_url>

Checking Status

git status

Adding Changes

git add <file_or_directory>

Committing Changes

 git commit -m "Commit message"

Pushing Changes

git push origin <branch_name>

Pulling Changes

git pull origin <branch_name>

2. Introduction to GitHub

  • What is GitHub?
    • GitHub is a web-based platform that uses Git for version control and collaboration.
    • It allows you to host and manage your code repositories, collaborate with others, and contribute to open-source projects.
  • Creating a Repository on GitHub
    1. Sign Up/Log In:
      • Go to GitHub and sign up or log in to your account.
    2. Create a New Repository:
      • Click on the “+” icon in the top-right corner and select “New repository”.
      • Fill in the repository name, description (optional), and choose the visibility (public or private).
      • Click “Create repository”.
    3. Clone the Repository Locally:
      • Copy the repository URL.
      • Use the git clone command to clone the repository to your local machine.
  • Working with Repositories
    • Forking a Repository:
      • Forking allows you to create a personal copy of someone else’s project.
      • Click the “Fork” button on the repository page.
    • Creating a Pull Request:
      • After making changes to your forked repository, you can create a pull request to propose changes to the original repository.
      • Navigate to the original repository and click “New pull request”.

3. Introduction to Bootstrap CSS

  • What is Bootstrap?
    • Bootstrap is a popular front-end framework for developing responsive and mobile-first websites.
    • It includes HTML, CSS, and JavaScript components for designing web pages.
  • Setting Up Bootstrap
    • Using the CDN:
      • Add the following lines to the <head> section of your HTML document:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Basic Bootstrap Components

  • Grid System:
    • Bootstrap uses a 12-column grid system for layout.
    • Example:
<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

Typography:

  • Use Bootstrap’s typography classes for styling text.
  • Example:
<h1 class="display-4">Display 4</h1>
<p class="lead">This is a lead paragraph.</p>

Buttons:

  • Bootstrap provides various button styles.
  • Example:
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>

Navigation Bar:

  • Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

Practice Exercise

  • Git and GitHub:
    • Create a new repository on GitHub.
    • Clone the repository to your local machine.
    • Create a new HTML file, make some changes, and commit them.
    • Push the changes to GitHub.
  • Bootstrap:
    • Create a simple web page using Bootstrap.
    • Include a navigation bar, a grid layout, and some styled buttons.

Summary

  • Git is a powerful version control system for tracking changes and collaborating on projects.
  • GitHub is a platform that leverages Git for managing and sharing code repositories.
  • Bootstrap CSS is a front-end framework that simplifies the development of responsive and visually appealing web pages.

Leave a Reply