<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Fahid Latheef A</title>
    <description>The latest articles on Forem by Fahid Latheef A (@fahidlatheef).</description>
    <link>https://forem.com/fahidlatheef</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F692958%2F8a1f66c0-9b70-46a5-a685-a1ce9ac3316d.png</url>
      <title>Forem: Fahid Latheef A</title>
      <link>https://forem.com/fahidlatheef</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/fahidlatheef"/>
    <language>en</language>
    <item>
      <title>Django Migrations</title>
      <dc:creator>Fahid Latheef A</dc:creator>
      <pubDate>Thu, 30 Sep 2021 10:50:01 +0000</pubDate>
      <link>https://forem.com/fahidlatheef/django-migrations-hhk</link>
      <guid>https://forem.com/fahidlatheef/django-migrations-hhk</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In the last episode, we talked about Django Architecture and &lt;code&gt;settings.py&lt;/code&gt; file. In this episode, we'll discuss Django Migrations.&lt;/p&gt;

&lt;h2&gt;
  
  
  Django Migrations
&lt;/h2&gt;

&lt;p&gt;Migrations are used to update the changes (to add a new field, change the name of a field, etc.) we made in the model to the database.&lt;/p&gt;

&lt;p&gt;Django creates migration files (a Python file) inside the migration folder for each model to create the table schema, and then each table is mapped to the respective migration files. Django also keeps track of the status of migration files whether they are successfully migrated to the database.&lt;/p&gt;

&lt;p&gt;To perform migration-related tasks, we can use these commands.&lt;/p&gt;

&lt;h3&gt;
  
  
  makemigrations
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python manage.py makemigrations
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is used to create migrations files in the migrations folder based on the changes we have done to the Model.&lt;/p&gt;

&lt;h3&gt;
  
  
  migrate
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python manage.py migrate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Based on the migrations file, this command will populate the database schema.&lt;/p&gt;

&lt;h3&gt;
  
  
  showmigrations
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python manage.py showmigrations
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This lists all the migrations and their status. If the change is updated in the database, the status will be shown as [X] followed by the migration name.&lt;br&gt;
For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;[X] 0001_initial&lt;br&gt;
[  ] 0002_auto_20210924_1740&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;
  
  
  sqlmigrate
&lt;/h3&gt;

&lt;p&gt;Usage:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python manage.py sqlmigrate &amp;lt;app_name&amp;gt; &amp;lt;migration_name&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is used to display the raw SQL query of the applied migrations. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python manage.py sqlmigrate &lt;span class="nb"&gt;users &lt;/span&gt;0009_delete_profile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;will give the raw SQL query like as below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;BEGIN&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;DROP&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="nv"&gt;"users_profile"&lt;/span&gt; &lt;span class="k"&gt;CASCADE&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;COMMIT&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Miscellaneous Commands and Uses
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;syncdb
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;python&lt;/span&gt; &lt;span class="n"&gt;manage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;py&lt;/span&gt; &lt;span class="n"&gt;migrate&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="n"&gt;run&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;syncdb&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command allows us for creating tables for apps without migrations.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Creating and applying migration for a particular app&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If we don't want to apply migrations totally, we can mention app-name to migrate specific apps.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python manage.py makemigrations blog
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python manage.py migrate blog
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.javatpoint.com/django-database-migrations"&gt;Django Javatpoint&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://docs.djangoproject.com/en/3.2/topics/migrations/"&gt;Django Official Documentation&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://realpython.com/digging-deeper-into-migrations/"&gt;Real Python&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>django</category>
      <category>python</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Introduction to Django Architecture and Django Settings</title>
      <dc:creator>Fahid Latheef A</dc:creator>
      <pubDate>Mon, 27 Sep 2021 12:31:47 +0000</pubDate>
      <link>https://forem.com/fahidlatheef/introduction-to-django-architecture-and-django-settings-36e6</link>
      <guid>https://forem.com/fahidlatheef/introduction-to-django-architecture-and-django-settings-36e6</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Django is a Python-based web framework that allows us to quickly create web applications. Django takes care of much of the hassle of web development, so we can focus on writing our app without needing to reinvent the wheel.&lt;/p&gt;

&lt;h2&gt;
  
  
  Django Architecture
&lt;/h2&gt;

&lt;p&gt;Django is based on  Model-View-Template (MVT) pattern. MVT consists of 3 components.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Model&lt;/strong&gt;: Model is responsible for maintaining the data structure of the project, through databases (PostgreSQL, MySQL etc.).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;View&lt;/strong&gt;: Views perform operations and return a response to the user. This response can be the HTML contents of a Web page, or a redirect, or a 404 error.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Templates&lt;/strong&gt;: Templates is used to generate dynamic HTML pages by using Django's template system. For example, with the use of jinja2, we will be able to display dynamic content on our web pages.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.javatpoint.com%2Fdjango%2Fimages%2Fdjango-mvt-based-control-flow.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.javatpoint.com%2Fdjango%2Fimages%2Fdjango-mvt-based-control-flow.png" alt="Django MVT"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Few Django Security Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  XSS Attack Protection
&lt;/h3&gt;

&lt;p&gt;XSS (&lt;strong&gt;Cross Site Scripting&lt;/strong&gt;) attacks allow a user to inject client-side scripts into the browsers of other users.&lt;/p&gt;

&lt;p&gt;Django does have protection against it by using a escape filter that converts potentially harmful HTML characters to unharmful ones.&lt;/p&gt;

&lt;h3&gt;
  
  
  CSRF Protection
&lt;/h3&gt;

&lt;p&gt;CSRF (&lt;strong&gt;Cross-site request forgery&lt;/strong&gt;) attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent.&lt;/p&gt;

&lt;p&gt;Django checks for a secret code in each POST request. This ensures that a malicious user cannot “replay” a form POST to our website and have another logged in user unknowingly submit that form.&lt;/p&gt;

&lt;h3&gt;
  
  
  SQL Injection Protection
&lt;/h3&gt;

&lt;p&gt;SQL injection is a type of attack where a malicious user can execute arbitrary SQL code on a database. This can result in records being deleted or data leakage.&lt;/p&gt;

