DEV Community: obasekisemi

How I Created My Sign Up Page From Start To Finish

obasekisemi — Tue, 15 Mar 2022 20:58:30 +0000

Hey guys so today will be giving you step by step how I created my first sign up page.
Please note I created this using HTML and CSS you can check my previous posts to learn about Html and CSS.
Firstly I created the HTML file and CSS using Vscode and saved them to a folder
I started writing he Html code using Html element
<html> </html> where all the header and body will be inserted.
Then I created my header using the Header tag
<header></header>.
The <header> HTML element represents introductory content, typically a group of introductory or navigational aids.
Under the header I have my title tag <title> </title>which shows the which shows the tittle of the page
Next step was to link my CSS to my HTML. CSS can be linked to HTML in 3 ways i.e inline, internal and external . External method links css to html using this code <link rel="stylesheet" href="name of css file">. The picture below shows pratical example

<html>
    <head>
        <title>MY Login Page </title>
        <link rel="stylesheet" href="mainloginstyles.css">

    </head>

The next step was to create the body of the Html file with the body tag<body> </body>. And create a<div >tag which contains the login page and another div tag which contains the form. As a "pure" container, the<div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes.
The input tags and place holder tags are used. The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.

<body>
        <div class="login-page">
        <div class="form">
            <form class="register-form">
             <input type="text" placeholder=" user name"/>   
             <input type="text" placeholder="password"/>   
             <input type="text" placeholder="email id"/>   
            <button>Create</button>
            <p class="message">Forgot Password?</p>
            </form>


        </div>   
        </div>



    </body>
</html>

Then I also created a button using the <button></button> tag
After writing the HTML code I moved on to the css to style the different elements I created using HTML
The class selector was used as I was styling group of elements used the type selector for body of the page
The body was styled as follows


body{
    background-image: url(my\ new\ back);
    height: 20vh;
    background-size: cover ;
    background-position:center;
    background-repeat: no-repeat;

}

Image used was downloaded and saved to the html file folder , the height was specified to be 20vh, back ground size will be cover meaning the dimension of the image will cover the screen while back ground position is at the top
The next step I took was to style the login page element

.login-page{
    width: 360px;
    padding: 10% 0 0;
    margin: auto;
}

The CSS padding properties are used to generate space around an element's content, inside of any defined borders
The next step was to style the form page

.form{
    position: relative;
    z-index: 1;
    background: #ffffff;
    max-width: 360px;
    margin:0 auto 100px;
    padding: 45px;
    text-align: center;
}

This code describes the position of the form, background colour etc.
The z-index property determines the stack level of an HTML element. The “stack level” refers to the element's position on the Z axis (as opposed to the X axis or Y axis). A higher value means the element will be closer to the top of the stacking order.
The next step is styling button and form inputs. The font family, background color of the form was styled as shown below


.form input{
    font-family:'Courier New', Courier, monospace;
    outline: 1;
    background: rgba(239, 243, 243, 0.952);
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: medium;
}


.form button{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    outline: 0%;
    background: #4c56af;
    width: 100%;
    border: 0;
    padding: 15Px;
    color:#ffffff;
    font-size: medium;
    cursor: pointer;
}

The final page looks like this

INTRODUCTION TO CSS

obasekisemi — Sun, 06 Mar 2022 22:42:46 +0000

CSS (Cascading Style Sheets) is a style sheet language for expressing how a document created in a markup language like HTML looks.
CSS is a stylesheet language that allows you to separate presentation from content, including layout, colors, and fonts.
This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate.css file, reducing complexity and repetition in the structural content, and enable the.css file to be cached to improve page load speed between the pages that share the file and its formatting.
Selectors are used in CSS to target HTML components that we want to customize on our web pages. CSS selectors come in a range of shapes and sizes, providing for fine-grained precision when styling elements.

SELECTOR

The first portion of a CSS Rule is a CSS selector. It's a set of items and words that tells the browser which HTML elements should be chosen to have the CSS property values from the rule applied to them.
The subject of the selector refers to the element or items that are selected by the selector.

PSUEDO SELECTOR

Pseudo-classes are what they sound like.
A pseudo-class is used to define an element's particular status.
It can, for example, be used to:
When a user hovers their mouse over an element, it is styled.
Visited and unvisited links are styled differently.
When an element receives a lot of attention, it's time to style it.
Examples of Psuedo Classes include Dynamic Pseudo-classes i.e link, visited, hover, active and focus. Pseudo-classes for UI elements: enabled, disabled ,checked

