(+237) 652 921 000 | 693 339 340 Mon - Fri 8am - 9pm | Sat. 10am - 6pm

Table of Contents

  1. Introduction To Git And Github

  2. Grid: A Powerful Tool for Web Layout Design

Introduction To Git and Github

In the past, developers used to write code and save it on their local machines. If they needed to share their source code or project, they would typically use an external USB drive. The process involved transferring the code onto the USB drive, disconnecting it, and then connecting it to the computer they wished to share the code or project with. However, this method had many setbacks and limitations.
Fortunately, as technology advanced, Git and GitHub were introduced to simplify and facilitate this process.Git and GitHub emerged as solutions to simplify and enhance the process of sharing code and collaborating on projects.

Git was developed in 2005, which allows developers to track changes, manage versions, and collaborate efficiently in a distributed version control system. This means that Git can track the state of different versions of your projects while you're developing them. It is distributed because you can access your code files from another computer – and so can other developers. Git is open source because its source code is made freely available for anyone to modify and use, aside from its creator. Open-source projects are built and maintained collectively by different developers in different locations. When you're building an open source project, you'll need a way to document or track your code. This helps make your work organized, and lets you keep track of the changes you've made. This is what Git lets you do. Git also allows for non-linear development by allowing developers to work on different branches of code simultaneously and merge them together when ready.

Basic Git Commands

A Git command is a string of text that tells Git what to do. Each Git command does a different task, but they all work together to help developers manage their code changes.
Git is typically used through the command line. The Git command line interface (CLI) is a tool for running these commands. The Git command line tool is installed by default on macOS and Linux and can be easily installed on Windows.

Once you have Git installed, you can clone an existing repository or create a new one. To clone a repository, you will need the URL of the git repository. To create a new git repository, use the git init command. Once you have a git repository, you can add files to it and commit changes. For instance, to add a file to a git repository, use the git add command. To commit changes, use the git commit command. While Git is a powerful tool, it can be challenging to use if you're not familiar with the command line. That's where GitHub comes in. In fact, GitHub is built on Git.

Git Init: Initialize a new git repository. It is the first command you run when starting a new project.

Git Clone: Clone an existing git repository. This command allows you to create a local copy of a remote repository.

Git Add: Add files to a repository. This command allows you to add new files or changes to already existing files to a git repository.

Git Commit: Make changes to a repository. This command saves your changes to the git history.

Git Push: Push changes to a git remote repository. This command pushes your local commits to a remote git repository. ie(Github)

Git Pull: Pull changes from a git remote repository. This command pulls down any remote changes and incorporates them into your local git repository.. ie(Github)

Git Status: Check the status of your git repository. This will let you know which files have been modified and which files are being tracked by git

Git Log: View the commit history for your git repository. This is useful for finding out when certain changes were made and who made them.

Git Reset: Reset your git repository to a specific commit. This command allows you to undo changes to a file or reset your git history

Thus If a particular version of a file is in the Git directory, it’s considered committed. If it has been modified and was added to the staging area, it is staged. And if it was changed since it was checked out but has not been staged, it is modified.

while building your codes, you need a place to host your code (project) inorder to control each version of your project easier and faster. This is where GitHub comes in.
GitHub provides a web-based platform for hosting Git repositories, making it easier for developers to share, collaborate, and manage their code in a more streamlined and accessible manner. When you're using GitHub, you're working with Git beneath the hood. GitHub allows you to create, store, change, merge, and collaborate on files or code. Any member of a team can access the GitHub repository (think of this as a folder for files) and see the most recent version in real-time. Then, they can make edits or changes that the other collaborators also see. GitHub also lets users make requests of one another and internally discuss the iterations along the way.

GitHub offers both a paid and free subscription. With a free subscription, users can create public repositories. Public repositories are visible to anyone and can be cloned or forked by anyone. (A fork is a separate copy of the Git repository that was made. A clone, in contrast, creates a linked copy that will continue to synchronize with the target repository.) A paid subscription is required to create private repositories. Private repositories are only visible to users who have been given access by the repository owner.

GitHub offers features such as bug tracking, task management, and project management. In addition to Git repositories, GitHub also provides a platform for developers to share code snippets, issues, and documentation. Developers can also use GitHub to track the progress of their projects.

Customizing your GitHub profile README helps you stand out from random GitHub users. The README.md file helps you describe your GitHub profile, and you can use it to show what you're currently learning, the projects you have built or worked on, along with your skills and contributions. The GitHub README.md uses markdown to format its content. It has an easy-to-learn syntax.

Connect your GitHub account to your Git account.

After git and Github has been downloaded on your computer, you can connect both of them by following the methods below. You'll do this from your terminal:

Why Is Version Control Important?

Version control is important as it makes collaboration more transparent and reproducible. By visibly tracking iterative changes, you and your collaborators can experiment with new approaches knowing that you can revert to the original as needed.
By using Git and GitHub, you can access your code from any computer. If your local machine was to get damaged or stolen, for example, you would lose all of your code with no way to retrieve it. However, if you store your code on GitHub, which is a cloud-based service, you never have to worry about losing it. Git and GitHub are great tools to consider when working on any coding project.

Grid: A Powerful Tool for Web Layout Design

In the world of web design, creating visually appealing and well-structured layouts is crucial. One effective tool that has revolutionized the way websites are designed is the CSS grid. With its flexible and intuitive nature, the grid system provides designers with a powerful framework for arranging and organizing web page elements. In this article, we will introduce the basics of grid and explore its importance along with some demonstrations.
CSS grid is a layout system that allows designers to create complex web page structures by dividing the layout into rows and columns. It provides a two-dimensional grid that enables precise control over the placement and alignment of elements within a container. Also, it lets you create a grid-based structure for your web page, making it easier to achieve responsive designs.