&lt;p&gt;Django’s querysets are protected from SQL injection since their queries are constructed using query parameterization.&lt;/p&gt;

&lt;h2&gt;
  
  
  Django settings file
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;DISCLAIMER: The Django version I used to generate the project is 2.2. These settings may or may not exist in future/previous versions of Django.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When we create a new project in Django, a new folder with our &lt;code&gt;project name&lt;/code&gt; is created. The 3 files which are found in the folder are &lt;code&gt;settings.py&lt;/code&gt;, &lt;code&gt;urls.py&lt;/code&gt; and &lt;code&gt;wsgi.py&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;&lt;code&gt;urls.py&lt;/code&gt; configures our project urls, and &lt;code&gt;wsgi.py&lt;/code&gt; configures  Django’s primary deployment platform, &lt;a href="https://wsgi.readthedocs.io/en/latest/" rel="noopener noreferrer"&gt;WSGI&lt;/a&gt;, which is used to deploy our project live.&lt;/p&gt;

&lt;p&gt;The most important file among these three is the &lt;code&gt;settings.py&lt;/code&gt; file, which is used for configuring all settings of our project. Here is a detailed explanation of what each line in &lt;code&gt;settings.py&lt;/code&gt; does for our project.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;settings.py&lt;/code&gt; detailed explanation
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;BASE_DIR&lt;/strong&gt;: This refers to the absolute path in which &lt;code&gt;manage.py&lt;/code&gt; file exists. The manage.py is integral in creating new apps, running server, running django shell etc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SECRET_KEY&lt;/strong&gt;: It is used to provide cryptographic signing, and should be set to a unique, unpredictable value. It is used for saving cookies cache. If someone has the secret key, they will be able to modify cookies sent by the application.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DEBUG&lt;/strong&gt;: This is a toggle that turns on/off debug mode. When in debug mode, we can get detailed error pages, which helps in fixing our application quicker. Moreover, the modifications are dynamically changed when debug is on without the need of manually restarting the server after each change.&lt;/p&gt;

&lt;p&gt;Due to the detailed error messages which may expose a lot of important metadata, it is very dangerous to keep &lt;em&gt;DEBUG=True&lt;/em&gt; in production and is not advised to do so.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ALLOWED_HOSTS&lt;/strong&gt;: A list of strings representing the host/domain names that this Django site can serve.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;INSTALLED_APPS&lt;/strong&gt;: A list of strings designating all applications that are enabled in the Django Project. After creating new applications, we have to manually add the application to the Django Installed Apps. Moreover, other outside applications have to be added to the list, so that it works with our project (Eg: crispy_forms).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MIDDLEWARE&lt;/strong&gt;:  Middleware is a framework of hooks into Django’s request/response processing. It’s a light, low-level “plugin” system for globally altering Django’s input or output. For example, Security Middleware is used to maintain the security of the application.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ROOT_URLCONF&lt;/strong&gt;: This is a string representing the relative path to the &lt;code&gt;urls.py&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TEMPLATES&lt;/strong&gt;: Settings of Django Template Language used for our project.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;WSGI_APPLICATION&lt;/strong&gt;: Path to wsgi.py file.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DATABASES&lt;/strong&gt;: A dictionary containing the settings for all databases to be used with Django. By default, Django uses SQLite as the database engine.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AUTH_PASSWORD_VALIDATORS&lt;/strong&gt;: The list of validators that are used to check the strength of a user’s passwords. By default, no validation is performed and all passwords are accepted.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LANGUAGE_CODE&lt;/strong&gt;: Represents the name of a language. For example &lt;code&gt;'en-us'&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TIME_ZONE&lt;/strong&gt;: Represents the timezone. For example &lt;code&gt;'UTC'&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;USE_I18N&lt;/strong&gt;: A boolean that specifies whether Django’s translation system should be enabled. This provides a way to turn it off, for performance. If this is set to &lt;code&gt;False&lt;/code&gt;, Django will make some optimizations so as not to load the translation machinery.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;USE_L10N&lt;/strong&gt;: A boolean that specifies if localized formatting of data will be enabled by default or not. If this is set to &lt;code&gt;True&lt;/code&gt;, Django will display numbers and dates using the format of the current locale.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;USE_TZ&lt;/strong&gt;: A boolean that specifies if datetimes will be timezone-aware by default or not. If this is set to &lt;code&gt;True&lt;/code&gt;, Django will use timezone-aware datetimes internally.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;STATIC_ROOT&lt;/strong&gt;: The absolute path to the directory where &lt;code&gt;./manage.py collectstatic&lt;/code&gt; will collect static files for deployment. So we have to only serve this folder while deploying.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;STATIC_URL&lt;/strong&gt;: The &lt;code&gt;URL&lt;/code&gt; of which the static files in &lt;code&gt;STATIC_ROOT&lt;/code&gt; directory are served.&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.javatpoint.com/django" rel="noopener noreferrer"&gt;Django Javatpoint&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.djangoproject.com/en/2.2/" rel="noopener noreferrer"&gt;Django Official Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.djangoproject.com/" rel="noopener noreferrer"&gt;Django Project&lt;/a&gt;&lt;/p&gt;

</description>
      <category>django</category>
      <category>webdev</category>
      <category>python</category>
    </item>
    <item>
      <title>Databases: Important Theoretical Concepts</title>
      <dc:creator>Fahid Latheef A</dc:creator>
      <pubDate>Sat, 04 Sep 2021 11:13:25 +0000</pubDate>
      <link>https://forem.com/fahidlatheef/databases-important-theoretical-concepts-4nll</link>
      <guid>https://forem.com/fahidlatheef/databases-important-theoretical-concepts-4nll</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In the previous &lt;a href="https://dev.to/fahidlatheef/basic-sql-concepts-pn8"&gt;episode&lt;/a&gt;, I discussed the important SQL Statements/Keywords that are useful for day-to-day SQL use. In today's episode, I will try to explain few important Database Concepts that will boost our understanding even further.&lt;/p&gt;

