Showing posts with label Learn Coding. Show all posts
Showing posts with label Learn Coding. Show all posts

Wednesday, 14 June 2023

Explain HTML || How to learn & Practice HTML

 
HTML, which stands for HyperText Markup Language, is the standard markup language used for creating and structuring web pages. It provides a set of tags or elements that are used to define the structure, content, and layout of a web document. HTML files are plain text files with a .html extension.

Here are some key concepts and elements in HTML:


1. Tags: HTML documents are built using tags, which are enclosed in angle brackets (<>). Tags are used to define different elements in a web page. For example, the opening tag <html> and closing tag </html> define the root element of the HTML document.


2. Elements: Elements are defined by tags and consist of the opening tag, content, and closing tag. They represent various components of a web page, such as headings, paragraphs, images, links, tables, forms, and more. For example, the <h1> tag is used to define the main heading of a page.


3. Attributes: Attributes provide additional information about HTML elements and are specified within the opening tag. They are composed of a name and a value and are used to modify the behavior or appearance of an element. For instance, the <img> tag uses the "src" attribute to specify the image source.


4. Document Structure: An HTML document typically consists of a document type declaration (<!DOCTYPE>), an opening <html> tag, a <head> element for metadata (e.g., title, stylesheets), and a <body> element that contains the visible content of the web page.


5. Links: HTML allows the creation of hyperlinks using the <a> (anchor) tag. The "href" attribute specifies the URL or file path to link to, and the link text is placed between the opening and closing tags. When a user clicks on the link, they are directed to the specified destination.



6. Images: Images can be included in HTML documents using the <img> tag. The "src" attribute specifies the image URL or file path, while other attributes like "alt" provide alternative text for accessibility purposes.


7. Styling: CSS (Cascading Style Sheets) is commonly used in conjunction with HTML to control the visual presentation of web pages. CSS rules define how elements should be displayed, including properties like colors, fonts, sizes, margins, and more. CSS can be included in HTML documents using the <style> tag or through external CSS files.




8. Forms: HTML provides form elements, such as <form>, <input>, <select>, <textarea>, and <button>, which allow users to input data and submit it to a server for processing. Forms are used for various purposes, such as user registration, search boxes, and data submission.

HTML is interpreted by web browsers, which render the HTML tags and display the content according to the defined structure and styling rules. It forms the foundation for building web pages and is essential for creating the structure and content of a website.
HTML, which stands for Hypertext Markup Language, is the standard markup language used for creating web pages and applications on the World Wide Web. It is the backbone of the web, providing the structure and content of a webpage. HTML uses a set of tags to define the elements and their relationships within a document.




Here are some key points to understand about HTML:


1. Structure: HTML documents are composed of a nested structure of HTML elements. An element consists of a starting tag, content, and an ending tag. The starting tag begins with the element's name surrounded by angle brackets (< >), and the ending tag has a forward slash (/) before the element's name.


   Example:

   <h1>This is a heading</h1>


2. Tags: HTML tags define the elements of a webpage. There are various types of tags available in HTML, each serving a specific purpose. Some common tags include:


   - `<h1>` to `<h6>`: Heading tags, where `<h1>` is the highest level and `<h6>` is the lowest.
   - `<p>`: Paragraph tag for defining paragraphs of text.
   - `<a>`: Anchor tag for creating links.
   - `<img>`: Image tag for inserting images.
   - `<ul>` and `<li>`: Unordered list and list item tags for creating bulleted lists.
   - `<table>`, `<tr>`, `<td>`: Tags for creating tables with rows and columns.
   - `<div>` and `<span>`: Generic container tags for grouping and styling content.


3. Attributes: HTML tags can have attributes that provide additional information about the elements. Attributes are placed within the starting tag and consist of a name and a value.

   <a href="https://www.example.com">Click here</a>
   In this example, `href` is the attribute, and `"https://www.example.com"` is the attribute value.


4. Nesting: HTML elements can be nested within each other to create complex structures. This means you can have elements inside other elements, forming a parent-child relationship.


   Example:
   <div>
       <h1>Welcome</h1>
       <p>This is a paragraph.</p>
   </div>

   In this case, the `<div>` element is the parent, while `<h1>` and `<p>` are its children.


5. Document Structure: A typical HTML document consists of an opening `<html>` tag and closing `</html>` tag. Inside the `<html>` element, you'll find `<head>` and `<body>` elements. The `<head>` section contains meta-information about the document, such as the title and external stylesheets or scripts, while the actual content of the webpage resides within the `<body>` section.


   Example:
   <!DOCTYPE html>
   <html>
       <head>
           <title>My Webpage</title>
           <link rel="stylesheet" href="styles.css">
       </head>
       <body>
           <h1>Welcome to my webpage</h1>
           <p>This is the content of my webpage.</p>
       </body>
   </html>



