DEV Community: Fahad Khan

HTML Layout System Importance

Fahad Khan — Thu, 05 Nov 2020 19:23:00 +0000

You will learn about

1.Why layout system is important?

Content Flow
Content Relationship
Real World examples

Why layout system is important?

HTML is the only way to display the content on web page. No matter how you are displaying the content on web totally it's up to you but the architecture behind it's construction must take the attention of browser while rendering HTML markup. However, CSS takes the job for the styling & positioning the content but not markup relation of HTML content which helps in SEO. Are you getting confuse?

In Simple HTML tags have not only job of displaying your content on web page but also making relationship content to content.

Look at code HTML code below

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

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML layout system</title>

</head>

<body>

    <header>
        <h1>Main Heading of my site & SEO</h1>
    </header>

    <main>

        <article>
            <header>
                <h1>Heading of my article!</h1>
            </header>

            <!-- *** Section-1 *** -->
            <section>
                <img src="abc.abc" alt="abc">
                <blockquote>There was a saying who says!</blockquote>
                <cite>Mr. Unknown</cite>
            </section>

            <!-- *** Section-2 *** -->
            <section>
                <h2>Lorem ipsum dolor sit amet consectetur.</h2>
                <p>Lorem ipsum dolordelectus quideme.</p>
            </section>

        </article>

    </main>

    <footer>

        <h5>Any query?</h5>
        <p>Phone: 0123832</p>
        <address>Hyderabad, Pakistan</address>

    </footer>
</body>
</html>

If you have noticed on HTML document flow, you will get two important things which are

1. Content Flow

2. Content Relationship

What do you mean by these two terms?

While developing a website many things should be in mind and above two are one of them.

1. Content Flow

Let's think it by terminology of content (content is the information and experiences that are directed toward an end-user or audience) & Flow (can have many things which relate to each other for single outcome)

Now think in development perspective,

content flow means having several things work together for more readability for users as well for the machines for SEO.

Now, see the example of content flow in HTML

<!DOCTYPE html>
<html>

  <head>
    <meta>
    <meta>
    <title></title>
  </head>

  <body>

    <header>
      <img / alt="logo">
      <nav></nav>
    </header>

    <main>

        <article>
          <header></header>
          <section></section>
          <footer></footer>
        </article>

        <aside>
          <section></section>
        </aside>

    </main>

    <footer>
      <h1> <small></small> </h1>
      <address></address>
    </footer>

  </body>

</html>

This is the actual content flow of HTML for user & as well for machines (browsers).

from !DOCTYPE to </html> whole is content flow.
How? !DOCTYPE tells the machine (browser) that this document is HTML5 supported document so render it accordingly.

Actually, flow tells the browser & the user an understanding manner that how document content is described.
More simple, a college-level essay can have built points & explaining them accordingly. this is the actual flow of documents.

Now come to

2. Content Relationship

Once you understand the Content flow then Content Relationship will be pretty easy for you!

Basically, it tells the browsers & the user about the relationship between a document and its content. How?

eg.
Assume we have to write/represent the content about Pakistan country in written form, how you will organize this content about Pakistan?
In a professional manner, you must have to tell something in an organized way. like we have organized an easy with main and built points.

Essay title

#Pakitan

Pakistan's geography
- routes
- weather
- population
- culture etc
Pakistan's Politics
- Government
- Foriegn Policy
- Oppositon
Pakistan's Economy
- GDP growth rate
- Libilites
- Import
- Expot

So, What are these all?
This is the actual relationship between document and their content. However, point 1, 2, 3 are document and content same time and these numeric points are content of main topic which is Pakistan & built points which are represented by "*" these are the content of numeric points.

Real world examples:

Look at the screenshot, inside these boxes, we have each content of each document which helped the machine to search it out for us and now we are taking help of these content to reach out our target.

You can see that these all content relates to the provided document named Pakistan and search result telling more about Pakistan which relates to it like geography, politics, government etc. Now you know how HTML documents & its content relates to each other.

Did you think from where this content & document have came?
lets pick one site

just focus on content that tells us about the website.
Now we are going to open this site and after website looks like this

This is the interface of the website. which tells the same thing before we have seen on search result.

now right-click on this site and go to view page source

then page source will look like this

now see the inside highlighted meta tag this is the actual content which relates to its document and this is telling to the machine that whenever the client (user) search if it is according to him then give him into the results.

Did you notice one thing more?

Now you have practical knowledge from where things are coming.