&lt;h2&gt;
  
  
  Transactions
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Transaction&lt;/code&gt; is a fundamental concept of all database systems. It bundles multiple steps into a single, all-or-nothing operation. The intermediate states between the steps are not visible to other concurrent transactions, and if some failure occurs that prevents the transaction from completing, then none of the steps affects the database at all.&lt;/p&gt;

&lt;p&gt;Transactions can be further tuned by BEGIN, COMMIT and ROLLBACK operations.&lt;/p&gt;

&lt;h3&gt;
  
  
  BEGIN
&lt;/h3&gt;

&lt;p&gt;Each transaction is explicitly initiated using &lt;code&gt;BEGIN TRAN&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  COMMIT
&lt;/h3&gt;

&lt;p&gt;By using &lt;code&gt;COMMIT TRAN&lt;/code&gt;, a transaction is closed explicitly and modifications performed by the transaction are made permanent.&lt;/p&gt;

&lt;h3&gt;
  
  
  ROLLBACK
&lt;/h3&gt;

&lt;p&gt;By using &lt;code&gt;ROLLBACK TRAN&lt;/code&gt;, a transaction is explicitly closed and any modifications made by the transaction is discarded.&lt;/p&gt;

&lt;p&gt;Each Transaction should follow &lt;code&gt;ACID&lt;/code&gt; rules.&lt;/p&gt;

&lt;h2&gt;
  
  
  ACID
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;ACID&lt;/strong&gt; stands for &lt;strong&gt;Atomicity, Consistency, Isolation and Durability&lt;/strong&gt;. This describes a set of properties that apply to data transactions. For a reliable database, all these four attributes should be achieved.&lt;/p&gt;

&lt;h3&gt;
  
  
  Atomicity
&lt;/h3&gt;

&lt;p&gt;Atomicity is also known as the "All or nothing rule". It means that either the entire transaction takes place at once or doesn’t happen at all. There aren't any partial transactions. Hence it is known as the "All or nothing rule".&lt;/p&gt;

&lt;h3&gt;
  
  
  Consistency
&lt;/h3&gt;

&lt;p&gt;It says that the database should be consistent before and after the transaction (Data types, triggers, constraints, etc). It refers to the correctness of a database. &lt;/p&gt;

&lt;h3&gt;
  
  
  Isolation
&lt;/h3&gt;

&lt;p&gt;This property says that the transactions occur independently without interference. This property ensures that the execution of transactions concurrently will result in a state that is equivalent to a state achieved these were executed serially in some order.&lt;/p&gt;

&lt;h3&gt;
  
  
  Durability
&lt;/h3&gt;

&lt;p&gt;It says that once the transaction is saved or committed, it can’t be “lost”. Data won’t go missing after a power outage or system crash.&lt;/p&gt;

&lt;h2&gt;
  
  
  LOCKING MECHANISM
&lt;/h2&gt;

&lt;p&gt;Locking is designed to allow SQL Server to work seamlessly in a multi-user environment. Locking is the way that SQL Server manages transaction concurrency.&lt;/p&gt;

&lt;p&gt;While objects are locked, SQL Server will prevent other transactions from making any change of data stored in objects affected by the imposed lock. Once the lock is released by committing the changes or by rolling back changes to the initial state, other transactions will be allowed to make required data changes.&lt;/p&gt;

&lt;h2&gt;
  
  
  CAP THEOREM
&lt;/h2&gt;

&lt;p&gt;CAP Theorem (aka Eric Brewer Theorem) states that we cannot build a general data store that is continually available, sequentially consistent and tolerant to any partition failures. We can only achieve 2 features out of these 3.​ A combination of 2 must be chosen and this is usually the deciding factor in what technology is used.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Consistency&lt;/strong&gt; - All the servers in the system will have the same data so users will get the same copy regardless of which server answers their request.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Availability&lt;/strong&gt; - The system will always respond to a request (even if it's not the latest data or consistent across the system or just a message saying the system isn't working).&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Partition Tolerance&lt;/strong&gt; - The system continues to operate as a whole even if individual servers fail or can't be reached.
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fshishirkumarblog.files.wordpress.com%2F2019%2F05%2Fcap-theorem.png" alt="enter image description here"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  TRIGGERS
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Trigger:&lt;/strong&gt; A trigger is a stored procedure in a database that automatically invokes whenever a special event in the database occurs. For example, a trigger can be invoked when a row is inserted into a specified table or when certain table columns are being updated.&lt;/p&gt;

&lt;p&gt;Triggers can be run BEFORE or AFTER the triggering statement.&lt;/p&gt;

&lt;h2&gt;
  
  
  SQL NORMALIZATION
&lt;/h2&gt;

&lt;p&gt;It is the process of structuring a database, following a series of &lt;code&gt;Normal Forms&lt;/code&gt; to reduce data redundancy and improve data integrity.&lt;/p&gt;

&lt;p&gt;Without Normalization in SQL, we may face many issues such as&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Insertion anomaly&lt;/strong&gt;: It occurs when we cannot insert data to the table without the presence of another attribute&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Update anomaly&lt;/strong&gt;: It is a data inconsistency that results from data redundancy and a partial update of data.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Deletion Anomaly&lt;/strong&gt;: It occurs when certain attributes are lost because of the deletion of other attributes.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Some &lt;a href="https://www.edureka.co/blog/normalization-in-sql/" rel="noopener noreferrer"&gt;examples&lt;/a&gt; of Normal Forms are 1NF, 2NF, 3NF, BCNF, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  DATABASE ISOLATION LEVELS
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Database Isolation levels&lt;/strong&gt; control the degree of locking that occurs when selecting data.  This is to prevent reads and writes of temporary, aborted, or otherwise incorrect data written by concurrent transactions. For many database applications, the majority of database transactions can be constructed using isolation level priority rules, reducing the locking overhead for the system.&lt;/p&gt;

