DEV Community: Daphnie Ozioma

What are the basic fundamental concepts of programming?

Daphnie Ozioma — Thu, 29 Jul 2021 14:31:02 +0000

Irrespective of the programming language you choose to learn, the basic concepts of programming are similar across languages. Some of these concepts include:

Variable Declaration
Basic Syntax
Data Type and Structures
Flow Control Structures (Conditionals and loops)
Functional Programming
Object-Oriented Programming
Debugging
IDEs and Coding Environments

In the next section of this shot, you will be given a brief introduction to these concepts.

Variable declaration

Variables are containers for storing data values, a memory location for a data type. Variables are created using a declaration or keyword that varies across languages.

Variable names are usually alphanumeric, that is, they contain a-z and 0-9. They can also include special characters like underscore or the dollar sign.

Variables can hold values of any data type supported by the programming language. This value may change during program execution.

Basic syntax

Every programming language has its syntax, and you must learn the fundamental syntax of the language you are learning.

Syntax refers to the set of rules that define the structure of a language. It is almost impossible to read or understand a programming language without its syntax.

For example, let us declare a variable named greet and assign the value "Hello World" to it:

In C++

 int greet
 string greet;
 greet = "Hello World";
 cout << greet;

In JavaScript

let greet = "Hello World";

In Java

String greet = "Hello World";

In Python

greet = "Hello World";

Data types and structures.

Data types refer to the classification of data. The most common data types include:

String
Boolean (true or false)
Numbers, which includes integers (whole numbers from 1) and floating-point numbers (decimal-base)
Characters (includes single alphabets or numbers)
Arrays (a collection of data, usually of the same data type)

A Data Structure is a collection of data values. These structures include operations that can be applied to that data.
Data structures are important in computer programming for organizing, managing, and storing data quickly and efficiently.

Some common types of data structures include:

Stacks
Heaps
Trees
Linked lists
Queues
Arrays
Tables
Graphs

Flow control structures

Flow Control Structures are the fundamental components of computer programs. They are commands that allow a program to "decide" to take one direction or another.

There are three basic types of control structures: sequential, selection, and iteration.

Sequential

The most basic control flow is sequential control flow. It involves the execution of code statements one after the other. A real-world example is following a cooking recipe.

Selection (conditionals)

The basic premise of selection flow control is, the computer decides what action to perform based on the result of a test or condition equalling true or false.

Iteration (Loops).

A loop is a programming structure that allows a statement or block of code to be #key# run repeatedly: iterate #key# until a specified condition is no longer true (will return Boolean, true or false). It is one of the most powerful and fundamental programming concepts.

Functional programming

Functions are containers that take in a set of inputs and return an output. It is not required for a function to return a value. Pure functions will always give the same result for the same set of inputs.

Functional Programming is a straightforward method of building software that involves using pure functions. This method eliminates the occurrence of data mutation or side effects.

Object-oriented programming

Object-Oriented Programming (OOP)is a programming concept that revolves around 'objects' and 'methods'.

There are four principles of OOP:

Inheritance
Polymorphism
Abstraction
Encapsulation

Debugging

Debugging is a crucial skill. It involves detecting and removing existing and potential errors, defects, or 'loopholes' in one's code.

IDEs and Coding Environments

IDE stands for Integrated Development Environment -- they are applications programmers use to write code and organize text groups. It increases a programmer's efficiency and productivity, and has added features like code completion, code compilation, debugging, syntax highlighting, etc.

Some common examples of IDE's are:

Visual Studio code
IntelliJ IDEA
NetBeans
Eclipse

💡 Always remember to write clean and readable code.

Cover Photo by Pankaj Patel on Unsplash

How to align-right in Bootstrap 4

Daphnie Ozioma — Sun, 02 May 2021 14:40:28 +0000

Bootstrap is a CSS framework used to design and customize responsive, mobile-first sites.

In Bootstrap 4, aligning elements to the right can be achieved using any of the following classes:

Adding `float-right` class

The .float-right class in Bootstrap uses the CSS float property to place an element on the right. Note that the Bootstrap 4 container is a Flexbox that can prevent the float property from working.



 <p class="float-right">This text is on the right</p>

Using justify-content-end class

The .justify-content-end class is used on Flexbox containers to align all items on the main axis to the right. Always remember that the container using this class must have its display property set to flex. This is the .d-flex class in Bootstrap 4.



<div class="justify-content-end">I am using justify-content-end</div>

Adding an `align-items-right` class

The align-items-end class is used on Flexbox containers to align all items along its cross axis (i.e., vertically) to the right. The d-flex class is required here, and the flex direction of the parent container should be set to column.



<div class="align-items-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Using `.align-self-end` class

.align-self-end is used to align a single item in a Flexbox to the right.



<div class="d-flex">
  <div>Item 1</div>
  <div class="align-self-end">Item 2</div>
  <div>Item 3</div>
</div>

Using `text-right` class