6. Semantics: HTML also provides semantic elements that carry meaning, making it easier for search engines, screen readers, and other technologies to understand the structure and purpose of the content. Semantic elements include `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`, and more.


HTML is just one part of building a website. It provides the structure and content, while CSS (Casc


Thursday, 8 June 2023

Most Important JavaScript programms || JS Programms

 Most Important JavaScript programms

 

          Get the length of an array:
        var length = array.length;
       
        Convert an array to a string:
        var string = array.join(',');
       
        Check if a variable is null or undefined:
        if (variable == null) {
          // variable is null or undefined
        }
       
        Remove an element from an array by its index:
        array.splice(index, 1);
       
        Convert a number to a string:
        var string = number.toString();
       
        Get the current URL of the page:
        var currentURL = window.location.href;
       
        Round a number to a specified decimal place:
        var roundedNumber = number.toFixed(decimalPlaces);
       
        Get the index of the first occurrence of an element in an array:
        var index = array.indexOf(element);
       
        Create a new object with specific properties from an existing object:
        var newObject = {
          property1: existingObject.property1,
          property2: existingObject.property2
        };
       
       

Saturday, 3 June 2023

CodeQuest: The JavaScript Journey || A JavaScript Game

 


                           Create a Simple Game using javascript
 <!DOCTYPE html>
<html>
  <head>
    <title>Simple JavaScript Game</title>
    <style>
      #game-container {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
      }
      #player {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="player"></div>
    </div>
    <script >
            
// Get the player and game container elements
const player = document.getElementById("player");
const gameContainer = document.getElementById("game-container");

// Set the initial position of the player
let playerX = 0;
let playerY = 0;

// Function to handle keyboard arrow key events
function handleArrowKey(event) {
  const key = event.key;
  if (key === "ArrowUp" && playerY > 0) {
    playerY -= 10;
  } else if (key === "ArrowDown" && playerY < gameContainer.offsetHeight -
        player.offsetHeight) {
    playerY += 10;
  } else if (key === "ArrowLeft" && playerX > 0) {
    playerX -= 10;
  } else if (key === "ArrowRight" && playerX < gameContainer.offsetWidth -
        player.offsetWidth) {
    playerX += 10;
  }

  // Update the player's position
  player.style.left = playerX + "px";
  player.style.top = playerY + "px";
}

// Add event listener for arrow key events
document.addEventListener("keydown", handleArrowKey);

</script>
  </body>
</html>




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

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>codewith harry</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
                    rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<style>
.nav-item{
  padding: 7px;
 }
  .bi{
                margin-right: 26px;
            }
           
        </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg p-4 bg-body-tertiary">
        <div class="container-fluid">
<a class="navbar-brand m-0 text-primary " href="https://youtube.com/@GetCodr">
            getcodr</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
         aria-expanded="false"
      aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
            </button>
<div class="collapse navbar-collapse  pl-3 " id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2  mx-4  mb-lg-0">
                    <li class="nav-item">
<a class="nav-link active ml-0" aria-current="page"
                 href="https://youtube.com/@GetCodr"> Home</a>
      </li>
                    <li class="nav-item">
                        <a class="nav-link ml-0" href="#">Courses</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Tutorial</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Notes</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                    <li class="nav-item">
       <a class="nav-link" href="https://youtube.com/@GetCodr">MyGear</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Work With Us</a>
                    </li>
                    <li class="nav-item">
      <a class="nav-link rounded bg-primary text-light mr-0" href="#">Login</a>
                    </li>
                    <li class="nav-item ">
      <a class="nav-link rounded text-light bg-primary mr-0"
                        href="https://youtube.com/@GetCodr">SignUp</a>
                    </li>

                </ul>
            </div>
        </div>
        <br style="color: rgb(164, 20, 20);">
    </nav>
    <hr style="margin: 0;">
    <nav class="navbar navbar-expand-lg p-2  bg-body-tertiary">
        <div class="container-fluid ">
            <a class="navbar-brand mr-0" href="https://youtube.com/@GetCodr">
                <svg xmlns="http://www.w3.org/2000/svg" width="71" height="24"
    fill="currentColor" class="bi bi-house pr-25" viewBox="0 0 16 16">
                    <path
  d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2
  8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0
    .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707
     1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z" />
</svg></i></a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
             aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse pl-3" id="navbarSupportedContent">
     <ul class="navbar-nav  mb-2 m-auto vishnu p-20  mb-lg-0">
           <li class="nav-item ">
 <a class="nav-link active ml-0 text-primary" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item ">
                 <a class="nav-link ml-0 text-primary" href="#">Courses</a>
                    </li>

                    <li class="nav-item ">
                        <a class="nav-link text-primary" href="#">Tutorial</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-primary" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-primary" href="#">Notes</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-primary" href="#">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-primary" href="#">MyGear</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-primary" href="#">Work With Us</a>
                    </li>

                </ul>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"
            fill="currentColor" class="bi bi-search " viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85
     3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12
        6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
  </svg>
            </div>
        </div>
    </nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap
            .bundle.min.js"
 integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  crossorigin="anonymous"></script>