&lt;p&gt;These are the &lt;a href="https://en.wikipedia.org/wiki/Isolation_(database_systems)#Isolation_levels" rel="noopener noreferrer"&gt;priority rules&lt;/a&gt; for isolation levels.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Serializable&lt;/li&gt;
&lt;li&gt;Repeatable reads&lt;/li&gt;
&lt;li&gt;Read committed&lt;/li&gt;
&lt;li&gt;Read uncommitted&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.postgresql.org/docs/8.3/tutorial-transactions.html" rel="noopener noreferrer"&gt;Transactions&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.essentialsql.com/sql-acid-database-properties-explained/" rel="noopener noreferrer"&gt;ACID: Resource 1&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.geeksforgeeks.org/acid-properties-in-dbms/" rel="noopener noreferrer"&gt;ACID: Resource 2&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.sqlshack.com/locking-sql-server/" rel="noopener noreferrer"&gt;Locking Mechanism&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://shishirkumarblog.wordpress.com/technical/sql-vs-nosql-the-cap-theorem/" rel="noopener noreferrer"&gt;CAP Theorem&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.edureka.co/blog/normalization-in-sql/" rel="noopener noreferrer"&gt;Normalization&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://en.wikipedia.org/wiki/Isolation_(database_systems)#Isolation_levels" rel="noopener noreferrer"&gt;Database Isolation Levels&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.geeksforgeeks.org/sql-trigger-student-database/" rel="noopener noreferrer"&gt;Triggers&lt;/a&gt;&lt;/p&gt;

</description>
      <category>sql</category>
      <category>postgres</category>
      <category>database</category>
    </item>
    <item>
      <title>Web Basics Episode 2: Introduction to CSS</title>
      <dc:creator>Fahid Latheef A</dc:creator>
      <pubDate>Thu, 02 Sep 2021 06:04:50 +0000</pubDate>
      <link>https://forem.com/fahidlatheef/web-basics-episode-2-introduction-to-css-o98</link>
      <guid>https://forem.com/fahidlatheef/web-basics-episode-2-introduction-to-css-o98</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this series, I will try to discuss Web Basics Topics. In the first episode, the &lt;a href="https://dev.to/fahidlatheef/web-basics-episode-1-introduction-to-html-4cn7"&gt;HTML Basics&lt;/a&gt; were covered. In this episode, I will try to cover the Basic CSS Concepts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Table of Contents
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;What is CSS?&lt;/li&gt;
&lt;li&gt;CSS Example&lt;/li&gt;
&lt;li&gt;
CSS Selectors

&lt;ul&gt;
&lt;li&gt;CSS Selectors Examples&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Ways of adding CSS to our HTML file&lt;/li&gt;

&lt;li&gt;CSS Box Model&lt;/li&gt;

&lt;li&gt;

CSS &lt;code&gt;display&lt;/code&gt; property

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;inline&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;inline-block&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;block&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;CSS Position Property&lt;/li&gt;

&lt;li&gt;

CSS Structural Classes

&lt;ul&gt;
&lt;li&gt;Some Structural class examples&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;CSS Specificity&lt;/li&gt;

&lt;li&gt;CSS Media Query&lt;/li&gt;

&lt;li&gt;Conclusion&lt;/li&gt;

&lt;li&gt;References&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  What is CSS?
&lt;/h2&gt;

&lt;p&gt;CSS (Cascading Style Sheets)  is the language for describing the presentation of Web pages, including colours, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. Moreover, CSS saves a lot of work by allowing us to control the layout of multiple web pages all at once.&lt;/p&gt;

&lt;h2&gt;
  
  
  CSS Example
&lt;/h2&gt;

&lt;p&gt;This is an example of an CSS file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;body&lt;/span&gt;  &lt;span class="p"&gt;{&lt;/span&gt;  
&lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="no"&gt;lightblue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="n"&gt;verdana&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="p"&gt;}&lt;/span&gt;  

&lt;span class="nt"&gt;h1&lt;/span&gt;  &lt;span class="p"&gt;{&lt;/span&gt;  
&lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="no"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="p"&gt;}&lt;/span&gt;  
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we define the &lt;code&gt;backgound-color&lt;/code&gt; of the &lt;code&gt;body&lt;/code&gt; to light blue, with  a &lt;code&gt;font-family&lt;/code&gt; of verdana with 20px &lt;code&gt;font-size&lt;/code&gt;. Now for the &lt;code&gt;h1&lt;/code&gt; headers, we define the &lt;code&gt;color&lt;/code&gt; (text color) white and align the text centrally using &lt;code&gt;text-align&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  CSS Selectors
&lt;/h2&gt;

&lt;p&gt;A CSS selector helps us selecting the HTML element(s) we want to style.&lt;/p&gt;

&lt;p&gt;We can divide CSS selectors into five categories:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Simple selectors&lt;/strong&gt;: Select elements based on name, id, class&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Combinator selectors&lt;/strong&gt;: Select elements based on a specific relationship between them&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Pseudo-class selectors&lt;/strong&gt;: Select elements based on a certain state&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Pseudo-elements selectors&lt;/strong&gt;: Select and style a part of an element&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Attribute selectors&lt;/strong&gt;: Select elements based on an attribute or attribute value&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  CSS Selectors Examples
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;CSS Element Selector&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;p&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;  
&lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="no"&gt;red&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here all &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt; (paragraph) elements are styled.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;CSS ID Selector&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nf"&gt;#section-intro&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;  
&lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="no"&gt;red&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here HTML element with ID &lt;em&gt;section-intro&lt;/em&gt; is styled.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The CSS Class Selector&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.center&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;  
&lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="no"&gt;red&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here all HTML elements with class name &lt;em&gt;center&lt;/em&gt; is styled.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;The CSS Universal Selector&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For universally selecting all HTML elements on the page, the following code is used.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;  
&lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Ways of adding CSS to our HTML file
&lt;/h2&gt;

&lt;p&gt;There are three ways of inserting a style sheet:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  External CSS&lt;/li&gt;
&lt;li&gt;  Internal CSS&lt;/li&gt;
&lt;li&gt;  Inline CSS&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  CSS Box Model
&lt;/h2&gt;