.text-right aligns text to the right on all viewport sizes. This is mostly used on inline elements.



<p class="text-right">This text is aligned to the right.</p>

Adding `ml-auto` class

The ml-auto class is mostly used on columns, navigation bars, and a few other Flexbox children.

Implementation

The result of applying the classes mentioned above is shown below:



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title></title>
</head>

<body>
  <div class="container">
    <h1>Bootstrap 4 Align Right</h1>
    <hr />
    <div>
      <p>Note that the <code>d-flex</code> class indicates <strong>display:flex</strong>, while the
        <code>flex-row</code> classes sets the flex-direction along its main axis while <code>flex-column</code>
        sets the flex-direction along its cross-axis.
      </p>
      <p>The <code>btn</code> class applies Bootstrap's default button looks and behaviour to an element.
        <br>
        The <code>p-x</code> (where <strong>x</strong> represents a number) class adds padding when applied.</p>
    </div>
    <hr/>
    <div class="p-2">
      <p class="btn btn-outline-primary float-start">Float left</p>
      <p class="btn btn-outline-primary float-right">Float right</p>
      <br />
    </div>
    <hr/>
    <div class="d-flex flex-row justify-content-end p-1">
      <p>I am using justify-content-end class</p>
    </div>
    <hr/>

    <h3> Align Items End</h3>
    <div class="d-flex flex-column align-items-end">
      <p>item 1</p>
      <p>Item 2</p>
    </div>
    <hr/>

    <div class="d-flex flex-column">
      <h3> Align Self End </h3>
      <div>Item 1</div>
      <div class="align-self-end">Item 2</div>
      <div>Item 3</div>
    </div>
    <hr/>
    <div class="d-flex">
      <p class="btn btn-outline-primary ml-auto">ml.auto</p>
    </div>
    <hr/>
    <p class="text-right">This text is aligned to the right.</p>
  </div>
</body>

</html>

How to apply padding in Bootstrap 4

Daphnie Ozioma — Sat, 01 May 2021 18:22:11 +0000

Bootstrap includes a wide range of responsive utility classes to modify an element’s appearance, including padding and margin classes.

In Bootstrap 4, padding utility classes use the following format:

For extra small devices

{property}{sides}-{size}

For other viewports

{property}{sides}-{breakpoint}-{size}.

Where property is p for padding and breakpoint can be any of sm (small), md(medium), lg(large), or xl(extra large).

The size value can be set between the range 0 - 5, where 0 indicates no padding and 5 indicates 3rem in the default Sass map.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Bootstrap Padding Example</title>
</head>
<body>
    <h3 class="p-3">Example of containers with padding on all sides.</h3>
    <div class="text-white">
        <p class="bg-primary p-1">p-1</p>
        <p class="bg-secondary p-2">p-2</p>
        <p class="bg-danger p-3">p-3</p>
        <p class="bg-info p-4">p-4</p>
        <p class="bg-success p-5">p-5</p>
        <p class="bg-danger p-0">No padding p-0</p>        
    </div> 
</body>
</html>

The sides can be any of the following;

t - sets the padding-top property.

<p class=" pt-3">Padding Top</p>

b- sets the padding-bottom property

 <p class="pb-3">Padding bottom</p>

l - sets the padding-left property

 <p class="pl-3">Padding left</p>

r- sets the padding-right property

<p class="pr-3">Padding Right</p>

x - sets the padding horizontal across a container, that is both padding-left and padding-right

<p class="px-3">Padding Left and Right only</p>

y - sets padding vertically across a container, that is both padding-top and padding-bottom

<p class="py-3">Padding top and bottom only</p>

Implementation

The result of applying the classes mentioned above is shown below:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h3 class="p-3">Containers with padding on specific sides</h3>
    <div class="text-white">
        <p class="bg-primary pt-3">Padding top</p>
        <p class="bg-danger pb-3">Padding bottom</p>
        <p class="bg-primary pl-3">Padding left</p>
        <p class="bg-info pr-3">Padding right</p>
       <p class="bg-success px-3">Padding Left and Right only</p>
       <p class="bg-primary py-3">Padding top and bottom only</p>
    </div>

</body>
</html>

This article was originally published for Edpresso.

DEV Community: Daphnie Ozioma

What are the basic fundamental concepts of programming?

Variable declaration

Basic syntax

In C++

In JavaScript

In Java

In Python

Data types and structures.

Flow control structures

Sequential

Selection (conditionals)

Iteration (Loops).

Functional programming

Object-oriented programming

Debugging

IDEs and Coding Environments

How to align-right in Bootstrap 4

Adding float-right class

Using justify-content-end class

Adding an align-items-right class

Using .align-self-end class

Using text-right class

Adding ml-auto class

Implementation

How to apply padding in Bootstrap 4

For extra small devices

For other viewports

Implementation

Adding `float-right` class

Adding an `align-items-right` class

Using `.align-self-end` class

Using `text-right` class

Adding `ml-auto` class