finally an overview of this article,

How layout system works in the manner of relationship between document and content by semantics tags which are introduced in HTML5
HMTL tags can help to construct the logical and hierarchy structure
How semantic tags making relationships between document and content.
layout based on semantic tags and good for SEO

In this article, all things are not covered about HTML Layout system but now you have massive knowledge about how browsers & HTML work together as a team for user.

This is the importance of HTML layout system!

Note: CSS layout system is another thing which only represents the physical layout but not for logical layout of HTML

For more details,
Semantic tag list and their roles
follow me on Twitter I usually updates about Web-development
Fahad Khan

JS-HTML-DOM manipulation dynamically

Fahad Khan — Mon, 05 Oct 2020 22:49:12 +0000

This is the power of JavaScript that we can create HTML element by user input. the code of JS is written dynamically to take user input and then convert them into code . SImple but powerful.

Adjacent Selector in CSS

Fahad Khan — Mon, 05 Oct 2020 22:42:14 +0000

The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the first selector.

NOTE: This selector will only work on child elements.

simple but powerful

Reference vs Literal in JavaScript.

Fahad Khan — Wed, 09 Sep 2020 23:39:02 +0000

Before reading this article, you must have intermediate knowledge of JavaScript like a little bit OPP concepts, Arrays Objects & functions.

What you will learn?

Here we will see about,

Data types & a Variable
Primitive type vs reference type
Literal vs reference (Object, Function, Array)

1. Data types & a Variable

Data types

If you are familiar with programming languages like, C C# C++ Java etc. You have noticed that every programming languages have their own data types and declaration of variables & same case with JavaScript. But if you search about data types of Javascript you will find varieties of answers about it, some resources will say there are 8 data types and some will say 6 and so on. But don't be get confused there are 6 data types in JavaScript in general.

Number > integer, BigInt, floats etc.
String > Array of characters i.e words
Boolean > True/false
Null > no value (technically null is a value)
undefined > not defined at declaration time
symbol > a unique value that is not equal to another value

You Must have to know, these are the types of data or forms of data in other words. The above 6 types can be modified in more detail like in sub-categories. As JavaScript is a loosely and dynamic type language which means there is no force to write the form of data eg. int string boolean you just simply tells to the computer about declaring of data not the form of the data.
eg.

We just declare our variables by not telling the machine what type of our declared data. It is the JavaScript job to find the type of data. For assurance, we can ask from JavaScriptthat what type of data we have declared by typeof keyword/operator. let's break here about types of data because this is not our main topic.

A Variable

In the above visual piece of code, we have covered the variable also. Furthermore, a variable is the part of the memory for storing some kind of data. eg. let name = 'Hawking'; now variable name has space in memory containing data Hawking

2. Primitive type vs reference type

Whatever we saw above Data Types & a Variable these were primitive type of data which means whenever memory stores, this data will save an unordered way (where ever memory sees space put there) but in reference case memory store whole data in sequence order (with memory reference) you know why? because reference type of variables are Array Function and an Object. So, these types store in memory with sequence and generate reference (address) in the memory cell. This is the fundamental difference between primitive and reference data types.
In other words, reference type means the two reference types are objects and arrays (technically one, since arrays are objects). When you create an object, that value is not directly assigned to the variable. Instead, a reference to that value is what gets set. All that variable knows about is the location of the object in memory, not the object itself.
Now see how primitive and reference works on memory side.

3. Literal vs reference

(Object, Function, Array)
somehow both literal vs reference are the same thing but literal is a way to make a prototype of your data in an object, function, array form, and reference form has already designed a prototype of and can be accessible with new keyword.
eg.

both codes have the same work but different in structural nature during declaration. In this case, I just create reference object but you can make reference Function and Array also by writting new Function() new Array()
That's all about reference vs literal. If you have any query you can ask me at any time.

CSS variables & their features

Fahad Khan — Fri, 04 Sep 2020 15:47:24 +0000

CSS is adopting many features by the passage of time. Here, we will see that what CSS Variable is & it's benefit of usage. If you're familiar with computer programming background you have noticed about work & need of variables eg. var = 10;

What is variable?

A variable is kind of space we occupy in memory while declaring it.

Why we use Variable?

If you want to do something like plus ➕ two things or apply any mathematical operation eg. var a=10; var b=10; c=a+b; now, variable c has value of a & b. which is equal to c=20
don't worry! every language has its own syntax for declaring variable but I have used here javaScript syntax.
Let's focus on CSS Variable,