&lt;p&gt;The CSS box model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.washington.edu%2Faccesscomputing%2Fwebd2%2Fstudent%2Funit3%2Fimages%2Fboxmodel.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.washington.edu%2Faccesscomputing%2Fwebd2%2Fstudent%2Funit3%2Fimages%2Fboxmodel.gif" alt="Box Model"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  CSS &lt;code&gt;display&lt;/code&gt; property
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;display&lt;/code&gt; property specifies the display behavior of an element.&lt;/p&gt;

&lt;p&gt;Usage:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.class-name&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;block&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;code&gt;inline&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Displays an element as an inline element. Any height and width properties will have no effect on it. Moreover, inline elements are forced to stay on the same line. Here are a few elements that have a default  &lt;code&gt;inline&lt;/code&gt;  property:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;span&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;a&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;img&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;inline-block&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Displays an element as an inline-level block container. You can set height and width values. It’s essentially the same thing as  &lt;code&gt;inline&lt;/code&gt;, except that we can set height and width values.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;block&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;The element &lt;code&gt;block&lt;/code&gt; starts on a new line and takes up the full width available. So that means block elements will occupy the entire width of its parent element.&lt;/p&gt;

&lt;p&gt;Here are a few elements that have a default  &lt;code&gt;block&lt;/code&gt;  property:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;div&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;h1&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;p&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;li&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;section&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  CSS Position Property
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;position&lt;/code&gt; property specifies the type of positioning method used for an element. For example, &lt;code&gt;static&lt;/code&gt;, &lt;code&gt;relative&lt;/code&gt; and &lt;code&gt;absolute&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;position: static;&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HTML elements are positioned static by default.&lt;/li&gt;
&lt;li&gt;Static positioned elements are not affected by the top, bottom, left, and right properties.&lt;/li&gt;
&lt;li&gt;An element with &lt;code&gt;position: static;&lt;/code&gt; is not positioned in any special way; it is always positioned according to the normal flow of the page.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;code&gt;position: relative;&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;An element with &lt;code&gt;position: relative;&lt;/code&gt; is positioned relative to its normal position.&lt;/li&gt;
&lt;li&gt;Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. &lt;/li&gt;
&lt;li&gt;Other content will not be adjusted to fit into any gap left by the element.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;code&gt;position: absolute;&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;An element with &lt;code&gt;position: absolute;&lt;/code&gt; is positioned relative to the nearest positioned ancestor.&lt;/li&gt;
&lt;li&gt;If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.&lt;/li&gt;
&lt;li&gt;Absolute positioned elements are removed from the normal flow, and can overlap elements.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  CSS Structural Classes
&lt;/h2&gt;

&lt;p&gt;Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements. We can select first-child element, last-child element, alternate elements present within the hierarchy of parent elements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Some Structural class examples
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Example&lt;/th&gt;
&lt;th&gt;Select(s)&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;:first-child&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The first child of its parent&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;:last-child&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The last child of its parent&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;:nth-child(2n+1)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Every odd child&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;:nth-child(2n)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Every even child&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;:nth-last-child(2n+1)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Every odd child element starting from the last element&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  CSS Specificity
&lt;/h2&gt;

&lt;p&gt;Sometimes, CSS rules conflict. For example, if multiple selectors target the same element in a document, the rules to be applied is determined by CSS specificity. In CSS, different selectors have varying weights. When two or more rules conflict on the same element, the more specific one applies.&lt;/p&gt;

&lt;p&gt;These are the Specificity priority of different selectors&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Inline CSS:&lt;/strong&gt; Inline CSS appears as style attributes in the opening tag of HTML elements. Since this CSS is closest to the HTML, it has the highest level of specificity.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;ID selectors:&lt;/strong&gt; An ID is unique to a page element and thus, very specific.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Class selectors, attribute selectors, and pseudo-class selectors:&lt;/strong&gt; These three selector types have equal specificity. If all three types are applied to the same HTML element, the one appearing latest in the style-sheet will apply and override the rest.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Type selectors&lt;/strong&gt;: These select all HTML elements that have a given node name and have the syntax &lt;strong&gt;element&lt;/strong&gt;. These are element names and pseudo-elements.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  CSS Media Query
&lt;/h2&gt;

&lt;p&gt;Media Query is very helpful in creating &lt;strong&gt;responsive web designs&lt;/strong&gt; which works well with all types of devices. It uses the &lt;code&gt;@media&lt;/code&gt; rule to include a block of CSS properties only if a certain condition is true.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="k"&gt;@media&lt;/span&gt; &lt;span class="n"&gt;only&lt;/span&gt; &lt;span class="n"&gt;screen&lt;/span&gt; &lt;span class="n"&gt;and&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;600px&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;  
&lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;  
&lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;lightblue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  
&lt;span class="p"&gt;}&lt;/span&gt;  
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above example, if the browser window is 600px or smaller, we set the &lt;code&gt;background-color&lt;/code&gt; to lightblue.&lt;/p&gt;

&lt;p&gt;While developing web pages, it is advised to create the &lt;strong&gt;mobile version first&lt;/strong&gt; before other screen sizes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;That concludes the Introduction to CSS topic.&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/css/" rel="noopener noreferrer"&gt;CSS Basics w3schools&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.washington.edu/accesscomputing/webd2/student/unit3/module4/lesson1.html" rel="noopener noreferrer"&gt;Box Model&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/" rel="noopener noreferrer"&gt;CSS display property&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.web4college.com/css/web4-css-structural-classes.php" rel="noopener noreferrer"&gt;Structural Classes&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://blog.hubspot.com/website/what-is-css-class" rel="noopener noreferrer"&gt;CSS Specificity&lt;/a&gt;&lt;/p&gt;

</description>
      <category>css</category>
      <category>html</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Web Basics Episode 1: Introduction to HTML</title>
      <dc:creator>Fahid Latheef A</dc:creator>
      <pubDate>Wed, 01 Sep 2021 11:43:58 +0000</pubDate>
      <link>https://forem.com/fahidlatheef/web-basics-episode-1-introduction-to-html-4cn7</link>
      <guid>https://forem.com/fahidlatheef/web-basics-episode-1-introduction-to-html-4cn7</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this series, I will try to discuss Web Basics Topics. In the first episode, the HTML Basics are covered.&lt;/p&gt;

