DEV Community: Stephen

How to Push Code to Github

Stephen — Thu, 17 Mar 2022 20:16:35 +0000

GitHub is a provider of internet hosting for software development and version control using Git. It is also a publishing tool and a great way to collaborate with others. Github gives us the ability to save our process and go back to earlier points as needed.

We can push code to Github following these steps;
Before we can push code to Github, Git needs to to be installed on your computer, start by heading to the Git website and downloading the latest version. Follow the steps provided on the website and install Git on your computer.

After installing Git, open Github and confirm that you are signed in, click on Create new repository and then add a name and description

After creating a new repository, a quick setup page is loaded which has important information on how to push your code to the repository using the terminal

Next open the terminal and set your local project as the working directory by typing cd followed by the path of the folder where your project is saved on your computer and hitting return. The files in the directory can be viewed by typing ls and hitting return.

Intialize your local directory as a git repository by typing git init and hitting return

Add the files in your local repository to the git repository by typing git add . and hitting return.This stages the files for commit. Typing git status and hitting return shows us the files that have been staged to commit

Commit the files you have staged by typing git commit -m “first commit” and hitting enter.The -m flag specifies what commit message will be recorded in the repository. This is purely informational to users. The message might be “fixed bug,” “new level,” etc. This message helps other developers easily know what changes have been made to the code.

Specifying the remote repository’s url comes next and to do this copy the url from the Github repository quick setup page then in terminal type git remote add origin , paste the Git repository’s url and hit return.

Finally, push the code in your local repository by typing git push -u origin master and hit return. Enter your Github username and password when requested.

Once all these steps are completed, the files from your local directory will be added to your repository on Github

What is Github?

Stephen — Thu, 17 Mar 2022 16:48:43 +0000

GitHub is a cloud-based service that helps developers store and manage their code. To understand GitHub fully, you need to understand Version Control and Git

What Is Version Control?
Version control helps developers manage and keep track of changes to a software project’s code. As a software project grows, version control becomes essential.

If a developer is to work on a specific part of a software project’s codebase, it wouldn’t be safe to have them directly edit the source code.

Instead, version control allows developers work safely through branching. With branching, a developer duplicates part of the source code, which is called the repository. The developer can then safely make changes to that part of the code without affecting the rest of the project.

All of these changes are tracked and can be reverted if the need arises.

What Is Git?
Git is a free and open source distributed version control system, which means that the entire codebase and history is available to every developer, allowing for easy branching.

GitHub is a Git repository hosting service. It offers the distributed version control and source code management(SCM) functionality of Git. While Git is a command line tool, GitHub provides a Web-based graphical interface. Github also provides access control and several collaboration features, such as a bug tracking, wikis and basic task management tools for every project.

One of the most important features of GitHub is “forking” which is copying a repository from one user’s account to another. This lets you take a project that you don’t have write access to and modify it under your own account. After making changes, you can send a notification called a “pull request” to the original owner. That user can then merge the changes found in your repository with the original repository.

These three features – fork, pull request and merge – make GitHub a very powerful tool.

Github makes it a lot easier for individuals and teams to use Git for version control and collaboration.

To get started with GitHub:
•Sign up for a free GitHub account
•Follow the GitHub Hello World guide to understand the most popular actions you can carry out.

CSS Box Model

Stephen — Sun, 13 Mar 2022 23:54:57 +0000

All HTML elements written in CSS have a box around them, and understanding these boxes is important in mastering how to create layouts for a webpage.
The type of box applied to an element is defined by the display property and boxes have an outer display type and an inner display type.

Outer Display Type
The outer display type determines if the box is inline or block. These boxes are so classed in reference to their behavior in the flow of a webpage and relation to other boxes

Block Boxes
Block boxes start on a new line and extend to fill the available inline space
HTML elements, such as <h1> and <p>, use block as their outer display type by default.

Inline Boxes
Inline boxes don’t start on a new line and are only as large as their content

HTML elements, such as <a>, <span>, <em> and <strong>use inline as their outer display type by default.

See the Pen Untitled by stephen (@solar0) on CodePen.

Inner Display Type
The inner display type determines how elements inside a particular box are laid out. By default, the elements inside a box are laid out in normal flow, just like any other block and inline elements (as explained above).

We can, however, change the inner display type by using display values like flex and then style the boxes according to flex rules.

The CSS box model defines how the different parts of a box — margin, border, padding, and content — work together to create the layout of a page.
The image below illustrates the box model:

Content box: The area where your content is displayed, which can be sized using properties like width and height

Padding: The padding sits around the content as white space; its size can be controlled using the padding property

Border: The border wraps the content and any padding. Its size and style can be controlled using the border property

Margin: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between the box and other elements. Its size can be controlled using the margin property

Examples

See the Pen Untitled by stephen (@solar0) on CodePen.

ABSOLUTE AND RELATIVE LENGTH UNITS

Stephen — Fri, 11 Mar 2022 19:27:04 +0000

Several CSS properties take “Length” values, such as width, padding, font size, margin, etc. The Length values are used to set the size of an element or space an element in a web page.
The two main types of length units used in CSS are absolute and relative. Understanding how these two units work is important for styling web pages using CSS.

Absolute Length Units
Absolute Length units describe physical units of length. They approximate the actual size of an element on the screen and are not relative to any other element or measurement. Absolute Length Units include centimeters(cm), millimeters(mm), inches(in), pixels(px), points(pt) and picas(px).

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size when displayed. The only value that you will commonly come across is px (pixels). The others are more useful for print.

Absolute Units are not recommended for use on screens because they will look the same whether on desktop, tablet, or mobile, and will not change along with the viewport’s dimensions, making it impossible to build responsive web pages.

Relative Length Units
Relative length units specify a length relative to another length property which for example could be the size of the viewport or the size of the parent element’s font. Relative length units are useful for making responsive websites.

They scale relative to a parent or the viewport and allow for websites to adapt style sheets from one environment to another, such as from mobile to desktop.
Some of the most useful relative units for web development are listed in the table below

em and rem are the two relative lengths you are likely to encounter most frequently when sizing elements.
It is good practice for web developers to set length values using relative length units rather than absolute units. This makes it easier to manipulate the size of elements, easily halving or doubling the size instead of setting explicit values.

Thanks for reading!