Category: Tech

  • Ep. 010 – Exercise – Learn HTML and HTML5 – Free Course

    In the previous post, we have learned the difference between the class and id attributes and why/when we use them. In this post, we will do an exercise utilizing the knowledge that we have already learned in the previous lessons.

    Exercise:

    You need to create an HTML page with:

    • a title as “My Portfolio” (use <title> tag)
    • A heading which states “My Online Portfolio” (use <h2> tag)
    • Four links i.e. Home, About, Blog, Contact using unordered list and anchor tags (use <ul>,<li>,<a> tags)
    • Show profile picture (use <img> tag)
    • Show your name below the profile picture (use <h4> tag)
    • Show tagline below the name (use <p> tag)
    • Display your four recent experiences using the heading i.e. “My Experience” and an unordered list <ul>
    • Display your four recent education degrees using the heading i.e. “My Education” and an unordered list <ul>
    • Display your four hobbies using the heading i.e. “My Hobbies” and an unordered list <ul>
    • Display your contact information using the heading i.e. “Contact Information” and an unordered list <ul>

    Video Demo (Urdu Language)

    Exercise – Learn HTML and HTML5

    After completing the above exercise, you can host your code on GitHub or any other free hosting service and send us a link in the comments section below for a review/feedback.

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • Ep. 007 Recap and Review Questions – Learn WordPress – Free Course

    In the previous post, we have learned how to set up a new WordPress project in the localhost Wamp Server. This post is the last post of the current module (i.e. Course Overview and Set-Up). In this post, we will have a recap of what we have learned and will discuss some review questions. The review questions are helpful for the candidates to decide whether they are ready to move on to the next module or not?

    Recap:

    In this module, we have covered the following topics:

    • Course overview (episode 001)
    • Course introduction, requirements, objectives, why WordPress, and learning outcomes (episode 002)
    • Course help material and where to ask questions (episode 003)
    • What is loacalhost and why we use it? (episode 004)
    • WampServer installation and set up (episode 005)
    • WordPress project set up on localhost wampserver (episode 006)
    • Recap and review questions (episode 007)

    Review Questions:

    Before moving to the next module, the candidate must be able to fulfill the following requirements:

    • The candidate must be able to understand what is localhost and why we use it?
    • The WampServer must be correctly installed and working on the computer/laptop of the candidate and it must turn green when it is started
    • A WordPress project is set up on the localhost WampServer (as we did in episode 006) and the candidate must be able to log in to the WordPress website dashboard using the login credentials

    If you fulfill the above three requirements, then you are ready to move on to the next module i.e. WordPress Core. If not, then start the lessons again until you are ready.

    Video Tutorial (Urdu Language):

    Recap and Review Questions – Learn WordPress

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • Ep. 011 – Meta Tags – Learn HTML and HTML5 – Free Course

    In the previous post, we have presented an exercise to validate the knowledge learned in the previous course episodes/posts. In this post, we will learn about Meta Tags and why/how we use them on an HTML page.

    Meta Tags:

    You can think of the meta tags as properties/characteristics of an HTML page. These meta tags are added in the Head Tag <head>. The information added through meta tags is only readable to the browsers/ search engines and is not displayed on the actual web page.

    Following are some of the meta tags commonly used on the HTML pages:

    Meta Charset:

    The meta charset tag is used to define the character encoding of the HTML page. The commonly used charset is “UTF-8”. See the following code example:

    <meta charset="UTF-8">

    Meta Keywords:

    The meta keywords tag is used to define keywords for the HTML page. The keywords define what kind of content is presented on the HTML page. These keywords are used by the search engines e.g. Google, Bing, etc. to search for the relevant content on the Internet. The search query is matched to the keywords by the search engines to prepare the search results. The following code snippet shows how to add the keywords to an HTML page:

    <meta name="keywords" content="portfolio, personal, website, resume">

    Now when a user searches for the terms portfolio, personal, etc. then your web page will be listed in the search results. The position of your page in the search results is based on the relevancy of the content and other search engine algorithms.

    Meta Description:

    The meta description tag is used to define a short summary of the content presented on the HTML page. This descriptive content tells the browsers/search engines about the type of content available on the page. The following snippet shows how to add a description tag to an HTML page:

    <meta name="description" content="My online resume">

    Meta Author:

    The meta author tag is used to tell the browsers/search engines about the author of the HTML page. The following code snippet shows how to add an author meta tag to an HTML page:

    <meta name="author" content="Junaid Hassan">

    Meta Viewport:

    The meta viewport tag is used to define the page properties like screen-width or initial zoom level etc. The following snippet defines the initial screen-width as device-width (responsive) and the initial zoom level as 1.0:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    The meta viewport tag with the above values makes sure that the web page is displayed correctly on all devices thus making the web page responsive.

    Video Tutorial (Urdu Language):

    Meta Tags – Learn HTML and HTML5

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • Ep.012 – iFrame – Learn HTML and HTML5 – Free HTML Course

    In the previous post, we have learned about meta tags and how to use them on an HTML page. In this post, we will learn about iFrames and how we can use them on an HTML page.

    iFrame:

    The iFrame tag <iframe> tag is used to show other websites on your own website in a frame. The other website can only be shown on your website if that website allows embedding features. The source attribute src is used to add the URL of the external website. The width and height attributes are used to define the width and height of the frame.

    The following example code shows how to show an external website in a frame:

    <!--<iframe src="http://blog.codoplex.com" width="360" height="500"></iframe>

    Embed Youtube Video using iFrame:

    The iframe tag can also be used to embed YouTube videos in your own website. To embed any YouTube video, visit the YouTube video in the browser, then “Right Click” inside the video and click the “Copy Embed Code” option. Now you can place this copied code into your website page. The following code example shows the copied Embed Code of a YouTube video:

    Code:

    <iframe width="350" height="280" src="https://www.youtube.com/embed/Wnv28LT9WPQ" title="iFrame Video Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    Output:

    You can adjust the width and height of the frame by changing the values of the width and height attributes of the iframe.

    Got Stuck? Any Questions?

    In case of any questions, please feel free to contact in the comments section below. Thanks

  • Ep.013 Block vs Inline Elements – Learn HTML and HTML5 – Free HTML Course

    In the previous post, we have learned about the iframe tag and how we can use it on an HTML page to embed external web pages/content. In this post, we will learn the difference between the Block and Inline elements/tags.

    Block Elements:

    The block or block-level elements/tags are those HTML tags that 1) cover the 100% available width on the screen and 2) always start from a new line. For example the <div>, <p>, <h1>-<h6>, <form>, <ol>, <ul>, <li>, <table>, <video> tags etc. are the block-level elements/tags.

    Inline Elements:

    The inline elements/tags cover only the width required by the inner content of the tag and start from where the previous inline element is completed. For example the <span>, <a>, <img>, <br>, <i>, <strong> tags are the inline elements.

    Example

    Code:

    <h3>The following two paragraphs will start from a new line because they are enclosed in p tag which is a block-level element.</h3>
    <p>The is a block-level element.</p>
    <p>This is another block-level element.</p>

    Output:

    The following two paragraphs will start from a new line because they are enclosed in p tag which is a block-level element.

    The is a block-level element.

    This is another block-level element.

    Code:

    <h3>The following two paragraphs will start from where the previous element is ended because they are enclosed in span tag which is an inline element.</h3>
    <span>The is an inline element. </span>
    <span>This is another inline element.</span>

    Output:

    The following two paragraphs will start from where the previous element is ended because they are enclosed in span tag which is an inline element.


    The is an inline element. This is another inline element.

    Video Tutorial (Urdu Language):

    Block vs Inline Elements – Learn HTML and HTML5

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • Ep.014 – Form, Input, Placeholder – Learn HTML and HTML5 – Free Course

    In the previous post, we have learned about the difference between block and inline elements. In this post, we will learn about the form and input tags as well as the placeholder attribute of the input tag.

    Form Tag:

    The form tag <form> is used to add a form on an HTML page. The HTML form consists of input fields. We will discuss the input fields in the next section. The following code example shows how to use the <form> tag:

    <form>
    
    </form>

    Input Tag:

    The input tag <input> is used to add input fields in an HTML form. The type attribute of the input tag defines the type of the input field e.g. text, number, email, password, etc. The following code example shows how to add input fields to an HTML form:

    Code:

    <p>The following form consists of two input fields.</p>
    <form>
        <input type="text" />
        <input type="number" />
    </form>

    Output:

    The following form consists of two input fields.

    Placeholder Attribute:

    The placeholder attribute can be added in any input field tag to display a placeholder text inside the input field. The placeholder text tells the user about the kind of information the user needs to insert in the input field.

    Code:

    <p>The following form consists of two input fields with placeholder texts.</p>
    <form>
        <input type="text" placeholder="Add text here ..." />
        <input type="number" placeholder="Add number here ..." />
    </form>

    Output:

    The following form consists of two input fields with placeholder texts.

    Label Tag:

    The label tag is used to define a label for any input field. The following example shows how to add a label for any input field:

    Code:

    <p>The following form consists of three input fields with labels and placeholder texts.</p>
    <form>
        <label>Username: </label>
        <input type="text" placeholder="Add username here ..." /><br>
        <label>Password:</label>
        <input type="password" placeholder="Add password here ..." /><br>
        <input type="submit" value="Click to Submit" />
    </form>

    Output:

    The following form consists of three input fields with labels and placeholder texts.



    Note: The value attribute of the input[type=submit] defines the text inside the submit button.

    Video Tutorial (Urdu Language):

    HTML Forms (1) – Learn HTML and HTML5

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • Ep.015 – Name Attribute, Form Action and Method Attributes – Learn HTML and HTML5 – Free Course

    In the previous post, we have learned about the form, input, label tags, and the placeholder attribute. In this post, we will learn about the name attribute, form action, and method attributes.

    Input Name Attribute:

    The name attribute of the input tag is used to access the value of the input field entered by the user. Please note that the name attribute should be unique for each input field. The following code example shows how to add the name attributes in the input fields:

    Code:

    <form>
        <label>Username: </label>
        <input type="text" placeholder="Add username here ..." name="username" /><br>
        <label>Password:</label>
        <input type="password" placeholder="Add password here ..." name="password" /><br>
        <input type="submit" value="Click to Submit" />
    </form>

    Output:



    Now when we submit the form, the values entered by the user will be shown in the URL of the page and those values can then be accessed by server-side languages like PHP or NodeJS (we will discuss these in other courses).

    Form Action Attribute:

    The form action attribute defines the URL to which the form will be submitted. For example, if you want to submit the form values to a specific page/file in your website, then the URL of that page/file will be added in the form action attribute. See the following example:

    Code:

    <form action="/yourpage.php">
        <label>Username: </label>
        <input type="text" placeholder="Add username here ..." name="username" /><br>
        <label>Password:</label>
        <input type="password" placeholder="Add password here ..." name="password" /><br>
        <input type="submit" value="Click to Submit" />
    </form>

    We will discuss the form action attribute in detail when we will learn PHP in another course.

    Form Method Attribute:

    The form method attribute defines how the data will be submitted to the page/file defined in the action attribute. The most common method types are GET and POST. By default, the value of the method attribute is GET. See the following example:

    Code:

    <form action="/yourpage.php" method="GET">
        <label>Username: </label>
        <input type="text" placeholder="Add username here ..." name="username" /><br>
        <label>Password:</label>
        <input type="password" placeholder="Add password here ..." name="password" /><br>
        <input type="submit" value="Click to Submit" />
    </form>

    GET vs POST Mothod:

    The GET method is the default method value for any HTML form. The GET method is used when the data to be submitted is not sensitive and can be shown publicly. For example page/post IDs. In the case of the GET method, the form data is submitted through the query parameters shown in the page URL:

    /?category=web&id=12345

    The POST method is used when the data to be submitted is sensitive and cannot be shown publicly. For example username, passwords, etc. In that case, we use the POST method. In the POST method, the form data is not shown in the URL rather it’s transferred securely and can only be accessed through the server-side language like PHP or NodeJS.

    We will discuss the form method attribute in detail in the PHP or NodeJS course.

    Video Tutorial (Urdu Language):

    Input Name Attribute, Form Action, and Method Attributes

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • SCEditor Remove iFrame Tag

    If you are using SCEditor as a rich text editor in your Angular/React application and you are trying are seeing that the iFrame tag is removed from the editor then I have a solution for your problem.

    Problem:

    The SCEditor is removing the iFrame tags to avoid the XSS attacks. How to allow the iFrame tags in SCEditor?

    Solution:

    So basically you need to tell the SCEditor that we have a list of allowed URLs that need to be whitelisted for iFrames. This can be done by providing an array of strings to the SCEditor instance as shown in the following code:

    sceditor.create(this.scEditor.nativeElement, {
          format: 'xhtml',
          style: 'https://cdn.jsdelivr.net/npm/sceditor@3/minified/themes/content/default.min.css',
          toolbar: "bold,italic,underline|left,center,right,justify|font,size,color,removeformat|bulletlist,orderedlist|ltr,rtl|image,table,link,unlink,youtube,code|maximize,source",
          emoticonsEnabled:false,
          allowedIframeUrls: ['https://sketchfab.com/']
    });

    I hope this solution will help you fix your problem. If you have any questions, please ask in the comments section. Thanks

    Reference:

    https://www.sceditor.com/posts/version-3-0-0-released/

  • Ep. 008 – Style, Link, and Script Tags – Learn HTML and HTML5

    In the previous post, we have learned how to add a line break, strong and italicized text, div and span tags, and style attributes. In this post, we will learn how to use style tag, link tag, and script tag and why we use them?

    Style Tag:

    The style tag <style> is used to add page-level Cascading Stylesheet (CSS) styles to design different parts and sections of the website. The style tag is usually placed inside the <head> tag. The following example shows how we can define the color of the h2 tag using the <style> tag.

    Code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>My First Website!</title>
    
        <style>
            h4{
                color: red;
            }
        </style>
    </head>
    <body>
       <h4>A red colored heading</h4>
    </body>

    Output:

    My First Website!

    A red colored heading

    Link Tag:

    In the previous section, we have learned how to add page-level CSS styles using the <style> tag. But what if our styles are defined in an external CSS file and we want to link it with our HTML page? Well, in that case, we use the <link> tag. The following code example shows how to link an external CSS file (style.css) to our HTML page (index.html).

    Folder Structure:

    • My Website Project Folder
      • index.html
      • style.css
    <!DOCTYPE html>
    <html>
    <head>
        <title>My First Website!</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
       <h2>A red colored heading</h2>
    </body>

    The above example shows how to link an external CSS file (style.css) to an HTML page provided that both files are residing in the same root directory. The following example shows how to link an external CSS file placed in another directory called css:

    Folder Structure:

    • My Website Project Folder
      • css
        • style.css
      • index.html
    <!DOCTYPE html>
    <html>
    <head>
        <title>My First Website!</title>
        <link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
       <h2>A red colored heading</h2>
    </body>

    Script Tag:

    The script tag <script> is used to 1) add page-level JavaScript code 2) to link external JavaScript files to an HTML page. The script tags are usually added before the closing body tag </body> to improve the page loading speed. The following code example shows how to add page-level JavaScript code and how to link an external JavaScript file to an HTML page:

    Page-Level JavaScript Code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>My First Website!</title>
    </head>
    <body>
       <h2 id="myheading">The color of this heading is changed using the JavaScript code</h2>
    
    <script>
       document.getElementById("myheading").style.color = "blue";
    </script>
    </body>

    Output:

    My First Website!

    The color of this heading is changed using the JavaScript code

    Linking External JavaScript File (myscript.js):

    • My Website Project Folder
      • index.html
      • myscript.js

    The folder structure is as above.

    Output:

    <!DOCTYPE html>
    <html>
    <head>
        <title>My First Website!</title>
    </head>
    <body>
       <h2 id="myheading">The color of this heading is changed using the JavaScript code</h2>
    
    <script src="myscript.js"></script>
    
    </body>

    Video Tutorial (Urdu Language):

    Style, Link, and Script Tags

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section. Thanks

  • Ep. 006 – Tables – Learn HTML and HTML5

    In the previous post, we have learned how to add images and videos to an HTML page. In this post, we will learn how to add tables with rows and columns to an HTML page.

    Table Tag:

    A table is a collection of rows and columns. To add a table to an HTML page, we use the <table> tag. To define a row inside the table we use the <tr> tag and to define a column inside a row, we use the <td> tag. See the following code example:

    Code:

    <table>
       <tr>
          <td>Row 1, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 3, Column 3</td>
       </tr>
       <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
       </tr>
    </table>

    Output:

    Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
    Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

    As you can see above that even though the table is correctly displaying the rows and columns but it’s not looking like a table. So let’s add a border to the table. The “border” attribute is used to add a border to the table. See the following code example:

    Code:

    <table border="1">
       <tr>
          <td>Row 1, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 3, Column 3</td>
       </tr>
       <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
       </tr>
    </table>

    Output:

    Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
    Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

    Table Header:

    To define head/header for the table, we can use the <thead> tag. The cells/columns inside the <thead> tag are added using the <th> tag. See the following code example:

    Code:

    <table border="1">
       <thead>
          <tr>
             <th>Column 1 Head</th>
             <th>Column 2 Head</th>
             <th>Column 3 Head</th>
          <tr>
       </thead>
       <tr>
          <td>Row 1, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 3, Column 3</td>
       </tr>
       <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
       </tr>
    </table>

    Output:

    Column 1 Head Column 2 Head Column 3 Head
    Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
    Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

    Table Body:

    The table body defines the main content of the table other than the table header or table footer. To define the table body area, we use the <tbody> tag.

    Code:

    <table border="1">
       <thead>
          <tr>
             <th>Column 1 Head</th>
             <th>Column 2 Head</th>
             <th>Column 3 Head</th>
          <tr>
       </thead>
       <tbody>
          <tr>
             <td>Row 1, Column 1</td>
             <td>Row 2, Column 2</td>
             <td>Row 3, Column 3</td>
          </tr>
          <tr>
             <td>Row 2, Column 1</td>
             <td>Row 2, Column 2</td>
             <td>Row 2, Column 3</td>
          </tr>
       </tbody>
    </table>

    Output:

    Column 1 Head Column 2 Head Column 3 Head
    Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
    Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

    Table Footer:

    To define the table footer, we use the <tfoot> tag. See the following code example:

    Code:

    <table border="1">
       <thead>
          <tr>
             <th>Column 1 Head</th>
             <th>Column 2 Head</th>
             <th>Column 3 Head</th>
          <tr>
       </thead>
       <tbody>
          <tr>
             <td>Row 1, Column 1</td>
             <td>Row 2, Column 2</td>
             <td>Row 3, Column 3</td>
          </tr>
          <tr>
             <td>Row 2, Column 1</td>
             <td>Row 2, Column 2</td>
             <td>Row 2, Column 3</td>
          </tr>
       </tbody>
       <tfoot>
          <tr>
             <td>Footer Section</td>
          </tr>
       </tfoot>
    </table>

    Output:

    Column 1 Head Column 2 Head Column 3 Head
    Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
    Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
    Footer Section

    Column Span:

    To span a column across multiple columns, we use the “colspan” attribute of the <td> tag. See the following code example:

    Code:

    <table border="1">
       <thead>
          <tr>
             <th>Column 1 Head</th>
             <th>Column 2 Head</th>
             <th>Column 3 Head</th>
          <tr>
       </thead>
       <tbody>
          <tr>
             <td>Row 1, Column 1</td>
             <td>Row 2, Column 2</td>
             <td>Row 3, Column 3</td>
          </tr>
          <tr>
             <td>Row 2, Column 1</td>
             <td>Row 2, Column 2</td>
             <td>Row 2, Column 3</td>
          </tr>
       </tbody>
       <tfoot>
          <tr>
             <td colspan="3">Footer Section</td>
          </tr>
       </tfoot>
    </table>

    Output:

    Column 1 Head Column 2 Head Column 3 Head
    Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
    Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
    Footer Section

    Table Title:

    We can also define a title text for the table inside the table header. See the following code example:

    Code:

    <table border="1">
       <thead>
          <tr>
             <td colspan="3">Table Title</td>
          </tr>
          <tr>
             <th>Column 1 Head</th>
             <th>Column 2 Head</th>
             <th>Column 3 Head</th>
          <tr>
       </thead>
       <tbody>
          <tr>
             <td>Row 1, Column 1</td>
             <td>Row 2, Column 2</td>
             <td>Row 3, Column 3</td>
          </tr>
          <tr>
             <td>Row 2, Column 1</td>
             <td>Row 2, Column 2</td>
             <td>Row 2, Column 3</td>
          </tr>
       </tbody>
       <tfoot>
          <tr>
             <td colspan="3">Footer Section</td>
          </tr>
       </tfoot>
    </table>

    Output:

    Table Title
    Column 1 Head Column 2 Head Column 3 Head
    Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
    Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
    Footer Section

    Video Tutorial:

    Tables – Learn HTML and HTML5

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • Ep. 006 – WordPress Project Set-Up – Learn WordPress in Urdu

    In the previous post, we have learned how to download and set up localhost using Wamp Server Software. In this post, we have discussed how to set up a new WordPress project on the localhost Wamp Server.

    Download WordPress:

    First, you need to visit the official WordPress website https://wordpress.org/. Now click on the Get WordPress button to download the latest stable version of WordPress.

    WordPress Website:

    When the WordPress is completely downloaded, copy the zip and paste it inside C://wamp64/www folder. Now extract that zip file inside that folder. Then open the extracted folder and inside that folder, you will find a folder named ‘wordpress’. Now cut that folder and paste it inside the root directory i.e. C://wamp64/www. Then rename that folder to whatever name you want e.g. ‘mywebsite’.

    Start Wamp Server Localhost:

    Now start the Wamp Server localhost and wait until the Wamp Server icon turns green. When the icon is turned green, it means that Wamp Server is successfully started and is now ready to serve the hosted websites from the C://wamp64/www directory.

    Database Creation:

    Click on the Wamp Server icon and click on the phpMyAdmin. It will ask for login credentials. Enter the credentials if you have defined them. If you are visiting it for the first time then ‘root’ is the username and empty space is the password. When you are logged in to the phpMyAdmin, then from the left sidebar, click the New icon, define database name and click the Create button. The database is created, now you need to assign a user to it. Click the Privileges tab from the menu. Click the Add New User account link from the bottom of the section. Define username, password, re-type password, and assign Global Privileges by checking the icon next to it. Then click the Go button and the user will be created with assigned privileges.

    WordPress Installation:

    Now open your favorite website browser e.g. Google Chrome and type http://localhost/mywebsite and the WordPress installation will get started. First, you need to select the language and click the Continue button. Then it will ask for the Database credentials e.g. database name, username, password, host, etc. Enter the database credentials, you have created in the previous step. Then move to the next step and enter the Website information e.g. Site Title, WordPress admin username (create a new one), password, and click the Next button. That’s it. The installation process is completed and now you can log in to the WordPress admin dashboard using the login credentials.

    Video Tutorial:

    WordPress Project Set-up

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • Ep. 007 – Line Break, Strong and Italic Text, DIV and SPAN tags, Style Attribute – Learn HTML and HTML

    In the previous post, we have learned how to add tables with columns and rows to an HTML page. In this post, we will learn how to add line breaks, strong and italicized texts, div and span tags, and style attributes.

    Line Break:

    A line break is added to move the elements to the next line. The text after the line break is moved to a new line. We use the <br> tag to insert a line break. See the following example:

    Code:

    <p>Hello World! <br> This text will be displayed on new line.</p>

    Output:

    Hello World!
    This text will be displayed on new line.

    Strong and Italic Text:

    We use the <strong> tag to make the text bold. To italicize the text, we use the <i> tag. See the following code example:

    Code:

    <p><strong>Hello World!</strong> Starting from here, <i>the text will be italicised</i>.</p>

    Output:

    Hello World! Starting from here, the text will be italicised.

    Div and Span Tags:

    Both the div and span tags are used as container tags. We group other HTML tags inside the container tags.

    The div tag/element is block-level element which means that it will cover the 100% available width and the next elements/tags will start from a new line.

    Whereas, the span tag/element is an inline tag which means that it will only cover the width as needed by the inner contents and the next text/elements will start from where the span element is ended.

    See the following code example:

    Code:

    <div>
    This div tag covers the 100% width and the next element starts from a new line. Whereas, the span element only covers the width as needed by the contents of the span element.
    </div>
    <br>
    <span>Text 1</span>
    <span>Text 2</span>

    Output:

    This div tag covers the 100% width and the next element starts from a new line. Whereas, the span element only covers the width as needed by the contents of the span element.

    Text 1 Text 2

    Style Attribute:

    The style attribute can be added in any HTML element/tag to add different styles to the HTML element/tag e.g. text color, background color font size etc. See the following example:

    Code:

    <div style="color: blue;">
    This text is written in div tag. If we apply a style to this div tag, it will be applied to all text inside this div tag. For exmaple, we have added a style to change the text color to blue.
    </div>
    <br>
    <div>
    Now what if we want to apply text color to specific text inside this div tag/element? In that case we can wrap <span style="color: red;">that text</span> inside a span tag/element and apply the text color to it.
    </div>

    Output:

    This text is written in div tag. If we apply a style to this div tag, it will be applied to all text inside this div tag. For exmaple, we have added a style to change the text color to blue.

    Now what if we want to apply text color to specific text inside this div tag/element? In that case we can wrap that text inside a span tag/element and apply the text color to it.

    Video Tutorial (Urdu):

    Line Break, Strong and Italic text, DIV and SPAN tags, and Style Attribute

    Got Stuck? Any Questions?

    In case of any questions, please feel free to ask in the comments section below. Thanks

  • CODOWPPOSTS – Features and HowTo Guide – WordPress Plugin

    CODOWPPOSTS is a WordPress plugin to show posts, pages, or custom posts on the frontend in tabular format with client-side filters and pagination. Select post type, add/re-order/delete columns with post attributes e.g. title, excerpt, author, category, or any custom post meta boxes. Define column widths, link permalinks, enable/disable client-side filters for each column. Define number of posts per page (default: 10) with client-side pagination functionality.

    The plugin is reviewed by the CodeCanyon team and is approved and published on the CodeCanyon marketplace.

    Video Demo

    Video Demo of CODOWPPOSTS Plugin

    Features

    1. Select post type (post, page or custom post type)
    2. Add/edit/delete any number of post tables
    3. Dynamic post table columns
    4. Column drag/drop ordering/positioning
    5. Column titles
    6. Column meta (data source)
    7. Support to use built-in attributes as data source e.g. title, excerpt, author, category etc.
    8. Support to use custom meta boxes registered with the selected post type as data source
    9. Define column width
    10. Enable/disable column filtering
    11. Number of posts per page (default: 10)
    12. Client-side filtering
    13. Client-side pagination
    14. Post table shortcodes

    How To Use It?

    1. Purchase, download and install the plugin
    2. Visit CODOWPPOSTS -> Post Tables -> Add New to define a new post table for any post type
    3. Configure the attributes and publish the post table
    4. Every published post table will have a shortcode that can be used on any page or wherever the shortcodes can be added

    Screenshots:

    Backend Settings
    Frontend View

    That’s all! Please let us know in case of any questions or concerns. Thanks

  • Ep. 001 – Course Introduction – Learn WordPress in Urdu

    Today, we are starting a new course titled “Learn WordPress in Urdu”. This blog post gives an overview of the course and provides information about the contents of the course. This course is prepared using the latest version of WordPress (5.8). Each lecture consists of a written blog post (like this) and a video hosted on Youtube and Facebook pages. The video from Youtube will be embedded in the blog posts as well.

    Video Episode:

    Episode #001 – Course Overview

    Course Contents:

    The course is mainly divided into three (3) modules i.e. WordPress Core, WordPress Theme Development, and WordPress Plugin Development. Following is a list of topics covered in each section:

    • WordPress Core (WordPress CMS features and Website Development using Core WordPress CMS)
      • Posts
      • Pages
      • Media
      • Comments
      • Themes
      • Widgets
      • Customizer
      • Theme Options
      • Plugins
      • Users
      • Tools
      • Settings
    • WordPress Theme Development (Developing custom themes from scratch)
      • Classic vs Block Themes
      • Required files for theme development
      • Styles and Functions
      • Template Pages and Custom Templates
      • Translations
      • Security
      • Performance
      • Theme Options Page
      • Global Styles and Them JSON file
    • WordPress Plugin Development (Developing custom plugins from scratch)
      • Required Files for Plugin Development
      • Plugin Meta Information
      • Plugin Admin Menu
      • Plugin Settings Page
      • Custom Post Type Registration
      • Custom Taxonomies Registration
      • Translations
      • Performance
      • Security
  • Ep. 002 – Course Objectives, Requirements, and Outcomes – Learn WordPress in Urdu

    In the previous post, we have briefly given the introduction to the course titled “Learn WordPress in Urdu”. In this post, we have discussed the course objectives, course pre-requisites/requirements, why we are learning WordPress, and what the are the learning outcomes of this course.

    Course Objectives:

    1. How to design and develop a website, blog, or an e-commerce website using WordPress CMS
    2. How to design a custom WordPress theme
    3. How to develop a custom WordPress plugin

    Course Pre-Requisites/ Requirements:

    1. Personal computer/laptop
    2. Basic understanding of English language and terms
    3. Basic understanding of how to use Internet

    Why WordPress?

    • WordPress was started back in 2003 and now it’s very mature content management system (CMS) to design and develop websites
    • WordPress is an open-source software i.e. anyone can download it, customize and extend it by using themes and plugins
    • Over 42% of the websites are developed in WordPress (according to the official WordPress website)
    • To design and develop a website, you don’t need to learn programming languages

    Course Learning Outcomes/Benefits:

    • Become a freelancer and sell your services online as a freelance WordPress designer and developer
    • Become a theme author/seller and sell your custom WordPress themes online
    • Become a plugin developer and sell your custom WordPress plugins online

    Video Episode:

    Course Requirements

    Conclusion:

    In this post, we have briefly discussed the course objectives, pre-requisites/requirements, why we are learning WordPress, and what are the course learning outcomes. If you have any questions, please feel free to ask in the comments sections. Happy Learning!

  • Ep. 002 – How to Create a Simple HTML Page – Learn HTML & HTML5

    In the previous blog post, we have learned what is HTML and in this blog post, we will learn how to create a simple HTML page from scratch.

    To get started, just create a new folder and name it “my-website” and inside that folder create a new Text Document (.txt) file and save it as index.html and add the following code to it.

    The above code is a very basic and standard code that basically adds necessary HTML tags for a web page.

    • <!DOCTYPE html>: tells the browser that the document type of this file is HTML
    • <html></html>: The <html> tag tells the browser that contents added in between these tags are HTML tags
    • <head></head>: The <head> tag is used to define meta data for the web page. The contents inside the head tag are not displayed on the website
    • <title></title>: The <title> tag defines the title of the web page which is shown in the browser tab
    • <body></body>: The <body> tag actually define the contents of the web page visible inside the browser
    • <h1></h1>: The heading tag (<h1>-<h6>) is used to add different level headings in the web page
    • <p></p>: The paragraph tag (<p>) is used to add paragraph in the web page

    Now save this document and open it inside the browser e.g. Google Chrome and you will see the following output:

    Hello World!

    Welcome to my web page.

    Congratulations! You have just created your first web page using HTML. In the next tutorials, we will learn about the other HTML tags and how to use them. Stay tuned!

    Video Tutorial:

    How to Create a Simple HTML Page

    If you have any questions, please feel free to ask in the comments section.

  • Ep. 003 – Paragraph, Headings and Anchor Tags – Learn HTML & HTML5

    In the previous blog post, we have learned how to create a simple HTML page. In this blog post, we will learn how to add paragraphs, headings, and anchor tags (links) to an HTML page.

    How to Add Paragraphs to HTML Page?

    Paragraphs are used to show text-based information on the website pages. To add paragraphs to the website page, we use the <p> tag. Open the index.html file that you have created in the previous lesson and inside the <body> tag add the following code:

    <p>Hello World! I'm learning HTML & HTML5</p>

    This code will add a paragraph to the page. Similarly, you can add as many paragraphs as you want. Now save the index.html file and open the file in any browser (e.g. Google Chrome) and you will see the text “Hello World! I’m learning HTML & HTML5”.

    How to Add Headings to HTML Page?

    Headings are used for adding titles to the website pages. HTML provides six heading variations (H1-H6). H1 is the biggest possible heading and H6 is the smallest possible heading. The following code snippet shows how to add different heading levels to the website page using HTML tags.

    <h1>Heading - Level 1</h1>
    <h2>Heading - Level 2</h2>
    <h3>Heading - Level 3</h3>
    <h4>Heading - Level 4</h4>
    <h5>Heading - Level 5</h5>
    <h6>Heading - Level 6</h6>

    Now save the index.html file and open the file in any browser (e.g. Google Chrome) and you will see the headings added to the page.

    How to Add Anchor Links to HTML Page?

    Anchor links are used to internal or external links to the website pages. The links can be connected to the internal sections of the website or they can be linked to any external website. The <a> tag is used to add links to the HTML website pages. The following code snippet shows how to add an external website link to a website page.

    <a href="http://blog.codoplex.com" target="_blank">Link</a>

    The href=”” attribute defines the URL of the external website. The target=”_blank” attribute make sure the that external link is opened in a new tab.

    Now save the index.html file and open the file in any browser (e.g. Google Chrome) and you will see the link added to the page.

    Complete Code:

    <p>Hello World!</p>
    
    <h1>Heading - Level 1</h1>
    <h2>Heading - Level 2</h2>
    <h3>Heading - Level 3</h3>
    <h4>Heading - Level 4</h4>
    <h5>Heading - Level 5</h5>
    <h6>Heading - Level 6</h6>
    
    <a href="http://blog.codoplex.com" target="_blank">Link</a>

    Video Tutorial:

    How to add paragraphs, headings, and anchor links to Web Page

    If you have any questions, please feel free to as in the comments section. Thanks

  • Ep. 004 – What/Why/How to Set Up Localhost – Learn WordPress Course

    In the previous blog posts, we have briefly discussed the course help material and where to ask in case of any questions. In this blog post, we will learn what is localhost, why we need to use it, and how to set up localhost on your computer/laptop.

    What is Localhost?

    According to Wikipedia, “In computer networking, localhost is a hostname that refers to the current computer used to access it”.

    Why We Need to Set Up Localhost?

    In simple words, we want our computer/laptop to work as a hosting server for our website project. By default, our computer/laptop doesn’t have the functionality to act as a hosting server for our website. So we need to install software on our computer e.g. WampServer, XamppServer, or Local for WP to make our computer ready to host our WordPress website project. You can use any of these options to get started with the WordPress development project. I have installed WampServer on my computer so I will take it as a reference in future conversations. But installing/configuring Wamp Server or Xampp Server may produce some errors/warnings. So I will recommend installing Local for WP because it’s easier to install and configure your WordPress project.

    How to Set Up Localhost?

    You can download and install any of the 3 software mentioned above to set up localhost on your computer/laptop. In the next video, we will learn how to set up localhost using WampServer and optionally in another video, we will learn how to set up localhost using Local for WP as well. You don’t need to install both software. You can either install WampServer or Local for WP.

    Got Stuck? Any Questions?

    If you got stuck at any point or if you have any questions, please feel free to ask in the comments section below. Thanks for reading!

  • Ep. 005 – Wamp Server Set Up – Learn WordPress

    In the previous post, we have learned what is localhost? why we use it? and how we can set up localhost on our computer/laptop. We have learned that we can install Wamp Server, Xampp Server, or Local for WP software to set up localhost on our computer/laptop. In this post, we will discuss how to install Wamp Server to set up localhost on our computer.

    Download Wamp Server

    Visit the official Wamp Server website https://www.wampserver.com/en and click the Download button to download the latest stable version of Wamp Server.

    Download Wamp Server

    Install Wamp Server

    When the Wamp Server is downloaded, double click on the downloaded .exe file and follow the instructions to install the Wamp Server on your computer/laptop.

    Verfication

    After the installation is completed, a new Folder will be created in your C:// drive named Wamp or Wamp64. Run the installed Wamp Server (Start Menu -> Wamp), and see the icon in the taskbar. At the start the icon will be red, then it will turn orange, and eventually, it will turn green. The green icon means that the Wamp Server is correctly configured and running all its services. Now we are ready to set up a new WordPress project in Wamp Server (Next Episode).

    Video Episode:

    Wamp Server Installation

    Got Stuck? Any Questions?

    In case of any questions, feel free to ask in the comments section below. Thanks!

  • Ep. 004 – Lists, Quotations, and Comments – Learn HTML and HTML5

    In the previous post, we have discussed paragraphs, headings, and anchor tags. In this post, we will learn about how to add ordered lists, unordered lists, quotations (Blockquotes), and HTML comments.

    Lists:

    Lists are used to group related items. Lists can be ordered or unordered.

    Ordered Lists:

    To add ordered lists in an HTML page, we use <ol> tag. Then to add items to the ordered list we can use the <li> tag. See the following example code:

    Example Code:

    <ol>
       <li>List Item 1</li>
       <li>List Item 2</li>
       <li>List Item 3</li>
    </ol>

    Output:

    1. List Item 1
    2. List Item 2
    3. List Item 3

    Unordered Lists:

    To add unordered lists in an HTML page, we use <ul> tag. Then to add items to the unordered list we can use the <li> tag. See the following example code:

    Example Code:

    <ul>
       <li>List Item 1</li>
       <li>List Item 2</li>
       <li>List Item 3</li>
    </ul>

    Output:

    • List Item 1
    • List Item 2
    • List Item 3

    Blockquotes (Quotations)

    Blockquotes are used when text is copied from an external source/author. To add blockquote to an HTML page, we use the <blockquote> tag. See the following example with an output:

    Example Code:

    <blockquote>Some quotation from external source</blockquote>

    Output:

    Some quotation from external source

    HTML Comments:

    HTML comments are written inside the HTML page for reference and they are not displayed on the actual web page. The HTML comments are helpful when you are working with a team. The other members of the team can understand why a particular piece of code was added by seeing the HTML comments. See the following example:

    Example Code:

    <!--This is a sample HTML comment-->

    Output:

    The output is empty because HTML comments are not displayed on the actual page.

    Video Tutorial:

    Got Stuck? Any Questions?

    In case of any questions, please free to ask in the comments section below. Thanks for reading!