&lt;h2&gt;
  
  
  Table of Contents
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;What is HTML?&lt;/li&gt;
&lt;li&gt;HTML Document structure&lt;/li&gt;
&lt;li&gt;
HTML Tags

&lt;ul&gt;
&lt;li&gt;Some Basic Tags&lt;/li&gt;
&lt;li&gt;Singleton Tags&lt;/li&gt;
&lt;li&gt;Important Singleton Tags&lt;/li&gt;
&lt;li&gt;Semantic and Unsemantic Tags&lt;/li&gt;
&lt;li&gt;Semantic Page Example&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

HTML Header Section

&lt;ul&gt;
&lt;li&gt;Difference between &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Navigation Section&lt;/li&gt;
&lt;li&gt;Title&lt;/li&gt;
&lt;li&gt;Favicon&lt;/li&gt;
&lt;li&gt;Charset&lt;/li&gt;
&lt;li&gt;UTF-8, ASCII and UNICODE&lt;/li&gt;
&lt;li&gt;Viewport&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

HTML Body section

&lt;ul&gt;
&lt;li&gt;Block Level tags&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; to &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Lists&lt;/li&gt;
&lt;li&gt;Page Divisions or Sections&lt;/li&gt;
&lt;li&gt;Inline Tags&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Conclusion&lt;/li&gt;

&lt;li&gt;References&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  What is HTML?
&lt;/h2&gt;

&lt;p&gt;HTML (Hyper Text Markup Language)  is the language for describing the structure of Web pages. HTML gives authors the means to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Publish online documents with headings, text, tables, lists, photos, etc.&lt;/li&gt;
&lt;li&gt;  Retrieve online information via hypertext links, at the click of a button.&lt;/li&gt;
&lt;li&gt;  Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.&lt;/li&gt;
&lt;li&gt;  Include spread-sheets, video clips, sound clips, and other applications directly in their documents.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  HTML Document structure
&lt;/h2&gt;

&lt;p&gt;This is a rough structure of an HTML document.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
        Document Header
    &lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
        Document Body
    &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  HTML Tags
&lt;/h2&gt;

&lt;p&gt;HTML is a markup language and makes use of various tags to format the content. Except few tags, most of the tags have their corresponding closing tags. For example, &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; has its closing tag &lt;code&gt;&amp;lt;\body&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Some Basic Tags
&lt;/h4&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Tag&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;!DOCTYPE...&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;This tag defines the document type and HTML version.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;This tag encloses the complete HTML document and comprises of document header and body.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;This tag represents the document's header.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;title&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;This tag is used inside the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; tag to mention the document title.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;This tag represents the document's body which keeps other HTML tags like &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;, etc.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;This tag represents the top level heading. The tags &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h3&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h3&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h4&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h5&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; also represents other sizes of headings in which &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; is the biggest and &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; is the smallest.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;This tag represents a paragraph.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Singleton Tags
&lt;/h3&gt;

&lt;p&gt;The singleton tags don't require a closing tag to be valid. These elements are usually ones that stand alone on the page.&lt;/p&gt;

&lt;h4&gt;
  
  
  Important Singleton Tags
&lt;/h4&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Tag&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;br&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A line break which is used in text content to create a single line break instead of a paragraph.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;hr&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A horizontal rule, which is a straight line on a page. These can be used to separate sections in a webpage.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Used to embed an image in an HTML page. Technically, this tag creates a holding space for the image whose path can be referenced through &lt;code&gt;src&lt;/code&gt; attribute.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;meta&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Meta tags are "information about content." They are found in the head of a document and used to convey page information to the browser. There are many different meta tags that you can use on a web-page.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A form element that is used to capture information from visitors.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Semantic and Unsemantic Tags
&lt;/h3&gt;

&lt;p&gt;Semantic tags describes its meaning to both the browser and the developer.&lt;br&gt;
Examples of  &lt;strong&gt;non-semantic&lt;/strong&gt;  elements:  &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;  and  &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;. These tells nothing about its content.&lt;br&gt;
Examples of  &lt;strong&gt;semantic&lt;/strong&gt;  elements:  &lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt;,  &lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;, and  &lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt; . These clearly defines its content.&lt;/p&gt;

&lt;h4&gt;
  
  
  Semantic Page Example
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.w3schools.com%2Fhtml%2Fimg_sem_elements.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.w3schools.com%2Fhtml%2Fimg_sem_elements.gif" alt="A semantic page example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  HTML Header Section
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Difference between &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt; element is a structural element that outlines the heading of a segment of a page. It falls within the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; element is not displayed on a page and is used to outline metadata, including the document title, and links to external files. It falls directly within the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element.&lt;/p&gt;

&lt;h3&gt;
  
  
  Navigation Section
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt; element identifies a section of major navigational links on a page. This allows us to link to other pages within the same website or to parts of the same web page&lt;/p&gt;

&lt;h3&gt;
  
  
  Title
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;title&amp;gt;&lt;/code&gt; is used to give titles to web-pages. It is shown in browser's title bar.&lt;/p&gt;

&lt;h3&gt;
  
  
  Favicon
&lt;/h3&gt;

&lt;p&gt;A favicon is a file containing one or more small icons, associated with a particular website or web page.&lt;br&gt;
Now &lt;code&gt;favicon.ico&lt;/code&gt; is used to display icon in our web-page (Typically can be seen close to the title in the title bar).&lt;/p&gt;

&lt;h3&gt;
  
  
  Charset
&lt;/h3&gt;

&lt;p&gt;A character set (charset) refers to the composite number of different characters that are being used and supported by the html document.&lt;br&gt;
To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the  &lt;code&gt;&amp;lt;meta&amp;gt;&lt;/code&gt;  tag.&lt;/p&gt;

&lt;h4&gt;
  
  
  UTF-8, ASCII and UNICODE