</body>
</html>

                                    My YouTube Channel
                                       getcodr

Thursday, 1 June 2023

How To Make Compounds In React.Js || Learn React.JS


 H                      
                           How To Make Compounds In React.Js




                             Heading.jsx file

import React from 'react' ;
function Heading(){
    return <h1>This is getcodr from youtube </h1>
};
export default Heading ;


                   Para.jsx file

import React from 'react' ;
function Para(){
    return (<p>This is an paragarph , it's tell us about getcodr youtube channel.
    getcodr is a small youtube channel who's trying to create a value in this world</p>) ;
}
export default Para ;

                   List.jsx file

import React from 'react' ;
function List(){
    return (
    <ol>
        <li>vishnu </li>
        <li>Sharma </li>
        <li>from </li>
        <li>getcodr </li>
    </ol> )
} ;
export default List ;

                   App.js File  

import React from 'react' ;
import Heading from './Heading' ;
import Para from './Para';
import List from './List' ;

function App() {
 return(
 <>
    <Heading />
    <Para />
    <List />
</>
  ) ;
}
export default App ;

              index.js file    

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<App />,
 document.getElementById('root')
 ) ;



                            my youtube channel
                                    getcodr

HTML Form: User Registration Example || Learn HTML

 How To Create Form Using HTML 


 

 <!DOCTYPE html>
<html>
<head>
  <title>HTML Form Example</title>
</head>
<body>
  <h1>User Registration Form</h1>

  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required><br>

    <label for="gender">Gender:</label>
    <select id="gender" name="gender">
      <option value="male">Male</option>
      <option value="female">Female</option>
      <option value="other">Other</option>
    </select><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea><br>

    <input type="submit" value="Submit">
  </form>
</body>
</html>

</body>
</html>


Wednesday, 31 May 2023

Introduction to HTML: A Beginner's Guide to Building Web Pages || Learn HTML Basic

                     HTML (Hypertext Markup Language)  

                                            


HTML (Hypertext Markup Language) is the standard markup language used for creating web pages and web applications. It provides a structure for organizing and presenting content on the internet. Here's some basic knowledge about HTML:


1. **Tags** : 

HTML consists of a series of tags that define the structure and elements of a web page. Tags are enclosed in angle brackets (`<>`) and come in pairs (opening and closing tags), although some tags are self-closing. Examples of tags include `<html>`, `<head>`, `<body>`, `<p>`, `<h1>`, `<img>`, etc.


2. **Elements**:

 Elements are created by using HTML tags. They represent different types of content such as headings, paragraphs, images, links, lists, tables, forms, etc. Elements can have attributes that provide additional information about them, such as the `src` attribute for specifying the source of an image.


3. **Document Structure**:

 An HTML document typically starts with a `<!DOCTYPE>` declaration, followed by the `<html>` element, which contains the entire document. The document is divided into `<head>` and `<body>` sections. The `<head>` section includes meta-information, title, and links to external resources, while the `<body>` section contains the visible content of the webpage.


4. **Headings**: 

HTML provides six levels of headings (`<h1>` to `<h6>`) that represent different levels of importance. `<h1>` is the highest level and is usually used for the main heading of the page, while `<h2>` to `<h6>` are used for subheadings.


5. **Paragraphs**: 

Paragraphs are created using the `<p>` tag. They represent blocks of text and are automatically separated by line breaks.


6. **Links**: 

Links allow users to navigate between different web pages. They are created using the `<a>` (anchor) tag and require an `href` attribute to specify the target URL. For example: `<a href="https://www.example.com">Visit Example</a>`.


7. **Images**:

 Images are inserted using the `<img>` tag. The `src` attribute specifies the source URL of the image, and the `alt` attribute provides alternative text that is displayed if the image cannot be loaded. Example: `<img src="image.jpg" alt="Description of the image">`.


8. **Lists**:

 HTML supports both ordered and unordered lists. Unordered lists are created using the `<ul>` tag, and list items are created with the `<li>` tag. Ordered lists use the `<ol>` tag instead of `<ul>`. Example:

```

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

</ul>

```

9. **Tables**: 

Tables are created using the `<table>` tag, with rows represented by the `<tr>` tag and cells within the row using the `<td>` or `<th>` tags for data cells and header cells, respectively.


10. **Forms**:

 HTML provides form elements such as `<input>`, `<textarea>`, `<select>`, and `<button>` for creating interactive forms on web pages. Users can input data, make selections, and submit the form to a server for processing.

These are just some basic concepts of HTML. HTML also allows you to apply CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, among many other features and elements.


                                                                        getcodr

This is me