Why is grid important?

Some examples where grid is commonly used

key aspects of the grid concept

Grid Container: In CSS Grid, a grid container is the parent element that contains a grid layout. It is defined using the display: grid or display: inline-grid property on the container element. Once a container element is defined as a grid container, you can use a variety of properties to control the layout of the grid.

Grid item: The child elements of the grid container that are placed into the grid. Grid items are positioned using grid lines, which are defined by the grid tracks.

Grid line: A line that divides the grid into rows or columns. Grid lines are numbered from 1 to n, where n is the number of rows or columns in the grid.

Grid track: The space between two adjacent grid lines. Grid tracks can be sized using the grid-template-columns and grid-template-rows properties. The space between two-row lines is referred to as the row tracks and The space between two-column lines is referred to as the column tracks. A size is assigned to these tracks whenever a grid is created.

Grid cell: The intersection of a row and a column in the grid. Grid cells can contain grid items or be empty.

Grid area: A rectangular area of the grid that can contain one or more grid cells. Grid areas are defined using the grid-template-areas property.

CSS Grid Properties

There are two main types of CSS Grid properties namely:
Parent properties (Grid Container) and Child Properties (Grid Items).

Parent properties (Grid Container)

Grid Container properties are used to define the layout of the grid container itself. These properties are applied to the parent element that contains the grid items. Some examples are:

Child Properties (Grid Items)

Child properties are the CSS properties applied to the individual child elements of grid items. They are: grid-column-start, grid-column-end, grid-row-start, and grid-row-end, Grid-column and grid-row, grid-area, justify-self, align-self, and place-self

grid-column-start, grid-column-end, grid-row-start & grid-row-end
The properties grid-column-start, grid-column-end, grid-row-start, and grid-row-end are used to specify the location of a grid item within the grid container.

The grid-column-start and grid-column-end properties are used to specify the start and end positions of the grid item along the horizontal axis (columns). For example, the grid-column-start value of 1 and grid-column-end value of 3 for the .item-1 class specifies that the grid item should start at column 1 and end at column 3. Similarly, the grid-row-start and grid-row-end properties are used to specify the start and end positions of the grid item along the vertical axis (rows). For example, the grid-row-start value of 1 and grid-row-end value of 2 for the .item-1 class specifies that the grid item should start at row 1 and end at row 2.

grid-column & grid-row:
The grid-column and grid-row properties specify a grid item's location within a grid container. When using these properties on a child grid item, you can define the starting and ending grid lines on the horizontal (for grid-column) and vertical (for grid-row) axes to determine the position and size of the item in the grid. You can adjust the values of grid-column and grid-row to position your grid items as desired within the grid container.

grid-area: The grid-area property is used to assign a grid item to a named grid area, specified by the grid-template-areas property on the parent container.

To use grid-area, you need to follow these steps:

Define the grid layout on the parent container using the grid-template-areas, grid-template-rows, and grid-template-columns properties.

Assign a name to each grid area using the grid-area property on the child items. The name should correspond to the name you defined in the grid-template-areas property.

Set the position and size of the grid item using the grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties.

image In this example, we have a container with a grid layout that defines three rows and two columns, and three named grid areas. Each child item is assigned to a grid area using the grid-area property, and its position and size are set using the grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties.

justify-self, align-self & place-self: The justify-self, align-self, and place-self properties are used to control the alignment and placement of grid items within their grid cells. These properties are applied to individual grid items, rather than to the grid container as a whole. Here's a brief explanation of each property:

-justify-self: This property controls the horizontal alignment of a grid item within its cell. It can take values like start, end, center, stretch, and auto.

-align-self: This property controls the vertical alignment of a grid item within its cell. It can take values like start, end, center, stretch, and auto.

-place-self: This is a shorthand property that combines justify-self and align-self into a single declaration. It takes two values, the first for horizontal alignment and the second for vertical alignment, separated by a space.

using display: flex, justify-content, and align-items. The justify-self, align-self, and place-self properties are then used to control the alignment of individual items within their cells. The first item is aligned to the start of its cell horizontally using justify-self: start. The second item is aligned to the end of its cell vertically using align-self: end. The third item is centered both horizontally and vertically using place-self: center stretch, which sets the horizontal alignment to center and the vertical alignment to stretch.

Tricks while using CSS Grids

To create more flexible and maintainable CSS grids, you can use these tricks to simplify your code.

- Use the repeat() function to simplify grid templates: example; Instead of this grid-template-columns: 1fr 1fr 1fr 1fr 1fr; Use the repeat() function for cleaner code grid-template-columns: repeat(5, 1fr);

- Use auto-fit or auto-fill to create flexible grids: example; This grid will automatically create as many columns as will fit in the container grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); . This grid will always create 3 columns, and will fill any extra space with empty cells grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

- Use grid-gap to add spacing between grid items: example; This grid will have a 20px gap between grid items grid-gap: 20px;

- Use grid-template-areas to create named grid areas

- Creating a responsive grid with media queries

- Nesting grids for more complex layouts

To conclude, it is important to understand the basic principles of grids and practice working with them. Start by experimenting with simple grid structures and gradually explore more complex layouts. Familiarize yourself with CSS grid systems and frameworks that provide ready-to-use grid structures, making it easier to implement grids in your designs. Remember, the grid concept is a powerful tool that can greatly enhance your web design skills. Embrace its structure, experiment with different layouts, and enjoy the creative possibilities it offers.
Happy Codding!!