DEV Community: rashidyaqoob

CSS TRANSITION PROPERTY

rashidyaqoob — Sat, 11 Jul 2020 06:03:56 +0000

Hey, folks.
Today we will be learning the important property in CSS called TRANSITION property.
Transition means change of state. In CSS we have properties like :hover,:focus,:active etc . Instead of changing instantly, we have some handful transition properties, So let's see how they work.

1.Transition-duration:This property specifies how many secs or millisecs a transition should take to complete.

div{
    transition-duration: 1s;
  }

The time you can specify in secs(s) ormillisecs(ms). For good practice we should kept it in a range of 250ms-500ms.

2.Transition-property: This specifies what actually you want to transition.

 div{
     background-color:green;
     transition-property: background;
    }

 div:hover{
    background-color:blue;
    }

Here, if you see, we are telling CSS that we wanna make transition to background. Now, when we hover on the div the background-color gets transition and hence changes its color.
Now, if we have two properties which we want to transition say background-color and rotate, we can write it like this.

 div{
      background-color:green;
      transition-duration:500ms;
      transition-property:all;
    }

 div:hover{
       background-color:blue;
       transform: rotate(45deg);
           }

Here, instead of writing all properties which we want to make transition we can write simply transition-property:all;.

We have some other properties of transition which will be discussed in next posts.

CSS properties

rashidyaqoob — Sat, 21 Dec 2019 06:21:13 +0000

CSS properties are used to apply the desired effects on HTML elements.
These properties are named in such a way that you will understand what is going to happen on the HTML elements.
The properties like font-size, color indicate that the font-size and color changes according to the desired changes.Since CSS contains alot of properties that can be used for styling purposes and discussing all of them here is impossible. So, I am going to discuss here only those properties which are used mostly.
The properties that we will discuss here:

font-size

font-family

background-color

color

text-decoration

display

margin

padding

border

width

FONT-SIZE:

This property is used to change the font size of the HTML element.

p{
    font-size:30px;
}

FONT-FAMILY:

The font-family property is used to give styling of the text.It uses specification of values and these values are seperated by commas.The first value will be the desired value, but if that is not available, the browser can use another in the list.

font-family:Helvitiva, sans-serif;

Background-color:

This property is used to set the background color of the HTML element.

p{
    background-color:green;
}

COLOR:

This property is used to set the color of the text.

p{
    color:blue;
}

Text-decoration:

This property sets the decoration of the text and it takes values like underline,wavy,overline,inherit.

p{
    text-decoration : underline;

}

Display:

This property is used to change the way, HTML elemnet appears on the webpage.
It takes values like block, inline-block, inline etc.

span{
    display:block;
}

Margin:

This property is used to give a space between parent element and a child element.
p{
margin: 10px;
}
Actually, margin is a short form of margin-top,margin-right,margin-bottom and margin-left.

Padding:

This property is used to give space within an element.

p{
    padding:20px;
}

Border:

This property is used to give the border around an element.
It is a short form of border-width, border-style and border-color.

h2{
    border:2px dotted red;
}

Width:

This property describes how wide the element should be.

div{
    width:200px;
}

CSS Introduction

rashidyaqoob — Wed, 18 Dec 2019 06:07:54 +0000

CSS stands for cascading style sheets.It is used for styling the web pages like giving color to text, changing font-size, giving background-color,height, width etc.The simplified version of what happens when a browser loads a webpage is defined below:

The browser loads the HTML document.
It converts the HTML into DOM.
The browser then fetches the resources linked to the HTML document like images, videos amd linked CSS.JavaScript is handled a bit later.
The browder parses the fetched CSS and sorts the different rulus by their selector types into different "buckets" eg element,class etc.Based on the rules, the browser works out which rules shoulb be applied to which nodes of the DOM and attaches styles to them as required.
The tree is laid out in the structure it should appear in, after the rules have been applied.
The visual page is displayed on the screen ,this stage is called painting.

CSS syntax:

A CSS rule-set consists of a selector and a declaration block which define the properties to be applied to the nodes.

    p{
        font-size:30px;
        color:blue;
    }

Here, "p" is the selector which targets the paragraph node of the DOM and the properties inside it defines the styling of the node.

CSS selctors:

The CSS selectors have been classified into five main categories:

Simple selctors.
Combination Selectors.
Pseudo-class selectors.
Pseudo-elements selectors.
Attribute selectors.

HTML Attributes:

rashidyaqoob — Sun, 15 Dec 2019 05:49:13 +0000