&lt;/h4&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;ASCII&lt;/th&gt;
&lt;th&gt;UNICODE&lt;/th&gt;
&lt;th&gt;UTF-8&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;ASCII defines 128 characters, which map to the numbers 0–127&lt;/td&gt;
&lt;td&gt;Unicode defines (less than) 2&lt;sup&gt;21&lt;/sup&gt; characters, which, similarly, map to numbers 0–2&lt;sup&gt;21&lt;/sup&gt;
&lt;/td&gt;
&lt;td&gt;UTF-8 is one possible encoding scheme of Unicode characters&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;ASCII is subset of UNICODE&lt;/td&gt;
&lt;td&gt;UNICODE is super set of ASCII&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;Invented to accommodate non-English characters&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Viewport
&lt;/h3&gt;

&lt;p&gt;The view-port is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.&lt;br&gt;
This is defined using &lt;code&gt;&amp;lt;meta&lt;/code&gt; tags in HTML&lt;/p&gt;

&lt;h2&gt;
  
  
  HTML Body section
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Block Level tags
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; to &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; to &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; tags are used for headings with &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; being the largest and &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; being the smallest.&lt;/p&gt;

&lt;h4&gt;
  
  
  Lists
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt; and  &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; are used to list items in a web-page.&lt;/p&gt;

&lt;p&gt;The list is started with either &lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt; and then &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; is used to list the elements.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;&lt;/strong&gt; aka unordered list&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;&lt;/strong&gt; aka ordered list&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Page Divisions or Sections
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; is a non-semantic tag used to divide page contents.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; tag is a semantic tag used to define sections in a document.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt; tag is a semantic tag used for header section in the document.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt; tag is a semantic tag used for footer contents in the document.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt; tag is a semantic tag used for navigation contents of the document.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt; is a semantic tag used to define contents that are unique to the document. It should not contain any content that repeats across documents such as sidebars, navigation links, copyright information, site logos, and search forms.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;aside&amp;gt;&lt;/code&gt; tag is a semantic tag that is used to set aside the content it is placed in from the section.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt; is used to specify independent, self-contained content.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; tag is used to draw graphics, on the fly, via scripting (usually JavaScript). It is transparent, and is only a container for graphics, you must use a script to actually draw the graphics.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt; tag is used to create an HTML form for user input.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;tag is used to create tables in the document.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Inline Tags
&lt;/h3&gt;

&lt;p&gt;An inline element does not start on a new line. An inline element only takes up as much width as necessary.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; is an inline container used to mark up a part of a text, or a part of a document.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; tag defines a label for several grouped elements, such as in drop-down, input-area etc.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt; tag is used to create input field where users can enter the data.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;b&amp;gt;&lt;/code&gt; tag is used to &lt;strong&gt;bold&lt;/strong&gt; the text.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;i&amp;gt;&lt;/code&gt; tag is used to make the text &lt;em&gt;italic&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag is used to embed image in the web-page.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt; tag creates a button create a clickable button in the web-page.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; tag is used to create links in the web-page.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;That concludes the HTML basics. In the next episode, I will cover the &lt;a href="https://dev.to/fahidlatheef/web-basics-episode-2-introduction-to-css-o98"&gt;Basics of CSS&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/html/" rel="noopener noreferrer"&gt;HTML Basics w3schools&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.tutorialspoint.com/html/html_tutorial.pdf" rel="noopener noreferrer"&gt;HTML Basics Tutorial Point pdf&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3.org/standards/webdesign/htmlcss.html" rel="noopener noreferrer"&gt;Web Design w3org&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.thoughtco.com/html-singleton-tags-3468620" rel="noopener noreferrer"&gt;HTML Singleton tags&lt;/a&gt;&lt;/p&gt;

</description>
      <category>html</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Basic SQL Concepts</title>
      <dc:creator>Fahid Latheef A</dc:creator>
      <pubDate>Wed, 25 Aug 2021 06:09:20 +0000</pubDate>
      <link>https://forem.com/fahidlatheef/basic-sql-concepts-pn8</link>
      <guid>https://forem.com/fahidlatheef/basic-sql-concepts-pn8</guid>
      <description>&lt;h2&gt;
  
  
  Pre-requisites
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Install PostgreSQL and psql-CLI to your system
&lt;/h3&gt;

&lt;p&gt;If you haven't installed PostgreSQL and psql-CLI in your system, follow the steps in this &lt;a href="https://www.digitalocean.com/community/tutorials/how-to-install-postgresql-on-ubuntu-20-04-quickstart" rel="noopener noreferrer"&gt;link&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Create a psql role
&lt;/h3&gt;

&lt;p&gt;I have created a role named &lt;code&gt;fahid&lt;/code&gt; in the psql. Follow the instructions in the same &lt;a href="https://www.digitalocean.com/community/tutorials/how-to-install-postgresql-on-ubuntu-20-04-quickstart" rel="noopener noreferrer"&gt;link&lt;/a&gt; to create a role (preferably a role with your computer-name).&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Access the Postgre prompt
&lt;/h3&gt;

&lt;p&gt;Use either of these commands to access Postgre Prompt. Replace &lt;code&gt;fahid&lt;/code&gt; with &lt;code&gt;your_username&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;psql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;OR&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;psql &lt;span class="nt"&gt;-U&lt;/span&gt; fahid
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Before we start, create a database &lt;code&gt;sample&lt;/code&gt; in the psql shell. &lt;/p&gt;

&lt;h3&gt;
  
  
  4. Create an empty database &lt;code&gt;sample&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;To create an empty database, run the following command in the postgre prompt. (Note: Do not miss the &lt;code&gt;;&lt;/code&gt;)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;CREATE&lt;/span&gt; &lt;span class="k"&gt;DATABASE&lt;/span&gt; &lt;span class="n"&gt;sample&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To confirm whether the database &lt;code&gt;sample&lt;/code&gt; is created, list the databases using the following command in the postgre shell.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="se"&gt;\l&lt;/span&gt;ist
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should be able to see the database &lt;code&gt;ipl&lt;/code&gt; in the list of databases with your username as the owner.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Connect to &lt;code&gt;sample&lt;/code&gt; database
&lt;/h3&gt;

&lt;p&gt;To connect to the database, run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="se"&gt;\c&lt;/span&gt; sample
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  6. Copy the contents to the database
&lt;/h3&gt;