What is CSS Variable?

CSS Variable is not rocket science. It works the same as we use other programming language variables but we can't apply any mathematical operation like + - * /on CSS variable. we just use to take a space in memory by declaring any CSS property as memory address & property's value as a memory address value. that's it.

Why we use CSS Variable?

To understand this question, first we have to see visual answer.

We can see I have declared my CSS variable in :root because it will apply to all root HTML which means whole HTML document more simple :root is the parent element of the HTML page and inside the root, you can see more about parent and child elements in HTML-DOM in my another article HTML-DOM manipulation, I have declared CSS variable & now it will apply to all it's children. You can also declare CSS variable in another parent/location like,

Here we have declared our CSS variable in my-container & it is parent which means my-container has child elements that's why it is parent. see in picture below,

Above, my-container has its own element so if we declare CSS variable in my-container it will work on only its child element which are,  & <h4> but it will not work on body  I'm Child of body and my ancestor is root of HTML because this  is not child of my-container. For applying CSS variable body  element, we must target its parent (body OR root)
eg. :root{--my-variable: #ddd} here #ddd is the code of a color.

Syntax to declare CSS varible

Syntax is not very difficult just you have to remember just two things

-- it is part of declaring CSS variable eg. (--xyz: abc)
var() while using it. now see some CSS variable examples You have noticed that I have only changed the value eg. 18px of property font-size.

Bullet Points:

While declaring CSS Variables we just set the value eg. 18px , #0001, "Times New Roman", Georgia, Serif; but the property name will remain same while using it.
Here background-color: var(--my-background-color); background-color property name of CSS will ramain as it as but it's value now become dynamic var(--my-background-color); instead of #0001.

Benefit of Using CSS Variable

Using CSS Variables we made our code dynamic.
Let's suppose you have written HTML & CSS with thousands of lines and after all, you want to change your CSS code eg. all  & <h1> color & font-size then What you will do?
definitely, you have to change all lines where you have declared CSS property value & this become a time-consuming process. To counter these problem CSS Variables were introduced for changing your property's value just in seconds by changing only 1 value of the property. Now see the real-world example,

Do you notice that --my-p-color is applied on all  elements which are children of <body> tag & --my-font-size just applied to its child which is I'm Child of my-container & my ancestor is body beasuce --my-font-size is declared in .my-containerthat's why it works on only its child element. That's all about CSS Varibles. Hope now you are familiar with CSS Varibles.

HTML DOM manipulation by JavaScript. . .

Fahad Khan — Thu, 03 Sep 2020 23:04:43 +0000

In Web Development career, HTML, CSS & JavaScript are the core subjects. Without these technologies, We can't develop web content. Before knowing about HTML DOM, we must have intermediate
knowledge about HTML & CSS, we must know how HTML works & what we can do with it & also having knowledge of HTML Elements
& Attributes, list is also given below.
On #CSS side, we must have knowledge about #CSS Selectors like,

These #CSS selectors are following the HTML-DOM standard.
Let's move to the main point that what exactly HTML DOM is?
basically DOM stands for Document Object Model you can see the picture below that how HTML-DOM looks like.

OR

Don't worry HTML-DOM is not rocket science it is just a simple way to interact (exchange any kind of data) to HTML page & nothing more! Note: HTML-DOM can be manipulated (insert, delete, update) with any other programming languages too like Java, C# etc. So, now we knew that HTML-DOM is not part of JavaScript language but HTML. In the real-world, we mostly use JavaScript for it because JavaScript has advanced features for developing web content. Actually JavaScript is specially made up of web development. But it is not true that we can only programme web page by JS for short. Well known company Sony has many desktop software products which are written in JS language. Don't underestimate the power of JS.
So, HTML has defined their own Methods & their properties to interact with HTML-DOM beacuese HTML-DOM is the part of HTML, we took one HTML-DOM method which is document.getElementById() & we also took property innerHTML

Actually here we manipulate the HTML element  with attribute id & its value p-tag & value is the property of id attrubute. Now, see the reslut of same code but on browser side.

If you fully understand the HTML-DOM manipulation you will be able to understand the hierarchy of HTML page & you can easily play with HTML elements in JavaScript & CSS. Furthermore, HTML-DOM is a way to play with elements according to your imagination. In this article, we have just discussed about HTM-DOM Manipulation only we didn't study all the methods and properties. You can study in-depth about HTML-DOM.
https://www.w3schools.com/js/js_htmldom.asp