HTML attributes provide additional information about he element.These are used in the opening tag of the element.
For example:

        < div class="one">
             //some text
        </div>

Here,class is the attribute which we can use for styling purposes or any other purpose.There are many other such attributes which we will define here....

Attribute href :

href attribute is used inside the anchor tags and it contains the link address.

<a href="https://www.example.com">

Attribute src:

src attribute is used to specify the image source of the image file.

<img src="Image.jpg">

Attribute alt:

alt attribute is used inside the image tag to specify what the image is about when image doesn`t get displayed.

<img src="Image.jpg" alt=" Good Image">

Attributes height and width:

height and width are used to specify height and width of the image.

<img src="Image.jpg" height="40px" width="40px">

Attribute lang:

lang attribute is used to specify the language of the html element or any other attribute.
It is very important attribute, since it is used for screen readers etc.

<html lang="en-us">

Attribute style:

style attribute is used for in-line styling purposes

< div style="color:yellowgreen;">

Attribute title:

title attribute is used to display the value inside it when the mouse hovers over that element.

< div title="This is the div element"> 
// some text
</div>

Attribute id:

The value of the id attribute is unique for the document.It can be used for any purpose like styling, getting the element in JS.

For styling purpose:

<p id="first"> Hello World </p>

In JS:

We ca get the element by using id:

const anyName=document.getElementById("first");

Attribute class:

class attribute can be used for various elements.

<p class="one">//some text</p>
<p class="one">//some another text</p>

Then, we can use class for styling purposes or for any other purpose.
We can also use it in JS

const anyName=document.getElementsByClassName("one");

Next up, we will see CSS......

HTML tags

rashidyaqoob — Sat, 14 Dec 2019 12:09:16 +0000

HTML tags continue....

HTML < i> TAG:-

< i> tag is used display the text in italic.

< i>This text is in italic < /i>.

HTML iframe element:-

iframe element is used to embed another document into existing HTML document.

< iframe src="https://www.example.com" > < /iframe>

HTML < input> TAG:

HTML input tag is used to allow the user to enter the data.
It is usually having attributes like type="", value="",name="" etc.
Here type means which form of text needs to be entered.

For example: type="text" , type="tel" , type="checkbox" , type="radio". These types are used inside the input tag according to their requirement.

< input type="text" value="random text" palceholder="">
< input type="checkbox" value="random text" palceholder="">
< input type="radio" value="random text" palceholder="">
< input type="button" value="random text" palceholder="">
< input type="submit" value="random text" palceholder="">

HTML < ins> TAG:

< ins> tag is used to indicate the inserted text.

Browsers usually underline the inserted text.

< ins>This is the inserted text < /ins>

HTML < del> TAG:

< del> tag is used to delete the any text within it.

Browsers usually strike a line through deleted text.

< del>This is the deleted text< /del>

HTML < kbd> TAG:

< kbd> tag is used to define keyboard input.

< kbd> A < /kbd>
< kbd> B < /kbd>
< kbd> C < /kbd>

HTML < label> TAG:

The < label > element is used to define the label for other tags like < input> < textarea> etc.

It usually gives the control over the text i.e., whenever we click on the text the control goes to the other tags like in this example:

< label>Name:
< input type="text" placeholder="enter name">
< /label>

whenever we click on the 'Name' label, the input field takes control.

HTML < main> TAG:

HTML main tag is used to specify the main content of the document. The content that goes inside the main tag should be unique to the document.
This tag should not be descendant of any other tag.

< main>
    <p> unique text goes heres</p>
< /main>

HTML < meta > TAG:

Meta tag is used to give metadata about the document.This tag is used to describe the page description, keywords, author. This tag is used inside the < head > tag.

< meta name="keywords" content="HTML,CSS,JavaScript">
< meta name="author" content="name of the author">

HTML < nav > TAG:

nav tag is used to define the set of links.
It is usually used for the links to major blocks of the document.

HTML < script> TAG:

script tag is used to define the client-side script(JavaScript).
It may be inpage script or a link to external script.

< script> Inpage script </script>
< script src="external-page-script.js"></script>

HTML < section> TAG:

section tag is used to define various sections of the document.

HTML < select> TAG:

Select tag is used to create drow-down list.
Inside < select> tag, we use < option> tag for listing options.

< select>
    <option value="option1">option-1</option>
    <option value="option2">option-2</option> 
    <option value="option3">option-3</option>
</select>

HTML < span > TAG:

This tag is used for inline-elements in a document.
It doesn`t provide any visible change itself.
Span element can be used either to style the text within it or it can be used in javascript.

    <p> This is the <span> span element</span></p>