&lt;p&gt;Make sure you download &lt;a href="https://gitlab.com/FahidLatheefA/sql_concepts/-/blob/main/sample.sql" rel="noopener noreferrer"&gt;&lt;code&gt;sample.sql&lt;/code&gt;&lt;/a&gt; to your computer.&lt;br&gt;
Now to copy/import the contents to the database, run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="se"&gt;\i&lt;/span&gt; /path/to/the/file/sample.sql

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  6. Display the tables in the database
&lt;/h3&gt;

&lt;p&gt;Run this to display the tables in the database.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="se"&gt;\d&lt;/span&gt;t
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will be able to see all available tables in the &lt;code&gt;sample&lt;/code&gt; database.&lt;/p&gt;

&lt;h2&gt;
  
  
  SELECT STATEMENT
&lt;/h2&gt;

&lt;p&gt;The most basic statement is SELECT statement. It allows us to &lt;strong&gt;retreive records&lt;/strong&gt; from the table.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;To retreive all the columns:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;To specifically select one or more columns:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;working_area&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  WHERE  CONDITION
&lt;/h3&gt;

&lt;p&gt;To have a condition in your SELECT statement, we can use WHERE condition.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'London'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We will get the following output.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; cust_code | cust_name | cust_city 
-----------+-----------+-----------
 C00013    | Holmes    | London
 C00024    | Cook      | London
 C00015    | Stuart    | London
 C00023    | Karl      | London
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  AND and OR operators
&lt;/h3&gt;

&lt;p&gt;We can add additional conditions and filter the table using &lt;code&gt;AND&lt;/code&gt; or &lt;code&gt;OR&lt;/code&gt; operators.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'London'&lt;/span&gt; &lt;span class="k"&gt;OR&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'New York'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Selecting Grade 1 customers in India&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;grade&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cust_country&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'India'&lt;/span&gt; &lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="n"&gt;grade&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ORDER BY
&lt;/h3&gt;

&lt;p&gt;To order the table by a specific column(s), we can use ORDER BY clause.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;payment_amt&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;payment_amt&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To arrange the result in descending order, we can use &lt;code&gt;DESC&lt;/code&gt;  keyword.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;payment_amt&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;payment_amt&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  DISTINCT
&lt;/h3&gt;

&lt;p&gt;To remove duplicates and select the distinct elements use DISTINCT keyword.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;DISTINCT&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  BETWEEN
&lt;/h3&gt;

&lt;p&gt;To select data within a range, we can use BETWEEN with AND.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;payment_amt&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;payment_amt&lt;/span&gt; &lt;span class="k"&gt;BETWEEN&lt;/span&gt; &lt;span class="mi"&gt;6000&lt;/span&gt; &lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="mi"&gt;8000&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  LIKE
&lt;/h3&gt;

&lt;p&gt;To match one or more characters, LIKE is used.&lt;br&gt;
&lt;code&gt;_&lt;/code&gt; is used to match exactly one character and &lt;code&gt;%&lt;/code&gt; is used to match zero or more characters.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Customers starting with the name 'Ra'&lt;br&gt;
&lt;/p&gt;


&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cust_city&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt; &lt;span class="k"&gt;LIKE&lt;/span&gt; &lt;span class="s1"&gt;'Ra%'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  COUNT
&lt;/h3&gt;

&lt;p&gt;To count number of results, we can use COUNT&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt; &lt;span class="k"&gt;LIKE&lt;/span&gt; &lt;span class="s1"&gt;'Ra%'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  OTHER AGGREGATE FUNCTIONS
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;KEYWORD&lt;/th&gt;
&lt;th&gt;USE&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;SUM&lt;/td&gt;
&lt;td&gt;To calculate the sum&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;AVG&lt;/td&gt;
&lt;td&gt;To calculate the average&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MIN&lt;/td&gt;
&lt;td&gt;To find the minimum of the column&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MAX&lt;/td&gt;
&lt;td&gt;To find the maximum of the column&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  AS
&lt;/h3&gt;

&lt;p&gt;We can use AS as alias in SQL&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;cust_name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt; &lt;span class="k"&gt;LIKE&lt;/span&gt; &lt;span class="s1"&gt;'Ra%'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  GROUP BY
&lt;/h2&gt;

&lt;p&gt;GROUP BY is used to group rows that have the same values into summary rows&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;DISTINCT&lt;/span&gt; &lt;span class="n"&gt;cust_country&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="k"&gt;count&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;cust_country&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  HAVING
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;To  select countries having count greater than 4&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;DISTINCT&lt;/span&gt; &lt;span class="n"&gt;cust_country&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="k"&gt;count&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;cust_country&lt;/span&gt;
&lt;span class="k"&gt;HAVING&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  JOIN
&lt;/h2&gt;

&lt;p&gt;A &lt;code&gt;JOIN&lt;/code&gt; clause is used to combine rows from two or more tables.&lt;br&gt;
&lt;code&gt;ON&lt;/code&gt; keyword is used to specify the coommon columns&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F21txypr85fhohordbnjd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F21txypr85fhohordbnjd.png" alt="SQL JOINS"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  SUBQUERIES
&lt;/h2&gt;

&lt;p&gt;We can use a query inside a query to further restrict the output data&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt; 
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt; &lt;span class="k"&gt;IN&lt;/span&gt; 
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cust_code&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt; 
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;payment_amt&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;  &lt;span class="mi"&gt;6000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  DELETE
&lt;/h2&gt;

&lt;p&gt;To delete complete table&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We may also use other conditions to specifically delete rows.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cust_name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'Steven'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  DROP
&lt;/h2&gt;

&lt;p&gt;To completely drop the table, we may use&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;customer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In the next &lt;a href="https://dev.to/fahidlatheef/databases-important-theoretical-concepts-4nll"&gt;Episode&lt;/a&gt; of this Series, we will discuss few Database Theoretical Concepts.&lt;/p&gt;

</description>
      <category>sql</category>
      <category>postgres</category>
      <category>database</category>
    </item>
  </channel>
</rss>