Shorthand CSS properties

CSS shorthand properties allow you to set the values of numerous other CSS properties at the same time. You can save time and energy by writing more brief (and frequently more readable) style sheets by using a shorthand attribute.
Shorthand properties are defined in the CSS specification to gather together the definitions of similar properties that function on the same subject. For example, the CSS background property is a shortcut for background-color, background-image, background-repeat, and background-position. Similarly, the shorthand font may be used to specify the most common font-related characteristics, and the margin shorthand can be used to define the different margins around a box.
Edge cases are tricky.

Relative Path and Absolute Path

obasekisemi — Wed, 02 Mar 2022 11:39:27 +0000

Alternatively known as the pathname, the current path or path is the complete location or name of where a computer, file, device, or web page is located.
An absolute path is a path that describes the location of a file or folder regardless of the current working directory; in fact, it is relative to the root directory. It contains the complete location of a file or directory.
Absolute paths contain all the relevant information to find the resources indicated by an absolute URL. An absolute path must be used to refer to websites that are on a domain other than your home domain.
A relative path is a path that describes the location of a file or folder in relative to the current working directory. It can be best used to refer to websites that are located on the same domain, ideally on certain sections of websites in which the documents never change relationships to each other.
Unlike absolute paths, relative paths contain information that is only relative to the current document within the same website which avoids the need to provide a full absolute path. In simple words, relative path refers to a path relative to the location of the current webpage.

INTRODUCTION TO COLOUR CODE IN HTML AND CSS

obasekisemi — Wed, 16 Feb 2022 08:52:50 +0000

Color is the property possessed by an object of producing different sensations on the eye as a result of the way it reflects or emits light.

HTML Color Codes are a way to represent colors in a way that a computer can understand and display. Hex codes are the most often used color codes. Hex codes are three-byte hexadecimal integers (consisting of six variables) that contain a pair of characters that reflect the intensity of red, green, and blue in the color.

The sign "#" is followed by six alphabets or numerals in each Hex color code. The hexadecimal system is used to represent numbers. There are a total of 1,67,77,216 color combinations to choose from. The lowest color intensity is represented by the 00 value range, while the highest color intensity is represented by the FF value range.

Meaning of a Hex code:
• The 1st and 2nd variable in Hex color code represents the intensity of red color.
• The 3rd and 4th variable represents the intensity of green.
• The 5th and 6th variable represents the intensity of blue.
• By combining the intensities of red, green, and blue almost any color can be made.

Note

The white color is a mixture of the three primary colors at full intensity representing the Hex color code #FFFFFF.

The black color is a mixture of the three primary colors at the lowest intensity representing the color code #000000.

These color codes can be used to change the color of a web page's background, text, and tables. They can also use photo editing apps like Adobe Photoshop to reference specific hues.

MAJOR HEXADECIMAL COLOUR CODES

Some of the most frequent color names and codes are shown below. You can also use the color name with these colors. You could, for example, use "red" instead of "#FF0000" in HTML tags and CSS that employ color codes.

References

https://www.geeksforgeeks.org/html-hex-color-codes/
https://www.computerhope.com/htmcolor.htm#major-color-codes
https://www.educba.com

Introduction to Character Code

obasekisemi — Wed, 09 Feb 2022 01:27:01 +0000

CHARSET

A character set refers to the composite number of different characters that are being used and supported by a computer software and hardware. It consists of codes, bit pattern or natural numbers used in defining some particular character.

A character set may also be referred to as character map, charset or character code

A character set is created through a process known as encoding i.e. each character is assigned with a unique code or value.

ASCII characters set is one of the most popular character sets used by general computers to display text or numbers on computer screen

ASCII

ASCII is an abbreviation of American Standard Code For Information Interchange, a standard data-transmission code that is used by smaller and less-powerful computers to represent both textual data (letters, numbers, and punctuation marks) and noninput-device commands (control characters).
It is a character encoding that uses numeric codes to represent characters.

Standard ASCII

Standard ASCII can represent 128 characters. It uses 7 bits to represent each character since the first bit of the byte is always 0. For Example, a capital "T" is represented by 84, or 01010100 in binary. A lowercase "t" is represented by 116 or 01110100 in binary. For example, the Escape key (ESC) is 27 in ASCII and the Delete key (DEL) is 127.