HTML < style> TAG:

This tag is used for styling purposes either for inpage styling or external styling.

< style>Inpage style </style>

<style> href="external-page-styling.css"></style>

HTML < form> element:

form element is used to grab the input from the user.

< form>
            //form elements....
</form>

Form elements can checkboxes,text-fields,text-area etc.s

<form>
<input type="text" value="enter name">
<input type="checkbox">
<input type="submit">
</form>

These are the most used elements used in HTML.

Hope you will understand them quite nicely.
In the next post, I will discuss about HTML Attributes

Basic HTML Page

rashidyaqoob — Fri, 13 Dec 2019 05:59:30 +0000

The basic HTML page looks as shown below:

< !doctype html >

< html >

< head >

    < title>Basic web page < /title>

< /head>

< body>

< /body>
< /html>

< !doctype html> : This is used to tell the browser about the version of HTML used in the document.
< html> : This defines the root of html and wraps the code inside it.
< head> : This tag conatins tags like < style> tag, < title> tag, Inpage css etc.
< body> : This tag contains the actual data that is to be displayed on a web page.
Body tag contains other tags like < div> tag, < span> tag,< p> etc.These tags are used to form the structure of the web page.

HTML Heading Tags:
1. < h1> < /h1>
2. < h2> < /h2>
3. < h3> < /h3>
4. < h4> < /h4>
5. < h5> < /h5>
6. < h6> < /h6>
Every tag has opening tag and closing tag and within them is the text to be displayed.
These heading tags are used to define the headings of the web page according to their requirements.

Paragraph Tag:

Paragraph tag is denoted by < p>(opening tag) < /p>(closing tag) and within these tags we can write the text to be displayed.

HTML Images:

In order to insert images into the webpage we can use < img> tag.
< img src="source-of-the-image" alt="alternative-text">

List tags:

We have three types of lists:
1. Ordered List.
2. Unordered List.
3. Definition List.
ORDERED LIST:

The tags used for ordered list is < ol> < /ol> and inside these tags comes list item tag denoted by < li> </ li>.
```
< ol>

< li>One < /li>

< li>Two < /li>

< li>Three < /li>

< /ol>
```
UN-ORDERED LIST:

The tags used for ordered list is < ul> < /ul> and inside these tags comes list item tag denoted by < li> </ li>.
```
< ul>

< li>One < /li>

< li>Two < /li>

< li>Three < /li>

< /ul>
```
DEFINITION LIST:

Definition list is used to display description list.

Tags used are:
```
< dl> 

<dt>Item-1</dt>

<dd>Definition-1</dd>

<dt>Item-2</dt>

<dd>Definition-2</dd>

< /dl>
```
< dt> : It is used to define the item to be described.

< dd> : It is used to give description about the item.

Both of these tags are wrapped inside the < dl> tag.

We will continue to understand more tags in future posts.

Front End Development-Introduction

rashidyaqoob — Thu, 12 Dec 2019 05:47:10 +0000

Hello!!!! This is an introduction about front end web development.

Front end web development is also known as client-side development.The basic tools required for front end web development are:

HTML(hyper text markup language).
CSS(cascading stylesheets).
JavaScript.
Front end development is a practice of creating the structure of the web page using HTML, styling webpage using CSS and introducing interactive environment for good user experience using JavaScript.The tools and techniques used to create front end of the website keep changing so a front end developer need to keep himself updated.

HTML:- HTML stands for hypertext markup language.It is used to create the basic structure of the page.It is used to create links to different webpages and that`s why hypertext. It uses tags and elements which tell the browser how to display the content of the webpage.Browser does not display the tags but use them to render the content of the page. Inside these tags, we can use attributes which contain more information about an element.Some attributes are id,type,class etc.. We will be dealing all of them in future posts.

CSS:- CSS stand for cascading styling sheets.This is used to give styles to the webpage.CSS is used to present the HTML webpage in a good and attractive way.There are many properties in CSS which can be used for styling like margin, padding,color,background-color etc.

JavaScript:- JavaScript is client-side scripting language.The progarms written in JS are called scripts.It is mainly used for interaction purposes in a webpage.It is used for event handling intractions also.In JS there are data types like string,number,date, null,undefined,array,objects and symbols which we can use for various purposes.

First Post

rashidyaqoob — Thu, 07 Nov 2019 17:58:46 +0000

Hey there! It's my first post here. I am learning front end web development skills from last two months approximately.Please provide me some good material to learn...