UNICODE

Unicode is a universal character encoding standard that assigns a code to every character and symbol in every language in the world. Since no other encoding standard supports all languages, Unicode is the only encoding standard that ensures that you can retrieve or combine data using any combination of languages

REFERENCES

https://techterms.com/definition/ascii
https://www.techopedia.com/definition/941/character-set

Git, Github and its use for collaboration

obasekisemi — Fri, 04 Feb 2022 21:50:30 +0000

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers developing source code during software development. Its aims to achieve speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems).
Git was created by Linus Torvalds 17 years ago (2005) for development of the Linux kernel, with other kernel developers contributing to its initial development. Junio Hamano has been the core maintainer after Git was created.
Like other distributed version control systems, and unlike most client–server systems, every Git directory on every computer is a full-fledged repository with complete history and full version-tracking abilities, independent of network access or a central server.
Well just so you know a repository contains all of your project's files and each file's revision history. You can discuss and manage your project's work within the repository and this helps in collaboration when working with group of people.
Git has two data structures: a mutable index (also called stage or cache) that caches information about the working directory and the next revision to be committed; and an immutable, append-only object database.
Data structure is a data organization, management, and storage format that enables efficient access and modification

The object database contains five types of objects:

Blob (binary large object) is the content of a file.
Tree object is the equivalent of a directory.
Commit object links tree objects together into history
Tag object is a container that contains a reference to another object and can hold added meta-data related to another object.
Packfile object is a zlib version compressed of various other objects for compactness and ease of transport over network protocols.

Now we know that Git is a version control system, similar but better than the many alternatives available. So, what makes GitHub so special? Git is a command-line tool, but the center around which all things involving Git revolve is the hub—GitHub.com—where developers store their projects and network with likeminded people
Github is collaborative tool because user can create a repository (usually abbreviated to “repo”) is a location where all the files for a particular project are stored. Each project has its own repo, and you can access it with a unique URL.
If you find a project on GitHub that you’d like to contribute to, you can fork the repo, make the changes you’d like, and release the revised project as a new repo.
Forking is when you create a new project based off of another project that already exists. When you have forked a repository, made a great revision to the project, and want it to be recognized by the original developers—maybe even included in the official project/repository. You can do so by creating a pull request.
When multiple people collaborate on a project, it’s hard to keep track revisions—who changed what, when, and where those files are stored. GitHub takes care of this problem by keeping track of all the changes that have been pushed to the repository.
Each user on GitHub has their own profile that acts like a resume of sorts, showing your past work and contributions to other projects via pull requests. Project revisions can be discussed publicly, so a mass of experts can contribute knowledge and **collaborate **to advance a project forward.

REFERENCES

(https://docs.github.com/en/repositories/creating-and-managing-repositories/about-repositories)

(https://www.howtogeek.com/180167/htg-explains-what-is-github-and-what-do-geeks-use-it-for/)

(https://en.wikipedia.org/wiki/Git)

Introduction to Git Branching and Standup

obasekisemi — Fri, 04 Feb 2022 08:18:11 +0000

GIT BRANCHING

Git branching allows developers to create a copy of the original code, fix bugs on the original code or add a specific feature. This feature is what differentiates Git from all other source code management tools.
Git basically stores data as a series of snapshot
The main branch is created when you initialize the Git inn it command
What happens when you create a new branch? Well, it creates a new pointer for you to move around. Let’s say you want to create a new branch called testing. You do this with the git branch command:
git branch testing

Git knows the branch you are currently on by keeping by keeping a special pointer called HEAD.
In Git, it is a pointer to the local branch you’re currently on. Even you’re still on master. The git branch command only created a new branch — it didn’t switch to that branch.
To switch to an existing branch, you run the git checkout command. Let’s switch to the new testing branch:
$ git checkout testing
This moves HEAD to point to the testing branch.

STANDUP

In agile software development, a stand-up is a daily progress meeting, traditionally held within a development area. Business customers may attend to gathering information. Stand-ups are sometimes referred to as "daily scrums."
The term "standup" is derived from the way it is run all attendees must remain standing to keep it short and the team engaged.
Git standup is an open-source tool that helps you to track and monitor what you have been working on and what your team has been working on. It comes with various options that you can play with it. It aids collaboration and errors can be minimized with this method

References

(https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell)
(https://levelup.gitconnected.com/how-to-use-git-as-a-standup-tool)